Skip to main content
SimilarExport ZIP
100%

Fork of line_graph_Niharika

✓ Published0🌍 Public
NNiharika Reddy Amanaganti
Last edited Mar 25, 2023
Created on Mar 25, 2023
Forked from Hello VizHub

This line chart visualizes pollution levels over time, using a smooth, curved line to connect data points. The visualization is built with D3 v5 and rendered as an SVG, with axes labeled for "Year" and "pollution." The code uses D3's `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the path. Data is loaded from a gist CSV file containing pollution percentages.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in San Francisco. The data comes from Data Canvas - Sense Your City.

Made in this video:

MIT Licensed

Similar vizzes

Loading thumbnail…

Area_chart_Niharika

An area chart visualizes pollution percentages by year, filling the space beneath a smooth curve with orange. The data comes from a GitHub gist and is loaded via `d3.csv`. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with axes rendered using `d3.axisBottom` and `d3.axisLeft`. The area path is generated with the `d3.area` generator and a `curveBasis` interpolation, all drawn as SVG elements.

NNiharika Reddy Amanaganti
80% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example visualizes daily air-pollution trends for four pollutants—NO2, O3, SO2, and CO—in Phoenix using D3 v6. It renders an SVG multi-line chart, with each pollutant line colored by a categorical scale and labeled near its final data point. The code loads data from a local CSV, parses dates with `d3.timeParse`, and generates paths with `d3.line`. Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Hharshabandi3060@gmail.com
78% match
Loading thumbnail…

Fork of Hello VizHub

This scatterplot visualizes NO2 mean levels over time using air pollution data loaded from a GitHub-hosted CSV. The view uses an SVG with D3 v7 to render blue circles for each data point, with time-based x-axis and linear y-axis. Code demonstrates D3’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` for chart construction, plus mouseover tooltips via D3 selections. The example also showcases importing D3 via UNPKG and local ES6 modules, as in the original Hello VizHub template.

Hharshabandi3060@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Stylized Line Chart

This visualization shows the relationship between training steps and reward values across multiple data series, with each point annotated by its pollutant label. A natural cubic spline connects the data points, with circular markers emphasizing individual observations. The chart is built using React and D3 v5, employing `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and the `line` generator with `curveNatural` for the smoothed path. Data is loaded asynchronously from an external CSV file via `d3.csv`, and the SVG output is styled with a Poppins font and custom tick colors.

Llloydy8
76% match
Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes the decline in ozone-depleting substance emissions from 1960 to 2014. The data, loaded via `csv` from a GitHub gist, is rendered as a smooth curve using D3’s `line` generator with `curveBasis`. Scales are set with `scaleLinear` for both axes, while `axisLeft` and `axisBottom` add labeled ticks with gridlines. The React-based example uses SVG output, styling the maroon path with a thick stroke via CSS.

SSquad-UNT
76% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This heatmap shows daily mean concentrations of four air pollutants (NO2, O3, SO2, and CO) over time, with color intensity indicating pollution levels. The visualization uses D3.js v6 to read a CSV file of EPA air quality data, parse dates, and render an SVG with a color scale based on the `d3.scaleSequential` with the YlGnBu interpolator. Each cell represents a pollutant-date combination, and hovering reveals a tooltip with the exact date and value. The chart employs `d3.axisTop` and `d3.axisLeft` for labeled axes.

Hharshabandi3060@gmail.com
75% match
Loading thumbnail…

Fork of Line chart

This fork of a line chart displays daily temperature readings across multiple districts over time, with each district assigned a distinct color from a categorical scale and identified via a custom color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by district, while parsing dates with Day.js and reading CSV input from a GitHub repository. Axes include grid lines and rotated labels, and the chart is rendered as an SVG with styled paths using mix-blend-mode for overlapping lines.

Vvidhyanamini
75% match
Loading thumbnail…

Fork of Fork of Chart redesign

This chart visualizes daily humidity data as a smooth, curved line over time, with seasonal background bands and mean lines for each season. It uses D3.js v5 within a React framework, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` with a basis curve for rendering. The data is loaded from a GitHub-hosted JSON file, downsampled before plotting. The SVG output includes a linear gradient defs, season-specific rectangles, and small circular dots for each data point, with a custom CSS-styled y-axis.

NNikithakatta30
74% match