Published
Edited
Sep 8, 2020
3 stars
height = 400
data = d3.tsvParse(tsv, d3.autoType)
rollup = d3.rollup(data, v => pie(v), d => d.id)
id = d3.json(`https://gist.githubusercontent.com/bayre/f64b065c223417b1bd4729b39184ca65/raw/03ab49b0a968f83e67a727988ab741c58c7c9e83/id-kab-np.json`
)
islands = topojson.feature(id, id.objects.island).features
projection = d3
.geoMercator()
.scale(1150)
.center([118, -3])
.translate([width / 2, height / 2])
path = d3.geoPath(projection)
colour = d3.scaleOrdinal([
"#F3CF19",
"#6BE4CC",
"#639DE6",
"#8C63E6",
"#E763DF",
"#E96A6D"
])
r = d3
.scaleSqrt()
.domain(d3.extent(d3.rollup(data, v => d3.sum(v, d => d.tons), d => d.id).values()))
.range([10, 75])
translateXY = d => projection(d3.geoCentroid(islands.find(i => i.id == d)));
pie = d3.pie().value(d => d.tons)
legend = svg => {
const r = 6;
const g = svg
// .attr("transform", `translate(${margin.left / 2 + r}, ${margin.top - 10})`)
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.selectAll("g")
.data(colour.domain())
.join("g")
.attr("transform", (d, i) => `translate(${i * 100}, 0)`);
g.append("circle")
.attr("fill", colour)
.attr("r", r)
.attr("x", 0)
.attr("y", 0);
g.append("text")
.attr("x", r * 2)
.attr("y", r / 2)
.text(d => d);
const padding = 10;
g.attr(
"transform",
(d, i) =>
`translate(${d3.sum(colour.domain(), (e, j) =>
j < i ? g.nodes()[j].getBBox().width : 0
) +
padding * i} ,0)`
);
}
// https://talk.observablehq.com/t/render-differences-summary-page-and-real-page/1250
function autoBox() {
const { x, y, width, height } = this.getBBox();
return [x, y, width, height];
}
topojson = require("topojson@3")
d3 = require("d3@5", "d3-array@2.4")
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.
