chart = {
const xmin = d3.min(cells, d => d.X);
const xmax = d3.max(cells, d => d.X)+1;
const ymin = d3.min(cells, d => d.Y);
const ymax = d3.max(cells, d => d.Y)+1;
const height = width/(xmax-xmin)*(ymax-ymin);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("background", "#ffffff");
var x = d3.scaleLinear().domain([xmin, xmax]).range([0, width]);
var y = d3.scaleLinear().domain([ymin, ymax]).range([height, 0]);
var color = d3.scaleOrdinal(['#7F3C8D','#11A579','#3969AC','#F2B701','#E73F74',
'#80BA5A','#E68310','#008695','#CF1C90','#f97b72','#4b4b8f']);
const g = svg.append("g");
const cell = g
.selectAll("rect")
.data(cells)
.enter()
.append("rect")
.attr("x", d => x(d.X))
.attr("y", d => y(d.Y+1))
.style("stroke-width", 1)
.attr("vector-effect", "non-scaling-stroke")
.style("stroke", d => color(d.Country))
.style("fill", d => color(d.Country))
.attr("height",y(0)-y(1))
.attr("width",x(1)-x(0));
// yes in theory you could just "fill" these border polygons...
// but for sake of example i wanted to show both the `cells` and the `borders` being used
const lineGenerator = d3.line()
.x(d => x(d.X))
.y(d => y(d.Y));
const border = g
.selectAll(".line")
.data(borders)
.enter()
.append("path")
.attr('d', d => lineGenerator(d[1]))
.attr("fill","none")
.attr("stroke","#ffffff")
.attr("stroke-width",0.1);
svg.call(d3.zoom().on("zoom", ({transform}) => g.attr("transform", transform)))
return svg.node();
}
cells = d3.csv("https://raw.githubusercontent.com/mattdzugan/World-Population-Cartogram/master/data/year_2018__cell_500k/squares/cells.csv", function(d){
return {
X : +d.X,
Y : +d.Y,
Country : d.CountryCode,
};
})
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.
