31:T600,{ const svg = d3.create("svg") .attr("width", chartwidth + margin.left + margin.right) .attr("height", chartheight + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${[margin.left, margin.top]})`); g.append("g") .call(d3.axisBottom(x).tickSizeOuter(0)) .attr("transform", `translate(0, ${chartheight / 1.25})`); const tooltip = d3.select("body").append("div").attr("class", "tooltip") function nodeMouseOver(event, d, i){ tooltip.style("left", event.pageX + 18 + "px") .style("top", event.pageY + 18 + "px") .style("display", "block") .html(`${data[i].title}
Release Date: ${d3.timeFormat("%B %d, %Y")(data[i].release_date)}

Box Office: ${millions(data[i].box_office)}

Rotten Tomatoes Score: ${d3.format(".0%")(data[i].score)}
`); } function nodeMouseOut(event, d) { // Hide tooltip on mouse out tooltip.style("display", "none"); // Hide toolTip } // Draw Pies for (let i = 0; i < pies.length; i++){ let pt = beeswarm(data)[i] let g1 = svg.append("g") g1.attr('transform', `translate(${pt.x} ${pt.y})`) .on("mousemove", (event, d) => nodeMouseOver(event,d,i)) .on("mouseout", nodeMouseOut) .selectAll("path") .data(pies[i]) .join("path") .attr("fill", (x,i) => colors[i]) .attr("d", arc(r(data[i].box_office))) .attr("stroke", "#f5f3f0") } return svg.node(); }32:T4cf,The chart above takes the 100 top movies by worldwide box office that were released between Jan 1, 2000 and Dec 31, 2009 and plots them using a force-directed beeswarm based on release date. Circle size is proportional to box office, and the pie represents each movie's Rotten Tomatoes score (green is percent fresh). Movie data comes from the [Vega Datasets](https://github.com/vega/vega-datasets). There's a note in the Vega documentation that "the dataset has well known and intentionally included errors. This dataset is used for instructional purposes, including the need to reckon with dirty data." I have done very little to reckon with the dirtiness of the data, so beware. I mostly wanted to make a chart of this type, and then had to search for data that fit well-enough. This is a fork of Harry Stevens's [Force-directed Beeswarm plot](https://observablehq.com/@harrystevens/force-directed-beeswarm) that then replaces the circles with pie charts. The tooltip code was copy-pasted from [this notebook](https://observablehq.com/d/5538e6b3fc8d4be6) from Bryan Phillips. And the colors were pulled from [this Datawrapper post](https://blog.datawrapper.de/colorblindness-part2/) on designing charts for colorblind readers.33:[] 2f:{"title":"Pie Beeswarm: The 100 Highest Grossing Movies of the 2000s (Sort Of) with Rotten Tomatoes Score","cells":[{"id":114,"value":"md`# Pie Beeswarm: The 100 Highest Grossing Movies of the 2000s (Sort Of) with Rotten Tomatoes Score\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"beeswarm = beeswarmForce()\n .x(d => x(d.release_date))\n .y(chartheight / 2)\n .r(d => 1 + r(d.box_office))","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"x = d3.scaleTime(\n d3.extent(data, d => d.release_date),\n [0, chartwidth]\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"r = d3.scaleSqrt(\n [0, Math.max(...data.map(x => x.box_office))],\n [1, Math.sqrt(width * height) / 20]\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"margin = ({ left: 2 * r.range()[1], right: 2 * r.range()[1], top: 1, bottom: 1 });","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"arc = (r) => d3.arc()\n .innerRadius(0)\n .outerRadius(r)","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"pies = data.map(x => d3.pie().sort(null)([x.score, 1 - x.score]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"chartwidth = width - margin.left - margin.right;","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"height = 400;","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"colors = [\"#80C222\", \"#EE2F2F\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"chartheight = height - margin.top - margin.bottom;","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"beeswarmForce = function(){\n let x = d => d[0];\n let y = d => d[1];\n let r = d => d[2];\n let ticks = 300;\n \n function beeswarm(data){\n const entries = data.map(d => {\n return {\n x0: typeof x === \"function\" ? x(d) : x,\n y0: typeof y === \"function\" ? y(d) : y,\n r: typeof r === \"function\" ? r(d) : r,\n data: d\n }\n });\n \n const simulation = d3.forceSimulation(entries)\n .force(\"x\", d3.forceX(d => d.x0))\n .force(\"y\", d3.forceY(d => d.y0))\n .force(\"collide\", d3.forceCollide(d => d.r));\n \n for (let i = 0; i < ticks; i++) simulation.tick();\n \n return entries;\n }\n \n beeswarm.x = f => f ? (x = f, beeswarm) : x;\n beeswarm.y = f => f ? (y = f, beeswarm) : y;\n beeswarm.r = f => f ? (r = f, beeswarm) : r;\n beeswarm.ticks = n => n ? (ticks = n, beeswarm) : ticks;\n \n return beeswarm;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"vegaliteDatasets = require('vega-datasets@2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"movies = vegaliteDatasets['movies.json']()","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"data = movies\n .filter(x => !!x[\"Rotten Tomatoes Rating\"])\n .map(x => ({\n title: x['Title'],\n box_office: x['Worldwide Gross'],\n score: x['Rotten Tomatoes Rating']/100,\n release_date: new Date(x['Release Date'])\n }))\n .sort((a,b) => b.box_office - a.box_office)\n .filter(x => x.release_date >= new Date('2000-01-01') && x.release_date <= new Date('2010-01-01'))\n .slice(0,100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"millions = (number) => `$${Math.round(number/1000000)}M`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}