// Set up the dimensions of the SVG container
chart= {
// var width = 800;
// var height = 500;
// Create the SVG container
// var svg = d3.select("body")
// .append("svg")
// .attr("width", width)
// .attr("height", height);
// DATA
var borders= topojson.mesh(world, world.objects.countries, (a, b) => a!==b)
var path = d3.geoPath(projection)
var projection = d3.geoEqualEarth().translate( [ width /2, height -200]).scale([135])
var land = topojson.feature(world, world.objects.land)
var graticule = d3.geoGraticule10()
const svg= d3.create("svg")
.attr("viewBox", ([0, 0, width , height + 80]));
const grouping= svg.append("g");
grouping.append("path")
.join("path")
.attr("transform", `translate(${ margin.left }, ${ margin.height - 20})`)
.attr("d", path(land))
//.attr("fill", "lightgray")
.attr("fill", "#E8E8E8")
.attr("stroke", "#000")
.attr("stroke-width", 0.25);
// BORDERS
grouping.append("path")
.join("path")
.attr("d", path(borders))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 0.15);
// LININGS
grouping.append("path")
.join("path")
.attr("d", path(graticule))
.attr("stroke", "#ccc")
.attr("fill", "none")
.attr("stroke-width", 0.75)
// Create the world map projection
// var projection = d3.geoMercator()
// .scale(150)
// .translate([width / 2, height / 2]);
// // Create a path generator
// var path = d3.geoPath().projection(projection);
// // Load the world map data
// d3.json("world-map.json").then(function(world) {
// // Draw the world map
// var map = svg.selectAll("path")
// .data(world.features)
// .enter()
// .append("path")
// .attr("d", path);
// Create the color bar
// Define the color scale
var colorScale = d3.scaleLinear()
.range(["#FF0000", "#00FF00"]);
var colorBar = svg.append("g")
.attr("transform", "translate(50, 450)");
// Calculate the width of each color segment
var segmentWidth = 40;
var segmentHeight = 20;
var segments = 18;
// Draw the initial color bar
drawColorBar(colorBar, segmentWidth, segmentHeight);
// Add filtering options for different years
var years = [2017, 2018, 2018, 2019, 2020]; // Replace with your actual years
var select = d3.select("body")
.append("select")
.attr("class", "year-select")
.on("change", function() {
var selectedYear = d3.select(this).property("value");
updateColorScale(selectedYear);
});
select.selectAll("option")
.data(years)
.enter()
.append("option")
.attr("value", function(d) {
return d;
})
.text(function(d) {
return d;
});
// Set the initial target value and update the color scale
var initialYear = years[0];
updateColorScale(initialYear);
// Add scatter points based on data
var targetValue = [-0.70241702, 0.40272152, -0.74727201, 1.2615852, 1.3584321]; // Replace with your actual data
var longitude = [-179.875, -179.375, -179.375, -175.125, -157.375]; // Replace with your actual data
var latitude = [-15.625, -16.375, -15.875, -21.125, 21.125]; // Replace with your actual data
var scatterPoints = svg.selectAll("circle")
.data(targetValue)
.enter()
.append("circle")
.attr("cx", function(d, i) {
return projection([longitude[i], latitude[i]])[0];
})
.attr("cy", function(d, i) {
return projection([longitude[i], latitude[i]])[1];
})
.attr("r", 5)
.style("fill", function(d) {
return colorScale(d);
});
// Function to update the color scale based on the selected year
function updateColorScale(selectedYear) {
var min = d3.min(targetValue);
var max = d3.max(targetValue);
colorScale.domain([min, max]);
// Update the color bar
drawColorBar(colorBar, segmentWidth, segmentHeight);
// Update the scatter point colors
scatterPoints.style("fill", function(d) {
var yearIndex = years.indexOf(selectedYear);
return colorScale(targetValue[yearIndex]);
});
}
// Function to draw the color bar
var colorBar = svg.append("g")
.attr("transform", "translate(50, 450)");
// Calculate the width of each color segment
var segmentWidth = 40;
var segmentHeight = 20;
var segments = 18;
// Draw the initial color bar
drawColorBar(colorBar, segmentWidth, segmentHeight);
// Add filtering options for different years
var years = [2017, 2018, 2018, 2019, 2020]; // Replace with your actual years
var select = d3.select("body")
.append("select")
.attr("class", "year-select")
.on("change", function() {
var selectedYear = d3.select(this).property("value");
updateColorScale(selectedYear);
});
select.selectAll("option")
.data(years)
.enter()
.append("option")
.attr("value", function(d) {
return d;
})
.text(function(d) {
return d;
});
// Set the initial target value and update the color scale
var initialYear = years[0];
updateColorScale(initialYear);
// Add scatter points based on data
var targetValue = [-0.70241702, 0.40272152, -0.74727201, 1.2615852, 1.3584321]; // Replace with your actual data
var longitude = [-179.875, -179.375, -179.375, -175.125, -157.375]; // Replace with your actual data
var latitude = [-15.625, -16.375, -15.875, -21.125, 21.125]; // Replace with your actual data
var scatterPoints = svg.selectAll("circle")
.data(targetValue)
.enter()
.append("circle")
.attr("cx", function(d, i) {
return projection([longitude[i], latitude[i]])[0];
})
.attr("cy", function(d, i) {
return projection([longitude[i], latitude[i]])[1];
})
.attr("r", 5)
.style("fill", function(d) {
return colorScale(d);
});
// Function to update the color scale based on the selected year
function updateColorScale(selectedYear) {
var min = d3.min(targetValue);
var max = d3.max(targetValue);
colorScale.domain([min, max]);
// Update the color bar
drawColorBar(colorBar, segmentWidth, segmentHeight);
// Update the scatter point colors
scatterPoints.style("fill", function(d) {
var yearIndex = years.indexOf(selectedYear);
return colorScale(targetValue[yearIndex]);
});
}
// Function to draw the color bar
function drawColorBar(colorBar, segmentWidth, segmentHeight) {
var segmentColors = colorScale.ticks(segments);
// Remove previous color bar elements
colorBar.selectAll("*").remove();
// Draw the color segments
colorBar.selectAll("rect")
.data(segmentColors)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * segmentWidth;
})
.attr("y", 0)
.attr("width", segmentWidth)
.attr("height", segmentHeight)
.attr("fill", function(d) {
return d;
});
// Add text labels to the color bar
colorBar.selectAll("text")
.data(segmentColors)
.enter()
.append("text")
.attr("x", function(d, i) {
return i * segmentWidth;
})
.attr("y", segmentHeight + 15)
.text(function(d, i) {
var value = (max - min) / segments * i + min;
return value.toFixed(2);
});
}
});
return svg.node();
}
max= 90
min= 10
height= 400
world= FileAttachment("countries-50m.json").json()
d3= require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
