27:null 28:["$","title",null,{"children":"Asia’s Regenerative Energy Future | LiangweiOIO | Observable"}] 2d:T45a, According to a study published by [Environmental Research Letters](https://iopscience.iop.org/article/10.1088/1748-9326/ac13f1/meta), 73% of global carbon emissions is released solely by 5% of the total power plants globally. To achieve net-zero emissions by year 2050, 60% of the world's energy supply must be powered by clean energy. Despite the climate crisis growing proportionately with our increased reliance on global energy comsumption, there is still an effort to find sustainable alternate energy sources. In Asia, the growth in clean energy production is rising steadily yearly, as in 2021, 23.48% of Asia's total energy production is renewable energy. To emphasize Asia's resilience as a regenerative energy leader, we decided to make 2 data visualizations: using a public dataset from World Resources Institute. The [database](https://github.com/wri/global-power-plant-database) contains roughly 35,000 power plants from 167 countries, categorized by its primary fuel includes thermal plants (e.g. coal, gas, oil, nuclear, biomass, waste, geothermal) and renewables (e.g. hydro, wind, solar). 2e:Tdc3,{ const width = window.innerWidth; const height = window.innerHeight / 20; const fullCircle = 2 * Math.PI; const innerRadius = 100; const outerRadius = 405; const circleData = [350, 405]; const lineData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; const months = [ "April", "May", "June", "July", "August", "September", "October", "November", "December", "January", "February", "March" ]; let circularLineData = []; let countries = []; for (let i = 0; i < 36; i++) { circularLineData.push(1); } let svg = d3.create("svg").attr("width", width).attr("height", height); svg .selectAll("circles") .append("g") .data(circleData) .enter() .append("circle") .attr("r", (d) => d) .attr("cx", width / 2) .attr("cy", height / 2) .style("fill", "none") .style("stroke", "#666"); const x = d3 .scaleBand() .range([0, 2 * Math.PI]) .align(0) .domain( monthTemperatureData.map(function (d) { return d.month; }) ); const y = d3.scaleRadial().range([innerRadius, outerRadius]).domain([0, 55]); const z = d3.scaleLinear().range(["#ffffb2", "#ffff00"]).domain(monthTemperatureData.map(function (d) { return d.month; })); const xAxis = (g) => g.attr("text-anchor", "middle").call((g) => g .selectAll("g") .data(months) .join("g") .attr( "transform", (d, i, arr) => ` rotate(${(i * 360) / arr.length}) translate(${innerRadius},0) ` ) .call((g) => g .append("line") .attr("x1", -5) .attr("x2", outerRadius - innerRadius + 10) .style("stroke", "#666") ) .call((g) => g .append("text") .attr("transform", (d, i, arr) => ((i * 360) / arr.length) % 360 > 180 ? `rotate(90) translate(0,-${outerRadius - innerRadius + 20})` : `rotate(-90)translate(0,${outerRadius - innerRadius + 20})` ) .style("font-family", "sans-serif") .style("font-size", 12) .style("fill", "#666666") .text((d) => d) ) ); svg .append("g") .call(xAxis) .attr( "transform", (d, i) => `translate(${width / 2} ${height / 2}) rotate(${(i * 360) / 12})` ); monthTemperatureData.forEach((d) => { for (let i = 1980; i < 2017; i++) { d[`${i}`] = +d[`${i}`]; } }); let g = svg .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); g.append("g") .selectAll("g") .data( d3.stack().keys(monthTemperatureData.columns.slice(1))( monthTemperatureData ) ) .enter() .append("g") .attr("fill", function (d) { return z(d.key); }) .selectAll("path") .data(function (d) { return d; }) .enter() .append("path") .attr( "d", d3 .arc() .innerRadius(function (d) { return y(d[0]); }) .outerRadius(function (d) { return y(d[1]); }) .startAngle(function (d) { return x(d.data.month); }) .endAngle(function (d) { return x(d.data.month) + x.bandwidth(); }) .padAngle(0.05) .padRadius(innerRadius) ) // .attr("opacity", 0.2); return svg.node(); }2f:T623, ${dataAsia.slice(0,dataAsia.length).map((d,i) => htl.html``)}

Country	Hydro	Solar	Gas	Oil	Wind	Nuclear	Coal	Waste	Biomass	Wave and Tidal	Petcoke	Geothermal	Storage	Cogeneration	Other
${Object.keys(dataAsia[i])}	${dataAsia[i][Object.keys(dataAsia[i])][0]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][1]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][2]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][3]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][4]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][5]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][6]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][7]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][8]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][9]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][10]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][11]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][12]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][13]['2017']}	${dataAsia[i][Object.keys(dataAsia[i])][14]['2017']}

30:T585,{ let pointX = 33 let pointY = 5 const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", 500 + margin.left + margin.right) const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top}) `); const path = g.selectAll("path") .data(data.Taiwan) .enter() .append('path') .attr("transform",(d,i) => `translate(500 300) rotate(${d.Angle}, ${pointX} ${pointY}) `) // scale(${year2013[i]}) we tested to scale + limit the petals .attr("d" ,"M24 173C6.88524 146.5 -17.6148 73.5 24 0C41.3852 29 65.8852 100.5 24 173Z") // .style("fill", "none") .style("fill",(d,i) => colorList[i]) .attr('opacity', 0.5) const text = g.selectAll("text") .data(data.Taiwan) .enter() .append('text') // .attr("x", (d,i) => (pointX *i) + (d.Angle * i) ) // .attr("y", (d,i) => (pointY*i) *i ) .attr('text-anchor', 'top') .attr("alignment-baseline", "top") .attr("transform", d => `translate(500 100)`) .style('font-size', '20px') .style('font-style', 'italic') // .text((d,i) => _.truncate(d.primary_fuel, {length: 20})); .text('Taiwan'); //.attr("stroke", "#00F5D4"); const point = g.append("circle") .attr("cx", pointX) .attr("cy", pointY) .attr("r", 5) .style("fill", "none") return svg.node() }31:T596,{ let pointX = 33 let pointY = 5 const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", 600 + margin.left + margin.right) const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})` ); const path = g.selectAll("path") .data(data.Taiwan) .enter() .append('path') .attr("transform",(d,i) => `translate(500 300) rotate(${d.Angle}, ${pointX} ${pointY}) scale(${year2013[i]}) `) // scale(${year2013[i]}) we tested to scale + limit the petals .attr("d" ,"M24 173C6.88524 146.5 -17.6148 73.5 24 0C41.3852 29 65.8852 100.5 24 173Z") // .style("fill", "none") .style("fill",(d,i) => colorList[i]) .attr('opacity', 0.5) const text = g.selectAll("text") .data(data.Taiwan) .enter() .append('text') // .attr("x", (d,i) => (pointX *i) + (d.Angle * i) ) // .attr("y", (d,i) => (pointY*i) *i ) .attr('text-anchor', 'top') .attr("alignment-baseline", "top") .attr("transform", d => `translate(500 100)`) .style('font-size', '20px') .style('font-style', 'italic') // .text((d,i) => _.truncate(d.primary_fuel, {length: 20})); .text('Taiwan'); //.attr("stroke", "#00F5D4"); const point = g.append("circle") .attr("cx", pointX) .attr("cy", pointY) .attr("r", 5) .style("fill", "none") return svg.node() }32:T460,{ const range = scaleHorizontal.range(); const fontSize = width > 500 ? "0.7em" : "1.5em"; // const fontSize = "0.7em"; return svg``; }33:T774,vis = { const element = this || scrollSVG(html``) const svg = d3.select(element).select('svg') for(let i = 0; i < newFlowers.length; i++){ let annotations = svg.append("g").attr("id", "annotation"); let g = svg.append('g') .attr("id","flowers") .attr('transform', `translate(${newFlowers[i].translate})`); const path = g.selectAll("path") .data(newFlowers[i].energy, (d,i) => d ) .enter() .append('path') .attr('class',(d,i) => d.primary_fuel) .attr("d" ,"M24 173C6.88524 146.5 -17.6148 73.5 24 0C41.3852 29 65.8852 100.5 24 173Z") .attr("transform",(d,i) => `rotate(${d.angle}) scale(${d.scale/3.3})`) .style("fill",(d,i) => colorList[i]) .attr('opacity', 0.5) // When the mouse moves over a rect, quickly fade its color to opacity 1.0 .on('mouseover', function(d, i) { let me = d3.select(this) .transition() .duration(100) .attr('opacity', '1'); }) // When the mouse leaves a rect, slowly fade its color back .on('mouseout', function(d, i){ d3.select(this) .transition() .duration(2000) .attr('opacity', '0.5'); }); } const text = svg.selectAll("text") .data(newFlowers, (d,i) => d ) .enter() .append('text') // .attr('text-anchor', 'end') // .attr("alignment-baseline", "baseline") .attr("transform", (d,i) => `translate( ${d.translate})`) .style('font-size', '1em') .style('font-style', 'italic') .text((d,i) => d.country); const circle = svg.selectAll("circle") .data(newFlowers, (d,i) => d ) .enter() .append("circle") .attr('cx', (d,i) => d.translate[0]) .attr('cy', (d,i) => d.translate[1]) .attr("r", 5) .style("fill", "none") return element }34:T1063,{ const width = window.innerWidth; const height = window.innerHeight/20; const fullCircle = 2 * Math.PI; const types = [ "Hydro", "Solar", "Wind", "Nuclear", "Waste", "Biomass", "Wave and Tidal", "Cogeneration", "Other", "Storage", "Geothermal", "Petcoke", "Gas", "Oil", "Coal" ]; const typesColor = [ "#026F94", "#0794C2", "#0794C2", "#2DCBFF", "#89E0FD", "#A9E9FE", "#C9EEFB", "#CCEFFB", "#E1E1E1", "#FFE2DC", "#FEC8BD", "#FFCEC5", "#FCAC9C", "#FF8770", "#FF4E2C" ]; let countries = []; let innerRadius = 100; let outerRadius = 400; let circleData = [350, 400]; let lineData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; let circularLineData = []; for (let i = 0; i < 36; i++) { circularLineData.push(1); } let svg = d3.create("svg") .attr("width", width) .attr("height", height); let degreeText = [ ['E 90', width / 2 , height / 2- outerRadius], ['W 90', width / 2, height / 2+ + outerRadius], ]; dataWorld.forEach((d, i) => { for (let j = 0; j < 15; j++) { d[types[j]] = +d[types[j]]; } }); for (let i = 0; i < dataWorld.length; i++) { countries.push(dataWorld[i]["Country"]); } let x = d3.scaleLinear().range([0, fullCircle]).domain([-180, 180]); for (let i = 0; i < 15; i++) { lineGenerator(svg, x ,dataWorld,types[i], typesColor[i], outerRadius); } svg .selectAll("circles") .data(circleData) .enter() .append("circle") .attr("r", (d) => d) .attr("cx", width / 2) .attr("cy", height / 2) .style("fill", "none") .style("stroke", "#191919"); svg .selectAll("lines") .data(lineData) .enter() .append("line") .attr("y2", -height / 2) .attr( "transform", (d, i) => `translate(${width / 2} ${height / 2}) rotate(${(i * 360) / 16})` ) .style("stroke", "#191919") .style("stroke-width", "1px") .style("opacity", 1); svg .selectAll("lines") .data(circularLineData) .enter() .append("line") .attr("y2", -height / 2) .attr( "transform", (d, i) => `translate(${width / 2} ${height / 2}) rotate(${(i * 360) / 36})` ) .style("stroke", (d, i) => (i === 120 || i === 280 ? "orange" : "#B4BEB7")) .style("stroke-width", "3px") .style("opacity", (d, i) => (i === 120 || i === 280 ? 1 : 0)); let arc = d3 .arc() .innerRadius(400) .outerRadius(400) .startAngle((1 * fullCircle) / 36) .endAngle((18 * fullCircle) / 36); svg .append("path") .attr("d", arc) .style("stroke", "orange") .style("stroke-width", "4px") .attr("transform", `translate(${width / 2} ${height / 2}) rotate(-120)`); svg .append("circle") .attr("id", "center") .attr("r", 100) .attr("cx", width / 2) .attr("cy", height / 2) .style("fill", "white") .style("stroke", "none"); svg .append("text") .attr("x", width / 2) .attr("y", height / 2) .style("text-anchor", "middle") .style("font-size", "1.2em") .style("font-weight", "400") .text("North Pole"); svg .selectAll("degree") .data(degreeText) .enter() .append("text") .attr("x", (d) => d[1]) .attr("y", (d) => d[2]) .style("text-anchor", "middle") .text((d) => d[0]) svg.selectAll('legend').data(types).enter().append('text').attr('x', 50).attr('y', (d,i) => i*20 + 20).text(d => d).style('font-size', '10px') svg.selectAll('legendColor').data(typesColor).enter().append('rect').attr('x',20).attr('y', (d,i) => i*20 + 20).attr('width', '15px').attr('height', '5px').style('fill', d => d) function lineGenerator(svg,x,data,energy,color, outerRadius) { let y = d3.scaleRadial() .range([100, outerRadius]) .domain(d3.extent(data, (d) => d[energy])); let line = d3 .lineRadial() .angle(function (d) { return x(d[energy]); }) .radius(function (d) { return y(d.Lat)+200; }); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", color) .attr("d", line) .attr("transform", (d, i) => `translate(${width / 2} ${height / 2}) `); } return svg.node() } 35:T49c, 36:[{"id":"a95f0e49b316300b71270f0cd82aefd785d676a3b5a5824514180427ccd20204d3b501504508f7e8bace86b02fb7da5ba1ffcf847040fb3c8c1b85852208fad6","href":"https://static.observableusercontent.com/files/a95f0e49b316300b71270f0cd82aefd785d676a3b5a5824514180427ccd20204d3b501504508f7e8bace86b02fb7da5ba1ffcf847040fb3c8c1b85852208fad6","name":"image@5.png","type":"image/png","lastModified":1676207391823.965,"size":226640},{"id":"98e64758702bbd01cab08cf694769deeb0160657841780b4fade43fc0b06ef574c99d7a64d41065f67ceb37ee78eee8e56974f8f418ee1e5928b445c0dc96759","href":"https://static.observableusercontent.com/files/98e64758702bbd01cab08cf694769deeb0160657841780b4fade43fc0b06ef574c99d7a64d41065f67ceb37ee78eee8e56974f8f418ee1e5928b445c0dc96759","name":"image@7.png","type":"image/png","lastModified":1676207391823.965,"size":153251},{"id":"3efdca6ca98ed1ed4dd7d2fb13a9348f99f04eb9b0bbb7c83b62882934f8bd9c00bdcc96591a2c3565b4d74010cd65b3ad771a0e401c4dd33a47ee69f1b03075","href":"https://static.observableusercontent.com/files/3efdca6ca98ed1ed4dd7d2fb13a9348f99f04eb9b0bbb7c83b62882934f8bd9c00bdcc96591a2c3565b4d74010cd65b3ad771a0e401c4dd33a47ee69f1b03075","name":"image@6.png","type":"image/png","lastModified":1676207391823.965,"size":205652},{"id":"5ea562f2d450025bc91659860af35087fa6cc0e24fceb4f5e4db37f9865be1298352dff99740dd20411ac0b9e60a8b29718b878f5383728254311efe3e34e8b6","href":"https://static.observableusercontent.com/files/5ea562f2d450025bc91659860af35087fa6cc0e24fceb4f5e4db37f9865be1298352dff99740dd20411ac0b9e60a8b29718b878f5383728254311efe3e34e8b6","name":"monthly.csv","type":"text/csv","lastModified":1676207391823.965,"size":82182},{"id":"ce360aefca372dc7fc825da36ec343af9c8af366c005a867f7557fb8acdc0da4ab4b8d1a9980e44cf1569efc2788973b244f2abdaae5574c7461337b2c36c866","href":"https://static.observableusercontent.com/files/ce360aefca372dc7fc825da36ec343af9c8af366c005a867f7557fb8acdc0da4ab4b8d1a9980e44cf1569efc2788973b244f2abdaae5574c7461337b2c36c866","name":"image@2.png","type":"image/png","lastModified":1676207391823.965,"size":221155},{"id":"864f95d47f7edd6380d3a3d2c93d5faabc0916c6fc0b2a97f2a27890cfc27ce659d115600685a15d62e8345bcd9e44ef627639c90d0d1b9c5d9116d26a1aaece","href":"https://static.observableusercontent.com/files/864f95d47f7edd6380d3a3d2c93d5faabc0916c6fc0b2a97f2a27890cfc27ce659d115600685a15d62e8345bcd9e44ef627639c90d0d1b9c5d9116d26a1aaece","name":"asia (1).json","type":"application/json","lastModified":1676207391823.965,"size":34964}] 2b:{"id":"d794b6c271b08cf4","slug":null,"title":" Asia’s Regenerative Energy Future","thumbnail":"2336b63d52a9a16041694b97cecb14b3546306efdd619812e57301220d7f61ab","access_level":"public","create_time":"$D2023-02-12T13:09:51.823Z","update_time":"$D2023-02-12T13:09:51.823Z","view_time":null,"first_public_time":"$D2023-02-12T13:09:51.823Z","has_unpublished_edits":null,"fork":{"id":"ca5f400344405f2d","slug":"asias-regenerative-energy-future","title":" Asia’s Regenerative Energy Future","owner":{"id":"05be0111d4447a56","login":"chaytha","name":"Chay Thawaranont"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5b1f845af070d16a","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":"starter_2024"},"version":2541,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d8b9f18ecdde6a17","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":null}],"members":[{"type":"individual","id":"d8b9f18ecdde6a17","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":" Asia’s Regenerative Energy Future","cells":[{"id":0,"value":"

Asia’s Regenerative Energy Future

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"$2d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1332,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1054,"value":"

Data Visualization Design & Concept

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1070,"value":"FileAttachment(\"image@5.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"FileAttachment(\"image@7.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"image2 = FileAttachment(\"image@2.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"

This chart is the distribution of all the power plants globally. By looking at the distribution from the north pole, we invite viewers to think about our energy from a different angle and arouse their attention to global warming.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2042,"value":"

History of Monthly Temperture\n1880-2016

\n $\"image@6.png\"$ ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"\n\n\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2350,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2057,"value":"\n\n\n\n\n\n\n \n

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2050,"value":"\n\n\n\n\n\n\n \n

\n \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1337,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1341,"value":"

Dataset Overview

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1052,"value":"\nThe table below shows a glimpse of the data structure that we will be using for this project. Each country has 15 energy types or primary fuel generated by the powerplants, the number represents the amount of electricity generated by each power plant type.\nnote that this shows only from the year 2017","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1018,"value":"$2f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1343,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2285,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1057,"value":"

Types of Power Plants by Country

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1060,"value":"

Inspired by regenerative energy, we came up with ideas to use organic shape to symbolize natural resources, ‘petal’ is used as main the main element of this visualization. We have created a mockup prototype below as our first development iteration, for further stages of the competition, we will follow the steps as listed on our development process planing document.

\n\n

Each petal represents each type of energy and its length represents the amount of electricity generated(gigawatt).

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1613,"value":"

Here is the SVG of the full flower with each petal at its maximum length:

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":758,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1616,"value":"

This is an example of how the flower would look like if each petal's length is based on the amount of electricity generated per fuel type. Note that Taiwan only has 3 data points in 2013 so it's showing only 3 petals.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1602,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"

Energy Types

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2410,"value":"

Each color represents different energy type which is used for the petals.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":890,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2262,"value":"

Types of Power Plants By Country

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2281,"value":"

For the first development iteration, we have created this from the year 2017. We plan to add timeline animation feature in the next stage.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1689,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2408,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1394,"value":"

Global Power Plant Distribution

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1413,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"# Data List #","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"data = fetch(\"https://raw.githubusercontent.com/Chayanitoey/ADB_msdvParsons/main/testTaiwan.json\")\n .then(function(response){\n return response.json();\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"dataAsia = fetch(\"https://raw.githubusercontent.com/Chayanitoey/ADB_msdvParsons/main/dataAsia.json\")\n .then(function(response){\n return response.json();\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"dataWorld = fetch(\"https://raw.githubusercontent.com/CloudLun/ADB/main/data/sort.json\")\n .then(function(response){\n return response.json();\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"cleanEnergy = ['Hydro',\n'Solar',\n'Wind',\n'Nuclear',\n'Waste',\n'Biomass',\n'Wave and Tidal',\n'Cogeneration']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"countryList = ['Azerbaijan', 'Bangladesh', 'Bhutan', 'China', 'India', 'Indonesia', 'Iran', 'Iraq', 'Japan', 'Jordan', 'Kazakhstan', 'Kuwait', 'Kyrgyzstan','Laos', 'Lebanon', 'Liberia', 'Libya', 'Malaysia', 'Mongolia', 'Myanmar', 'Nepal', 'North Korea', 'Pakistan', 'Palestine', 'Philippines', 'Qatar', 'Singapore', 'South Korea', 'Sri Lanka', 'Syrian Arab Republic', 'Taiwan', 'Tajikistan','Thailand', 'Turkmenistan', 'United Arab Emirates','Uzbekistan', 'Vietnam', 'Yemen']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"primaryFuel = [\"Hydro\",\n \"Solar\",\n \"Wind\",\n \"Nuclear\",\n \"Waste\",\n \"Biomass\",\n \"Wave and Tidal\",\n \"Cogeneration\",\n \"Other\",\n \"Storage\",\n \"Geothermal\",\n \"Petcoke\",\n \"Gas\",\n \"Oil\",\n \"Coal\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"// data.Taiwan.length\nang = {\n let ang = [];\n data.Taiwan.forEach(function(d) {\n ang.push(d.Angle);\n });\n\n \n return ang;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":" year2013 = {\n let scale2013 = [];\n \n\n data.Taiwan.forEach(function(d) {\n if((d.estimated_generation_gwh_2013/1000 <1) && (d.estimated_generation_gwh_2013/1000 != 0)){\n scale2013.push((d.estimated_generation_gwh_2013/1000 )+1)\n }\n if((d.estimated_generation_gwh_2013/1000) > 1 && (d.estimated_generation_gwh_2013/1000 < 2)){\n scale2013.push(d.estimated_generation_gwh_2013/1000)\n }\n if(d.estimated_generation_gwh_2013/1000 > 2){\n scale2013.push(2)\n }\n if(d.estimated_generation_gwh_2013 == 0){\n scale2013.push(0)\n }\n \n // scale2013.push(d.estimated_generation_gwh_2013);\n });\n\nreturn scale2013;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"colorList = ['#C8ED36','#FEE440','#75BED7', '#76A896','#00F5D4','#8984C9','#D48A7C','#F15BB5','#FF4E2C','#00BBF9','#A47993','#FF9B06','#BDAB7D','#6055E2','#B2C381']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"yearList = [2013,2014,2015,2016,2017]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"width = window.innerWidth ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"height = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"margin = ({top: 20, bottom: 20, left: 20, right: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1949,"value":"newFlowers = {\n \n return _.map(asia1, (d, i) => {\n return {\n country:i,\n energy: d ,\n translate: calculateGridPos(Object.keys(asia1).indexOf(i))// util function that returns [x, y]\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"asia1 = FileAttachment(\"asia (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2463,"value":"monthTemperatureData = d3.csv('https://raw.githubusercontent.com/CloudLun/ADB/main/data/monthData.csv',\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2049,"value":"monthly = await FileAttachment(\"monthly.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"monthly","database":"$undefined"},{"id":11,"value":"Administrative Stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":437,"value":"

Appendix

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":957,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":973,"value":"toggle","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"\nviewof toggle = {\n const form = html`