Public
Edited
May 11, 2023
width = 600;
height = 400;
margin = 30;
radius = 5;
category = [...new Set(data.map((d) => d.controversy))];
{
// Create an SVG element to draw the chart in
const svg = d3.create("svg")
.attr('viewBox', [0, 0, width, height]);
// Create the circles in the chart
const circles = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', d => +d.position)
.attr('cy', d => d.controversy)
.attr('r', radius)
.attr('fill', 'steelblue');
// Add labels on top of the circles
const labels = svg.selectAll('text')
.data(data)
.enter()
.append('text')
.text(d => d.Topics)
.attr('x', d => +d.position)
.attr('y', d => d.y - radius - 5)
.attr('text-anchor', 'middle')
.attr('font-size', '12px')
.attr('fill', 'black');
// Create the force simulation
const simulation = d3.forceSimulation(data)
.force('x', d3.forceX(d => xScale(+d.position)).strength(1))
.force('y', d3.forceY(d => yScale(d.controversy)).strength(1))
.force('collide', d3.forceCollide(radius))
.stop();
// Run the simulation for a specified number of iterations
for (let i = 0; i < 100; i++) {
simulation.tick();
}
return svg.node();
}
xScale = d3.scaleLinear()
.domain([0, 2])
.range([height - margin.bottom, margin.top]);
yScale = d3.scaleOrdinal()
.domain(["Compas", "Gaydar", "ML", "NHS&Deepmind", "Parrot"])
.range([height - margin.bottom, margin.top]);
dataFile = FileAttachment("AllControversies_WeighteddDisa_Beeswarm.csv").csv()
data = dataFile.map((d) => {
return {
...d,
position: +d.AvgD,
group: d.Ranking,
controversy: d.Controversy,
count: +d.SumT,
name: d.Topics,
};
})
colorScale = d3.scaleOrdinal(
[...new Set(data.map((d) => d.Ranking))],
d3.schemeTableau10
)
d3 = require("d3@v6")
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.
