31:T69e,bars = { // create svg const container = d3.create('svg') .attr('width', w) .attr('height', h); // create g const g = container.selectAll('g') .data(co2Totals) .enter() .append('g') .attr('transform', d => `translate(${margin.left}, ${yMargin(d.key)})`); // we want individual countries to hold to a different standard than the rest of the world // so the notions of what is good and what is bad change let red_const = 120 let green_const = 100 if (iso !== "XXX") { red_const/= 10 green_const/= 10 } // render bars const rects = g.append('rect') .attr('width', d => xMargin(d.value) - xMargin(0)) .attr('height', yMargin.bandwidth()) .style("fill", d=> // color bars from green to red, where red corresponds to more "rgb(" + d.value / red_const + "," + Math.max((255 - (d.value / green_const)), 40) + "," + 0 + ")"); rects.on('mouseover', function() { d3.select(this).attr('stroke', '#000').attr('stroke-width', 3); }) rects.on('mouseout', function() { d3.select(this).attr('stroke', null).attr('stroke-width', 1); }); rects.append('title') .text(d => d.value); // label bars, used as an alternative to traditional y-axis g.append('text') .attr('x', d => xMargin(d.value) - xMargin(0)) .attr('dx', d => -xMargin(d.value) + xMargin(0) - 60) .attr('dy', '3.4em') .attr('fill', 'black') .style('font-size', 'medium') .text(d => d.key); // x-axis label container.append('g') .attr('transform', `translate(0, ${h - margin.bottom})`) .call(d3.axisBottom(xMargin)); return container.node(); }32:T4e4,// computes key-value pairs for co2 source to the magnitude of that co2 source's co2 co2Totals = { let coal = 0; let flaring = 0; let gas = 0; let oil = 0; let cement = 0; let yearData; if (iso === "XXX") { yearData = data.filter(d => parseInt(d.year) === year); } else { yearData = data.filter(d => parseInt(d.year) === year && d.iso_code === iso); } for (let i = 0; i < yearData.length; i++) { if (yearData[i].coal_co2 !== "") { coal+= parseInt(yearData[i].coal_co2) } if (yearData[i].flaring_co2 !== "") { flaring+= parseInt(yearData[i].flaring_co2) } if (yearData[i].gas_co2 !== "") { gas+= parseInt(yearData[i].gas_co2) } if (yearData[i].oil_co2 !== "") { oil+= parseInt(yearData[i].oil_co2) } if (yearData[i].cement_co2 !== "") { cement+= parseInt(yearData[i].cement_co2) } } // some keys begin with leading empty space. these are to make the spacing uniform for labels on the y-axis return [{'key': 'Cement', 'value':cement }, {'key': 'Flaring', 'value':flaring }, {'key': '⠀⠀⠀Gas', 'value':gas }, {'key': '⠀⠀⠀Oil', 'value':oil }, {'key': '⠀⠀Coal', 'value':coal }] }33:[{"id":"d3b6b904aad962eed04f482168d932cdc375c9d21b091170548fb44c07a569349cf2650b1abd89c048d0ea020158abddb52962b2abbc645fde7e1150a56f9bd3","href":"https://static.observableusercontent.com/files/d3b6b904aad962eed04f482168d932cdc375c9d21b091170548fb44c07a569349cf2650b1abd89c048d0ea020158abddb52962b2abbc645fde7e1150a56f9bd3","name":"co2-combined.csv","type":"text/csv","lastModified":1606600431646.326,"size":3334977}] 2f:{"title":"Emission Sources Bar Chart","cells":[{"id":0,"value":"// post checkpoint updates:\n// scale changes country by count to \n// afford better comparison of bar heights,\n// russia removed due to previously unnoticed\n// data quality issues,\n// iran removed for not being interesting or\n// especially revealing,\n// per TA feedback animation \n// no longer loops or autoplays\nmd`# Emission Sources Bar Chart`","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"viewof iso = html `\n `","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"viewof year = Scrubber(years, {\n autoplay: false,\n loop: false,\n delay: 125\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"yscale = d3.scaleBand()\n .domain(co2Totals.map(d => d.key))\n .range([0, h])","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"// to afford bar size comparison, x axis\n// scale needs adjusting\nxscale = {\n let xs\nswitch(iso) {\n case \"XXX\":\n xs = d3.scaleLinear().domain([0, 30000]).range([0, w]);\n break;\n case \"CHN\":\n xs = d3.scaleLinear().domain([0, 8000]).range([0, w]);\n break;\n case \"DEU\":\n xs = d3.scaleLinear().domain([0, 800]).range([0, w]);\n break;\n case \"IND\":\n xs = d3.scaleLinear().domain([0, 1500]).range([0, w]);\n break;\n case \"JPN\":\n xs = d3.scaleLinear().domain([0, 750]).range([0, w]);\n break;\n case \"RUS\":\n xs = d3.scaleLinear().domain([0, 900]).range([0, w]);\n break;\n case \"GBR\":\n xs = d3.scaleLinear().domain([0, 550]).range([0, w]);\n break;\n case \"USA\":\n xs = d3.scaleLinear().domain([0, 2500]).range([0, w]);\n break;\n}\n return xs \n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"// margin surrounding featured visualization\nmargin = ({top: 10, right: 20, bottom: 20, left: 60})","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"xMargin = xscale.copy().range([margin.left, w - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"yMargin = yscale.copy().range([h - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"w = 800;","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"h = 500;","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"data = await FileAttachment(\"co2-combined.csv\").csv();","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"// generates array of years to iterate over\n// we stop at 2014 because that is the last year with data from the US\nyears = {\n var result = [];\n for (var i = 1880; i <= 2014; i++) {\n result.push(i);\n } \n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}