30:Tc19,{ const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); const axis = svg.selectAll(".axis") .data([1,0]) .enter() .append("g") .attr("class", "axis"); axis.append("line") .attr("x1", -width/2) .attr("y1", 0) .attr("x2", width/2) .attr("y2", 0) .attr("class", "line") axis.append("line") .attr("x1", 0) .attr("y1", -height/2) .attr("x2", 0) .attr("y2", height/2) .attr("class", "line") var slicedData = desiredData.map(d=>d[regions.indexOf(xxx)]).splice(0,z) svg .append('g') .selectAll("ellipse") .data(slicedData) .join("ellipse") .attr("class", "ellipse") // .attr("class", function (d, i){ // if (i > 50) { // return "ellipse2" // } else { // return "ellipse" // } // }) .attr("cy", d => rScale_(maxDeaths) - rScale_(d.deaths)) .attr("ry", d => rScale_(d.deaths)) .attr("rx", d => rScale_(d.deaths) /3) .attr("fill", d => colorByContinent3(d.region, 1)) .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})`; }) if(z > 48){ svg .append('g') .selectAll("ellipse") .data(slicedData.splice(0,49)) .join("ellipse") .attr("class", "ellipse") // .attr("class", function (d, i){ // if (i > 50) { // return "ellipse2" // } else { // return "ellipse" // } // }) .attr("cy", d => rScale_(maxDeaths) - rScale_(d.deaths)) .attr("ry", d => rScale_(d.deaths)) .attr("rx", d => rScale_(d.deaths) /3) .attr("fill", d => colorByContinent3(d.region, 1)) .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})`; }) } // color the last ellipse // svg.selectAll(".ellipse:nth-last-child(1)") // .attr("fill", d => colorByContinent3(d.region, 1)) // .attr("stroke", "white") // .attr("stroke-width", 1.5) svg.append("text") .attr("class", "label") .attr("x", 0) .attr("y", -15) .text(desiredData.map(d=>d[regions.indexOf(xxx)])[z]["yearWeek"]); svg.append("text") .attr("class", "label") .attr("x", 0) .attr("y", 0) .text(desiredData.map(d=>d[regions.indexOf(xxx)])[0].region); svg.append("text") .attr("class", "label") .attr("x", 0) .attr("y", 15) .text(desiredData2.map(d=>d[regions.indexOf(xxx)])[z]["deaths"]); svg.append("text") .attr("class", "label") .attr("x", 0) .attr("y", 30) .text(`+${desiredData1.map(d=>d[regions.indexOf(xxx)])[z]["deaths"]}`) return svg.node() }31:T5cf,{ const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("id", "box"); for(let j=0; j < arr[s].length; j++){ svg .append('g') .selectAll("ellipse") .data(desiredData[arr[s][j]]) // j = index of region .join("ellipse") // .attr("cx", 0) .attr("cy", d => rScale(maxDeaths) - rScale(d.deaths)) .attr("ry", d => rScale(d.deaths)) .attr("rx", d => rScale(d.deaths)/1.7) // .attr("class", "rotate") .attr("fill", d => colorByContinent3(d.region, 0.03)) .style("stroke", "white") .attr("stroke-width", 0.5) .attr('transform', function(d, i, e) { // console.log("i==============") // console.log(i) // console.log(d) // object // console.log("i==============") // console.log(i) // region index var cx = Math.cos(xcos(i)) * radius_; var cy = Math.sin(ysin(i)) * radius_; // console.log('attr~~~~~~~~~~~~~') // console.log(e[i]) var Ry = e[i].getAttribute('ry'); // console.log("---------") // console.log(cx) // console.log(cy ) // return `translate(${cx},${cy - Ry}) cy- 大半徑與小半徑的差 return `translate(${cx},${cy}) rotate(${xcos(i) * 180 /Math.PI + 90}) scale(${0.8})`; }) } return svg.node() }32:T44e,{ const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); svg .append('g') .selectAll("ellipse") .data(desiredData.map(d=>d[viewRegion])) .join("ellipse") .attr("ry", d => rScale(d.deaths)) .attr("rx", d => rScale(d.deaths)/3) .attr("fill", d => colorByContinent3(d.region, 0.1)) .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.append("text") .attr("class", "legend") .style("font-size", "15px") .attr("fill", "grey") .attr("text-anchor", "middle") .attr("font-family", "monospace") .attr("dy", "0.35em") .attr("x", 0) .attr("y", 0) .text(desiredData[0][viewRegion]['region']); return svg.node() }33:T78c,{ const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); // const axis = svg.selectAll(".axis") // .data([1,0]) // .enter() // .append("g") // .attr("class", "axis"); // axis.append("line") // .attr("x1", -width/2) // .attr("y1", 0) // .attr("x2", width/2) // .attr("y2", 0) // .attr("class", "line") // axis.append("line") // .attr("x1", 0) // .attr("y1", -height/2) // .attr("x2", 0) // .attr("y2", height/2) // .attr("class", "line") var slicedData = desiredData.map(d=>d[regions.indexOf(xxx)]).splice(0,z) svg .append('g') .selectAll("ellipse") .data(slicedData) .join("ellipse") .attr("class", "ellipse") .attr("cy", d => rScale(maxDeaths) - rScale(d.deaths)) .attr("ry", d => rScale(d.deaths)) .attr("rx", d => rScale(d.deaths) /3) .attr("fill", d => colorByContinent3(d.region, 0.1)) .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:nth-last-child(1)") .attr("fill", d => colorByContinent3(d.region, 0.5)) .attr("stroke", "white") .attr("stroke-width", 1.5) svg.append("text") .attr("class", "label") .attr("x", 0) .attr("y", -15) .text(desiredData.map(d=>d[regions.indexOf(xxx)])[z]["yearWeek"]); svg.append("text") .attr("class", "label") .attr("x", 0) .attr("y", 0) .text(desiredData.map(d=>d[regions.indexOf(xxx)])[0].region); svg.append("text") .attr("class", "label") .attr("x", 0) .attr("y", 15) .text(desiredData.map(d=>d[regions.indexOf(xxx)])[z]["deaths"]); return svg.node() }34:[] 2e:{"title":"Sympathy flowers v3","cells":[{"id":0,"value":"# Sympathy flowers v3","pinned":false,"hidden":false,"mode":"md"},{"id":1781,"value":"viewof z = Scrubber(Array.from({length: desiredData.length}, (_, z) => z), {delay: 200}, {autoplay: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1874,"value":"viewof xxx = Inputs.select(regions, {value: \"Asia\", label: \"Select a region\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2148,"value":"import {desiredData2} from \"@spepechen/dataprep\" // cumulative","pinned":true,"hidden":false,"mode":"ojs"},{"id":2220,"value":"import {desiredData1} from \"@spepechen/dataprep\" // new ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2238,"value":"### Select one option to feed data to the chart","pinned":false,"hidden":false,"mode":"md"},{"id":2201,"value":"viewof selectedData = Inputs.radio([\"weekly new deaths\", \"cumulative\"], {label: \"Data choices\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"function yourChoice(selectedData){\n if(selectedData == \"weekly new deaths\"){\n return desiredData1\n }else{\n return desiredData2\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2229,"value":"desiredData = yourChoice(selectedData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1966,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2161,"value":"rScale_= d3.scaleLinear()\n .domain([minDeaths, maxDeaths])\n .range([20, height / rScaleNum])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2260,"value":"height / rScaleNum","pinned":true,"hidden":false,"mode":"ojs"},{"id":2244,"value":"rScale_(maxDeaths)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2251,"value":"_xcos(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1720,"value":"colors = [\"#E08523\",\"#f28e2c\",\"#e15759\",\"#76b7b2\",\"#59a14f\",\"#edc949\",\"#af7aa1\",\"#ff9da7\",\"#9c755f\",\"#bab0ab\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":840,"value":"function colorByContinent3(expr, op){ \n var c = colors.map(d => opacityTweak(d,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":true,"hidden":false,"mode":"ojs"},{"id":2195,"value":"desiredData.map(d=>d[regions.indexOf(xxx)]).splice(0,3)","pinned":true,"hidden":false,"mode":"ojs"},{"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🔜 tuning flower viz\n\n⬜ layout\n\n⬜ Animation ","pinned":false,"hidden":false,"mode":"md"},{"id":2152,"value":"desiredData2","pinned":true,"hidden":false,"mode":"ojs"},{"id":885,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"## Stacking","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":1166,"value":"Number of weeks into pandemic since 3rd week in 2020","pinned":false,"hidden":false,"mode":"md"},{"id":2129,"value":"desiredData[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1665,"value":"// colors = [\"#1b9e77\",\"#d95f02\",\"#7570b3\",\"#e7298a\",\"#66a61e\",\"#e6ab02\",\"#a6761d\",\"#666666\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1676,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2140,"value":"radius_ = 160","pinned":true,"hidden":false,"mode":"ojs"},{"id":1196,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1512,"value":"radius = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":1279,"value":"// covert to radian\nxcos = d3.scaleLinear()\n .domain([0, desiredData[0].length]) // number of region \n // .range([0, Math.PI * 2]);\n .range([Math.PI * 0.82, Math.PI * 2.82]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1456,"value":"ysin = d3.scaleLinear()\n .domain([0, desiredData[0].length])\n .range([Math.PI * 0.82, Math.PI * 2.82]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1367,"value":"## Chrysanthemums","pinned":false,"hidden":false,"mode":"md"},{"id":891,"value":"regionalFlower = (params) => { \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n svg\n .append('g')\n .selectAll(\"ellipse\")\n .data(params)\n .join(\"ellipse\")\n .attr(\"ry\", d => rScale(d.deaths))\n .attr(\"rx\", d => rScale(d.deaths)/3)\n .attr(\"fill\", d => colorByContinent3(d.region, 0.2))\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":1410,"value":"viewof viewRegion = Scrubber(Array.from({length: desiredData[0].length}, (_, s) => s), {delay: 1000}, {autoplay: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1723,"value":"// sin cos 1.95\n// magicNumber = 3 / 8\n//magicNumber = 3 / 12 // ~50 weeks = one round; 1/4 circle = one season\nmagicNumber = 3 / 12 // ~50 weeks = one round; 1/4 circle = one season","pinned":true,"hidden":false,"mode":"ojs"},{"id":2002,"value":"_xcos = d3.scaleLinear()\n .domain([0, desiredData[0].length])\n .range([Math.PI * 0, Math.PI * magicNumber]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2033,"value":" _ysin= d3.scaleLinear()\n .domain([0, desiredData[0].length])\n .range([Math.PI * 0, Math.PI * magicNumber]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2038,"value":"_outerRadius = 190","pinned":true,"hidden":false,"mode":"ojs"},{"id":2118,"value":"(_xcos(37) * _outerRadius) * 180 / Math.PI + 90","pinned":true,"hidden":false,"mode":"ojs"},{"id":2135,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1134,"value":"## Styling variables","pinned":false,"hidden":false,"mode":"md"},{"id":721,"value":"strokeWidth = 0.2","pinned":false,"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":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":"### Single flower","pinned":false,"hidden":false,"mode":"md"},{"id":887,"value":"viewof i = Scrubber(Array.from({length: desiredData.length}, (_, i) => i), {delay: 100}, {autoplay: false})","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n\n for(let j=0; j < arr[s].length; j++){\n svg\n .append('g')\n .selectAll(\"ellipse\")\n .data(desiredData.map(d=>d[0])) // j = index of region \n .join(\"ellipse\")\n .attr(\"class\", \"happy\")\n // .attr(\"cx\", (d, i) => {console.log(d)})\n .attr(\"cy\", d => rScale(maxDeaths) - rScale(d.deaths))\n .attr(\"ry\", d => rScale(d.deaths))\n .attr(\"rx\", d => rScale(d.deaths)/2)\n .attr(\"fill\", d => colorByContinent3(d.region, 0.06))\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", strokeWidth)\n }\n\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"xcos_ = d3.scaleLinear()\n .domain([0, desiredData[0].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":1319,"value":"xcos_2 = d3.scaleLinear()\n .domain([0, 4])\n .range([Math.PI * 0, Math.PI * magicNumber]);\n //.range([Math.PI * 0, Math.PI * 1.98]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1322,"value":" ysin_2= d3.scaleLinear()\n .domain([0, 4])\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, desiredData[0].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":194,"value":"rScale= d3.scaleLog()\n .domain([minDeaths, maxDeaths])\n .range([0, height / rScaleNum])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1070,"value":"maxDeaths = d3.max(desiredData.map(d => d3.max(d)).map(d => d.deaths))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1087,"value":"minDeaths = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"### Manipulating colors","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"outerRadius = 120;","pinned":true,"hidden":false,"mode":"ojs"},{"id":1056,"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":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"},{"id":1125,"value":"## Helper functions|","pinned":true,"hidden":false,"mode":"md"},{"id":987,"value":"arr = arrCreator(desiredData.length)","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":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":862,"value":"function opacityLegend(a) {\n a.opacity = 1\n return a\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}