Fork of Time Series Graph Using D3

100%

Fork of Time Series Graph Using D3

✓ Published2🌍 Public

Last edited Aug 12, 2025

Created on Aug 11, 2025

This visualization shows a time series line chart of a numeric value over time, with a color gradient applied to the line that transitions from gold at the minimum value to blue at the maximum. The chart uses D3 v4 to load CSV data from a GitHub-hosted dataset, parse dates with `d3.timeParse`, and scale the x-axis with `d3.scaleTime` and the y-axis with `d3.scaleLinear`. The line is rendered as an SVG path using `d3.line`, with its stroke set to a `linearGradient` definition containing two color stops.

AI-generated description

Note.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a connected scatterplot showing how a numeric value changes over time, with a time-scaled X axis and linear Y axis. The visualization renders as an SVG using D3 v7, loading CSV data from a remote GitHub repository. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to draw the line and circular points. It also uses `d3.timeParse` to format dates and `d3.csv` for asynchronous data loading.

CCrystal Lee

81% match

Loading thumbnail…

Fork of Time line chart

This line chart visualizes temperature readings over time, with each data point marked by a circle and connected by a smooth natural curve. The visualization uses React components for rendering SVG elements, with D3 v5 functions like `scaleTime` and `scaleLinear` to map data to coordinates, and `curveNatural` to smooth the line. The chart includes labeled axes for time and temperature, with tick marks styled via CSS. The data is loaded from a CSV file of weekly San Francisco temperatures using D3's `csv` parser.

NNart Williamson

80% match

Loading thumbnail…

Fork of Fork of four

This area chart displays a synthetic time series from a CSV file, plotting daily values that rise and fall in a peak pattern. The visualization uses a steelblue line and semi-transparent fill to show the trend. Built with D3.js v7, it parses CSV data and uses `d3.scaleLinear` for axes, `d3.area` and `d3.line` for shapes, and renders to SVG. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

Mmsahithipatel@gmail.com

79% match

Loading thumbnail…

Fork of Line Chart

This example displays a line chart of two ordered numerical variables, plotting date against value. It uses D3.js v4 to load CSV data and render an SVG path with a steelblue stroke. The code explicitly configures time-scaled x-axis and linear y-axis, with axis labels for “Numbers” and “Amount.” The visualization is built within a React-style HTML page, embedding d3.csv for data loading and d3.timeParse for date formatting.

Bbugfree55

79% match

Loading thumbnail…

Fork of dataset

This example displays a time-series line chart of temperature readings from San Francisco, using an SVG rendering with D3.js v5. It demonstrates data loading via `d3.csv`, scales with `scaleTime` and `scaleLinear`, and axes created with `axisBottom` and `axisLeft`. The chart shows a single path generated by `d3.line`, with a grid of tick lines and labeled axes. The code also imports local ES6 modules and uses `d3.select` to manage the SVG, illustrating key D3 workflows in a VizHub environment.

RRomersims

79% match

Loading thumbnail…

Fork of Line chart

This line chart visualizes yearly sales data from a remote CSV file, mapping time on the x-axis and sales values on the y-axis. The code uses D3 v7’s `d3.csv` to load and parse data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.line` to generate a steelblue path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, with custom formatting for years, and the SVG output is sized 800 by 400 pixels. The visualization demonstrates a clean, minimal line chart with labeled axes and no interactivity.

Mmadipadiga.raviteja@gmail.com

79% match

Loading thumbnail…

Untitled

This time series displays data points over a date range, using a blue-to-red vertical gradient to encode value magnitude along the line. The visualization reads a comma-separated dataset from an external URL and parses dates with `d3.timeParse`. It constructs an SVG line chart, computing scales with `d3.scaleTime` and `d3.scaleLinear`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. A `linearGradient` element is defined and applied as the stroke, with the path generated by `d3.line`.

Ggabrielribeirob

78% match

Loading thumbnail…

Fork of Time Series: Part 2 - Line Chart

A line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset, drawing a smooth, natural curve through the data points using D3's `line` and `curveNatural` generators. Time is mapped to the x-axis via `scaleTime` and temperature to the y-axis via `scaleLinear`, with custom `AxisBottom` and `AxisLeft` components rendering tick marks and labels. The React component loads the CSV asynchronously with `useEffect` and `csv`, applying a `timeFormat` for weekday labels. The SVG output is styled with CSS, including colored axes, grid lines, and a curved stroke for the temperature trend.

Ppravalika.thogaru10@gmail.com

78% match