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

Container for Pie Chart

Container for Bar Chart

2f:T777,FileAttachment("all_data.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); });30:[{"id":"1a559c1c0de836f9c50a5623164b0dbf3788643bfe2ffa8a8429d0943d6d32d17ba7e922331e5feccc86a3e21e209ecd0ca81f8d93f5b18ba83708c573b6f2fc","href":"https://static.observableusercontent.com/files/1a559c1c0de836f9c50a5623164b0dbf3788643bfe2ffa8a8429d0943d6d32d17ba7e922331e5feccc86a3e21e209ecd0ca81f8d93f5b18ba83708c573b6f2fc","name":"all_data.csv","type":"text/csv","lastModified":1758594034834.893,"size":302255}] 2c:{"id":"092bafc6118d0029","slug":"template","title":"Template","thumbnail":"873796afe32cb5a80c911684f376830b386d4dc74ca7da52d8ad617a553a11bc","access_level":"public","create_time":"$D2025-09-23T02:16:08.115Z","update_time":"$D2026-09-22T02:24:55.162Z","view_time":null,"first_public_time":"$D2025-09-23T03:57:15.766Z","has_unpublished_edits":null,"fork":false,"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":33,"publish_version":33,"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":7,"collection":null,"type":"notebook","body":{"title":"Template","cells":[{"id":0,"value":"# Template","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2e","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function updateTooltip(event, dataType) {\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"function getPercentage(d) {\n\t\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function highlightBars(year) {\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function drawBar(data, dataType, currentCountry, currentYear) {\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function createBar(width, height) {\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"function drawPie(data, dataType, currentYear) {\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function createPie(width, height) {\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"

CO₂ Dashboard