Published
Edited
Dec 5, 2018
3 stars
Insert cell
Insert cell
simulation = d3.forceSimulation().nodes(data)
Insert cell
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
}
})
Insert cell
Insert cell
Insert cell
data[0]
Insert cell
Insert cell
radiusScale = d3.scaleSqrt().domain([0,1500000]).range([0,30]) // Circle radii
Insert cell
xScale = d3.scaleLinear().domain([0,100]).range([20,width-20]) // X-position - change domain to "0, 60" for detail
Insert cell
{
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();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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