Published
Edited
Nov 10, 2020
18 stars
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, 1000, 500]);
const g = svg.append("g");

const path = d3.geoPath();
const color = d3.scaleOrdinal([
'#66C5CC',
'#F6CF71',
'#F89C74',
'#DCB0F2',
'#87C55F',
'#9EB9F3',
'#FE88B1',
'#C9DB74',
'#8BE0A4',
'#B497E7',
'#D3B484'
]);

const mycountries = topojson.feature(
world_pop_cartogram,
world_pop_cartogram.objects.countries
).features;

g.append("g")
.selectAll("path")
.data(mycountries)
.join("path")
.attr("stroke", "#555")
.attr("stroke-width", 1.3333)
.attr("vector-effect", "non-scaling-stroke")
.attr("fill", (d, i) => color(i))
.attr("d", path);

svg.call(
d3.zoom().on("zoom", ({ transform }) => g.attr("transform", transform))
);

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more