31:T8f8,chart = { const svg = d3.select(DOM.svg(width,height)) .style("background-color","#17036a") .attr("viewBox",[0,0,width+200,height]) svg.append("text") .attr("x",width/2+100) .attr("y",-50) .text("Total value of all exports (including Treasure) from British India, by sea, to other countries. (1861-1865)") .style("text-wrap",300) .style("text-anchor","middle") .style("font-weight","bold") .style("font-size","1.4em") .style("fill","orange") svg.append("g") .call(yAxis).style("stroke","orange").style("color","orange").style("font-size","15px") .call(g => g.select(".domain").remove()) const circle = svg.append("g").attr("transform","translate(150,260)").selectAll("circle") .data(data) .join("circle") .attr("fill","orange") .attr("stroke","black") .attr("stroke-width",2) .attr("r",d=>scaleRadius(d.value)) const simulation = d3.forceSimulation() .force("x",d3.forceX(d=>x(d.country)).strength(25)) .force("y",d3.forceY(d=>y(d.year)).strength(10)) .force("charge",d3.forceManyBody().strength(1)) .force("collide",d3.forceCollide().strength(30)) .alpha(0.05) simulation.nodes(data) .on("tick",d=>circle.attr("cx",d=>d.x) .attr("cy",d=>d.y)) .on("end",tooltip) function tooltip(d){ let labels = data.filter(d=>d.value>300000).map((d,i)=>{ return{ x:d.x, y:d.y, dx:0, dy:i%2==0?-45:-120, color:"orange", note:{ title:d.country, label:"£ "+format(d.value), } } }) console.log(labels) const type = d3.annotationCustomType( d3.annotationCalloutElbow, {"className":"custom", "connector":{"end":"dot"}, "note":{"lineType":"horizontal", "align":"middle"}}) let makeAnnot = d3.annotation() .editMode(true) .type(type) .textWrap(90) .annotations(labels) svg.append("g").attr("transform","translate(150,260)").call(makeAnnot); }; return svg.node() }32:[{"id":"3450dccb752152da34c39a911b9d022048cc51353105a3d1988a437c62068075b2ff67008add6a3c7d2e563ab071e75a1d9ef38a76422ffb0d5d75e017ba8d13","href":"https://static.observableusercontent.com/files/3450dccb752152da34c39a911b9d022048cc51353105a3d1988a437c62068075b2ff67008add6a3c7d2e563ab071e75a1d9ef38a76422ffb0d5d75e017ba8d13","name":"statisticalAbstract.csv","type":"text/csv","lastModified":1618087156510.647,"size":4387}] 2f:{"title":"Statistical Abstract Relating to British India","cells":[{"id":0,"value":"html`

Statistical Abstract Relating to British India

Week 2:Distributions. Day 10:Abstract.

#30daychartchallenge
The British\nadministration required the Provincial Governments to publish relevant statistics in\ntheir annual administration reports.These statistics covered a wide range of subjects. The forms for this information were later made\nuniform, and the first Statistical Abstract of British India (1840‐1865) was based on such\ninformation provided by the Provinces.

The below visualization is TOTAL VALUE of all EXPORTS (including TREASURE) from BRITISH INDIA, by SEA, in each Year ended 30th April; distinguishing the Countries whither sent.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"html`

Data Credit:\nDigital South Asia Library.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"DOM.download(() => rasterize(chart), undefined, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"format = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"scaleRadius = d3.scaleSqrt()\n .domain(d3.extent(data,d=>d.value))\n .range([2,40])","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"yAxis = g => g.attr(\"transform\",`translate(${margin.left},120)`)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"y = d3.scaleBand()\n .domain(data.map(d=>d.year))\n .range([height-margin.bottom,margin.top-20]) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"xAxis = g => g.attr(\"transform\",`translate(0,${height-margin.right})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"x = d3.scaleBand()\n .domain(data.map(d=>d.country))\n .range([margin.right,width-margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"margin = ({top: 30, right: 10, bottom: 30, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"height = 1500","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"data = FileAttachment(\"statisticalAbstract.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@6', \"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}