Project prototype v1

100%

Project prototype v1

✓ Published0🌍 Public

Last edited Sep 22, 2025

Created on Sep 22, 2025

Forked from CO2 emissions vs Year Project prototype v1

This interactive dashboard displays CO₂ emissions over time as a scatter plot, with each point colored by country using `d3.scaleOrdinal` and `d3.schemeCategory10`. A button toggles between the scatter plot and a world map rendered from an external SVG file. The scatter plot uses `d3.scaleLinear` scales and axes from `d3.axisBottom` and `d3.axisLeft`, while the map loads via `fetch` and applies randomly generated colors to regions. Data comes from a CSV file loaded with `d3.csv`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

CO2 emissions vs Year Project prototype v1

This interactive visualization toggles between a scatter plot of CO2 emissions over time and a world map. The scatter plot uses D3 scales and axes to render yearly emissions data from a CSV file, while the map displays a static SVG of world regions with randomly assigned colors. A React button switches between the two views.

BBrian Hulbert

89% match

Loading thumbnail…

CO2 emissions vs Year Project prototype v1

This prototype visualizes global CO₂ emissions changes over time using a choropleth world map. It loads yearly emission values per country from a CSV and maps them to a white-to-green color scale applied to SVG country paths. The React app manages the map state, while D3 v7 utilities handle CSV loading, color scaling, and the rendering logic via the `d3` library’s `select`, `scaleLinear`, and `csv` modules.

BBrian Hulbert

85% match

Loading thumbnail…

CO2 Emissions Project prototype v1

This prototype displays a static world map loaded from an SVG file, with the map scaled to fill the viewport. The visualization currently renders the map without data encodings or interactive elements. Built with React and D3 v7, the `viz.js` component fetches the `world.svg` file, injects its content into the SVG group, and sets the width and height attributes. Additional utility files define axis and label rendering functions, but they are not invoked in this version. The prototype serves as a base for future CO2 emissions data layering.

BBrian Hulbert

81% match

Loading thumbnail…

D3 Data Dashboard

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.

VVishnu Sudireddy

80% match

Loading thumbnail…

Project Prototype

This D3.js visualization, built with the d3.v4 library, explores the relationship between greenhouse gas emissions and time. It uses a log-scaled scatter plot to compare per-country total GHG emissions across selected years, with red circles highlighting specific countries. The code uses `d3.nest()` to structure the data by country and year and `d3.sum()` for aggregation. The rendering is SVG-based, with axes, text, and data marks drawn using D3's `axisBottom` and `axisLeft` components.

RRobertDelgado

80% match

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3 Emissions

This example uses a React app to render a basic scatter plot of CO2 emissions over time. The chart displays data points for various countries and regions from 1960 onward, sourced from a CSV file. The visualization is created using D3.js version 7, with the `select`, `csv`, `scaleLinear`, and `extent` APIs. A React `useEffect` hook loads the data and calls a custom `viz` function to render circles, mapping the year to the x-axis and emission value to the y-axis.

BBrian Hulbert

79% match

Loading thumbnail…

CO2 emissions Prototype

This choropleth map visualizes CO2 emissions by country for the year 2023. Countries are colored on a red intensity scale, with darker shades indicating higher emissions, while countries lacking data appear with a gray diagonal pattern. The visualization loads geographic path data from a static SVG file and emission data from a CSV, matching country names to their corresponding SVG paths. The map updates after both datasets load, applying fill colors based on emission values relative to a fixed maximum. The implementation uses React with d3-select for DOM manipulation and d3.csv for data parsing.

BBrian Hulbert

78% match

Loading thumbnail…

project d3

This visualization presents global CO2 emissions and population data through a series of linked charts. It shows a line chart of emission trends over the last twenty years, a scatter plot by country, a histogram of emission values, and bar charts highlighting the top and least populated countries. The code uses d3.csv to load the dataset, then employs d3.group, d3.sum, and d3.scaleBand, alongside d3.line, d3.axisBottom, and d3.axisLeft to render SVG charts.

Jjyothirmaijyothi2017@gmail.com

78% match