Skip to main content
SimilarExport ZIP
100%

Metis Stack Chart CO2 emissions by Fuel Type and Vehicle

✓ Published0🌍 Public
EElaineYu
Last edited Jul 12, 2017
Created on Jun 27, 2017

This stacked bar chart compares CO2 emissions across vehicle types and fuel types, using data from ImpactOfFuel.csv. It shows the total emissions per vehicle category, with each bar segmented by fuel type (diesel, B20, gasoline, B100, CNG). The visualization uses d3.stack() to compute the layers, d3.scaleBand for the x-axis, and d3.scaleOrdinal for color coding. Hovering over a segment displays a tooltip showing the exact emission value for that fuel type. The data is sorted by total emissions to highlight the largest contributors.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, broken down by fossil fuel types. The data is parsed from a CSV file and rendered as an interactive SVG, with each layer representing a distinct emission category. The visualization uses d3.stack() to compute the stacked series and d3.area() to draw the areas. Labels are positioned automatically using the d3-area-label library. Hovering highlights individual segments, and the chart adapts to window resizing, with axes and scales generated via d3.axisBottom and d3.axisLeft.

Ggcappadaniel
73% match
Loading thumbnail…

Types of vehicles for a fuel type

This visualization shows the distribution of 746 car models across vehicle classes, color-coded by fuel type. A bar chart counts the number of models per vehicle class, with each bar segmented by fuel category. Hovering over a bar segment reveals the make and model of the counted vehicles. Built with the Vega-Lite API and D3.js, the example loads data from a CSV file hosted on Gist, originally sourced from Kaggle. The visualization uses `vl.markBar()`, `vl.x()`, `vl.y()`, and `vl.color()` to encode the categorical and quantitative fields.

AArjun Rao
72% match
Loading thumbnail…

Is your car fuel-efficient?

This interactive scatterplot uses bubbles to explore the link between a car's CO2 emissions and its city fuel consumption, with colors distinguishing fuel types. The visualization is built with the Vega-Lite API, which compiles specifications to Vega for rendering. Data from a Kaggle dataset is loaded via d3.csv. The chart is configured with custom axis styling and font sizes for improved readability. Hovering reveals the fuel type through a tooltip handler.

AArjun Rao
71% match
Loading thumbnail…

Animated Vehicle Consumption Scatterplot

This animated scatterplot visualizes vehicle fuel consumption and CO2 emissions from a 2014 dataset, plotting over 1,000 points with D3.js. Every 17 seconds, the x-axis transitions between CO2 emissions, engine size, and cylinder count, repositioning points via `selection.join` with staggered `transition` delays. The SVG chart uses `scaleLinear` domains, axis generators, and custom labels, with the y-axis fixed to combined MPG. Data loads from a CSV via `d3.csv`, and the reusable chart pattern updates axes and circles smoothly during each attribute swap.

TToly
71% match
Loading thumbnail…

Fork of CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, broken down by fossil fuel types including solids, liquids, gas, cement production, and gas flaring. The chart uses d3.stack with stackOrderAscending and d3.area with curveBasis to render the layered paths, while d3-area-label positions text labels within each segment. Data comes from a CSV file loaded via d3.csv, with emissions converted from raw values to gigatons. The visualization employs d3.scaleTime and d3.scaleLinear for axes, d3.schemeDark2 for color encoding, and responds to window resize events for responsive rendering.

KKirsten Lund
71% match
Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time from 1790 onward, broken down by source categories and fossil fuel types. The five segments represent Gas, Liquids, Solids, Cement Production, and Gas Flaring, with the chart emphasizing the dominant historical contributions of solid fuels. The visualization uses d3.stack, d3.scaleTime, and d3.area with curveBasis to create smooth stacked areas. Labels are positioned automatically using the d3-area-label library, while an ordinal color scale from d3-scale-chromatic distinguishes each category. The chart is fully responsive and includes axis tick marks and a rotated y-axis title, with basic tooltips showing segment names on hover.

CChristine Lanser
71% match
Loading thumbnail…

Fork of CO2 Emissions Over Time

This stacked area chart shows global CO2 emissions over time, segmented by fossil fuel sources including gas, liquids, solids, cement production, and gas flaring. The visualization uses d3.stack and d3.area to render the layered paths, with labels positioned automatically via d3-area-label. Data is loaded from a CSV file, and emissions values are converted from raw numbers to gigatons. The chart updates responsively on window resize, and includes hover effects that darken each area, with axis labels and a custom y-axis title.

MMalempatiSaranya
71% match
Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, broken down by fossil fuel type: gas, liquids, solids, cement production, and gas flaring. The data is sourced from a cloud.json file and filtered to show years after 1790. Built with D3 v4, the visualization uses `d3.stack` and `d3.area` to render the SVG paths, with `d3.areaLabel` positioning text labels within each segment. The chart updates responsively on window resize, and hovering over a segment turns it black.

Ppgy-iacas
70% match