31:T62e,md`# Day Three: Radial Chart Working towards this weeks tidy_tuesday which is a celebration of the work of W.E.B Du Bois. Need to have a longer look at a piece written by Anthony Starks about Dboius' style - link below. There is some great links this week on the tidy-tuesday page. Very grateful for many speakers at outlier mentioning this as a great exercsise to take part in each week. Very grateful for this Block by Anton Orlov that helped me form the foundation for the chart that I'm working towards, which is an iconic visualsation. I thought I'd use the @tomshanley/cheysson-color-palettes, as they have a lovely textures. Bookmarks: 1. What is a Dubois-style visualization? by Anthony Starks 2. Recreating W.E.B Du Bois’s Data Portraits by by Anthony Starks. 2. Classic Map Color Design: Recreating palettes from the Albums de Statistique Graphique. by RJ Andrews `32:T630,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) const g = svg .attr("height", height) .append('g') .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')') const radialAxis = g .append('g') .attr('class', 'r axis') .selectAll('g') .data(data) .enter() .append('g') radialAxis .append('circle') .attr('r', (d, i) => getOuterRadius(i) + arcPadding) .attr("fill", "white") .attr("stroke", "black") radialAxis .append('text') .attr('x', labelPadding) .attr('y', (d, i) => -getOuterRadius(i) + arcPadding) .text(d => d.year) const axialAxis = g .append('g') .attr('class', 'a axis') .selectAll('g') .data(ticks) .enter() .append('g') .attr('transform', d => 'rotate(' + (rad2deg(scale(d)) - 90) + ')') .attr("stroke", "black") axialAxis .append('line') .attr('x2', chartRadius) axialAxis .append('text') .attr('x', chartRadius + 10) .style('text-anchor', d => (scale(d) >= PI && scale(d) < 2 * PI ? 'end' : null)) .attr('transform', d => 'rotate(' + (90 - rad2deg(scale(d))) + ',' + (chartRadius + 10) + ',0)') .text(d => d) 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() }33:[{"id":"2aea67b42c19f3db67f519577786b2bc291187dcdf01b0ed910562a2913654d2c701d71bd10f79684bfba4ec164ab994d13e868ed069e6f053aa756b4d6ff3cb","href":"https://static.observableusercontent.com/files/2aea67b42c19f3db67f519577786b2bc291187dcdf01b0ed910562a2913654d2c701d71bd10f79684bfba4ec164ab994d13e868ed069e6f053aa756b4d6ff3cb","name":"original-plate-25.jpg","type":"image/jpeg","lastModified":1613465662558.681,"size":212623},{"id":"33c68ef9ee79190aaa53b1a8be94b14dbd139e68644f31f40318443d9fc24ca3cd4599ba7abeee85e6d83e051b7fe473b020022c6c3f5d6303261e8b27a35fa4","href":"https://static.observableusercontent.com/files/33c68ef9ee79190aaa53b1a8be94b14dbd139e68644f31f40318443d9fc24ca3cd4599ba7abeee85e6d83e051b7fe473b020022c6c3f5d6303261e8b27a35fa4","name":"furniture@1.csv","type":"text/csv","lastModified":1613445919426.216,"size":85}] 2f:{"title":"Day Three: Radial Chart","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"FileAttachment(\"furniture@1.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"data = {\n const text = await FileAttachment(\"furniture@1.csv\").text();\n\n return d3.csvParse(text, ({year, value }) => ({\n year: year,\n value: +value\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`Below is an image of the original work by DuBois. As you can see A LOT of work is still needed styling, plus I wonder how to do the extra scrolling/curving so you get a proper sense of the length of 1899 compared to the other years. At the moment it's short and squat - DuBois' version is MUCH clearer. I will try and play around with some of the parametres tomorrow and see what I can manage `","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"image = FileAttachment(\"original-plate-25.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"ticks = scale.ticks(numTicks).slice(0, -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"keys = data.map((d, i) => d.year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"numArcs = keys.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"// arcWidth=80\n\narcWidth = (chartRadius - arcMinRadius - numArcs * arcPadding) / numArcs","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"scale = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value) * 1.1])\n .range([0, 2 * PI])","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"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":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"function getInnerRadius(index) {\n return arcMinRadius + (numArcs - (index + 1)) * (arcWidth + arcPadding);\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"function getOuterRadius(index) {\n return getInnerRadius(index) + arcWidth;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"function rad2deg(angle) {\n return angle * 180 / PI;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"function arcTween(d, i) {\n let interpolate = d3.interpolate(0, d.value);\n return t => arc(interpolate(t), i);\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"PI = Math.PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"arcMinRadius = 40","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"arcPadding = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"labelPadding = -5","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"numTicks = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"chartRadius = height/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"import {margin} from '@kellytall/day-one-a-line-chart'","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}