diff --git a/index1.html b/index1.html
deleted file mode 100644
index 137fbe1b2380c2a0b19dc2b0f63d3d994aad1782..0000000000000000000000000000000000000000
--- a/index1.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!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>
diff --git a/test.html b/test.html
deleted file mode 100644
index ca6e2929aaed5cb80b8265c57ece8d982441afea..0000000000000000000000000000000000000000
--- a/test.html
+++ /dev/null
@@ -1,124 +0,0 @@
-<!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>
diff --git a/test3.html b/test3.html
deleted file mode 100644
index 197a10888b77c5b75d9c0e154677301694121bd2..0000000000000000000000000000000000000000
--- a/test3.html
+++ /dev/null
@@ -1,265 +0,0 @@
-<!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>
diff --git a/time-series.html b/time-series.html
deleted file mode 100644
index 7ea22b91deacf6fa7b84d8920cc0ae6b260fc079..0000000000000000000000000000000000000000
--- a/time-series.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!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>