D3 Data Dashboard

100%

D3 Data Dashboard

✓ Published1🌍 Public

Last edited Jul 26, 2023

Created on Jul 25, 2023

This dashboard visualizes global CO2 emissions across countries, continents, and years, allowing users to compare total emissions or per-capita values via an interactive world map, a pie chart of continental shares, and a bar chart of annual trends for a selected country. Built with D3 v4, it uses `d3.geoMercator` and `d3.geoPath` for map rendering from TopoJSON world atlas data, plus animated SVG transitions for the map, pie arcs, and bars. A year slider and radio buttons drive updates, with tooltips revealing detailed values from the CSV dataset.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 - Multi-Line Chart

This multi-line chart displays carbon dioxide emissions per country from 1970 to 1979, using four distinct colored lines with circular data points. The visualization loads CSV data from a GitHub gist and renders an SVG with a light gray background panel, axis labels, and a title. It uses d3.csv for data loading, d3.line to construct the paths, and d3.axisBottom and d3.axisLeft for the axes. Interactive tooltips appear on mouseover, showing the emission value for the hovered point, with circles enlarging to indicate selection. The chart also incorporates colorbrewer colors and the d3-legend library.

CChandana Srinivas

78% match

Loading thumbnail…

D3 - Time Series HeatMap

This example visualizes methane emissions across countries and years using a D3.js heatmap. Each cell’s color encodes emission values via `d3.scaleSequential` with the Viridis interpolator, while `d3.scaleBand` positions countries on the x-axis and years on the y-axis. The code loads CSV data from a GitHub gist, renders axes with `d3.axisBottom` and `d3.axisLeft`, and includes an interactive tooltip that displays exact CH4 values on mouseover. A horizontal color legend, built with the d3-legend library, accompanies the SVG chart.

CChandana Srinivas

77% match

Loading thumbnail…

Fork of Green house gas bar chart

This bar chart visualizes greenhouse gas emissions by country for 2022, measured in MtCO₂e. It uses D3 v7’s `scaleLinear` and `scaleBand` to map population values and country names, with axes generated via `axisLeft` and `axisBottom`. The SVG rendering includes an animated tooltip that appears on mouseover, displaying each country’s emission value. Data is loaded from a remote CSV file using D3’s `csv` method, and the chart features a custom interactive fill effect on hover.

Ssnehareddygurram

76% match

Loading thumbnail…

D3 World Map

This visualization shows a world map rendered as SVG paths using a D3 Mercator projection. The map displays country boundaries loaded from a TopoJSON file, selected via `topojson.object` and drawn with `d3.geo.path`. A separate bar chart built with `scaleLinear` and `scaleBand` visualizes population data from a CSV file, showing values for labeled countries. The example demonstrates combining geographic and categorical data in a single D3 visualization.

JJens Pehrson

76% match

Loading thumbnail…

Fork of Green house gas bar chart

This bar chart displays greenhouse gas emissions (in MtCO₂e) for several countries, using horizontal bars ordered by country name. Built with D3 v7, it maps population values to a linear x-scale and country names to a band y-scale, rendering SVG rectangles with axes. A custom tooltip appears on mouseover, showing the emission value, while the bar color darkens slightly on hover. Data is loaded from a CSV file and parsed as numbers before rendering.

VVitor Leonel

76% match

Loading thumbnail…

Area Chart

This area chart visualizes global warming trends by plotting annual CO2 emissions per capita against time. The chart uses a black filled area beneath a curve to emphasize emission levels over the years, with axes labeled for both time and emission intensity. Built with D3 v5, the visualization employs `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth path, while `axisBottom` and `axisLeft` add gridlines and tick marks. Data comes from the Data Canvas - Sense Your City dataset, rendered as SVG in the browser.

RRohith Reddy

75% match

Loading thumbnail…

CO2

This visualization displays global CO2 emissions from 2000 to 2014, showing a steady decline in values over time. The data is loaded from a CSV file using the D3 v4 and v5 libraries, with each value converted to a numeric format. The page, structured around an HTML container, fetches the dataset and logs it to the console, though the chart itself is not yet rendered. The example relies on D3’s `csv` method for data parsing and demonstrates a foundational step in building a time-series bar or line chart.

Llamiyaa

75% match

Loading thumbnail…

Fork of CO2 Emissions Over Time

A stacked area chart of global CO2 emissions from 1790 onward, segmented by fossil fuel types (gas, liquids, solids) and other sources like cement production and gas flaring. The visualization uses D3 v4 with SVG rendering, employing `d3.stack` for layering and `d3.area` with `curveBasis` for smooth paths. Labels are positioned via the `d3-area-label` library, while hover effects darken each segment. Data comes from a CSV of global emissions, scaled to gigatons, with responsive resizing and interactive axes.

Kkzaiets

75% match