Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Wwannurmawaddah
Last edited Sep 23, 2020
Created on Sep 23, 2020
Forked from HTML Starter

This example visualizes a time series of a single numeric value over approximately 90 daily data points, displaying both a filled area chart and an overlaid line with red circular markers. The chart uses a time-scaled x-axis and a linear y-axis, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. It loads comma-separated data from a remote URL, parses dates with `d3.timeParse`, and builds the area and line paths using `d3.area` and `d3.line`. The visualization is rendered as SVG within a React-compatible setup using D3 v4.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A line chart visualizes a dataset of 13 coordinate pairs, plotting dependent values against independent variables across a 500x400 SVG canvas. The example uses D3 v4 within a React framework to construct a linear chart with labeled axes, a title, and red circular markers. The code specifically employs `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for ticks, and a custom line generator via `d3.line` with monotone curve smoothing to connect the data points. The visualization is rendered entirely as SVG elements, with fixed margins and translated groups for positioning.

Nnamansinghal1420
85% match
Loading thumbnail…

Untitled

This example shows a time-series area chart of FRED economic data, with dates parsed from a CSV file and mapped to a time scale on the x-axis while values map to a linear y-axis. The visualization uses D3 v7’s `d3.area`, `d3.scaleTime`, and `d3.scaleLinear` to generate the filled region, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. The SVG is drawn inside a React-based HTML page, using a responsive `viewBox` and `preserveAspectRatio` for scaling.

Hharoldle
85% match
Loading thumbnail…

Untitled

A line chart displays time series data with dates parsed from a CSV file on the x-axis and numerical closing values on the y-axis. The single path renders with a steelblue stroke over a white background, accompanied by grey axis lines and tick labels. The visualization uses D3 v3 APIs including `d3.time.scale`, `d3.svg.line`, and `d3.svg.axis`, with the SVG canvas sized by margins and data loaded via `d3.csv` before domain scaling and path creation.

DDjPendej0
85% 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
85% match
Loading thumbnail…

Untitled

This example shows a line chart of FRED data over time, displaying a single series of values with a time-based x-axis and linear y-axis. The visualization is rendered as an SVG within a React framework, using D3 v7 to load CSV data, parse dates, and generate the axes and line path. The chart uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to map the data, while the CSV is fetched from a GitHub gist URL. The page also includes a navigational header with dataset and about links.

Hharoldle
85% match
Loading thumbnail…

Untitled

A line chart displays a time series of a single numeric value, with dates on the x-axis and values on the y-axis. The chart uses steelblue strokes to draw the path of data over time. Built with D3 v4, the visualization reads CSV data from a remote GitHub repository, parses dates using `d3.timeParse`, and renders the plot in SVG. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the line itself is created using `d3.line` with scales from `d3.scaleTime` and `d3.scaleLinear`.

Yyuqi62sss
84% match
Loading thumbnail…

Untitled

This interactive time-series chart displays a daily value over three months and lets the user switch between daily, weekly, and monthly aggregated views. It renders an SVG line chart using D3 v3, with axis labels, an orange line, and a tooltip that appears on hover over the chart area. The code aggregates data by summing values for each time unit and linearly interpolates gaps, using APIs like `d3.time.scale`, `d3.svg.axis`, and `d3.bisector`. Buttons enable the time-unit selection, and the chart updates dynamically on click.

Ffaversin17
84% match
Loading thumbnail…

Untitled

This example shows a continuously updating line chart that plots random data points in real time, with a smooth curve and a filled area beneath it. The chart scrolls horizontally as new points are added, while the x-axis shifts to keep the latest data in view. It uses D3 v4 scales and generators such as `d3.line` with `d3.curveCardinal` for the smooth path, `d3.area` for the fill, and `d3.axisBottom` for the axis. Animated transitions with `transition.attr` and `ease` shift both the path and area, with grid lines drawn as static SVG paths.

IIgor Borzunov
84% match