30:Ta62,{ const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); for(let i=0; i < dummyData.length; i++){ svg .append('g') .selectAll("ellipse") // .data(dummyData[i]) .data(desiredData[i]) .join("ellipse") .attr("cx", 0) .attr("cy", 0) .attr("ry", d => rScale(d.deaths)) .attr("rx", d => rScale(d.deaths)/2) .attr("class", "rotate") .attr("fill", d => colorByContinent3(d.region)) .attr("stroke", "white") .attr("stroke-width", strokeWidth) .attr('transform', function(d, i) { var rx = Math.cos(xcos_(i)) * outerRadius_; var ry = Math.sin(ysin_(i)) * outerRadius_; return `translate(${rx},${ry}) rotate(${xcos_(i) * 180 /Math.PI + 90}) scale(${0.8})`; }) } // svg // .selectAll("ellipse") // //.data(sampleData) // .data(dummyData[0]) // .join("ellipse") // .attr("cx", 0) // .attr("cy", 0) // .attr("ry", d => rScale(d.deaths)) // .attr("rx", d => rScale(d.deaths)/2) // .attr("class", "rotate") // .attr("fill", d => color(d)) // // .attr("fill", 'black') // .attr('transform', function(d, i) { // var rx = Math.cos(xcos_(i)) * outerRadius_; // var ry = Math.sin(ysin_(i)) * outerRadius_; // return `translate(${rx},${ry}) // rotate(${xcos_(i) * 180 /Math.PI + 90}) // scale(${0.8})`; // }) // svg // .selectAll("ellipse") // //.data(sampleData) // .data(dummyData) // .join("ellipse") // .attr("cx", 0) // .attr("cy", 0) // .attr("ry", d => rScale(d.deaths)) // .attr("rx", d => rScale(d.deaths)/2) // .attr("class", "rotate") // .attr("fill", d => color(d)) // // .attr("fill", 'black') // .attr('transform', function(d, i) { // var rx = Math.cos(xcos_(i)) * outerRadius_; // var ry = Math.sin(ysin_(i)) * outerRadius_; // return `translate(${rx},${ry}) // rotate(${xcos_(i) * 180 /Math.PI + 90}) // scale(${0.8})`; // }) // svg // .selectAll("ellipse2") // .data(data2) // .join("ellipse") // .attr("cx", 0) // .attr("cy", 0) // .attr("ry", d => d* 10 + 10) // .attr("rx", d => d* 2 + 10) // .attr("class", "rotate") // .attr("fill", d => color(d)) // .attr('transform', function(d, i) { // var rx = Math.cos(xcos_(i)) * outerRadius_; // var ry = Math.sin(ysin_(i)) * outerRadius_; // return `translate(${rx},${ry}) // rotate(${xcos_(i) * 180 /Math.PI + 90}) // scale(${1})`; // }) return svg.node() }31:[{"id":"060df635694799ed61347b195832991065fa526eb622f724caf07961fe29469d8d590c3631b5295f70c0c4c854007486611d7b032fbfaea772fea849ec7d41f0","href":"https://static.observableusercontent.com/files/060df635694799ed61347b195832991065fa526eb622f724caf07961fe29469d8d590c3631b5295f70c0c4c854007486611d7b032fbfaea772fea849ec7d41f0","name":"container.json","type":"application/json","lastModified":1631287506324.769,"size":524}] 2e:{"title":"Sympathy flowers","cells":[{"id":0,"value":"# Sympathy flowers","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"### Visual variables\n- petal = region\n- size = death toll\n- absolute count vs relative to population (per 100k)?","pinned":false,"hidden":false,"mode":"md"},{"id":525,"value":"### TODO \n\n✅ add more dummy data to test the stacking effect\n\n🔜 data processing for weekly summary by region\n\n⬜ layout\n\n⬜ Animation ","pinned":false,"hidden":false,"mode":"md"},{"id":774,"value":"import {desiredData} from \"@spepechen/dataprep\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"desiredData","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"data2 = [1, 3, 5, 6, 7, 8, 4]","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"numberOfFlowers = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"//opacity = 0.06\nopacity = 0.06","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"strokeWidth = 0.2","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"Need to manually rerun the below cell after changes **numberOfFlowers**","pinned":false,"hidden":false,"mode":"md"},{"id":772,"value":"dummyData","pinned":true,"hidden":false,"mode":"ojs"},{"id":789,"value":"// sin cos\nmagicNumber = 2.7","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"//outerRadius_ = 160\nouterRadius_ = 180","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"rScaleNum = 3.8","pinned":true,"hidden":false,"mode":"ojs"},{"id":833,"value":"regions = desiredData[0].map(d=>d.region)","pinned":true,"hidden":false,"mode":"ojs"},{"id":862,"value":"function opacity1(a) {\n a.opacity = 1\n return a\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"regions","pinned":true,"hidden":false,"mode":"ojs"},{"id":840,"value":"function colorByContinent3(expr, op){\n var c = d3.schemePastel1.map(d => opacityTweak(d,op))\n switch (expr) {\n case regions[0]:\n return c[0]\n break;\n case regions[1]:\n return c[1]\n break;\n case regions[2]:\n return c[2]\n break;\n case regions[3]:\n return c[3]\n break;\n case regions[4]:\n return c[4]\n break;\n case regions[5]:\n return c[5]\n break;\n return c[6]\n }}","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":831,"value":"{\n return html`

\n ${regions\n .map(\n c => ` ${c} `\n )\n .join(\"\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"weekly deaths","pinned":false,"hidden":false,"mode":"md"},{"id":887,"value":"viewof i = Scrubber(Array.from({length: desiredData.length}, (_, i) => i), {delay: 100}, {autoplay: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":915,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n\n svg\n .append('g')\n .selectAll(\"ellipse\")\n .data(desiredData[i])\n\n .join(\"ellipse\")\n .attr(\"cx\", 0)\n .attr(\"cy\", 0)\n .attr(\"ry\", d => rScale(d.deaths))\n .attr(\"rx\", d => rScale(d.deaths)/2)\n .attr(\"class\", \"rotate\")\n .attr(\"fill\", d => colorByContinent3(d.region, 0.6))\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", strokeWidth)\n .attr('transform', function(d, i) {\n var rx = Math.cos(xcos_(i)) * outerRadius_;\n var ry = Math.sin(ysin_(i)) * outerRadius_;\n return `translate(${rx},${ry})\n rotate(${xcos_(i) * 180 /Math.PI + 90})\n scale(${0.8})`;\n })\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":921,"value":"arr__ = [[0], [0,1], [0,1,2]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":938,"value":"arr_sample = [[50], [50,51], [50,51,52]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":947,"value":"arrCreator(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":987,"value":"arr = arrCreator(desiredData.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1000,"value":"desiredData.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":942,"value":"function arrInner(n) {\n let inner= []\n for(let i=0; i < n; i++){\n inner.push(i)\n } \n return inner\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":968,"value":"function arrCreator(n) {\n let outer= []\n for(let i=0; n >= i; i++){\n outer.push(arrInner(i))\n } \n return outer.splice(1, outer.length - 1) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1006,"value":"## Stacking (petals stay)","pinned":false,"hidden":false,"mode":"md"},{"id":1019,"value":"{\n return html`

\n ${regions\n .map(\n c => ` ${c} `\n )\n .join(\"\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1003,"value":"viewof s = Scrubber(Array.from({length: desiredData.length}, (_, s) => s), {delay: 50}, {autoplay: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n\n // for(let i=0; i < arr.length; i++){\n for(let j=0; j < arr[s].length; j++){\n svg\n .append('g')\n .selectAll(\"ellipse\")\n .data(desiredData[arr[s][j]])\n .join(\"ellipse\")\n .attr(\"cx\", 0)\n .attr(\"cy\", 0)\n .attr(\"ry\", d => rScale(d.deaths))\n .attr(\"rx\", d => rScale(d.deaths)/2)\n .attr(\"class\", \"rotate\")\n .attr(\"fill\", d => colorByContinent3(d.region, 0.06))\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", strokeWidth)\n .attr('transform', function(d, i) {\n var rx = Math.cos(xcos_(i)) * outerRadius_;\n var ry = Math.sin(ysin_(i)) * outerRadius_;\n return `translate(${rx},${ry})\n rotate(${xcos_(i) * 180 /Math.PI + 90})\n scale(${0.8})`;\n })\n }\n // }\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1025,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n\n for(let i=0; i < dummyData.length; i++){\n svg\n .append('g')\n .selectAll(\"ellipse\")\n // .data(dummyData[i])\n .data(desiredData[i])\n\n .join(\"ellipse\")\n .attr(\"cx\", 0)\n .attr(\"cy\", 0)\n .attr(\"ry\", d => rScale(d.deaths))\n .attr(\"rx\", d => rScale(d.deaths)/2)\n .attr(\"class\", \"rotate\")\n .attr(\"fill\", d => colorByContinent3(d.region, 0.1))\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", strokeWidth)\n .attr('transform', function(d, i) {\n var rx = Math.cos(xcos_(i)) * outerRadius_;\n var ry = Math.sin(ysin_(i)) * outerRadius_;\n return `translate(${rx},${ry})\n rotate(${xcos_(i) * 180 /Math.PI + 90})\n scale(${0.8})`;\n })\n }\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"dummyData = new Array(numberOfFlowers)","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"{\n for(let i=0; i< dummyData.length; i++){\n let r = [\n {region: \"Oceania\"}, \n {region: \"Central America and the Caribbean\"}, \n {region: \"South America\"}, \n {region: \"Sub-saharan Africa\"}, \n {region: \"Northern Africa & Middle East\"}, \n {region: \"North America\"}, \n {region: \"Europe\"}, \n {region: \"Asia\"}, \n ]\n r.forEach(element => {element.deaths = Math.floor((Math.random()*5000 ) + 1)})\n dummyData[i] = r;\n}\n return dummyData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"dummyData","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"sampleData = FileAttachment(\"container.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"sampleData.map( d => parseInt(d.deaths))","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"https://stackoverflow.com/questions/46443710/placing-elements-on-circle-line-and-rotating-them-towards-the-center-using-d3-js","pinned":true,"hidden":false,"mode":"md"},{"id":261,"value":"xcos_ = d3.scaleLinear()\n .domain([0, sampleData.length])\n .range([Math.PI * 0, Math.PI * magicNumber]);\n //.range([Math.PI * 0, Math.PI * 1.98]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":" ysin_= d3.scaleLinear()\n .domain([0, sampleData.length])\n .range([Math.PI * 0, Math.PI * magicNumber]);\n //.range([Math.PI * 0, Math.PI * 1.98]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"//outerRadius_ = 160\n// outerRadius_ = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"rScale(4000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"rScale= d3.scaleLog()\n .domain([minDeaths, maxDeaths])\n .range([0, height / rScaleNum])","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"minDeaths = parseInt(sampleDataSorted[0].deaths)","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"maxDeaths = parseInt(sampleDataSorted[sampleDataSorted.length -1].deaths)","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"sampleDataSorted = sampleData.sort(function(a, b) {\n return a.deaths - b.deaths;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"data = d3.range(7)","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"### Manipulating colors","pinned":false,"hidden":false,"mode":"md"},{"id":676,"value":"d3.schemePastel1.map(d => opacityTweak(d,opacity))","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"function colorByContinent2(expr){\n var c = d3.schemePastel1.map(d => opacityTweak(d,opacity))\n switch (expr) {\n case 'Asia':\n return c[0]\n break;\n case 'Europe':\n return c[1]\n break;\n case 'North America':\n return c[2]\n break;\n case 'Northern Africa & Middle East':\n return c[3]\n break;\n case 'Sub-saharan Africa':\n return c[4]\n break;\n case 'South America':\n return c[5]\n break;\n case 'Central America and the Caribbean':\n return c[6]\n break;\n case 'Oceania':\n return c[7]\n break;\n default:\n return c[8]\n }}","pinned":true,"hidden":false,"mode":"ojs"},{"id":672,"value":"d3.schemePastel1.map(d => opacityTweak(d,opacity))","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"color = d3.scaleOrdinal().domain(data)\n .range(d3.schemePastel1.map(d => opacityTweak(d,opacity)));","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"d3.lch('green')","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"function opacityTweak(color, number) {\n const {l, c, h, opacity} = d3.lch(color);\n return d3.lch(l, c, h,opacity* number);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n\n svg\n .selectAll(\"ellipse\")\n .data(data)\n .join(\"ellipse\")\n .attr(\"cx\", d => d)\n .attr(\"cy\", d => d)\n .attr(\"ry\", d => 70)\n .attr(\"rx\", d => 40)\n .attr(\"class\", \"rotate\")\n .attr(\"fill\", \"rgb(255,192,203, .2)\")\n // .attr(\"transform-box\", \"fill-box\")\n // .attr(\"transform\", (d,i) => `rotate(${i * 360 / data.length}) scale(2)`)\n .attr('transform', function(d, i) {\n var rx = Math.cos(xcos(i)) * outerRadius;\n var ry = Math.sin(ysin(i)) * outerRadius;\n // return 'translate(' + rx + ', ' + ry + ')rotate('+ (xcos(i) * 180 /Math.PI + 90) +')';\n return `translate(${rx},${ry})\n rotate(${xcos(i) * 180 /Math.PI + 90})\n scale(${1.9})`;\n\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"xcos = d3.scaleLinear()\n .domain([0, data.length])\n .range([Math.PI * 0, Math.PI * 1.97]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":" ysin = d3.scaleLinear()\n .domain([0, data.length])\n .range([Math.PI * 0, Math.PI * 1.97]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"outerRadius = 120;","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"d3.range(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"//width = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"margin = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"https://docs.aspose.com/svg/net/drawing-basics/svg-path-data/","pinned":true,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}