31:T9ea,chart = (data, title,pattern) => { const texture = pattern const x = d3.scaleBand() .domain(data.map(d=>d.year)) .range([0,2 *Math.PI]) .align(0) const y = d3.scaleRadial() .domain([0,d3.max(data,d=>d.value)]) .range([innerRadius,outerRadius]) const arc = d3.arc() .innerRadius(d=>y(0)) .outerRadius(d=>y(d.value)) .startAngle(d=>x(d.year)) .endAngle(d=>x(d.year)+x.bandwidth()) .padAngle(0.09) .padRadius(innerRadius) const xAxis = g => g .attr("text-anchor", "middle") .call(g => g.selectAll("g") .data(data) .join("g") .attr("transform", d => ` rotate(${((x(d.year) + x.bandwidth() / 2) * 180 / Math.PI - 90)}) translate(${innerRadius},0) `) .call(g => g.append("text") .attr("transform", d => (x(d.year) + x.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI) < Math.PI ? "rotate(90)translate(0,16)" : "rotate(-90)translate(0,-9)") .text(d => d.year))) const svg = d3.select(DOM.svg(width,height)) .style("viewBox",[0,0,width,height]) .style("background-color","#e1d4e3") const g = svg.append("g") .attr("transform",`translate(${width/2},${height/2+5})`) g.call(xAxis); g.call(texture) g.append("g") .selectAll("path") .data(data) .join("path") .attr("d",arc) .style("fill",texture.url()) .style("stroke","black") .style("stroke-width",1.7) g.append("g") .selectAll("g") .data(data) .enter() .append("g") .attr("text-anchor", function(d) { return (x(d.year) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "end" : "start"; }) .attr("transform", function(d) { return "rotate(" + ((x(d.year) + x.bandwidth() / 2) * 180 / Math.PI - 90) + ")"+"translate(" + (y(d.value)+10) + ",0)"; }) .append("text") .text(function(d){return("£ "+format(d.value))}) .attr("transform", function(d) { return (x(d.year) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)"; }) .style("font-size", "12px") .style("font-weight","bold") .attr("alignment-baseline", "middle") svg.append("text") .attr("x",width/2) .attr("y",height/2+20) .attr("text-anchor","middle") .style("font-size","1.8em") .text(title) return svg.node() }32:T7f3,t = [textures.lines().size(5) .orientation("vertical") .strokeWidth(2) .background("none") .stroke("purple"), textures.lines().thicker() .orientation("vertical") .size(5) .strokeWidth(2.5) .stroke("darkorange"), textures.paths().d("hexagons").size(8) .background("none") .stroke("purple").strokeWidth(1.5) .fill("cyan"), textures.circles() .strokeWidth(1) .stroke("lightgray") .radius(8) .complement() .fill("firebrick"), textures.circles() .radius(25) .lighter() .stroke("orange") .strokeWidth(5) .fill("gold"), textures.paths().d("woven").size(30) .stroke("purple").strokeWidth(1.5).background("#FFDFD3"), textures.lines() .orientation("diagonal") .size(30) .background("firebrick") .stroke("#D2C3D8") .strokeWidth(7), textures.lines() .orientation("3/8","7/8") .background("orange") .stroke("white").strokeWidth(2), textures.paths().d("squares").size(12) .background("transparent") .stroke("brown").strokeWidth(2) .fill("white"), textures.circles() .size(12) .radius(4) .background("black") .stroke("orange") .strokeWidth(1) .fill("black") .complement(), textures.paths().d("waves").size(20) .background("#FFDFD3") .stroke("white").strokeWidth(2.5) .fill("none"), textures.paths() .d("woven") .fill("black") .lighter() .thicker() .stroke("red")]33:[{"id":"54c1c4154bbd199ed534effdc0c69adc3d414644e4e3f6c041f223a0233023fbbf49482eb473da160e308f9fe0452c261723c0e16bf84aa5b94e2e43ebb0a441","href":"https://static.observableusercontent.com/files/54c1c4154bbd199ed534effdc0c69adc3d414644e4e3f6c041f223a0233023fbbf49482eb473da160e308f9fe0452c261723c0e16bf84aa5b94e2e43ebb0a441","name":"data.csv","type":"text/csv","lastModified":1618207835571.973,"size":13818}] 2f:{"title":"Value of Merchandise and Treasure exported from British India. 1849-1865","cells":[{"id":0,"value":"html`

Value of Merchandise and Treasure exported from British India.
1849-1865

Week 2:Distributions. Day 11:Circular.

#30daychartchallenge

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"html`

Data Credit:\nDigital South Asia Library.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"chart(group.get(\"Silk, Raw\"),\"Raw Silk\",t[11])","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"chart(group.get(\"Shawls, Cashmero\"),\"Cashmere\",t[10])","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"chart(group.get(\"Spices, of all Sorts\"),\"Spices\",t[9])","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"chart(group.get(\"Opium\"),\"Opium\",t[2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"chart(group.get(\"Coffee\"),\"Coffee\",t[8])","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"chart(group.get(\"Cotton, Raw\"),\"Raw Cotton\", t[7])","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"chart(group.get(\"Treasure\"),\"Treasure\",t[4])","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"chart(group.get(\"Jewellery and Precious Stones\"),\"Jewellery\",t[3])","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"chart(group.get(\"Tea\"),\"Tea\",t[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"chart(group.get(\"Ivory and Ivory Ware\"),\"Ivory\",t[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"format = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"outerRadius = 280","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"innerRadius = 130","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"margin = ({top: 30, right: 80, bottom: 30, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"height = 750","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"group = d3.group(data,d=>d.article)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment(\"data.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"textures = require('textures@1.2.0/dist/textures.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}