chart = { const svg = d3.create('svg') .attr('viewBox', [0, 0, width, height]); const tooltip = d3.select('body') .append('div') .attr('class', 'tooltip'); let topics = data; for (let d of topics) { let womenCount = 0; let womenTotal = 0; for (let w of W) { womenCount += d[w]; womenTotal += totals[0].totals[w]; } d.womenPercent = womenCount / womenTotal; let menCount = 0; let menTotal = 0; for (let m of M) { menCount += d[m]; menTotal += totals[0].totals[m]; } d.menPercent = menCount / menTotal; d.ratio = d.menPercent / (d.womenPercent + d.menPercent); d.selectedCount = womenCount + menCount; d.x = x(d.ratio); d.y = centerY; } topics.sort((a, b) => a.ratio - b.ratio); topics.sort((a, b) => a.ratio - b.ratio); let xAxis = g => g.call(d3.axisBottom(x).ticks(width / 80)); let xAxisG = svg.append('g') .attr('transform', `translate(0,${height - margin.bottom})`); const t = svg.transition() .duration(250); let r = d3.scaleLinear() .domain(d3.extent(data, d => d.selectedCount)) .range([13, 50]); let node = svg.selectAll('.node') .data(topics, d => d.id) .enter() .append('g') .attr('class', 'node') .on('mouseover', function (e, d) { console.log(d.topic, d.ratio); d3.select(this) .append('circle') .attr('class', 'hover-circle') .attr('r', d => r(d.selectedCount) + 3) .style('fill', 'none') .style('stroke', '#999') .style('stroke-width', 0.5) .attr('stroke-dasharray', 2); tooltip.transition() .duration(200) .style("opacity", 0.9); tooltip.html(`

${d.topic.toLowerCase()}

`) .style("left", (e.pageX) + "px") .style("top", (e.pageY + 8) + "px"); }) .on("mouseout", function (d) { d3.select('.hover-circle') .remove(); tooltip.transition() .duration(500) .style("opacity", 0); }); let circle = node.append('circle') .attr('stroke', 'none') .attr('fill', d => { if (d.ratio < (1 / 3)) { // > 67% female, exclusively or nearly exclusively by females return '#5F2756'; } else if (d.ratio < (1 / 3) + (1 / 9)) { // maj female, 56%-66% female return '#A83A55'; } else if (d.ratio < (1 / 3) + (2 / 9)) { // equal 44-55% return '#E14B56'; } else if (d.ratio < (2 / 3)) { // maj male 56% return '#F76F55'; } else { // > 67% male, exclusively or nearly exclusively by males return '#F8A255'; } }) .attr('r', d => r(d.selectedCount)) .style('opacity', 1); let text = node.append('foreignObject') .html(d => `

${(d.topic).toLowerCase()}

`) .attr('class', 'topic') .attr('text-anchor', 'start') .style('font-size', d => (0.35 * r(d.selectedCount)) + 'px') .style('width', d => r(d.selectedCount) + 20) .style('-webkit-text-stroke-color', d => { if (d.ratio < (1 / 3)) { return '#5F2756'; } else if (d.ratio < (1 / 3) + (1 / 9)) { return '#A83A55'; } else if (d.ratio < (1 / 3) + (2 / 9)) { return '#E14B56'; } else if (d.ratio < (2 / 3)) { return '#F76F55'; } else { return '#F8A255'; } }) let simulation = d3.forceSimulation(data) .force('x', d3.forceX(d => x(d.ratio))) .force('y', d3.forceY(centerY)) .force('collide', d3.forceCollide().radius(d => r(d.selectedCount) + spacing)) .on('tick', tickActions) .stop(); for (let i = 0; i < 100; ++i) simulation.tick(); simulation.restart(); function tickActions() { node.attr('transform', d => { let radius = r(d.selectedCount) + spacing; d.x = Math.max(xRange[0] + radius, Math.min(xRange[1] - radius, d.x)); return `translate(${d.x}, ${d.y})`; }) } setTimeout(() => { text .style('transform', function (d) { let halfWidth = Number.parseFloat(this.style.width) / 2; let height = Number.parseFloat(window.getComputedStyle(this.querySelector('div')).height) let halfHeight = (height / 2) + (height * 0.05); return `translate(-${halfWidth}px, -${halfHeight}px)`; }) .style('opacity', 1); //Callouts drawLine(svg, 120, 246, 120, 321); appendForeignObj(svg, `

primarily or solely female

`, 100, 20, 120, 303, 'callout'); drawLine(svg, 433, 300, 433, 354); appendForeignObj(svg, `

equally female/male

`, 100, 20, 433, 335, 'callout'); drawLine(svg, 303, 168, 303, 65); appendForeignObj(svg, `

majority female

`, 100, 20, 303, 65, 'callout'); drawLine(svg, 602, 130, 602, 32); appendForeignObj(svg, `

majority male

`, 100, 20, 602, 32, 'callout'); drawLine(svg, 575, 268, 575, 335); appendForeignObj(svg, `

primarily or solely male

`, 100, 20, 575, 317, 'callout'); appendForeignObj(svg, `

* includes the 50 most popular tags for each gender
* size of circle represents popularity of tag with a minimum 13px radius

`, 300, 100, 623, 355, ''); }, 2000); return svg.node(); }

Purpose-built for displays of data