3f:null 40:["$","title",null,{"children":"Proyecto | Nicolas Rancruel Ramirez | Observable"}] 46:T76d,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); });47:T4c0,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} `); } }48:T6a8,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); }49:T907,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])); }4a:[{"id":"8f057fa167d69463d18d59b2716030420ea65b7c0623e4b8ba3d3f48f88dec0137c957eb7acabffa46ef52d537e327232849ffa9dc460ef5328ea2b9168b03af","href":"https://static.observableusercontent.com/files/8f057fa167d69463d18d59b2716030420ea65b7c0623e4b8ba3d3f48f88dec0137c957eb7acabffa46ef52d537e327232849ffa9dc460ef5328ea2b9168b03af","name":"all_data.csv","type":"text/csv","lastModified":1790122868472,"size":302255}] 44:{"id":"6a457e844c982608","slug":"proyecto","title":"Proyecto","thumbnail":"c4c3de382c3fa39c21dfbe92b6d592969281cf7b0d3944b4f7bd121a513b55e7","access_level":"public","create_time":"$D2026-09-23T00:44:11.428Z","update_time":"$D2026-09-23T01:14:00.273Z","view_time":null,"first_public_time":"$D2026-09-23T00:49:30.706Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e478d010daa9f90e","login":"nicolasrancruel","name":"Nicolas Rancruel Ramirez","avatar_url":null,"tier":"free_2026","bio":"","following":false},"version":43,"publish_version":43,"role":null,"authored":false,"authors":[{"type":"individual","id":"b894d626951ea721","login":"nicolasrancruel","name":"Nicolas Rancruel Ramirez","avatar_url":null,"tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"e478d010daa9f90e","login":"nicolasrancruel","name":"Nicolas Rancruel Ramirez","avatar_url":null,"tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Proyecto","cells":[{"id":1,"value":"# Proyecto","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$46","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$47","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"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":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"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":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"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":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$48","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$49","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"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":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"2"}} 45:"$44:body"