2d:null 2e:["$","title",null,{"children":"Dot plot workbench | Xan Gregg | Observable"}] 33:T89f,chart = { const svgWidth = settings.valueAxis == "x" ? width : height; const svgHeight = settings.valueAxis == "x" ? height : width; const svg = d3.select(DOM.svg(svgWidth, svgHeight)); var gg = svg.append("g"); if (settings.valueAxis != "x") { gg.attr("transform", "rotate(-90)translate(-" + width + ","+0+")"); } if (settings.reportBkg) gg.append("g").attr("fill", "#f9f9f7").append("rect") .attr("x", 0).attr("y", 0) .attr("width", width).attr("height", height); gg.append("g").attr("fill", "#ffffff").append("rect") .attr("x", margin.left).attr("y", margin.top) .attr("width", width - margin.right - margin.left ).attr("height", height - margin.bottom - margin.top); gg.append("clipPath").attr("id", "graph").append("rect") .attr("x", margin.left).attr("y", margin.top) .attr("width", width - margin.right - margin.left ).attr("height", height - margin.bottom - margin.top); if (settings.title) svg.append("text").style("font", "18px sans-serif") .attr("x", settings.valueAxis == "x" ? margin.left : margin.top).attr("y", 24) .text(dataset.desc); if (settings.subtitle) { svg.append("text").style("font", "14px sans-serif") .attr("x", 90).attr("y", settings.valueAxis == "x" ? height - 3 : width - 3).attr("text-anchor", "end") .text("Data source: "); svg.append("a").attr("href", dataset.sourceurl) .append("text").style("font", "14px sans-serif").attr("fill", "darkblue") .attr("x", 92).attr("y", settings.valueAxis == "x" ? height - 3 : width - 3) .text(dataset.source); } appendCatGuides(gg); appendValueGuides(gg); appendDataMarks(gg); if (settings.catGuide != "label" || settings.valueAxis == "x" ) { svg.append("g").call(settings.valueAxis == "x" ? xAxisVal : xAxisCat); if (settings.valueAxis == "y") svg.selectAll(".tick text").call(wrap, y.bandwidth()); } if (settings.catGuide != "label" || settings.valueAxis != "x" ) svg.append("g").call(settings.valueAxis == "x" ? yAxisCat : yAxisVal); svg.selectAll(".domain") .style("stroke", "#666"); svg.selectAll(".tick line") .style("stroke", "#ccc"); return svg.node(); }34:Ta2d,viewof settings = { const f = form(html`

Category Count

${segmentedControl("Category Guide", "catGuide", [["none", "None"], ["sep", "Separator"], ["line1", "Thin"], ["line2", "Thick"], ["shade", "Zebra"], ["needle", "Needle"], ["label", "Label"]], "line1", "6.1em", "7.5em")} ${segmentedControl("Category Order", "catOrder", [["name", "By name"], ["value", "By value ⇩"], ["value2", "By value ⇧"], ["none", "By row"]], "none", "6.1em", "7.5em")} ${segmentedControl("Value Guide", "valueGuide", [["none", "None"], ["line", "Thin"], ["shade", "Zebra"], ["label", "Label"]], "none", "6.1em", "7.5em")} ${segmentedControl("Value Scale", "valueScale", [["zero", "Zeroed"], ["padded", "Padded"], ["tight", "Auto"]], "padded", "6.1em", "7.5em")} ${segmentedControl("Value Axis", "valueAxis", [["x", "X"], ["y", "Y"]], "x", "6.1em", "7.5em")} ${segmentedControl("Mark Shape", "valueMark", [["dot", "Dot"], ["line", "Pipe"], ["pennant", "Pennant"], // ["comet", "Comet"], ["fadedBarTop", "Short Fade"], ["fadedBar", "Long Fade"], ["bar", "Bar"]], "dot", "6.1em", "7.5em")}

Mark Size

Mark Color

Graph Styling Title Footer Border Shading Value Axis Line Category Axis Line

`); const range = f.querySelector("[type=range]"); const number = f.querySelector("[type=number]"); range.value = number.value = 8; range.addEventListener("input", () => number.value = range.valueAsNumber); number.addEventListener("input", () => range.value = number.valueAsNumber); return f;}35:T6a6,cityHeatData = [{name: "New York", value: 81.5} ,{name: "Los Angeles", value: 81.1} ,{name: "Chicago", value: 80.8} ,{name: "Dallas", value: 92.4} ,{name: "Philadelphia", value: 83.6} ,{name: "Houston", value: 92.3} ,{name: "Washington", value: 84.4} ,{name: "Miami", value: 92} ,{name: "Atlanta", value: 86.9} ,{name: "Boston", value: 79.1} ,{name: "San Francisco", value: 73.6} ,{name: "Detroit", value: 79} ,{name: "Riverside", value: 90.3} ,{name: "Phoenix", value: 97.7} ,{name: "Seattle", value: 70.3} ,{name: "Minneapolis", value: 79.7} ,{name: "San Diego", value: 80.3} ,{name: "St. Louis", value: 86.1} ,{name: "Tampa", value: 91.5} ,{name: "Baltimore", value: 85.6} ,{name: "Denver", value: 74.1} ,{name: "Pittsburgh", value: 79} ,{name: "Portland", value: 72.6} ,{name: "Sacramento", value: 79.8} ,{name: "San Antonio", value: 92.1} ,{name: "Orlando", value: 91.6} ,{name: "Cincinnati", value: 83} ,{name: "Cleveland", value: 80} ,{name: "Kansas City", value: 86.4} ,{name: "Las Vegas", value: 94.4} ,{name: "San Jose", value: 76.2} ,{name: "Columbus", value: 81.6} ,{name: "Charlotte", value: 87.8} ,{name: "Indianapolis", value: 82} ,{name: "Austin", value: 92.2} ,{name: "Virginia Beach", value: 87.5} ,{name: "Providence", value: 79.5} ,{name: "Nashville", value: 85.9} ,{name: "Milwaukee", value: 78.6} ,{name: "Jacksonville", value: 90.8} ,{name: "Memphis", value: 89.3} ,{name: "Louisville", value: 84.7} ,{name: "Richmond", value: 86.6} ,{name: "Oklahoma City", value: 90.5} ,{name: "Hartford", value: 79.9} ,{name: "New Orleans", value: 91.7} ,{name: "Buffalo", value: 77.6} ,{name: "Raleigh", value: 87.4} ,{name: "Birmingham", value: 88.4} ,{name: "Salt Lake City", value: 77.7}] 36:T629,songRatingsData=[ {name:"A Hard Day's Night", value:8.30}, {name:"And I Love Her", value:8.36}, {name:"In My Life", value:8.86}, {name:"Girl", value:8.33}, {name:"You've Got To Hide Your Love Away", value:8.71}, {name:"Tomorrow Never Knows", value:8.36}, {name:"I'm Only Sleeping", value:8.22}, {name:"She Said She Said", value:8.14}, {name:"And Your Bird Can Sing", value:8.20}, {name:"Eleanor Rigby", value:8.79}, {name:"For No One", value:8.44}, {name:"Good Day Sunshine", value:7.85}, {name:"Doctor Robert", value:7.26}, {name:"A Day In The Life", value:9.15}, {name:"I Am The Walrus", value:8.43}, {name:"When I'm Sixty-four", value:7.95}, {name:"Baby You're a Rich Man", value:7.36}, {name:"Being For The Benefit Of Mr. Kite", value:7.85}, {name:"Hello, Goodbye", value:7.99}, {name:"Within You Without You", value:7.39}, {name:"Dear Prudence", value:8.57}, {name:"While My Guitar Gently Weeps", value:8.99}, {name:"Sexy Sadie", value:7.59}, {name:"Revolution 1", value:7.98}, {name:"I'm So Tired", value:8.24}, {name:"Cry Baby Cry", value:7.96}, {name:"Mother Nature's Son", value:8.20}, {name:"Come Together", value:8.54}, {name:"Hey Bulldog", value:7.58}, {name:"Rain", value:7.97}, {name:"You Never Give Me/The End", value:8.99}, {name:"I Want You (She's So Heavy)", value:8.41}, {name:"Because", value:8.41}, {name:"Here Comes The Sun", value:8.97}, {name:"Across The Universe", value:8.38}, {name:"Get Back", value:8.13}, {name:"Two Of Us", value:8.30}, {name:"Let It Be", value:8.99}, {name:"Dig A Pony", value:7.54}, {name:"Within You Without You", value:7.66} ];37:T541,marathonData = [{name:"China", value:2.1375}, {name:"India", value:2.2}, {name:"United States", value:2.09389}, {name:"Indonesia", value:2.32167}, {name:"Brazil", value:2.10139}, {name:"Pakistan", value:2.23639}, {name:"Nigeria", value:2.26833}, {name:"Bangladesh", value:2.3675}, {name:"Russia", value:2.15194}, {name:"Mexico", value:2.12194}, {name:"Japan", value:2.09722}, {name:"Ethiopia", value:2.05083}, {name:"Philippines", value:2.31222}, {name:"Egypt", value:2.3275}, {name:"Viet Nam", value:2.36417}, {name:"Germany", value:2.1425}, {name:"Dem. Rep. of the Congo", value:2.14861}, {name:"Iran", value:2.29472}, {name:"Turkey", value:2.10278}, {name:"Thailand", value:2.32583}, {name:"United Kingdom", value:2.08639}, {name:"France", value:2.11}, {name:"Italy", value:2.12278}, {name:"Tanzania", value:2.12944}, {name:"South Africa", value:2.10917}, {name:"Myanmar", value:2.3325}, {name:"South Korea", value:2.12222}, {name:"Kenya", value:2.0275}, {name:"Colombia", value:2.18806}, {name:"Spain", value:2.11444}, {name:"Argentina", value:2.16583}, {name:"Ukraine", value:2.12083}, {name:"Uganda", value:2.10917}, {name:"Algeria", value:2.165}, {name:"Sudan", value:2.33083}, {name:"Iraq", value:2.365}, {name:"Poland", value:2.1275}, {name:"Canada", value:2.15694}, {name:"Morocco", value:2.09083}, {name:"Afghanistan", value:2.47944}]38:T567,longJumpData = [{name: "China", value: 8.47}, {name: "India", value: 8.19}, {name: "United States", value: 8.95}, {name: "Indonesia", value: 7.85}, {name: "Brazil", value: 8.4}, {name: "Nigeria", value: 8.27}, {name: "Russia", value: 8.56}, {name: "Mexico", value: 8.46}, {name: "Japan", value: 8.25}, {name: "Philippines", value: 7.99}, {name: "Egypt", value: 8.31}, {name: "Viet Nam", value: 7.9}, {name: "Germany", value: 8.54}, {name: "Congo", value: 7.63}, {name: "Iran", value: 8.17}, {name: "Turkey", value: 8.08}, {name: "Thailand", value: 8.04}, {name: "United Kingdom", value: 8.51}, {name: "France", value: 8.42}, {name: "Italy", value: 8.47}, {name: "South Africa", value: 8.62}, {name: "South Korea", value: 8.22}, {name: "Spain", value: 8.56}, {name: "Ukraine", value: 8.35}, {name: "Algeria", value: 8.26}, {name: "Poland", value: 8.28}, {name: "Canada", value: 8.2}, {name: "Morocco", value: 8.4}, {name: "Saudi Arabia", value: 8.48}, {name: "Peru", value: 8.1}, {name: "Venezuela", value: 8.34}, {name: "Uzbekistan", value: 8.1}, {name: "Malaysia", value: 7.88}, {name: "Ghana", value: 8.43}, {name: "Australia", value: 8.54}, {name: "Sri Lanka", value: 8.15}, {name: "Romania", value: 8.37}, {name: "Kazakhstan", value: 8.16}, {name: "Netherlands", value: 8.29}, {name: "Guatemala", value: 7.79}, {name: "Zimbabwe", value: 8.4}, {name: "Senegal", value: 8.46} ]39:T98d,appendCatGuides = function(svg) { const ywidth = y.step(); const markWidth = ywidth * settings.valueSize / 100; switch (settings.catGuide) { case "none": break; case "sep": svg.append("g").attr("stroke", "#cccccc") .selectAll("cg").data(data).enter().append("line") .attr("x1", x.range()[0]).attr("x2", x.range()[1]) .attr("y1", d => y(d.name)).attr("y2", d => y(d.name)); break; case "line1": svg.append("g").attr("stroke", "#cccccc") .selectAll("cg").data(data).enter().append("line") .attr("x1", x.range()[0]).attr("x2", x.range()[1]) .attr("y1", d => y(d.name)+ywidth/2).attr("y2", d => y(d.name)+ywidth/2); break; case "line2": svg.append("g").attr("stroke", "#e8e8e8").attr("stroke-width", ywidth*0.4) .selectAll("cg").data(data).enter().append("line") .attr("x1", x.range()[0]).attr("x2", x.range()[1]) .attr("y1", d => y(d.name)+ywidth/2).attr("y2", d => y(d.name)+ywidth/2); break; case "shade": svg.append("g").attr("stroke", "#ececec").attr("clip-path", "url(#graph)") .selectAll("cg").data(data).enter().append("line") .attr("stroke-width", (d, i) => (i % 2 == 0) ? ywidth : 0) .attr("x1", x.range()[0]).attr("x2", x.range()[1]) .attr("y1", d => y(d.name)+ywidth/2).attr("y2", d => y(d.name)+ywidth/2); break; case "needle": svg.append("g").attr("fill", settings.dataColor).attr("fill-opacity", 0.5) .selectAll("dm").data(data).enter().append("rect") .attr("x", d => x.range()[0]) .attr("y", d => y(d.name) + y.step() * 0.5 - 1) .attr("width", d => x(d.value) - (settings.valueMark == "pennant" ? markWidth * 2.5 - 4 : 0) - x.range()[0]) .attr("height", 2); break; case "label": const tx = d => x(d.value) - (settings.valueMark == "dot" ? y.step() * 0.5 : 4); const ty = d => y(d.name) + y.bandwidth() / 2; svg.append("g").attr("fill", "#333333").attr("clip-path", "url(#graph)") .style("font", "12px sans-serif") .attr("text-anchor", settings.valueAxis == "x" ? "end" : "middle") .selectAll("cg").data(data).enter().append("text") .attr("transform", d => `translate(${tx(d)},${ty(d)})` + (settings.valueAxis == "x" ? "" : "rotate(90)")) .attr("dy", "0.35em") .text(d => d.name); break; }; }3a:T5b8,appendValueGuides = function(svg) { switch (settings.valueGuide) { case "none": break; case "line": svg.append("g").attr("stroke", "#cccccc").attr("clip-path", "url(#graph)") .selectAll("vg").data(x.ticks(numTicks)).enter().append("line") .attr("y1", y.range()[0]).attr("y2", y.range()[1]) .attr("x1", d => x(d)).attr("x2", d => x(d)); break; case "shade": svg.append("g").attr("fill", "#e9e9e9").attr("fill-opacity", 0.5).attr("clip-path", "url(#graph)") .selectAll("vg").data(x.ticks(numTicks)).enter().append("rect") .attr("x", d => x(d)) .attr("y", y.range()[0]) .attr("width", (d, i) => i % 2 == 0 ? x(x.ticks(numTicks)[1]) - x(x.ticks(numTicks)[0]) : 0) .attr("height", y.range()[1] - y.range()[0]); break; case "label": const tx = d => x(d.value) + (settings.valueMark == "dot" ? y.step() * 0.5 : 4); const ty = d => y(d.name) + y.bandwidth() / 2; svg.append("g").attr("fill", "#333333").attr("clip-path", "url(#graph)") .style("font", "12px sans-serif") .attr("text-anchor", settings.valueAxis == "x" ? "start" : "middle") .selectAll("vg").data(data).enter().append("text") .attr("transform", d => `translate(${tx(d)},${ty(d)})` + (settings.valueAxis == "x" ? "" : "rotate(90)")) .attr("dy", "0.35em") .text(d => dataset.valueFormat(d.value)); break; } }3b:Te57,appendDataMarks = function(svg) { const ywidth = y.step(); const markStart = ywidth * ((1 - settings.valueSize / 100)/2); const markWidth = ywidth * settings.valueSize / 100; if (settings.valueMark == "comet" || settings.valueMark == "fadedBar" || settings.valueMark == "fadedBarTop") { const shader = d3.scaleLinear().domain([0, 1]) .interpolate(d3.interpolateHcl) .range([d3.rgb("#ffffff"), d3.rgb(settings.dataColor)]); svg.append("linearGradient") .attr("id", "fader") .attr("x1", "0%").attr("y1", "0%") .attr("x2", "100%").attr("y2", "0%") .selectAll("stop").data(d3.range(0, 1, 0.2)).enter().append("stop") .attr("offset", function(d) { return d; }) .attr("stop-opacity", function(d) { return Math.min(1, 1.2 * + Math.pow(d, 2)); }) .attr("stop-color", function(d) { return settings.dataColor; }); } switch (settings.valueMark) { case "none": break; case "dot": svg.append("g").attr("fill", settings.dataColor) .selectAll("dm").data(data).enter().append("circle") .attr("cx", d => x(d.value)) .attr("cy", d => y(d.name) + y.step()/2) .attr("r", markWidth/2 * 0.8); break; case "line": svg.append("g").attr("fill", settings.dataColor) .selectAll("dm").data(data).enter().append("rect") .attr("x", d => x(d.value) - 2) .attr("y", d => y(d.name) + markStart) .attr("width", 4).attr("height", markWidth); break; case "pennant": case "comet": svg.append("g").attr("fill", settings.valueMark == "comet" ? "url(#fader)" : settings.dataColor) .attr("clip-path", "url(#graph)") .selectAll("dm").data(data).enter().append("path").attr("fill-opacity", 0.5) .attr("d", d => `M ${x(d.value)} ${y(d.name) + markStart} L ${x(d.value)} ${y(d.name) + markStart + markWidth} L ${x(d.value) - markWidth * 2.5} ${y(d.name) + y.step() * 0.5} Z`); svg.append("g").attr("fill", settings.dataColor) .selectAll("dm").data(data).enter().append("rect") .attr("x", d => x(d.value) - 2) .attr("y", d => y(d.name) + markStart) .attr("width", 4).attr("height", markWidth); break; case "fadedBarTop": case "fadedBar": const short = Math.min(80, y.step() * (settings.valueAxis == "x" ? 2.2 : 1.5)); const x0 = d => settings.valueMark == "fadedBarTop" ? x(d.value) -short : x.range()[0]; svg.append("g").attr("fill", "url(#fader)").attr("clip-path", "url(#graph)") .selectAll("dm").data(data) .enter().append("rect") .attr("x", d => x0(d)) .attr("y", d => y(d.name) + markStart) .attr("width", d => x(d.value) - x0(d)) .attr("height", markWidth); break; case "bar": svg.append("g").attr("fill", settings.dataColor) .selectAll("dm").data(data) .enter().append("rect") .attr("x", x.range()[0]) .attr("y", d => y(d.name) + markStart) .attr("width", d => x(d.value) - x.range()[0]) .attr("height", markWidth); break; case "lollipop": svg.append("g").attr("fill", settings.dataColor).attr("fill-opacity", 0.5) .selectAll("dm").data(data).enter().append("rect") .attr("x", d => x.range()[0]) .attr("y", d => y(d.name) + y.step() * 0.5 - 1) .attr("width", d => x(d.value) - x.range()[0]) .attr("height", 2); svg.append("g").attr("fill", settings.dataColor) .selectAll("dm").data(data).enter().append("circle") .attr("cx", d => x(d.value)) .attr("cy", d => y(d.name) + y.step()/2) .attr("r", markWidth); break; } }3c:[] 31:{"id":"c4ca199106122699","slug":"dot-plot-workbench","title":"Dot plot workbench","thumbnail":"efc702f4b327b6354880322222960ce0a506632e63bacd37d886b70dba578b6e","access_level":"public","create_time":"$D2019-02-02T18:04:10.280Z","update_time":"$D2021-05-29T23:52:46.480Z","view_time":null,"first_public_time":"$D2019-02-19T17:52:50.178Z","has_unpublished_edits":null,"fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"137f0ff4eb6513ad","login":"xangregg","name":"Xan Gregg","avatar_url":"https://avatars-next.observableusercontent.com/e0777d0101875e53efb997a087a1a33fa4ad98c935a80d70a78399b131707eec","tier":"starter_2024"},"version":1260,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"edbf8118f31be45e","login":"xangregg","name":"Xan Gregg","avatar_url":"https://avatars-next.observableusercontent.com/e0777d0101875e53efb997a087a1a33fa4ad98c935a80d70a78399b131707eec","tier":null}],"members":[{"type":"individual","id":"edbf8118f31be45e","login":"xangregg","name":"Xan Gregg","avatar_url":"https://avatars-next.observableusercontent.com/e0777d0101875e53efb997a087a1a33fa4ad98c935a80d70a78399b131707eec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Dot plot workbench","cells":[{"id":0,"value":"md`# Dot plot workbench\n### Exploring alternatives to Cleveland dot plots\nChange the options below to explore alternative chart forms. \nSee discussion article cross-posted on [JMP blog](https://community.jmp.com/t5/JMP-Blog/A-friendlier-dot-plot/ba-p/136006) and [Practical Reporting blog](https://www.practicalreporting.com/blog/2019/2/20/a-friendlier-dot-plot). \nChoose among ${datasets.length} datasets to visualize.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"//datasetname = \"cityHeat\";\nviewof datasetname = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"md`---\n\n### Current settings in JSON form:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"settings","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"md`### List of data sets included in the dropdown menu:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"datasets = [longJumpDataset, marathonDataset, cityDataset, songsDataset]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"md`### Meta-data for each data set:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"cityDataset = ({\n key: \"cityHeat\",\n name: \"City Heat Index\", // text for dropdown menu\n data: cityHeatData,\n desc: \"Overall heat index of the largest US cities\",\n padded: [60, 100], // for padded value axis\n labelWidth: 90, // hint for the category axis size\n valueFormatAxis: d3.format(\".0f\"), // format for axis tick\n valueFormat: d3.format(\".1f\"), // detailed format for dot label\n source:\"Sperling Heat Index\",\n sourceurl: \"http://www.bertsperling.com/2013/07/02/sizzling-cities-ranked-our-new-heat-index/\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"songsDataset = ({\n key: \"songs\",\n name: \"Beatles Song Ratings\",\n data: songRatingsData,\n desc: \"Listener ratings of Beatles songs (10 point scale)\",\n padded: [6.8, 9.5],\n labelWidth: 155,\n valueFormatAxis: d3.format(\".1f\"), // format for axis tick\n valueFormat: d3.format(\".2f\"), // detailed format for dot label\n source:\"Radio Paradise\",\n sourceurl: \"https://www.radioparadise.com/\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"marathonDataset = ({\n key: \"marathon\",\n name: \"Marathon times by country\", // text for dropdown menu\n data: marathonData,\n desc: \"Best men's marathon times for the largest countries\",\n padded: [1.94, 2.5], // for padded value axis\n labelWidth: 100, // hint for the category axis size\n valueFormatAxis: (s) => Math.floor(s) + \":\"+ d3.format(\"02.0f\")(Math.floor(s*60%60)), // format for axis tick\n valueFormat: (s) => Math.floor(s) + \":\"+ d3.format(\"02.0f\")(Math.floor(s*60%60)) + \":\"+ d3.format(\"02.0f\")(Math.floor(s*3600%60)), // detailed format for dot label\n source:\"Wikipedia: National records in the marathon\",\n sourceurl: \"https://en.wikipedia.org/wiki/National_records_in_the_marathon\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"longJumpDataset = ({\n key: \"longJump\",\n name: \"Long jump records by country\", // text for dropdown menu\n data: longJumpData,\n desc: \"Men's long jump records (meters)\",\n padded: [7.4, 9.1], // for padded value axis\n labelWidth: 100, // hint for the category axis size\n valueFormatAxis: d3.format(\".1f\"), // format for axis tick\n valueFormat: d3.format(\".2f\"), // detailed format for dot label\n source:\"Wikipedia: National records in the long jump\",\n sourceurl: \"https://en.wikipedia.org/wiki/Long_jump\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"md`### Data for each data set:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"md`### Supporting code:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"dataset = datasets[datasets.findIndex( ds => ds.key == datasetname )]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"allData = dataset.data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"data = allData \n .slice(0, settings.nCat)\n .sort((a, b) => settings.catOrder == \"name\" ? d3.ascending(a.name, b.name)\n : settings.catOrder == \"none\" ? 0\n : settings.catOrder == \"value2\" ? a.value - b.value\n : b.value - a.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"x = d3.scaleLinear()\n .domain(settings.valueScale == \"padded\" ? dataset.padded : settings.valueScale == \"zero\" ? [0, dataset.padded[1]] :\n [d3.min(data, d => d.value) - 2, d3.max(data, d => d.value) + 2])\n .range([margin.left, width - margin.right])\n//.range(settings.valueAxis == \"x\" ? [margin.left, width - margin.right] : [width - margin.right, margin.left])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"y = d3.scaleBand()\n .domain(data.map(d => d.name))\n // .range(settings.valueAxis == \"x\" ? [margin.top, height - margin.bottom] : [margin.left, width - margin.right])\n .range([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"xAxisVal = g => g\n .style(\"font\", \"16px sans-serif\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(numTicks).tickSize(6).tickSizeOuter(0).tickFormat(dataset.valueFormatAxis))\n .call(g => g.select(settings.valueLine ? \".notdomain\" : \".domain\").remove())\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"xAxisCat = g => g\n .style(\"font\", `${d3.min([12, y.bandwidth() * 0.75])}px sans-serif`)\n .attr(\"transform\", `translate(0,${width - margin.left})`)\n .call(d3.axisBottom(y).tickSize(0))\n .call(g => g.select(settings.catLine ? \".notdomain\" : \".domain\").remove())\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"yAxisCat = g => g\n .style(\"font\", `${d3.min([16, y.bandwidth()])}px sans-serif`)\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSize(0))\n .call(g => g.select(settings.catLine ? \".notdomain\" : \".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"numTicks = settings.valueScale == \"zero\" ? 10 : 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"yAxisVal = g => g\n .style(\"font\", \"16px sans-serif\")\n .attr(\"transform\", `translate(${margin.top},${margin.right - margin.left})`)\n .call(d3.axisLeft(x.range([width - margin.right, margin.left])).ticks(numTicks).tickSize(6).tickSizeOuter(0).tickFormat(dataset.valueFormatAxis))\n .call(g => g.select(settings.valueLine ? \".notdomain\" : \".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"catLabelSpace = settings.valueAxis == \"x\" ? 30 : 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"heightCat = Math.round(data.length * (data.length <= 10 ? catLabelSpace : (5 + (catLabelSpace * 9) / data.length)) + margin.top + margin.bottom)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"widthVal = (settings.valueScale == \"zero\" ? 520 : 320) + settings.nCat * 5 + (settings.valueAxis == \"x\" ? 100 + dataset.labelWidth : 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"height = heightCat;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"width = widthVal","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"margin = (settings.valueAxis == \"x\" ?\n{top: settings.title ? 35 : 15, right: 20, bottom: settings.subtitle ? 43 : 30, left: 20 + dataset.labelWidth} :\n {top: 45, right: settings.title ? 35 : 10, bottom: 10, left: 20 + (settings.subtitle ? 35 : 15)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"wrap = function(text, width, charWidthGuess = 5) {\n text.each(function() {\n var text = d3.select(this),\n words = text.text().split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.1, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")),\n tspan = text.text(null).append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", dy + \"em\");\n while (word = words.pop()) {\n line.push(word)\n tspan.text(line.join(\" \"))\n var spanWidth = tspan.node().getComputedTextLength();\n if (spanWidth == 0) // fallback to a guess\n spanWidth = charWidthGuess * ((line.length - 1) * .5 + line.map( s => s.length).reduce( (a,b) => a+b));\n if (spanWidth > width && line.length > 1) {\n line.pop()\n tspan.text(line.join(\" \"))\n line = [word]\n tspan = text.append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", `${++lineNumber * lineHeight + dy}em`).text(word)\n }\n }\n })\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1259,"value":"wrap2 = function(text, width, charWidthGuess = 5) {\n text.each(function() {\n var text = d3.select(this),\n words = text.text().split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.1, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")),\n tspan = text.text(null).append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", dy + \"em\");\n while (word = words.pop()) {\n line.push(word)\n tspan.text(line.join(\" \"))\n var spanWidth = tspan.node().getComputedTextLength();\n if (spanWidth == 0) // fallback to a guess\n spanWidth = charWidthGuess * ((line.length - 1) * .5 + line.map( s => s.length).reduce( (a,b) => a+b));\n if (spanWidth > width && line.length > 1) {\n line.pop()\n tspan.text(line.join(\" \"))\n line = [word]\n tspan = text.append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", `${++lineNumber * lineHeight + dy}em`).text(word)\n }\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"import {segmentedControl} from \"@xangregg/gray-segmented-control\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 32:"$31:body"