Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
Ssaiabhishekmunnangi@gmail.com
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter

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.

Vveginetiumeshchandra@lbrce.ac.in
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 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
81% match
Loading thumbnail…

Fork of HTML Starter

This multi-series line chart displays three synthetic data streams—sales, profit, and expense—across 150 indexed points. The visualization uses D3 v7 to generate the data and render an SVG line chart with distinct colored lines for each series. The chart includes labeled axes for the index and value, a chart title, and a manual legend identifying each line. The code uses d3.range to create the data, and d3.scaleLinear, d3.line, d3.axisBottom, and d3.axisLeft to construct the visualization.

Ssaiabhishekmunnangi@gmail.com
80% match
Loading thumbnail…

Fork of HTML Starter

This area chart visualizes monthly grocery sales revenue using D3.js v6 with SVG rendering. It fetches CSV data from a GitHub Gist, then displays revenue trends across months with labeled axes and steelblue fill. The code employs D3's `scaleBand`, `scaleLinear`, `area`, and `axisBottom`/`axisLeft` APIs, with data converted to numeric values via unary plus operator.

Ssahithya.voleti@gmail.com
80% 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
79% match
Loading thumbnail…

Fork of HTML Starter

This visualization presents an interactive dashboard for exploring environmental sensor data. It renders a world map alongside line charts and a contour map, allowing users to select different sensor attributes from a dropdown menu. The code uses React with hooks, D3 scales and time parsing, and SVG rendering. Data is fetched from a local API endpoint, with brushed time ranges filtering the displayed temporal and spatial patterns.

CCheng Tang
79% match
Loading thumbnail…

Fork of HTML Starter

This visualization shows a scatter plot of fruit dataset attributes, with each point colored by fruit type (apple, orange, banana, grape) and positioned by width on the x-axis and height on the y-axis. The code uses D3.js v6 functions including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` to load data from a GitHub gist. It renders SVG circles with a radius of 5 pixels and includes custom axis labels for "Width" and "Height" in green, with a red title heading. The plot fills the browser window using dynamic width and height values.

Ssahithya.voleti@gmail.com
79% match