Information designer. Environment, science, tech & culture. Carbon-neutral. "Move quietly and plant things."
Published
Edited
Dec 5, 2018
3 stars
simulation = d3.forceSimulation().nodes(data)
data = d3.csv("https://raw.githubusercontent.com/duncangeere/women_on_wikipedia/master/data/fig1.csv", function(d) {
return {
key: d.language,
percent: +d.percent, // Convert to number
total: +d.total, // Convert to number
}
})
data[0]
radiusScale = d3.scaleSqrt().domain([0,1500000]).range([0,30]) // Circle radii
xScale = d3.scaleLinear().domain([0,100]).range([20,width-20]) // X-position - change domain to "0, 60" for detail
{
const height = width
const svg = d3.select(DOM.svg(width, 400))
// Add background squares
svg.selectAll("rect")
.data([[0,50,"#8cd4b4"],[50,100,"#9383ab"]])
.enter()
.append("rect")
.attr("x", d => xScale(d[0]))
.attr("y", 90)
.attr("width", d => (xScale(d[1]) - xScale(d[0])))
.attr("height", 220)
.attr("fill", d => d[2])
.attr('fill-opacity', 0.5);
// Add square labels
svg.append("text")
.text("More biographies about men")
.attr('text-anchor','start')
.attr("transform","translate(30, 110)")
.attr("font-size", `${width/10}%`) // responsive
svg.append("text")
.text("More biographies about women")
.attr('text-anchor','end')
.attr("transform",`translate(${width - 30},110)`) // responsive
.attr("font-size", `${width/10}%`) // responsive
// Get the simulation going
let simulation = d3.forceSimulation().nodes(data)
.force('collision', d3.forceCollide().radius(d => radiusScale(d.total)))
.force('x', d3.forceX().x(d => xScale(d.percent)))
.force('y', d3.forceY().y(d => 200))
.on('tick', ticked)
// Data binding
let selection = svg.selectAll('g').data(data)
let enterSelection = selection.enter().append('g')
// Enter data and starting locations
let circles = enterSelection.append('circle')
.attr('r', d => radiusScale(d.total))
.attr('stroke', "#111111")
.attr('fill', "#111111")
.attr('fill-opacity', 0.3);
// Add a tooltip.
circles.append("title").text(d => d.key + " - " + d.percent + "%")
// Merge the selections
selection = selection.merge(enterSelection)
// Make an axis
let xAxis = d3.axisBottom()
.scale(xScale)
.tickFormat(d => d + "%")
.ticks(width / 80) // responsiveness
.tickSizeOuter(0);
// Add the axis to the chart
svg.append("g")
.attr("transform", "translate(0,310)")
.call(xAxis);
// Add a title
svg.append("text")
.text("Percentage of biographies that are about women in Wikipedia's top 50 languages")
.attr('text-anchor','middle')
.attr("transform",`translate(${width/2},370)`)
// Tick function for the simulation
function ticked() {
selection.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")" });
}
// Send the SVG to Observable
return svg.node();
}
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.
