30:T568,html `

WORLD POWER PLANTS

Use checkbox to view specific fuel locations. Hover over donut arcs to display individual country data.

Hydro Gas Biomass Coal Cogeneration Geothermal Nuclear Oil Other Petcoke Solar Storage Waste Wave and Tidal Wind

`31:T961, donut = { const viz = d3.create("div").attr("class","viz") const multiple = viz.selectAll("multiples") .data(group) .join("svg") .attr("width",width+margin.left+margin.right) .attr("height",height+margin.top+margin.bottom) .attr("transform","translate(10,-5)") .attr("viewBox",[0,0,width,height]) .style("max-width","50%") .append("g").attr("transform","translate(3,10)") .attr("id",d=>d.key) multiple.append("g").attr("transform",`translate(${width/2},${height/2})`) .attr("stroke","orange").attr("stroke-width",0.5) .selectAll("path") .data(d=>pie(d.value)) .join(enter=>{ enter.append("path") .attr("class","donut").attr("id",(d,i)=>"donut"+i) .attr("d",d=>arc(d)) .attr("fill",d=>color(d.data[0])) .style("opacity",1) .on("mouseover",mouseIn) .on("mouseout",mouseOut) }) multiple.append("g").attr("class","map") .attr("transform",`translate(60,35)`) .selectAll("country") .data(d=>d.country) .join("path") .attr("d",d=>(projection.fitSize([w,h],d),path(d))) .style("fill","none").attr("stroke","orange").style("opacity",1) .attr("stroke-width",1.3) multiple.selectAll("plant").data(d=>d.plant).join("g").each(point).attr("visibility","hidden") multiple.append("text") .attr("class","countryName") .text(d=>d.key) .attr("x",width/2) .attr("y",-6.5) .attr("text-anchor","middle") .style("fill","orange") d3.selectAll(".power").on("change",power) return viz.node() }32:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m@1.json","type":"application/json","lastModified":1608646395143.285,"size":756420},{"id":"caba3169545364af42ba828a75d753cc1365ef14b6c40f8b06757e395cd4324e0d0e3a71f29a6f9d25b2b5397baeb210ada113355b62cd93f688d22234a1e779","href":"https://static.observableusercontent.com/files/caba3169545364af42ba828a75d753cc1365ef14b6c40f8b06757e395cd4324e0d0e3a71f29a6f9d25b2b5397baeb210ada113355b62cd93f688d22234a1e779","name":"dataFinal.csv","type":"text/csv","lastModified":1608646426548.429,"size":1752039}] 2e:{"title":"WORLD POWER PLANTS","cells":[{"id":3250,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1409,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3504,"value":"html\n``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3427,"value":"function power(event,d){\n d3.selectAll(\".power\")\n .each(d=>{\n const power = d3.select(this),\n pGroup = power.property(\"value\")\n if(power.property(\"checked\")){\n d3.selectAll(\".\"+pGroup).attr(\"visibility\",\"visible\")\n }else{\n d3.selectAll(\".\"+pGroup).attr(\"visibility\",\"hidden\")\n }\n })\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3420,"value":"function mouseOut(event,d){\n d3.select(this)\n .style(\"opacity\",1)\n .attr(\"stroke\",\"orange\")\n .attr(\"stroke-width\",0.5)\n \n d3.select(this.parentNode.parentNode)\n .selectAll(\"circle\")\n .filter(c=>c.primary_fuel==d.data[0])\n .attr(\"visibility\",\"hidden\")\n \n d3.selectAll(\".label\").remove()\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":3418,"value":"function mouseIn(event,d){\n d3.select(this)\n .style(\"opacity\",0.8)\n .attr(\"stroke\",\"rgb(61, 5, 68)\")\n .attr(\"stroke-width\",3)\n \n d3.select(this.parentNode.parentNode)\n .selectAll(\"circle\")\n .filter(c=>c.primary_fuel==d.data[0])\n .attr(\"visibility\",\"visible\")\n \n d3.select(this.parentNode)\n .append(\"g\")\n .attr(\"transform\",`translate(${arc.centroid(d)})`)\n .attr(\"class\",\"label\")\n .append(\"text\")\n .attr(\"text-anchor\",\"middle\")\n .text(d.data[0])\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":3409,"value":"function point(d) {\n \n projection.fitSize([w,h],d)\n \n const point = d3.select(this).attr(\"transform\",`translate(60,35)`)\n .selectAll(\"circle\")\n .data(d=>d.plant)\n .join(\"circle\")\n .attr(\"cx\",d=>projection([d.longitude,d.latitude])[0])\n .attr(\"cy\",d=>projection([d.longitude,d.latitude])[1])\n .attr(\"r\",3.5).style(\"fill\",\"none\").style(\"opacity\",0.8)\n .style(\"stroke\",d=>color(d.primary_fuel))\n .attr(\"class\",d=>d.primary_fuel)\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"projection = d3.geoMercator()","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"color = d3.scaleOrdinal()\n .range([\"#8de4d3\",\"#156b55\",\"#00ff71\",\"#cb7ff5\",\"#e819eb\",\"#c17c41\",\"#bae342\",\"#fea53b\",\"#d53879\",\"#d9c0c7\",\"#e65216\",\"#efd453\",\"#167dbb\",\"#4650ca\",\"#c098fd\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"arc = d3.arc()\n .innerRadius(Math.min(width,height)/2-10)\n .outerRadius(Math.min(width,height)/2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"pie = d3.pie()\n .value(d=>d[1])\n .sort(null).padAngle(0.014)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1731,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"group = Array.from(d3.rollup(data,v=>v.length,d=>d.country,d=>d.primary_fuel),([key,value,country,plant])=>{\n return {\n key,\n value,\n country: countries.filter(d=>d.properties.name==key),\n plant:countries.filter(d=>d.properties.name==key)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1656,"value":"countries = topojson.feature(world, world.objects.countries).features\n .map(d=>(d.plant = data.filter(v=>v.country==d.properties.name),d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3329,"value":"h=130;","pinned":false,"hidden":false,"mode":"ojs"},{"id":3326,"value":"w=130;","pinned":false,"hidden":false,"mode":"ojs"},{"id":3323,"value":"height = 280-margin.left-margin.top","pinned":false,"hidden":false,"mode":"ojs"},{"id":3320,"value":"width = 320-margin.right-margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":3316,"value":"margin = ({ top: 40, left: 35, bottom: 40, right: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"world = FileAttachment(\"countries-50m@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"data = FileAttachment(\"dataFinal.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1889,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}