Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public
Vveginetiumeshchandra@lbrce.ac.in
Last edited Oct 20, 2025
Created on Oct 20, 2025

This example visualizes climate trends from 2010 to 2022 with a synthetic dataset of 156 monthly records. It combines sky-blue bars for rainfall on a left axis with tomato-colored temperature and green CO₂ lines on a right axis. The chart uses D3.js version 7, employing `d3.scaleTime` for the time axis, `d3.scaleLinear` for the dual quantitative scales, and `d3.line` for the path generation. `d3.select` appends SVG elements, while `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` render the axes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This fork of the HTML Starter visualizes 156 months of synthetic climate data from 2010 to 2022, combining three variables in a single SVG chart. It shows rainfall as skyblue bars against the left axis, while temperature and CO₂ appear as tomato and green lines against the right axis. The code uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.axisRight, and d3.line to render the axes and paths. Data are generated in-browser with Math.sin, Math.cos, and Math.random.

Ssaiabhishekmunnangi@gmail.com
92% match
Loading thumbnail…

Fork of D3 Starter

This D3.js visualization displays three climate change metrics—CO₂ levels, temperature anomaly, and global mean sea level—as multi-line trends over time, using red, blue, and green strokes to distinguish each series. It employs dual y-axes, with temperature and sea level sharing a left scale while CO₂ uses a right scale, rendered via `d3.line` path generators. The SVG output loads data from a remote CSV using `d3.csv`, converts numeric fields with unary plus operators, and applies `d3.scaleLinear` domains and `d3.axisBottom`/`d3.axisLeft`/`d3.axisRight` for tick marks. Axes are formatted with integer tick labels, and lines are drawn with a 2-pixel stroke width.

Ssrisailapu.rc@gmail.com
83% match
Loading thumbnail…

Fork of Fork of third

A line chart displays average monthly temperatures from 2021 to 2024, with time on the x-axis and degrees Celsius on the y-axis. The code loads a local CSV file using `d3.csv`, parses dates with `d3.timeParse`, and builds the visualization with D3 v7. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.curveMonotoneX` for a smooth line, and `d3.axisBottom` and `d3.axisLeft` for tick labels. Orange circles mark each data point with a hover tooltip.

Mmsahithipatel@gmail.com
80% match
Loading thumbnail…

Fork of Fork of Fork of Chart redesign

This example visualizes a time series of daily humidity data as a line chart with overlaid seasonal summaries. The chart uses a colored timeline gradient and highlights distinct season spans (Spring, Summer, Fall, Winter) as shaded rectangles, alongside dotted data points and dashed season mean lines. The visualization is built with React and D3 v5, using `d3.json` to load the dataset, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.area` with `d3.curveBasis` to generate the smoothed line path. The chart is rendered as an SVG, with downsampling applied to the data for smoother curve rendering.

Ssrividyap03
80% match
Loading thumbnail…

Fork of Fork of Activity_7.1.1_Question_2

This area chart visualizes monthly temperature variations, with the shaded region and line highlighting the trend across the months. Built with D3 v7, the chart uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` to generate the filled path. Data is loaded asynchronously from a GitHub Gist via `d3.csv`. Axis labels and tick marks are rendered using `d3.axisBottom` and `d3.axisLeft`, with all SVG elements drawn to a static canvas. The chart is styled with a steelblue line and a semi-transparent lightsteelblue area.

Ppoornachander510@gmail.com
79% match
Loading thumbnail…

Fork of HTML Starter

This interactive horizon chart visualizes air pollution measurements across multiple monitoring stations, allowing users to explore data by month, pollutant type (PM2.5, PM10, NO2, O3, CO, SO2), color scheme, and the number of bands. Built with D3.js version 7, it uses the `d3.csv` loader for external data and renders SVG output. The implementation uses `d3.timeParse` for date handling, `d3.schemeBlues` and related sequential color schemes, and a custom `HorizonChart` function with configurable curves and margins. Users can dynamically filter categories and adjust band intensity through slider controls.

Eeyxxr1260@gmail.com
79% match
Loading thumbnail…

Fork of Svelte + D3: Line

This example visualizes daily global surface temperatures from 1940 to 2024, with each year drawn as a separate line across the day-of-year axis. The visualization highlights the two most recent years—2023 in pink and 2024 in blue—while older years appear as semi-transparent white lines, making recent warming trends immediately visible. The code uses d3.csv with autoType to load data, then builds scales with scaleLinear and generates smooth paths via d3.line with curveCatmullRom. A custom opacity scale fades historical years, while the current and previous year are drawn with full opacity and thicker strokes. The data originates from ClimateReanalyzer’s daily surface temperature records, and the visualization is rendered as SVG within a Svelte component.

SSafrin La Batu
78% match
Loading thumbnail…

Fork of HTML Starter

This bubble chart visualizes weather conditions across 20 US cities, plotting average temperature on the x-axis, precipitation on the y-axis, and encoding air quality index through bubble size and color. The visualization uses d3.csv to load Weather.csv data, with d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, while a legend displays both air quality index ranges and city color assignments. The SVG rendering includes animated transitions for tooltip visibility and hover effects.

Ssahithya.voleti@gmail.com
78% match