32:T10cc,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) 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", "header") .attr('x', xLabelPadding ) .attr('y', (d, i) => -getOuterRadius(i) + yLabelPadding -90 +i*10) .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,i) => i==0 ? "years "+ numberFormat(d.mean):numberFormat(d.mean)) radialAxis .append('text') .attr('x', xLabelPadding-85) .attr('y', (d, i) => -getInnerRadius(i) + yLabelPadding) .attr("class", "arc_label") .text((d, i) => i == 0 ? d.colpower +" ("+d.size+") " + " -- " : d.colpower +" ("+d.size+") " + " --") const arcsPlus = g .append('g') .attr('class', 'data') .selectAll('path') .data(data) .enter().append('path') .attr('class', 'arc') .attr('opacity', 0.3) .attr('stroke', 'black') .attr('stroke-width',1) .style('fill', (d, i) => color(d.medianVIOLTOT)) arcsPlus.transition() .delay((d, i) => i * 200) .duration(1000) .attrTween('d', arcTweenPlus) const arcsMean = g .append('g') .attr('class', 'data') .selectAll('path') .data(data) .enter().append('path') .attr('class', 'arc') .attr('opacity', 1) .attr('stroke', 'black') .attr('stroke-width',1) //.style('fill', (d, i) => color(Math.sqrt(d.sum))) .style('fill', (d, i) => color(d.medianVIOLTOT)) arcsMean.transition() .delay((d, i) => i * 200) .duration(1000) .attrTween('d', arcTweenMean) const arcsMinus = g .append('g') .attr('class', 'data') .selectAll('path') .data(data) .enter().append('path') .attr('class', 'arc') .attr('opacity', 0.2) .attr('stroke', 'black') .attr('stroke-width',1) .style('fill', backgroundColor)//(d, i) => color(d.medianVIOLTOT)) arcsMinus.transition() .delay((d, i) => i * 200) .duration(1000) .attrTween('d', arcTweenMinus) // render legend //const legendWidth = (Math.sqrt(d3.max(data, d => d.sum)) - (Math.sqrt(d3.min(data, d => d.sum)))/300 let legendWidth = 42; const xcol = d3.scaleLinear() .domain(color.domain()) .rangeRound([0, legendWidth]); const legend = svg.append("g") //.style("font-size", "2rem") //.style("font-family", "sans-serif") .attr("transform", "translate("+3*(width-margin.left)/4+","+(height-50)+")"); const label = legend.append("text") .attr("y", -15) //.attr("font-weight", "bold") .attr("class", "title") .text("Median Violance during Colonizations"); const scale = legend.append("g") //Math.sqrt(d3.min(data, d => d.sum)), Math.sqrt(d3.max(data, d => d.sum)) scale.selectAll("rect") .data(d3.range(1, 7, 1)) .enter().append("rect") .attr("height", 10) .attr("x", d => xcol(d)) //.attr('y', height) .attr("width", legendWidth) .attr("fill", d => color(d)); scale.call( d3.axisBottom(xcol) .tickSize(0) .tickFormat(v => numberFormat(v)) //.tickFormat(v => v*v )//> 5 ? `${Math.round(v / (1 - v))}:1` : `1:${Math.round((1 - v) / v)}`) .tickValues([ 1,2,3,4,5,6]) ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick text") .attr("class", "legend_label") .attr("x", legendWidth) .attr("y", 20) ) //.select(".domain") // .remove(); //dataset g .append("text") .attr("class", "legend_data") .attr('x', 20 -width/2) .attr('y',520) .text("Data: Measuring The Impacts Of Colonialism: A New Data Set For The Countries Of Africa And Asia | @terezaif") return svg.node() }33:T466,md ` Data from [Measuring The Impacts Of Colonialism: A New Data Set For The Countries Of Africa And Asia](https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/83RA7W) [Python script](https://github.com/terezaif/30DayChartChallenge_Collection2021/blob/main/code/colonialism.py) for calculating the aggreregated data. Chart addapted from Kelly Tall's radial chart done for tidy_tuesday as is a celebration of the work of W.E.B Du Bois. Anthony 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?. Du Bois original chart is below:`34:[] 30:{"title":"Years of Colonialism in Africa and Asia - Du Bois Radial Chart","cells":[{"id":0,"value":"md`# Years of Colonialism in Africa and Asia - Du Bois Radial Chart\n\nThe gradations on the chart represent mean and one deviation from the mean of years of colonizatition by each colonizing country.\n\nIt is not clear from the [Journal](https://www.researchgate.net/publication/314156755_Measuring_the_Impacts_of_Colonialism_A_New_Data_Set_for_the_Countries_of_Africa_and_Asia) what 'x' stands for.. from searching I presumed that it represents colonies that were not fully colonies.\n\nThe violance score for colonization ranges from 1 to 6, but the median goes only up to 5.\n\nDay 29 of [30DayChartChallenge](https://twitter.com/30DayChartChall) - *deviations* uncertainties\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"image","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"data = csv[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"csv=Promise.all([\"https://raw.githubusercontent.com/terezaif/30DayChartChallenge_Collection2021/main/datasets/colonialism.csv\"].map(file => d3.csv(file, d3.autoType)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"keys = data.map((d, i) => d.colpower)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"numArcs = keys.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"arcWidth = (chartRadius - arcMinRadius - numArcs * arcPadding) / numArcs","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"scale = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.mean_w) * 1.1])\n .range([0, 2 * PI])","pinned":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"function getInnerRadius(index) {\n return arcMinRadius + (numArcs - (index + 1)) * (arcWidth + arcPadding);\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"function getOuterRadius(index) {\n return getInnerRadius(index) + arcWidth;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"function rad2deg(angle) {\n return angle * 180 / PI;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"function arcTweenMean(d, i) {\n let interpolate = d3.interpolate(0, d.mean);\n return t => arc(interpolate(t), i);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"function arcTweenMax(d, i) {\n let interpolate = d3.interpolate(0, d.max);\n return t => arc(interpolate(t), i);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"function arcTweenPlus(d, i) {\n let interpolate = d3.interpolate(0, d.mean_w);\n return t => arc(interpolate(t), i);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"function arcTweenMinus(d, i) {\n let interpolate = d3.interpolate(0, d.mean_wo);\n return t => arc(interpolate(t), i);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"function arcTweenMin(d, i) {\n let interpolate = d3.interpolate(0, d.min);\n return t => arc(interpolate(t), i);\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"arcMinRadius = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"xLabelPadding = -15","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"arcPadding = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"yLabelPadding = -6","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"numberFormat = d3.format(\".0f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"chartRadius = height/2 - 80","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"chartTopPadding = 70;","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"margin = ({top: 10, right: 0, bottom: 100, left: 200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"violence = [1,2,3,4,5,6]","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"color = d3.scaleOrdinal().domain(violence).range([\"#d8c7b3\",\"#ecb025\",\"#eaafa6\", \"#9da0b0\", \"#dc354a\", \"black\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"backgroundColor = '#F4E6D6'","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"headingData = [\n \"Deviations of #YEARs OF COLONIZATION BY COUNTRY\",\n \"Showing number of colonies and the average years\",\"color by violence score\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"PI = Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"import {image} from \"@kellytall/day-three-radial-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}