Skip to content
Snippets Groups Projects
Commit ec3df5f3 authored by ericj's avatar ericj
Browse files

file cleanup

parent 10a08c97
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index1.html deleted 100644 → 0
+ 0
− 81
View file @ 10a08c97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple D3 Scatterplot</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.dot {
fill: steelblue;
}
</style>
</head>
<body>
<script>
// Set dimensions and margins
const width = 500;
const height = 300;
const margin = {top: 20, right: 30, bottom: 50, left: 50};
// Data
d3.csv("schengen_data.csv").then((data) => {
console.log(data)
data = data.map((d)=>({y: d["Total uniform visas issued (including MEV)"], x: d["Uniform visas applied for"]}))
console.log(data)
// Create SVG container
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// Set scales
const xScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.x)]) // Input domain
.range([margin.left, width - margin.right]); // Output range
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.y)]) // Input domain
.range([height - margin.bottom, margin.top]); // Output range
// Create axes
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
// Add X-axis to the SVG
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(xAxis)
.append("text")
.attr("x", width / 2)
.attr("y", 35)
.attr("fill", "black")
.style("text-anchor", "middle")
.text("X Axis");
// Add Y-axis to the SVG
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", -35)
.attr("fill", "black")
.style("text-anchor", "middle")
.text("Y Axis");
// Add dots for each data point
svg.selectAll(".dot")
.data(data)
.enter()
.append("circle")
.attr("class", "dot")
.attr("cx", d => xScale(d.x))
.attr("cy", d => yScale(d.y))
.attr("r", 2);
})
</script>
</body>
</html>
test.html deleted 100644 → 0
+ 0
− 124
View file @ 10a08c97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schengen Visa Tree Visualization</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.node circle {
fill: #69b3a2;
stroke: #555;
stroke-width: 2px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.tooltip {
position: absolute;
text-align: center;
width: auto;
height: auto;
padding: 5px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<h1>Schengen Visa Tree Visualization</h1>
<div id="tree-container"></div>
<script>
// Set dimensions and margins
const width = 1500;
const height = 1000;
const margin = { top: 20, right: 30, bottom: 50, left: 50 };
// Load and process CSV data
d3.csv("schengen_data.csv").then((data) => {
// Convert data into a hierarchical structure
const nestData = d3.group(data,
d => d["Schengen State"],
d => d["Country where consulate is located"],
d => d["Consulate"]
);
// Helper function to format data for D3 hierarchy
function buildHierarchy(nest, name) {
return {
name,
children: Array.from(nest, ([key, value]) => {
return value instanceof Map
? buildHierarchy(value, key)
: { name: `${key}: ${value[0]["Total uniform visas issued (including MEV)"] || 0}` };
})
};
}
const rootData = buildHierarchy(nestData, "Schengen States");
const root = d3.hierarchy(rootData);
// Tree layout
const treeLayout = d3.tree().size([height - margin.top - margin.bottom, width - margin.left - margin.right]);
treeLayout(root);
// Append SVG
const svg = d3.select("#tree-container")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Links
svg.selectAll(".link")
.data(root.links())
.enter()
.append("path")
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x)
);
// Nodes
const node = svg.selectAll(".node")
.data(root.descendants())
.enter()
.append("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.y},${d.x})`);
node.append("circle")
.attr("r", 5)
.on("mouseover", (event, d) => {
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("left", `${event.pageX + 5}px`)
.style("top", `${event.pageY - 5}px`)
.text(d.data.name);
})
.on("mouseout", () => {
d3.select(".tooltip").remove();
});
node.append("text")
.attr("dy", 3)
.attr("x", d => d.children ? -10 : 10)
.style("text-anchor", d => d.children ? "end" : "start")
.text(d => d.data.name);
});
</script>
</body>
</html>
test3.html deleted 100644 → 0
+ 0
− 265
View file @ 10a08c97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schengen Visa Tree Visualization</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
html, body, #tree-container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#tree-container {
overflow: hidden;
margin: 30px;
}
.node circle {
fill: #69b3a2;
stroke: #555;
stroke-width: 2px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.tooltip {
position: absolute;
text-align: center;
width: auto;
height: auto;
padding: 5px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0;
border-radius: 8px;
pointer-events: none;
}
#back-button {
margin: 10px;
padding: 5px 10px;
font-size: 14px;
background-color: #69b3a2;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
position: absolute;
z-index: 1000;
}
#back-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>
</head>
<body>
<button id="back-button" disabled>Back</button>
<div id="tree-container"></div>
<script>
const margin = { top: 20, right: 30, bottom: 50, left: 50 };
const container = document.getElementById('tree-container');
const width = window.innerWidth//container.offsetWidth - 15;
const height = window.innerHeight//container.offsetHeight - 15;
let currentData;
let hierarchyStack = ["Schengen States"];
d3.csv("schengen_data.csv").then((data) => {
currentData = data;
updateTree("Schengen States");
});
let visitedNodes = []; // Track the nodes we've visited
function updateTree(filterKey) {
// Filter data based on the selected key
let filteredData;
if (filterKey === "Schengen States") {
filteredData = d3.group(
currentData,
d => d["Schengen State"],
d => d["Country where consulate is located"],
d => d["Consulate"]
);
} else if (hierarchyStack.length === 2) {
filteredData = d3.group(
currentData.filter(d => d["Schengen State"] === filterKey),
d => d["Country where consulate is located"],
d => d["Consulate"]
);
} else if (hierarchyStack.length === 3) {
const selectedCountry = hierarchyStack[2];
filteredData = d3.group(
currentData.filter(d => d["Country where consulate is located"] === selectedCountry),
d => d["Consulate"]
);
}
// Build hierarchy
const rootData = buildHierarchy(filteredData, filterKey);
// Insert visited nodes in the correct positions
let currentHierarchy = rootData;
visitedNodes.forEach((nodeName, index) => {
currentHierarchy = currentHierarchy.children.find(child => child.name === nodeName);
});
// Add the root and build hierarchy with all levels
const root = d3.hierarchy(rootData);
// Remove children that are not direct successors of current node
if (root.children) {
root.children.forEach(child => {
if (child.children) {
child._children = child.children;
child.children = null;
}
});
}
// Tree layout
const treeLayout = d3.tree().size([height-margin.top-margin.bottom, width-margin.left-margin.right-width/5]);
treeLayout(root);
// Clear previous visualization
d3.select("#tree-container svg").remove();
// Append SVG
const svg = d3.select("#tree-container")
.append("svg")
.attr("width", width-margin.left-margin.right)
.attr("height", height-margin.top-margin.bottom)
.append("g")
.attr("transform", `translate(${60},${0})`);
// Links
svg.selectAll(".link")
.data(root.links())
.enter()
.append("path")
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x)
);
// Nodes for the current tree level
const node = svg.selectAll(".node")
.data(root.descendants())
.enter()
.append("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.y},${d.x})`);
node.append("circle")
.style("cursor", hierarchyStack.length < 3 ? "pointer" : "")
.attr("r", 5)
.on("click", (event, d) => {
if (hierarchyStack.length < 3 && d.depth === 1 || d.depth === 2) { // Go deeper for states or countries
d3.select(".tooltip").remove();
hierarchyStack.push(d.data.name);
visitedNodes.push(d.data.name); // Add the clicked node to visitedNodes
updateTree(d.data.name);
updateBackButton();
}
})
.on("mouseover", (event, d) => {
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("left", `${event.pageX + 5}px`)
.style("top", `${event.pageY - 5}px`)
.text(d.data.name);
})
.on("mouseout", () => {
d3.select(".tooltip").remove();
});
node.append("text")
.attr("dy", 3)
.attr("x", d => d.children ? -10 : 10)
.style("text-anchor", d => d.children ? "end" : "start")
.text(d => d.data.name);
// Add the previous nodes to the tree
visitedNodes.forEach((nodeName, index) => {
let parentNode = rootData;
visitedNodes.slice(0, index + 1).forEach((nodeName) => {
parentNode = parentNode.children.find(child => child.name === nodeName);
});
// If parentNode is not undefined, then insert the visited node
if (parentNode) {
const visitedNode = { name: nodeName, children: [] };
parentNode.children.push(visitedNode);
// Reapply tree layout after adding the node
const updatedRoot = d3.hierarchy(rootData);
treeLayout(updatedRoot);
// Add the visited node to the SVG
svg.append("g")
.attr("class", "node")
.attr("transform", `translate(${visitedNode.y},${visitedNode.x})`)
.append("circle")
.attr("r", 5)
.style("fill", "#69b3a2")
.style("stroke", "#555")
.style("stroke-width", 2);
svg.append("text")
.attr("dy", 3)
.attr("x", 10)
.style("text-anchor", "start")
.text(nodeName);
}
});
}
// Function to build the hierarchy, including visited nodes in the proper structure
function buildHierarchy(nest, name) {
return {
name,
children: Array.from(nest, ([key, value]) => {
if (!key) return null;
return value instanceof Map
? buildHierarchy(value, key)
: { name: `${key}: ${value.length}` };
}).filter(d => d)
};
}
function updateBackButton() {
const backButton = document.getElementById("back-button");
backButton.disabled = hierarchyStack.length <= 1;
}
document.getElementById("back-button").addEventListener("click", () => {
if (hierarchyStack.length > 1) {
hierarchyStack.pop();
const previousKey = hierarchyStack[hierarchyStack.length - 1];
updateTree(previousKey);
updateBackButton();
}
});
</script>
</body>
</html>
time-series.html deleted 100644 → 0
+ 0
− 18
View file @ 10a08c97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schengen Visa Time Series</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment