Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published1🌍 Public
Ttayyabanisar
Last edited May 11, 2020
Created on May 11, 2020
Forked from HTML Starter

This example displays a multi-series line chart of stock data, plotting both opening and closing values over time as two distinct colored lines. The visualization uses D3 v4 with SVG rendering, employing `d3.line()` to generate the paths, `d3.scaleTime()` for the time-based x-axis, and `d3.scaleLinear()` for the y-axis. Data is loaded from a local CSV file via `d3.csv()`, with dates parsed using `d3.timeParse()`. The chart includes axes rendered through `d3.axisBottom()` and `d3.axisLeft()`, all styled with basic CSS classes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example renders a dual-axis time series chart of S&P 500 stock prices and long-term interest rates from monthly data in a CSV file. The SVG visualization uses D3 v5 scales and axes, with two line generators for each metric and a filled area between them, though the area is nearly transparent. The chart displays the data over time with inverted y-axes and employs `d3.csv` for data loading and `scaleTime` for temporal mapping.

Ppaularl
85% match
Loading thumbnail…

HTML Starter

This example animates the drawing of a line chart, transitioning each data point from the bottom of the plot to its correct position over time using a staggered delay. The visualization uses Apple’s stock closing price data, rendered with a custom easing function and a line path. Built with React, the code leverages Observable’s `d3.select`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and a timer to orchestrate the animation, with axes and a styled steelblue stroke.

Aashpradhan01123
84% match
Loading thumbnail…

Untitled

This example shows a dual-line chart comparing the closing and opening prices of a dataset over time. Two lines are rendered on a time-scaled x-axis and a linear y-axis, with the closing price in steel blue and the opening price in red. The visualization uses D3 v4’s `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to generate the SVG paths and axes. Data is loaded from a CSV file with d3.csv, and dates are parsed with `d3.timeParse`.

Ttayyabanisar
83% match
Loading thumbnail…

HTML Starter

This example shows a time series of monthly stock price data with a focus and context view. The main chart displays the price trend as an area chart, while a smaller brushable overview allows users to select a date range. The selection is reflected in the main chart through a coordinated zoom and pan interaction. The visualization is built with D3 v5, using `d3.brushX` for the range selection and `d3.zoom` for pan and zoom transforms. The SVG rendering uses `d3.area` with a monotone curve, and the data is loaded from a CSV file containing date and price pairs.

RRostyslav
83% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a dual-line chart comparing stock close and open prices over time, with two colored axes (steel blue for close, red for open) to distinguish the scales. It uses D3 v5’s `d3.csv` to load the data, `d3.timeParse` to format dates, and `d3.scaleTime`/`d3.scaleLinear` for the x and y ranges. The lines are drawn with `d3.line` and appended as SVG paths, with axes rendered via `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`. Data comes from `data4.csv`.

CCameron
82% match
Loading thumbnail…

Simple line graph in d3.js

This example shows a simple line graph plotting stock closing prices over time, with date values on the x-axis and price on the y-axis. The visualization uses D3.js version 3.5.17, employing `d3.time.scale` for the date range, `d3.scale.linear` for the value axis, and `d3.svg.line` to generate the path. Data is loaded from a local CSV file via `d3.csv`, with the axes created through `d3.svg.axis`. The SVG rendering includes styled axis lines and a steelblue line, providing a minimal teaching example for D3 chart construction.

Dd3noob
81% match
Loading thumbnail…

line chart - hover

This example shows a simple line chart of stock closing prices over time, with the data loaded from a CSV file. The visualization uses a time-scaled x-axis and a linear y-axis for price, rendered as a single steelblue line. The code relies on D3 v4’s `d3.line` generator and `d3.scaleTime` to map dates and values, while axes are drawn using `d3.axisBottom` and `d3.axisLeft`. The chart is built with SVG, with margins applied via a transform on a group element, and the data is parsed using `d3.timeParse`.

CConorAspell
81% match
Loading thumbnail…

Simple d3.js graph with internal data

This example shows a line chart of stock closing prices over a three-week period in April and May 2012. The data is declared internally as a JavaScript array of date-value pairs. The visualization uses D3.js version 3.5.17, with `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line` to render the axes and the line path in SVG. The chart includes styled axes and a steelblue line, with the date parsed via `d3.time.format`.

Dd3noob
81% match