Fork of React & D3 Vibecoding Starter

Fork of Visualize Data with a Heat Map| fcc project-3

This heat map visualizes monthly global land-surface temperature anomalies from 1750 to 2015, with each cell colored by variance from a base temperature. The visualization uses a blue-to-red diverging color scale to represent temperature deviations, and a legend displays the value ranges. Built with React and D3 v7, the chart renders as an SVG with interactive tooltips that show the year, month, and temperature on hover. The data comes from the freeCodeCamp Project Reference Data repository, processed using D3's `scaleLinear`, `scaleBand`, and `json` APIs.

RRonald Ngounou

83% match

Global Climate Temperature Trends

This interactive visualization displays global temperature anomalies from 1880 to 2020, with data relative to the 20th-century average. Users can toggle between line and area chart views, adjust line smoothing with d3.curveLinear, curveMonotoneX, or curveBasis, and filter by decade through a button panel. Hover tooltips reveal year-specific values, while a statistics sidebar calculates trends, volatility, and range using linear regression. The visualization uses D3.js v7 scales and axes within a React framework, with data loaded from a CSV file.

82% match

Stunning viz

This interactive climate dashboard visualizes CO₂ emissions and temperature anomalies for ten major emitting countries, with bars color-coded from cyan to red by temperature anomaly. Hovering over a bar reveals detailed country data through a custom tooltip, while a statistics panel displays average temperature, maximum emissions, and total data points. Built with React 19 and D3.js 7, the visualization uses `scaleBand` and `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for grid and tick rendering, and smooth `transition().duration()` animations for the entrance effect. SVG rendering with glassmorphism styling and a gradient background completes the modern interface.

81% match

Fork of React & D3 Vibecoding Starter

This interactive data visualization recreates Minard's famous map of Napoleon's 1812 Russian campaign, showing the army's advance and retreat as colored paths whose thickness scales with troop count. A separate temperature chart aligns below the map by longitude, displaying readings with dates, while city labels mark key locations. Built with React and D3.js (v7), the code uses `d3.scaleLinear` and `d3.scaleSqrt` for coordinates and line width, `d3.line` for path generation, and `d3.csv` to load troop, temperature, and city data from CSV files.

80% match

Fork of Fork of React & D3 Vibecoding Starter

This interactive line chart shows the change in a value across New York counties from 2012 to 2015. Users can click on a line or legend item to highlight a specific county and dim the others. Built with React and D3 v7, the visualization loads data from a CSV and uses a monotone cubic curve, a linear y-scale, and a legend to display all counties at once.

Fork of Stylized Line Chart

This interactive SVG line chart visualizes ambient temperature over time using data from the Data Canvas Sense Your City Dataset. The chart plots temperature values along a smooth natural curve, with time on the x-axis and temperature on the y-axis, rendered in teal against a minimalist Poppins-font interface. Built with React and D3 v5, it leverages D3’s `scaleTime`, `scaleLinear`, and `curveNatural` functions for axis scaling and path interpolation. The axes and marks are constructed through custom React components, with data fetched asynchronously via D3’s `json` loader and rendered using SVG elements.

Ssz3g12

fcc-d3-03

This example visualizes monthly global land-surface temperature anomalies from 1753 to 2015, using a heatmap of red rectangles over an SVG. It relies on React and D3 v7 (via `json`, `scaleLinear`, and `scaleBand`) to render axes, tooltips, and color opacity based on temperature variance. The data comes from the freeCodeCamp global-temperature JSON file. Hovering over a bar displays the year, month, actual temperature, and variance using a positioned tooltip.

SSiddharthMittal07

Fork of Stylized Line Chart

This visualization plots temperature readings against time, using a natural cubic spline to create a smooth, stylized line. The chart’s interactive hover tooltips appear on circular data points, and both axes are labeled with custom tick formatting. Built with React and D3 v5, it uses d3’s `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and the `line` and `curveNatural` functions from d3 to shape the path, sourcing data from the Data Canvas Sense Your City week temperature dataset.

TThiago Sawada