30:T1056,chart = { const svg = d3.select(DOM.svg(width, height)); const dotRadius = 6; var arc = d3.arc().innerRadius(0).outerRadius(dotRadius); var pie = d3 .pie() .sort(null) .value((d) => d.value); svg.append("g").call(xAxis); svg.append("div").attr("class", "tooltip"); const year = svg .style("font", "10px sans-serif") .append("g") .attr("text-anchor", "end") .selectAll("g") .data(data) // Create groups for each year .join("g") .attr("class", "year") .attr("transform", (d, i) => `translate(0,${y(d.key)})`) .on("click", (d) => { viewof sortOrder.year.value = d.index; viewof sortOrder.value.year = d.index; viewof sortOrder.dispatchEvent(new CustomEvent("input")); }); // Add line as the range for times per year year .append("line") .attr("stroke", "#aaa") .attr("x1", (year) => x(d3.min(year.finishers, (runner) => runner.FinishSeconds || Infinity)) ) .attr("x2", (year) => x(d3.max(year.finishers, (runner) => runner.FinishSeconds)) ); // Add a background behind each dot so the line isn't visable beneath it year .selectAll("circle") .data((d) => d.finishers) .join("circle") .attr("r", dotRadius) .attr("cx", (d) => `${x(d.FinishSeconds)}`) .attr("fill", "white"); // Add dots for each runner in each year var finishers = year .selectAll("g.finisher") .data((d) => d.finishers) .join("g") .attr("class", "finisher") .attr("transform", (d) => `translate(${x(d.FinishSeconds)}, 0)`); // Add dots for nonfinishers in each year year .selectAll("g.nonfinisher") .data((d) => d.nonfinishers) .join("g") .attr("class", "nonfinisher") .attr( "transform", (_, i) => `translate(${dotPlotWidth + 25 + (dotRadius + 1) * 2 * i}, 0)` ) .selectAll("path") .data((nonfinisher) => pie(nonfinisher.records)) .join("path") .attr("fill", (d) => color(statusDecoder(d.data.name))) .attr("d", arc); // Add nonfinishers axis label svg .append("text") .attr("x", dotPlotWidth + 20) .attr("y", 10) .text("No time") .clone() .text("No time") .attr("y", height - 10); // Add tooltip year .selectAll("g") .on("mouseover", function (d) { var finisher = this; var par = this.parentNode; var par_translate = par.transform.baseVal.consolidate().matrix; var x = this.transform.baseVal.consolidate().matrix.e; var label = d3 .select(par.parentNode) .append("g") .attr("id", "label") .attr( "transform", `translate(${par_translate.e + x}, ${par_translate.f})` ); // Annotations var text = label .append("text") .attr("text-anchor", "middle") .attr("dx", 0) .attr("dy", "-1em") .text( () => `${d.Name} (${ d.FinishTime ? d.FinishTime : statusDecoder(d.records.filter((r) => r.value)[0].name) })` ); var bb = text.node().getBBox(); // Add background label .insert("rect", ":first-child") .attr("x", bb.x) .attr("y", bb.y) .attr("width", bb.width) .attr("height", bb.height) .attr("style", "fill:#ffffff;opacity:0.75"); }) .on("mouseout", () => d3.select("#label").remove()); finishers .selectAll("path") .data((finisher) => pie(finisher.records)) .join("path") .attr("fill", (d) => color(statusDecoder(d.data.name))) .attr("d", arc) .attr("opacity", 0.75); // Add year labels year .append("text") .attr("dy", "0.35em") .attr( "x", (year) => x( d3.min(year.finishers, (runner) => runner.FinishSeconds || Infinity) ) - 10 ) .text((d) => d.key); return Object.assign(svg.node(), { update(names) { y.domain(names); // Transition the years to their new positions year .transition() .delay((d, i) => i * 10) .attr("transform", (d) => `translate(0,${y(d.key)})`); } }); }31:T4fa,xAxis = { let tickFormat = tick => { // Convert finish time in seconds to "MM:SS" format const m = Math.floor(tick / 60); const s = tick - m * 60; return String(m) + ':' + String(s).padStart(2, "0"); }; return g => g .attr("transform", `translate(0,${margin.top})`) // Create tick marks .call(d3.axisTop(x).tickFormat(tickFormat)) // Copy tick marks to make duplicate bottom axis .call(g => g .selectAll("text") .clone() .attr("dy", height - margin.bottom) .text(seconds => tickFormat(seconds)) ) // Create long tick marks that run the vis length .call(g => g .selectAll(".tick line") .clone() .attr("stroke-opacity", 0.1) .attr("y2", height - margin.bottom - 20) .attr("class", "long-tick") ) // Duplicate darker tick marks at bottom of vis .call(g => g .selectAll(".tick line:not(.long-tick)") .clone() .attr("y1", height - margin.bottom - 26) .attr("y2", height - margin.bottom - 20) .attr("class", "bottom-tick") ) // Remove default, dark axis line .call(g => g.selectAll(".domain").remove()); }32:T701,function formatData(individual_results) { var nested_data = d3 .nest() .key((d) => d.Year) .entries(individual_results); nested_data.map((year, i) => { year.stats = {}; year.index = i; year.stats["Fastest Time"] = d3.min( year.values, (runner) => runner.FinishSeconds || Infinity ); year.stats["Slowest Time"] = d3.max( year.values, (runner) => runner.FinishSeconds ); year.stats["Average Time"] = d3.mean( year.values, (runner) => runner.FinishSeconds ); year.stats.Spread = year.stats["Slowest Time"] - year.stats["Fastest Time"]; year.stats.Year = year.key; // Wrangle data on individuals year.values.map((prop) => { prop.status = prop.FinishSeconds > 0 ? "finishers" : "nonfinishers"; prop.records = []; Object.keys(prop).forEach((k) => { if (k.indexOf("Is") > -1) { prop.records.push({ name: k, value: +prop[k] }); delete prop[k]; } }); // Handle non-remarkable finsihers and nonfinishers if (d3.sum(prop.records, (d) => d.value) === 0) { if (prop.status === "finishers") { // Runner is finisher with no record prop.records.push({ name: "default", value: 1 }); } else { // Runner is one of the finishers with no time prop.records.push({ name: "IsNA", value: 1 }); } } return prop; }); let values = d3 .nest() .key((d) => d.status) .entries(year.values); year.finishers = values[0].values.sort( (x, y) => y.FinishSeconds - x.FinishSeconds ); year.nonfinishers = (values.length > 1 ? values[1].values : []).sort(); delete year.values; return year; }); return nested_data; }33:[{"id":"822516cdbff6fc354e085eb6594de22c7423f117138f25074774485b239ab1a68492e38c14b54f2d09ab8c82d5094be75940a99721308b949d0be663060035e1","href":"https://static.observableusercontent.com/files/822516cdbff6fc354e085eb6594de22c7423f117138f25074774485b239ab1a68492e38c14b54f2d09ab8c82d5094be75940a99721308b949d0be663060035e1","name":"millrose-mile-men.csv","type":"text/csv","lastModified":1584380367638.815,"size":33765},{"id":"c926bc4c375fa3f066e40dc770c0fec6be9676644f1b58ab42a540e74573f39c6943c75a627d18c1b6d4a7a7032858b619653d2988967e538fa026355aa05041","href":"https://static.observableusercontent.com/files/c926bc4c375fa3f066e40dc770c0fec6be9676644f1b58ab42a540e74573f39c6943c75a627d18c1b6d4a7a7032858b619653d2988967e538fa026355aa05041","name":"1932-pie@1.png","type":"image/png","lastModified":1643476479527.264,"size":3249}] 2e:{"title":"Wanamaker Mile, Men","cells":[{"id":1,"value":"md`# Wanamaker Mile, Men\n\nA dot plot visualizing Men's [Wanamaker Mile](https://www.millrosegames.org/wanamaker-mile) results from ${\n years[0]\n} to ${\n years[years.length - 1]\n}. Hover over individual dots to see the runner's name and time. Also, see [women's results](https://observablehq.com/@stvkas/wanamaker-mile-women).\n\nData: [Track and Field Statistics](http://www.tf-stats.com/millrose_m_mile.html) and [wrangled in OpenRefine](https://github.com/swkasica/wanamaker-mile).\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"viewof sortOrder = {\n const form = html``;\n\n const timeout = setTimeout(() => {\n form.onchange();\n }, 2000);\n\n form.onchange = () => {\n clearTimeout(timeout);\n form.value = { order: form.order.value };\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n form.order.selectedIndex = form.order.options.length - 1;\n\n form.value = { order: form.order.value };\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"colorLegend = legend({ title: \"Status\", color, tickSize: 1, width: 500 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"html`\n\n

Technical note: One kind of clever aspect of this dot plot is that the dots are actually pie charts. Some of the categories I encode with color are not mutually exclusive. To color encode multiple performance statuses, I use d3.pie. So dots without a special status have that value set to zero. And meet, American, and record setting performances such as Gene Venzke in 1932 have each value set to 33% .

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1364,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"_ = {\n const index = d3.range(data.length);\n const order = sortOrder.order === \"Year\" ? d3.ascending : d3.descending;\n index.sort((i, j) =>\n order(data[i].stats[sortOrder.order], data[j].stats[sortOrder.order])\n );\n chart.update(\n d3.permute(\n data.map((d) => d.key),\n index\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1601,"value":"times = (await FileAttachment(\"millrose-mile-men.csv\").csv()).map((d) => {\n d.FinishSeconds = +d.FinishSeconds;\n d.Year = +d.Year;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"data = formatData(times)","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"years = Array.from(new Set(data.map(d => d.key))).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"dotPlotWidth = (width / 8) * 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"function statusDecoder(sym) {\n // Makes performance symbols/abbreviations human-readable\n switch (sym) {\n case \"IsMR\":\n return \"Meet record\";\n case \"IsAmR\":\n return \"American record\";\n case \"IsWR\":\n return \"World record\";\n case \"IsDNS\":\n return \"Did not start\";\n case \"IsDNF\":\n return \"Did not finish\";\n case \"IsNA\":\n return \"No time recorded\";\n default:\n return \"\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"x = d3\n .scaleLinear()\n .domain(d3.extent(times, (d) => (d.FinishSeconds ? d.FinishSeconds : null)))\n .range([margin.left, dotPlotWidth - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"y = d3.scalePoint()\n .domain(years)\n .rangeRound([margin.top, height - margin.bottom])\n .padding(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"color = d3\n .scaleOrdinal()\n .domain(\n [\"IsAmR\", \"IsMR\", \"IsWR\", \"IsDNF\", \"IsDNS\", \"IsNA\"].map(statusDecoder)\n )\n .range([\"#377eb8\", \"#e41a1c\", '#4daf4a', '#984ea3', '#ff7f00', '#ddd'])\n .unknown(\"#555\") // not a record","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"height = data.length * 21","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"margin = ({ top: 20, right: 15, bottom: 20, left: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1591,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1559,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}