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();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.