Global Climate Impact Dashboard

Fork of React & D3 Vibecoding Starter

This interactive React and D3.js visualization displays global temperature anomalies from 1880 to 2023, comparing each year's deviation against the 1951-1980 baseline. The chart combines a dual-color area chart (red for warming, blue for cooling) with a trend line calculated via linear regression on data since 1980. Users can hover over data points for detailed tooltips and toggle climate event milestones, while summary statistics highlight the hottest and coldest years. Built with React 19, D3 v7, and NASA GISS data, the visualization uses `scaleLinear`, `area`, and `line` generators to render the animated data.

NNita

81% match

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example displays the top 10 countries with the highest CO2 emissions in 2019 as a horizontal bar chart, using a dataset loaded from a CSV file. The visualization is built with React components that render SVG marks while leveraging D3’s `scaleBand` and `scaleLinear` to position rectangles along the x and y axes. Axis ticks and labels are generated manually by mapping over scale domains, and the chart includes a blue gridline for each tick value. The page is titled "CO2 emission in the Countries" and updates asynchronously when the data finishes loading.

NNikhilchiguru-8

78% match

Refactor Project zzz3

This visualization animates cumulative greenhouse gas emissions for selected countries from 1990 to 2013, showing stacked bar segments per country that grow over time. Each bar represents a country’s annual emissions added to its cumulative total, with color encoding distinct nations and a ranking filter limiting the display. The code uses D3 v4 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. Data is loaded from a CSV file and filtered dynamically by year, with tooltips providing interactivity.

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.

Refactor Project zzz

This animated visualization shows the cumulative greenhouse gas emissions of the top ten ranked countries from 1990 to 2013, with each country represented by a bar chart that updates over time. The code uses D3 v4 to build the charts, with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and includes d3-tip for tooltips and d3-legend for the legend. The animation transitions between yearly views, displaying floating labels with population and cumulative GHG data, while connecting marks and annotations track changes in country rankings.

Ddabbararakshitha@gmail.com

Project 2

This dashboard visualizes global climate trends with three interactive tabs for temperature anomalies, CO₂ emissions, and their relationship. The temperature view uses a red line-and-marker scatter plot, while emissions appear as green bars over time, and the scatter plot shows purple markers correlating CO₂ with temperature. It loads its data from a GitHub-hosted CSV file. Built with D3 v7 for data loading and Plotly.js for chart rendering, the interface uses Tailwind CSS with tab-switching logic implemented in vanilla JavaScript.

Refactor Project zzz2

This animated visualization tracks cumulative greenhouse gas emissions for multiple countries from 1990 to 2013, showing each nation’s annual contribution as stacked horizontal bars. A floating tooltip, implemented with d3-tip and custom labels, reveals exact values on hover. The rendering uses D3 v4 with scaleBand and scaleLinear axes, while transitions update bar positions and highlight top and bottom performers across years. Data comes from the included CSV file, with countries ranked by total emissions over the period.

CO2 Emissions Per Year V5

This interactive choropleth visualizes global CO2 emissions per country from 1850 to 2023, with a draggable year slider and a green-to-red gradient legend. Users can hover over countries to view precise emission values in a tooltip, and click the legend to filter countries by specific emission ranges. Built with React and D3.js, it uses `geoNaturalEarth1` projection, `geoPath`, and `sliderBottom` to render the map and controls. The visualization loads historical data from a CSV file and allows switching between emissions, population, and GDP metrics.

BBrian Hulbert