Visualization can transform the reach of open data and revolutionize transparency and accountability.
example = {
const height = 300;
const maxRadius = 40;
const margin = 100;
const xScale = d3.scaleBand()
.domain([...new Set(gapminder.map(d => d.continent))])
.range([margin , width - margin]);
const radiusScale = d3.scaleSqrt()
.domain([0,d3.max(gapminder, d => d.pop)])
.range([0, maxRadius]);
const colorScale = d3.scaleOrdinal()
.domain([...new Set(gapminder.map(d => d.continent))])
.range(d3.schemeCategory10);
const simulation = d3.forceSimulation(gapminder)
.force('x', d3.forceX().x(d => xScale(d.continent)))
.force('y', d3.forceY().y(height/2))
.force('collision', d3.forceCollide().radius( d =>radiusScale(d.pop) + 2));
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const node = svg.selectAll('circle')
.data(gapminder)
.join('circle')
.attr('r', d => radiusScale(d.pop))
.attr('fill', d => colorScale(d.continent))
.attr('fill-opacity', 0.4)
.attr('stroke', d => colorScale(d.continent))
simulation.on("tick", () => {
//console.log(gapminder);
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
return svg.node();
}
gapminderBee = FileAttachment("gapminder.csv").csv()
.then(arr => arr.map(d => ({...d,
year: +d.year,
gdpPerCap: +d.gdpPerCap,
lifeExp: +d.lifeExp,
pop: +d.pop
})).filter(d => d.year === 2017)
);
exercise1 = FileAttachment("exercise (1).png").image()
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.
