first line chart

100%

first line chart

✓ Published0🌍 Public

Last edited Jun 18, 2017

Created on Jun 18, 2017

This example visualizes a time series of closing values as a single orange line chart, with the x-axis representing dates and the y-axis representing numeric values. It first shows the trend of the data, then the code builds it by loading tab-separated values from an external URL and parsing dates with `d3.timeParse`. The line is drawn using `d3.line` with a `scaleTime` for the x-range and a `scaleLinear` for the y-range. Axes are added via `d3.axisBottom` and `d3.axisLeft`, while the line itself is styled with a 10-pixel-wide orange stroke.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/54c9bd50e75cffc13acef3495844b361'>first line chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

first line chart

This example demonstrates a basic time-series line chart using D3.js version 4, plotting data points over a date range against numeric values. The visualization renders an SVG path with a thick orange stroke to represent the trend, while axes are drawn using D3’s `d3.axisBottom` and `d3.axisLeft`. The code loads tab-separated data via `d3.tsv` from an external URL, parses dates with `d3.timeParse`, and maps values using `d3.scaleTime` and `d3.scaleLinear`. The line is generated with `d3.line`, and the chart is positioned within a configured margin. The data source is a static TSV file, and the rendering is fully SVG-based.

335degrees

88% match

Loading thumbnail…

Gist b126925b336690e07481fe09b384f125

This example demonstrates a time-series line chart showing closing values over a two-month period. The visualization uses a single blue line to connect data points, with a time-scaled x-axis and a linear y-axis that starts at zero. The code employs D3 v4’s `d3.line()` generator, `d3.scaleTime()`, and `d3.scaleLinear()` to map the data, which is loaded from an external tab-separated file. Axes are rendered via `d3.axisBottom()` and `d3.axisLeft()`, with the SVG canvas sized at 960 by 500 pixels plus margins.

335degrees

83% match

Loading thumbnail…

line chart

This example displays a simple line chart of closing values over five dates in May 2012, using D3 v7. The code creates an SVG container with time and linear scales, then uses `d3.line` to generate a path with steelblue stroke. Date strings are parsed with `d3.timeParse`, and axes are added via `d3.axisBottom` and `d3.axisLeft`. The chart renders from hardcoded sample data, showing a trend from May 1 back to April 25.

Jjaredaitken6

81% match

Loading thumbnail…

Line Chart with Gridlines

This line chart displays a time series of closing values, with a smooth blue line connecting individual data points marked by red dots, overlaid on a light gray grid. The chart emphasizes the trend and distribution of values across the dates. The visualization is built with D3 v4, using an SVG renderer and D3's time scale for the x-axis and linear scale for the y-axis. It employs `d3.area` and `d3.line` to draw the area and line, while custom gridlines are generated via `d3.axisBottom` and `d3.axisLeft` with dashed strokes. The data is loaded from a tab-separated values file.

335degrees

80% match

Loading thumbnail…

Line Data Example

This example visualizes time-series data from a tab-separated file (`linedata.tsv`) containing daily closing values. It shows a line chart with an area fill beneath the line, overlaid with circular dots marking each data point, emphasizing the trend and individual values. The chart uses D3 v4 APIs including `d3.line()`, `d3.area()`, `d3.scaleTime()`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG. The x-axis maps dates, while the y-axis maps closing prices, with a title styled using the Cabin font.

335degrees

79% match

Loading thumbnail…

Multiple line graph in v5

This example shows two time-series lines, one for closing prices and one for opening prices, plotted against dates from a CSV file. The visualization uses d3.scaleTime and d3.scaleLinear to map data to x and y axes, with d3.line generating the two path elements. A steelblue line represents the close values, while a red line, styled via a second `.line` class, represents the open values. The axes are rendered with d3.axisBottom and d3.axisLeft in an SVG container sized at 960 by 500 pixels.

Dd3noob

78% 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

77% match

Loading thumbnail…

Simple Line Graph v6

A simple line graph plots daily closing values over time, with the y-axis scaled from zero to the data maximum and dates parsed using `d3.timeParse`. Rendered as an SVG, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, while `d3.line` generates the steelblue path. The code loads a CSV file via `d3.csv` and displays the result with `d3.axisBottom` and `d3.axisLeft`, serving as a minimal D3 v6 template.

Dd3noob

77% match