Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart

✓ Published0🌍 Public
SSquad-UNT
Last edited Mar 29, 2022
Created on Mar 29, 2022
Forked from 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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart

This line chart shows the depletion of ozone-depleting substance emissions from 1960 to 2014, with year on the x-axis and emission levels on the y-axis. The visualization uses React and D3 v5, employing d3.csv to load the dataset, scaleLinear for both axes, and d3.line with curveBasis to generate a smooth purple path. Axis labels and a title are added via d3.axisBottom, d3.axisLeft, and SVG text elements within a 1000x500 SVG.

Ddivyageethanjali
84% match
Loading thumbnail…

Fork of Stylized Line Chart

This visualization presents a stylized line chart comparing carbon dioxide emissions and per-capita emissions over time, using data from a CSV file hosted on GitHub. Built with React and D3 v5, it renders as an SVG with distinct axes and a smooth natural curve. The chart employs `scaleTime` and `scaleLinear` for axis scaling, with `line()` and `curveNatural` from D3 to draw the path, while custom React components for the bottom and left axes handle tick marks and labels. Styling is applied via CSS classes, using the Poppins font.

AArlind Pestisha
82% match
Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart plots latency measurements over time. The chart uses a natural cubic spline through `curveNatural` from D3 to create a smooth path, with axes rendered using `scaleTime` and `scaleLinear`. Time ticks are formatted with `timeFormat` to display weekday abbreviations, while axis labels are styled with Poppins font. The data loads from a CSV URL via `d3.csv`, and the visualization is built with React components, using SVG for rendering.

Ddankvader1
79% match
Loading thumbnail…

Fork of Line Chart

This example visualizes annual sales data as a red line chart, with a time-scaled x-axis for years and a linear y-axis for sales values. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG inside a React project, reading CSV data from a GitHub gist. The chart includes labeled axes, gridlines via tick sizing, and a rotated y-axis label, with styling defined in an external CSS file.

TTharun2022
79% 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
79% 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
79% match
Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays temperature readings over time, mapping the data to a line drawn with a smooth natural curve using D3’s `line` and `curveNatural`. The React app uses `scaleLinear` for both axes and renders the visualization as SVG, with reusable `AxisBottom` and `AxisLeft` components generating gridlines and labels. The data comes from a CSV of weekly San Francisco temperatures, though the chart hardcodes a static list of numeric values for the y-axis and uses an index-based x-axis.

Llhikarul
79% match
Loading thumbnail…

Fork of Stylized Line Chart

A fork of a stylized line chart renders temperature readings over time as a smooth curved path with circular points using an SVG and React. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `line().curve(curveNatural)`, and custom React components for axes and marks. Data is loaded via `d3.csv` from a weekly San Francisco temperature dataset, with tooltips showing weekday labels.

AAleksei Vozhdaev
79% match