Project Prototype round 3 v3

100%

Project Prototype round 3 v3

✓ Published0🌍 Public

Last edited Oct 29, 2017

Created on Oct 28, 2017

This interactive bar chart visualizes greenhouse gas (GHG) emissions trends for countries over time, ranked by cumulative emissions. A slider lets users scrub through years from 1990 to 2013, with bars transitioning to show each country’s annual and cumulative emissions. The visualization uses D3 v4 to dynamically filter and sort data from a CSV file, updating scales, axes, and groups via a general update pattern. Tooltips and labeled stems appear for selected years, highlighting the relationship between population, emissions, and ranking.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/RobertDelgado/'>RobertDelgado</a>'s block: <a href='http://bl.ocks.org/RobertDelgado/e0f491045afab48b88dbeffc5e89205e'>Project Prototype round 3</a>

forked from <a href='http://bl.ocks.org/RobertDelgado/'>RobertDelgado</a>'s block: <a href='http://bl.ocks.org/RobertDelgado/6f175b6f96aa004d9a26bd9c882612c0'>Project Prototype round 3 v2</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Project Prototype round 3 v3

This visualization plots cumulative greenhouse gas emissions from 1990 to 2013 for a ranked subset of countries, using a slider to animate through the years. Annual emissions are shown as a stacked bar segment that grows over time for each country, with the current year highlighted and each country’s cumulative total represented by the bar’s height. The chart is built with D3 v4, using `d3.scaleBand` for the categorical country axis and a linear scale for the emission values, and updates the bar heights and positions via a custom `render` function that filters the CSV data by year and rank.

RRobertDelgado

94% match

Loading thumbnail…

Project Prototype round 3 v2

This interactive D3.js v4 visualization animates greenhouse gas (GHG) emissions by country from 1990 to 2013, using a slider to scrub through years. It displays cumulative emissions as vertical bars, with each bar segment representing a year’s contribution, sorted by final country rank. The tooltip reveals details on hover. Built with Blockbuilder, it uses `d3.scaleBand` for country positioning, `d3.scaleLinear` for the y-axis, and `generalUpdate`/`generalEnter` functions to manage dynamic data joins as the year changes.

RRobertDelgado

93% match

Loading thumbnail…

Project Prototype round 3 v3

This interactive visualization tracks greenhouse gas emissions (GHG) and cumulative emissions for multiple countries from 1990 to 2013. A slider controls the year, updating a dot plot where each circle’s vertical position represents cumulative emissions, with a visible stem indicating the annual contribution. The code uses D3 v4 with a slider input, data filtering based on year and final rank, and a custom generalUpdate/generalEnter pattern for data joins. The tooltip feature is present in the CSS but not fully implemented in the visible code.

RRobertDelgado

93% match

Loading thumbnail…

Project Prototype round 3

This interactive D3.js v4 visualization shows the cumulative greenhouse gas emissions of selected countries over time (1990-2013), with bar segments representing yearly GHG contributions stacked by country. A tooltip displays additional details when hovering. The code uses D3's `scaleBand` for the country axis, `scaleSqrt` for the cumulative emission values, and `selectAll`, `enter`, `exit`, and `merge` to update the SVG elements dynamically as the year and number of countries are adjusted. The data comes from the provided `Data3.csv` file.

RRobertDelgado

92% match

Loading thumbnail…

Project Prototype 3

This visualization displays cumulative greenhouse gas emissions for the ten highest-ranked countries from 1990 to 2013, with each country represented by a circle scaled by population and a line indicating annual emissions. The chart uses D3 v4 to create an SVG scene with animated transitions between years, including top and bottom marks connected by rectangles to show cumulative totals. The data comes from a CSV file containing country, year, GHG values, cumulative GHG, and population figures, rendered using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`.

RRobertDelgado

89% match

Loading thumbnail…

Project Prototype 3

This visualization compares cumulative greenhouse gas emissions for the ten highest-emitting countries across yearly intervals. It uses circular marks sized by population, vertical rectangles showing the current year's emissions contribution, and dashed lines connecting cumulative totals to a baseline. The code employs d3.scaleBand for country positioning, d3.scaleLinear for emission values, and d3.axisBottom/axisBottom for axes, with data loaded from a CSV file containing GHG, population, and rank fields.

RRobertDelgado

88% match

Loading thumbnail…

Refactor Project with pan & zoom2

This interactive bar chart visualizes cumulative greenhouse gas emissions for the top ten ranked countries from 1990 to 2013, using a slider to animate through years. Each bar is segmented to show annual GHG contributions, with hover tooltips displaying population and cumulative values. Built with D3 v4, the visualization supports pan and zoom via d3.zoom, scaling the chart up to 40x. The code applies a general update pattern for data joins and uses d3-tip for tooltips, with data sourced from Data3.csv.

RRobertDelgado

88% match

Loading thumbnail…

Refactor Project xxx

A multi-year animated bar chart displays cumulative greenhouse gas emissions for the top ten ranked countries, with each bar tracking the annual addition to its total. The visualization uses D3 v4 to sort and filter CSV data by final rank, then updates the chart for each year. Code implements custom update, enter, and attribute functions for managing SVG elements, along with a d3.zoom interaction for exploring the timeline. Tooltips and floating labels provide contextual information about population and emissions values.

RRobertDelgado

88% match