28:null 29:["$","title",null,{"children":"Module 10 | HungVu | Observable"}] 2e:T7f3,

Container for Pie Chart

Container for Bar Chart

2f:T6ba,function drawPie(data, dataType, currentYear) { var pie = d3.select("#pie"); var arcs = d3.pie() .sort((a, b) => { if (a.Continent < b.Continent) return -1; if (a.Continent > b.Continent) return 1; return a.Emissions - b.Emissions; }) .value((d) => d.Emissions); var path = d3.arc() .outerRadius(pie.attr('height') / 2 - 50) .innerRadius(0); // Filter data based on the selected year var yearData = data.filter((d) => d.Year == currentYear); var continents = []; for (var i = 0; i < yearData.length; i++) { var continent = yearData[i].Continent; if (!continents.includes(continent)) { continents.push(continent); } } var colorScale = d3.scaleOrdinal() .domain(continents) .range(['#ab47bc', '#7e57c2', '#26a69a', '#42a5f5', '#78909c']); var update = pie.select('.chart').selectAll('.arc').data(arcs(yearData)); // VISUAL DATA POINTS // HOW MANY BARS ARE THERE ON THE VISUAL FIELD // N // VARIABLE DATA POINTS // HOW MANY ROWS IN THE DATA THAT WE PASS IN // N // IF WE CHANGE SOMETHING IN THE INTERACTIVE COMPONENT // VISUAL: N Components // DATA: N Rows -> N-1 Rows // e.g. DATA: 10 -> 9 update.exit().remove(); // VISUAL: N Components // DATA: N Rows -> N+1 Rows // e.g. DATA: 10 -> 11 update.enter() .append('path').classed('arc', true) .attr('stroke', '#dff1ff') .attr('stroke-width', '0.25px') .merge(update) .attr('fill', (d) => colorScale(d.data.Continent)) .attr('d', path); var pieTitle = 'Total Emissions by Country for ' + currentYear; if (dataType !== "Emissions") pieTitle = 'Total Emissions per Capita by Country for ' + currentYear; pie.select('.pie-title').text(pieTitle); }30:T91b,function drawBar(data, dataType, currentCountry, currentYear) { var bar = d3.select('#bar'); // Define padding and other chart parameters var padding = { top: 30, right: 30, bottom: 30, left: 110, }; var barPadding = 1; var width = bar.attr('width'); var height = bar.attr('height'); // Filter data based on the selected country and sort by year var countryData = data.filter((d) => d.Country === currentCountry) .sort((a, b) => a.Year - b.Year); // Create x and y scales var xScale = d3.scaleLinear() .domain(d3.extent(data, (d) => d.Year)) .range([padding.left, width - padding.right]); var yScale = d3.scaleLinear() .domain([0, d3.max(countryData, (d) => d[dataType])]) .range([height - padding.bottom, padding.top]); // Calculate bar width and create axes var barWidth = xScale(xScale.domain()[0] + 1) - xScale.range()[0]; var xAxis = d3.axisBottom(xScale).tickFormat(d3.format('.0f')); var yAxis = d3.axisLeft(yScale); // Update and transition the x-axis d3.select('.x-axis') .attr('transform', 'translate(0,' + (height - padding.bottom) + ')') .call(xAxis); // Update and transition the y-axis d3.select('.y-axis') .attr('transform', 'translate(' + (padding.left - barWidth / 2) + ',0)') .call(yAxis); // Set axis label and chart title var axisLabel = dataType === 'Emissions' ? 'CO₂ Emissions in kilotons' : 'CO₂ Emissions in tons per capita'; var barTitle = 'CO₂ Emissions for ' + currentCountry; d3.select('.y-axis-label').text(axisLabel); d3.select('.bar-title').text(barTitle); // Update, exit, and enter bars var selectedBars = bar.selectAll('.bar').data(countryData); var t = d3.transition().duration(1000).ease(d3.easeBounceOut); selectedBars.exit() .transition(t).delay((d, i, nodes) => (nodes.length - i - 1) * 100) .attr('height', 0) .remove(); selectedBars.enter() .append('rect') .classed('bar', true) .attr('fill', (d) => (d.Year == currentYear ? '#16a085' : '#1abc9c')) .attr('y', height - padding.bottom) .merge(selectedBars) .attr('x', (d) => (xScale(d.Year) + xScale(d.Year - 1)) / 2) .attr('width', barWidth - barPadding) .transition(t).delay((d, i) => i * 100) .attr('y', (d) => yScale(d[dataType])) .attr('height', (d) => height - padding.bottom - yScale(d[dataType])); }31:T4cc,function updateTooltip(event, dataType) { var tooltip = d3.select('.tooltip'); var target = d3.select(event.target); var isCountry = target.classed('country'); var isBar = target.classed('bar'); var isArc = target.classed('arc'); var units = dataType === 'Emissions' ? 'kilotons' : 'tons per capita'; var data; var percentage = ''; if (isCountry) { data = target.data()[0].properties } if (isArc) { data = target.data()[0].data; percentage = `

Percentage of total: ${getPercentage(target.data()[0])}

`; } if (isBar) { data = target.data()[0] } tooltip .style('opacity', 0.9*(isCountry || isArc || isBar)) .style('left', event.pageX - tooltip.node().offsetWidth / 2 + 'px') .style('top', event.pageY - tooltip.node().offsetHeight / 2 + 'px'); if (data) { var dataValue = data[dataType] ? data[dataType].toLocaleString() + ' ' + units : 'Data Not Available'; tooltip.html(`

Country: ${data.Country}

${dataType}: ${dataValue}

Year: ${data.Year || d3.select('#slider').property('value')}

${percentage} `); } }32:T779,FileAttachment("all_data@2.csv").csv().then(function(data) { //// VARIABLE INSTANTIATION //// var extremeYears = d3.extent(data, d => d.Year); var currentDataType = d3.select('input[name="data-type"]:checked').attr('value'); var currentCountry = d3.select('select[name="country"]').node().value; var currentYear = extremeYears[0]; var width = 960; var height = 400; //// VARIABLE INSTANTIATION //// //// RENDERING //// createPie(width, height); drawPie(data, currentDataType, currentYear); createBar(width, height); drawBar(data, currentDataType, currentCountry, currentYear); highlightBars(currentYear); d3.select('#slider-text').text(currentYear); // update slider text... //// RENDERING //// //// EVENT HANDLING //// // listener for onChange -> #country d3.selectAll('select[name="country"]').on('change', function(event) { currentCountry = event.target.value; drawBar(data, currentDataType, currentCountry, currentYear); }); // listener for onChange -> #slider // d3.select('#slider') .property('min', extremeYears[0]) .property('max', extremeYears[1]) .property('value', currentYear) .on('input', function(event) { currentYear = event.target.value; drawPie(data, currentDataType, currentYear); // update pie chart... highlightBars(currentYear); // update highlighted bars... d3.select('#slider-text').text(currentYear); // update slider text... }); // listener for onChange -> #data-type // d3.selectAll('input[name="data-type"]').on('change', function(event) { drawBar(data, event.target.value, currentCountry, currentYear); }); // listener for onHover -> svg // d3.selectAll('svg').on('mouseover', function(event) { updateTooltip(event, currentDataType); }); //// EVENT HANDLING //// }).catch(function(error) { console.error('Error loading the data:', error); });33:[{"id":"1a559c1c0de836f9c50a5623164b0dbf3788643bfe2ffa8a8429d0943d6d32d17ba7e922331e5feccc86a3e21e209ecd0ca81f8d93f5b18ba83708c573b6f2fc","href":"https://static.observableusercontent.com/files/1a559c1c0de836f9c50a5623164b0dbf3788643bfe2ffa8a8429d0943d6d32d17ba7e922331e5feccc86a3e21e209ecd0ca81f8d93f5b18ba83708c573b6f2fc","name":"all_data@2.csv","type":"text/csv","lastModified":1758600121438.403,"size":302255},{"id":"1a559c1c0de836f9c50a5623164b0dbf3788643bfe2ffa8a8429d0943d6d32d17ba7e922331e5feccc86a3e21e209ecd0ca81f8d93f5b18ba83708c573b6f2fc","href":"https://static.observableusercontent.com/files/1a559c1c0de836f9c50a5623164b0dbf3788643bfe2ffa8a8429d0943d6d32d17ba7e922331e5feccc86a3e21e209ecd0ca81f8d93f5b18ba83708c573b6f2fc","name":"all_data (1).csv","type":"text/csv","lastModified":1758771118700.823,"size":302255}] 2c:{"id":"dd34516af3a118cc","slug":"module-10","title":"Module 10","thumbnail":"73e4454e22868c6600e7fdf5e7c3efe363c78db0b42b3a28d9322af6f32248ea","access_level":"public","create_time":"$D2025-09-23T02:10:32.520Z","update_time":"$D2025-09-23T04:05:27.302Z","view_time":null,"first_public_time":"$D2025-09-23T03:57:04.938Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f5c7309b26125fcc","login":"hungvu","name":"HungVu","avatar_url":"https://avatars-next.observableusercontent.com/e05ed76fee20675b8e0b08541d3662553fef60af1246d701a500b9069a501315","tier":"starter_2024"},"version":213,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"40925a5c5b74838c","login":"hung-vu","name":"Hưng Vũ","avatar_url":"https://avatars-next.observableusercontent.com/a47aa48d8885ba215f17080681efcb152b7cd359e840b63a0657d39e5248eebe","tier":null}],"members":[{"type":"team","id":"f5c7309b26125fcc","login":"hungvu","name":"HungVu","avatar_url":"https://avatars-next.observableusercontent.com/e05ed76fee20675b8e0b08541d3662553fef60af1246d701a500b9069a501315","tier":"starter_2024","role":"editor"},{"type":"individual","id":"40925a5c5b74838c","login":"hung-vu","name":"Hưng Vũ","avatar_url":"https://avatars-next.observableusercontent.com/a47aa48d8885ba215f17080681efcb152b7cd359e840b63a0657d39e5248eebe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"title":"Module 10","cells":[{"id":0,"value":"# Module 10","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2e","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"function createPie(width, height) {\n var pie = d3.select(\"#pie\").attr('width', width).attr('height', height);\n \n pie.append('g').classed('chart', true)\n\t\t.attr(\n\t\t\t'transform',\n\t\t\t'translate(' + width / 2 + ', ' + (height / 2 + 10) + ')',\n\t\t);\n \n\tpie.append('text').classed('pie-title', true)\n\t\t.attr('x', width / 2)\n\t\t.attr('y', '1em')\n\t\t.attr('font-size', '1.5em')\n\t\t.style('text-anchor', 'middle');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function createBar(width, height) {\n var bar = d3.select('#bar');\n bar.attr('width', width).attr('height', height);\n \n\t// Append a group element for the x-axis\n\tbar.append('g').classed('x-axis', true);\n\n\t// Append a group element for the y-axis\n\tbar.append('g').classed('y-axis', true);\n\n\t// Append a text element for the y-axis label\n\tbar.append('text')\n\t\t.attr('transform', 'rotate(-90)') // Rotate the text\n\t\t.attr('x', -height / 2) // Position the text\n\t\t.attr('y', '1em')\n\t\t.style('font-size', '1em') // Set font size\n\t\t.style('text-anchor', 'middle') // Center the text\n\t\t.classed('y-axis-label', true); // Add a class for styling\n\n\t// Append a text element for the chart title\n\tbar.append('text')\n\t\t.attr('x', width / 2) // Center the text\n\t\t.attr('y', '1em')\n\t\t.attr('font-size', '1.5em') // Set font size\n\t\t.style('text-anchor', 'middle')\n\t\t.classed('bar-title', true); // Add a class for styling\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function highlightBars(year) {\n\td3.select('#bar')\n\t\t.selectAll('rect')\n\t\t.attr('fill', (d) => (d.Year == year ? '#16a085' : '#1abc9c'));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"function getPercentage(d) {\n\tvar angle = d.endAngle - d.startAngle;\n\tvar fraction = (100 * angle) / (Math.PI * 2);\n\treturn fraction.toFixed(2) + '%';\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2d:"$2c:body"

CO₂ Dashboard