2e:null 2f:["$","title",null,{"children":"Radial Bar Chart | US unemployment in the Covid-19 downturn | Loris Mat | Observable"}] 34:T8e3,chart = { const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .style("padding-top", `${margin.top}px`); // 2019 paths svg.append("g") .attr("class", "temp") .selectAll("path") .data(data) .join("path") .attr("opacity", 1) .attr("data-state", d => `${d.state}`) .attr("fill", (d,i) => "#7f8c8d") .attr("stroke", "#fff") .attr("stroke-width", 2) .attr("d", (d,i) => arc(d,i,1,"sept2019")) .on("mousemove", mousemove) .on("mouseleave", mouseleave) // 2020 paths svg.append("g") .selectAll("path") .data(data) .join("path") .attr("opacity", 1) .attr("data-state", d => `${d.state}`) .attr("fill", "#d35400") .attr("stroke", "#fff") .attr("stroke-width", 2) .attr("d", (d,i) => arc(d,i,-1,"sept2020")) .on("mousemove", mousemove) .on("mouseleave", mouseleave) // legend on the side const states = svg.append("g") .attr("transform", `translate(-${width/2 - margin.left} -${height/2})`) .attr("font-size", 10) .selectAll("text") .data(data) .join("text") .attr("class", "state") .attr("data-state", d => `${d.state}`) .attr("opacity", 1) .attr("y", (d,i) => legendScale(data.length - i)) .text(d => d.state + " +" + d.change + " pts") .on("mousemove", mousemove) .on("mouseleave", mouseleave) // years header const yearHeader = svg.append("g") .attr("font-size", 25) .attr("font-weight", "bold") .attr("transform", `translate(-${width/2} -${height/2 - margin.top})`) yearHeader .append("text") .attr("fill", "#7f8c8d") .attr("x", width/2 - 60) .text("2019") yearHeader .append("text") .attr("fill", "#d35400") .attr("x", width/2 + 5) .text("2020") svg.append("g") .call(yAxis) d3.selectAll("label").on("click", function() { activateBtn(this) }); // I couldn't make the viz responsive for width below 690 if (window.innerWidth > 740) { return svg.node() } else { return md`**Unfortunately, I couldn't make the viz responsive...**` } }35:T51c,yAxis = g => g .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") // left axis .call(g => g.selectAll("g") .data(d3.range(0, 21, 5)) .join("g") .call(g => g.append("path") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .attr("d", d => ` M${d3.pointRadial(y(d), paddingScale(0) - 40)} L${d3.pointRadial(y(d), paddingScale(data.length/2))} `)) .call(g => g.append("text") .attr("x",d => d3.pointRadial(y(d), 60)[0]) .attr("y",d => d3.pointRadial(y(d), 60)[1]) .text((d,i) => `${d3.range(0, 21, 5)[i]}%`))) // right axis .call(g => g.selectAll("g") .data(d3.range(0, 21, 5)) .join("g") .call(g => g.append("path") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .attr("d", d => ` M${d3.pointRadial(-y(d), paddingScale(0) - 40)} L${d3.pointRadial(-y(d), paddingScale(data.length/2))} `)) .call(g => g.append("text") .attr("x",d => d3.pointRadial(-y(d), 60)[0]) .attr("y",d => d3.pointRadial(-y(d), 60)[1]) .text((d,i) => `${d3.range(0, 21, 5)[i]}%`)))36:[{"id":"a886b49151e65b89a93cbec2e960dd9e539e4d6c33f37eac104a7ad5071e6ed2d311c33a2c7977ceb1b6c3af6498d8c9c8f556e00dcfcf0388a1bf624a238f98","href":"https://static.observableusercontent.com/files/a886b49151e65b89a93cbec2e960dd9e539e4d6c33f37eac104a7ad5071e6ed2d311c33a2c7977ceb1b6c3af6498d8c9c8f556e00dcfcf0388a1bf624a238f98","name":"alex-murrell-european-unemployment.jpg","type":"image/jpeg","lastModified":1604911415629.528,"size":344195},{"id":"29a22d7aeb526bdc94d473e2087ff93f1a09c2718ae7fdb88d40d4c93c9997d9a4eea69dde02b04b521ddf0daa9cea33e2dea70f41dc9211a55a7bcbd4cde1bf","href":"https://static.observableusercontent.com/files/29a22d7aeb526bdc94d473e2087ff93f1a09c2718ae7fdb88d40d4c93c9997d9a4eea69dde02b04b521ddf0daa9cea33e2dea70f41dc9211a55a7bcbd4cde1bf","name":"unemployment.csv","type":"text/csv","lastModified":1604910996325.197,"size":1862}] 32:{"id":"bb3be331ab930b76","slug":"radial-bar-chart-us-unemployment-in-the-covid-19-downturn","title":"Radial Bar Chart | US unemployment in the Covid-19 downturn","thumbnail":"530abdac0540d6b4dad0583272ed66dd88aed8e3761157ea54fcce7f5f801708","access_level":"public","create_time":"$D2020-11-09T07:50:32.875Z","update_time":"$D2020-11-10T18:41:52.444Z","view_time":null,"first_public_time":"$D2020-11-10T18:42:26.919Z","has_unpublished_edits":null,"fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"1580b2fcff4ab1e8","login":"git1984","name":"Loris Mat","avatar_url":"https://avatars-next.observableusercontent.com/49e69ab32567a8fbb22c2864c6ea7876c95e3b1b690b2a8fc59eba055f59db05","tier":"starter_2024"},"version":1367,"publish_version":1367,"role":null,"authored":false,"authors":[{"type":"individual","id":"293d2779fe6dfc96","login":"git1984","name":"Loris Mat","avatar_url":"https://avatars-next.observableusercontent.com/49e69ab32567a8fbb22c2864c6ea7876c95e3b1b690b2a8fc59eba055f59db05","tier":null}],"members":[{"type":"individual","id":"293d2779fe6dfc96","login":"git1984","name":"Loris Mat","avatar_url":"https://avatars-next.observableusercontent.com/49e69ab32567a8fbb22c2864c6ea7876c95e3b1b690b2a8fc59eba055f59db05","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":19,"collection":null,"type":"notebook","body":{"title":"Radial Bar Chart | US unemployment in the Covid-19 downturn","cells":[{"id":0,"value":"md`# Radial Bar Chart | US unemployment in the Covid-19 downturn \n\n*Comparing the unemployment rate in US states: Sept 2019 vs. Sept 2020.* \n\nTo be honest, a dumbbell plot would have probably been easier to understand but sometimes, you might want to create [unnecessary data viz](https://questionsindataviz.com/2020/11/08/why-create-an-unnecessary-data-visualisation/), indeed Neil Richards! In appendix, a visualization from Alex Murrell which inspired me*\n\nRings can be sorted by *state population / % unemployment 2020 / change over the period*\n\n**data ::** \n- [Over-the-year change in unemployment, by state](https://www.bls.gov/web/laus/laumstch.htm), U.S. Bureau of Labor Statistics\n- [Population in US States](https://www.census.gov/data/datasets/time-series/demo/popest/2010s-state-total.html), U.S. Census Bureau \n\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"md`### In the United States,\n\nThe unemployment was 3.5% in Sept. 2019 and reached 7.9% in Sept. 2020. [source](https://data.bls.gov/timeseries/LNS14000000?years_option=all_years) \n\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"viewof options = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"div = {\n const htmlDiv = d3.create(\"div\")\n \n htmlDiv.append(\"g\")\n .selectAll(\"div\")\n .data(data)\n .join(\"div\")\n .attr(\"data-state\", d => `${d.state}`)\n .attr(\"class\", \"title\")\n .style(\"display\" , \"none\")\n .html(d => `In ${d.state} increase of ${d.change} points, from ${d.sept2019}% in 2019 to ${d.sept2020}% in 2020`)\n \n htmlDiv.append(\"g\")\n .attr(\"class\", \"temporary\")\n .style(\"display\" , \"block\")\n .html(d => `You can mouse over the legend or the radial bars`)\n \n return htmlDiv.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"arc = (d, i, dir, year) => d3.arc()\n .innerRadius(paddingScale(i) - 20)\n .outerRadius(paddingScale(i+1) - 20)\n .startAngle(0)\n .endAngle(dir * y(d[year]))()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"y = d3.scaleLinear()\n .domain([0, 20])\n .range([0, -Math.PI])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"paddingScale = d3.scaleLinear()\n .domain([0,data.length+1])\n .range([120,height/2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"legendScale = d3.scaleLinear()\n .domain([0,data.length+1])\n .range([20,height - margin.bottom - 30])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`## Hovering Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"mousemove = (event, d) => { \n d3.select(\".temporary\").style(\"display\", \"none\")\n d3.selectAll(`[data-state]`).attr(\"opacity\", 0.2);\n d3.selectAll(`[data-state=\"${d.state}\"]`).attr(\"opacity\", 1);\n d3.selectAll(`[data-state=\"${d.state}\"]`).style(\"display\", \"block\");\n d3.selectAll(`.state[data-state=\"${d.state}\"]`).attr(\"font-size\", 18);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"mouseleave = () => {\n d3.selectAll(`[data-state]`).attr(\"opacity\", 1);\n d3.selectAll(\".title\").style(\"display\", \"none\");\n d3.selectAll(\".state\").attr(\"font-size\", 10);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`## Inspiration\n\nI got inspired by another radial bar chart from **Alex Murrell** about the European Unemployment, 2011 \n\n

${Object.assign(await FileAttachment(\"alex-murrell-european-unemployment.jpg\").image(), { alt: 'Alex Murrell - European Unemployment', style: 'width: 100%; max-width: 600px;' })}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"md`## Loading Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"data = d3.csvParse(await FileAttachment(\"unemployment.csv\").text(), d3.autoType)\n .sort(function(a,b) {\n return d3.ascending(a[options.order], b[options.order]) \n })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## SVG Structure`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"height = Math.min(width, 1000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"margin = ({top: 20, right: 20, bottom: 130, left: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1233,"value":"md`## Style buttons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"function activateBtn(x) {\n d3.selectAll(\"label\").style(\"background-color\", \"#fff\").style(\"color\", \"#7d7d7d\")\n d3.select(x).style(\"background-color\", \"#7d7d7d\").style(\"color\", \"#fff\")\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"