I like maps
Public
Edited
Apr 7, 2023
chart = {
var margin = { top: 20, right: 20, bottom: 50, left: 50 },
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Append the SVG canvas to the HTML body
const svg_ = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
var svg = svg_.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Set up the scales for the x and y axes, and the bubble sizes
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var r = d3.scaleLinear().range([5, 50]);
// Set up the axis labels
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
// Load the data from a CSV file
// Convert the numeric data strings to numbers
data.forEach(function (d) {
d.gdp = +d.gdp;
d.population = +d.population;
d.life_expectancy = +d.life_expectancy;
});
// Set the domains of the scales based on the data range
x.domain(
d3.extent(data, function (d) {
return d.gdp;
})
).nice();
y.domain(
d3.extent(data, function (d) {
return d.life_expectancy;
})
).nice();
r.domain(
d3.extent(data, function (d) {
return d.population;
})
).nice();
// Add the x-axis label
svg
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("GDP");
// Add the y-axis label
svg
.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Life Expectancy");
// Add the bubble circles to the chart
svg
.selectAll(".bubble")
.data(data)
.enter()
.append("circle")
.attr("class", "bubble")
.attr("cx", function (d) {
return x(d.gdp);
})
.attr("cy", function (d) {
return y(d.life_expectancy);
})
.attr("r", function (d) {
return r(d.population);
})
.style("fill", "steelblue");
// Add the tooltip text for the bubbles
svg
.selectAll(".bubble")
.append("title")
.text(function (d) {
return d.country;
});
return svg_.node();
/*
var margin = { top: 20, right: 20, bottom: 50, left: 50 },
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Append the SVG canvas to the HTML body
var svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
return svg.node()*/
/*
// Set up the SVG canvas dimensions and margins
var margin = { top: 20, right: 20, bottom: 50, left: 50 },
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Append the SVG canvas to the HTML body
var svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Set up the scales for the x and y axes, and the bubble sizes
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var r = d3.scaleLinear().range([5, 50]);
// Set up the axis labels
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
// Load the data from a CSV file
// Convert the numeric data strings to numbers
data.forEach(function (d) {
d.gdp = +d.gdp;
d.population = +d.population;
d.life_expectancy = +d.life_expectancy;
});
// Set the domains of the scales based on the data range
x.domain(
d3.extent(data, function (d) {
return d.gdp;
})
).nice();
y.domain(
d3.extent(data, function (d) {
return d.life_expectancy;
})
).nice();
r.domain(
d3.extent(data, function (d) {
return d.population;
})
).nice();
// Add the x-axis label
svg
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("GDP");
// Add the y-axis label
svg
.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Life Expectancy");
// Add the bubble circles to the chart
svg
.selectAll(".bubble")
.data(data)
.enter()
.append("circle")
.attr("class", "bubble")
.attr("cx", function (d) {
return x(d.gdp);
})
.attr("cy", function (d) {
return y(d.life_expectancy);
})
.attr("r", function (d) {
return r(d.population);
})
.style("fill", "steelblue");
// Add the tooltip text for the bubbles
svg
.selectAll(".bubble")
.append("title")
.text(function (d) {
return d.country;
});
return svg.node();
*/
}
chart_ = {
const width = 640;
const height = 400;
const margin = {top: 20, right: 30, bottom: 30, left: 40};
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
return svg.node();
}
Afghanistan@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data = FileAttachment("Afghanistan@1.csv").csv()
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.
