21:null 22:["$","title",null,{"children":"Day four: Radial Chart with Styling | Antoine Faché | Observable"}] 27:T5be, chart2 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width*2, height*2]) const g = svg .attr("height", height - margin.top - margin.bottom) .attr("width", width - margin.left - margin.right) .append('g') .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')') const chartHeading = g .selectAll(".title") .data(headingData) .enter() .append("text") .attr("class", "title") .attr('x', xLabelPadding ) .attr('y', (d, i) => -getOuterRadius(i) + yLabelPadding -100) .text(d => d) const radialAxis = g .append('g') .attr('class', 'r axis') .selectAll('g') .data(data) .enter() .append('g') radialAxis .append('text') .attr('x', xLabelPadding) .attr('y', (d, i) => -getInnerRadius(i) + yLabelPadding) .attr("class", "arc_label") .text(d => currency(d.value)) radialAxis .append('text') .attr('x', xLabelPadding-70) .attr('y', (d, i) => -getInnerRadius(i) + yLabelPadding) .attr("class", "arc_label") .text(d => d.year + "--") const arcs = g .append('g') .attr('class', 'data') .selectAll('path') .data(data) .enter().append('path') .attr('class', 'arc') .style('fill', (d, i) => color(i)) arcs.transition() .delay((d, i) => i * 200) .duration(1000) .attrTween('d', arcTween) return svg.node() }28:[] 25:{"id":"524cb29f32208021","slug":"day-four-radial-chart-with-styling/2","title":"Day four: Radial Chart with Styling","thumbnail":"68b4e096499bdff4eb9f8c669a79aaaa0cdd3eb414edfda317c2172de7cf3988","access_level":"public","create_time":"$D2022-01-28T14:39:21.129Z","update_time":"$D2022-01-28T14:57:17.639Z","view_time":null,"first_public_time":"$D2022-01-28T14:47:24.991Z","has_unpublished_edits":null,"fork":{"id":"d7c7e6b2d8bf5a1b","slug":"day-four-radial-chart-with-styling","title":"Day four: Radial Chart with Styling","owner":{"id":"ab5c695e0d9f5ed0","login":"anthonyzornig","name":"Antoine Faché"}},"stars":4,"starred":false,"owner":{"type":"team","id":"ab5c695e0d9f5ed0","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":"starter_2024"},"version":495,"publish_version":495,"role":null,"authored":false,"authors":[{"type":"individual","id":"a6dae7277d3d666a","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":null}],"members":[{"type":"individual","id":"a6dae7277d3d666a","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Day four: Radial Chart with Styling","cells":[{"id":0,"value":"md`# Day four: Radial Chart with Styling\n\nTaking what I did yesterday here and adding some styling!\n\nWorking towards this weeks tidy_tuesday which is a celebration of the work of W.E.B Du Bois. \n\nAnthony Starks has shared a thread on twitter with the orginal plates, colour palettes as well as the aspect ratio of the original visualsations. (Good reference is also Starks' style guide he has shared on github What is a Dubois-style visualization?.\n\nSo my first port of call was to fix up the size and aspect ratio of the chart.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md `Du Bois original chart is below: I still need to work out the spiral. I'm hoping I get a bit of time later this week to have a play around (but if anyone can point me in the right direction I'm happy to be directed!)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"image","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"tweet(\"1361712402685952014\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"md `I removed the arc lines and removed all the pading between the arcs themselves. Then I played around with minimum arc radius until I got somethign that looked OK. I had seen earlier in the day a beautiful version of this chart by @ijeamaka_a and they had shared their R code on github. They have done the beautiful \"swirl / spiral\" so I may give that a go later in the week. I used the same colour palette as they shared in their code. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"tweet(\"1361715338027560962\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"md`I added in text labels for each of the years. I attached the labels to the radial axis, not the arcs themselves so it was easy to align them and all I had to so was play around with the x positioning, and style them up in CSS.

My next challenge was adding the heading. I'm used to creating charts outside of the Observable environment so this was a bit of a challenge. I had a look around Observable for other people who had created work celebrating W.E.B. Du Bois to see how they had handled the headings, and came across some charts created by Patrick Star (an example below). Their method was to create the heading as an array, and insert it that way, so that's what I did too! I quite liked the typeface they used as well (Jura), so...I used that as well. Copy copy copy - that's all I do ... `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"md`I've enjoyed following the #TidyTuesday and #DuBoisChallenge hashtags on twitter. So many beautiful interpretations have been created already. I've also enjoyed learning more about W.E.B. Du Bois, so I have ordered \"Data Portraits: Visualizing Black America\" and it's on it's way. I'm hoping to re-create some more of Du Bois' charts this week. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"md `I know a little about US history, but not a lot, so wanted to put the dates of the chart I did in context. The 13th amendment was passed at the end of 1865, so the value of household and kitchen furniture owned by Black Americans in Georgia ten years later was just over $21K. I used an inflation calculator that tells me this was worth $503K today. This was also at the end of the Reconstruction period. By the time we get to 1899 the value rises to $1.43 million or $34.12 million in today's money. I'm curious what happened in the five year periods - from what I understand post Restoration was the Jim Crow era. The ten years post slavery saw a very small growth in ownership of household items, but the next five years this grew over twenty times. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"import {chart} from \"@pjsier/w-e-b-du-bois-number-of-negro-students-taking-the-various-cour\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"keys = data.map((d, i) => d.year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"vegalite = require('@observablehq/vega-lite')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"vegalite({\n data: { values: alphabet },\n mark: \"bar\",\n autosize: \"fit\",\n encoding: {\n x: {\n field: \"letter\",\n type: \"ordinal\"\n },\n y: {\n field: \"frequency\",\n type: \"quantitative\"\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"numArcs = keys.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"arcWidth = (chartRadius - arcMinRadius - numArcs * arcPadding) / numArcs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"scale = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value) * 1.1])\n .range([0, 2 * PI])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"arc = d3.arc()\n .innerRadius((d, i) => getInnerRadius(i))\n .outerRadius((d, i) => getOuterRadius(i))\n .startAngle(0)\n .endAngle((d, i) => scale(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"function getInnerRadius(index) {\n return arcMinRadius + (numArcs - (index + 1)) * (arcWidth + arcPadding);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"function getOuterRadius(index) {\n return getInnerRadius(index) + arcWidth;\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"function rad2deg(angle) {\n return angle * 180 / PI;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"function arcTween(d, i) {\n let interpolate = d3.interpolate(0, d.value);\n return t => arc(interpolate(t), i);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"arcMinRadius = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"xLabelPadding = -15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"arcPadding = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"yLabelPadding = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"currency = d3.format(\"$,\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"chartRadius = height/2 - 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"chartTopPadding = 50;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"margin = ({top: 50, right: 50, bottom: 20, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"color = d3.scaleOrdinal()\n.domain(keys)\n.range([\"#eaafa6\", \"#9da0b0\", \"#c4a58f\", \"#ecb025\", \"#d8c7b3\", \"#dc354a\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"headingData = [\n \"ASSESSED VALUE OF HOUSEHOLD AND KITCHEN FURNITURE\",\n \"OWNED BY GEORGIA NEGROES.\",]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {data, PI, d3, image} from \"@kellytall/day-three-radial-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"//import {tweet} from \"@mbostock/tweet\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W28","stdlib":"1","titling":"auto"}} 26:"$25:body"