first line chart

100%

first line chart

✓ Published0🌍 Public

Last edited Jun 18, 2017

Created on Jun 18, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

first line chart

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.

335degrees

88% match

Loading thumbnail…

[basic chart] line chart (d3 v4)

This example shows a multi-line chart with four time-series categories (a, b, c, d) plotted over dates in early 2016, using D3 v4’s `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. It renders SVG paths via `d3.line` and `d3.axisBottom`/`d3.axisLeft` for axes, with colors from `d3.scaleOrdinal(d3.schemeCategory10)`. The data is hardcoded as an array of objects, and the chart is drawn inside a 960×300 SVG with margins. No interactivity is included.

EEnzoTheBrown

82% match

Loading thumbnail…

Basic line chart

This line chart shows the relationship between two numerical values and time, plotting two series from a CSV file across the years 2010–2015. It uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for axes, while d3.line constructs the paths. The chart renders in SVG, with each line styled via a separate stroke color. Axis labels are added using d3.axisBottom and d3.axisLeft, and the code includes configurable column names for easy reuse as a template.

EEleonore9

81% match

Loading thumbnail…

D3 v4 Line Chart

This example shows a basic line chart built with D3 v4, plotting a randomly generated dataset of 21 points against a linear x-axis and y-axis. The visualization uses an SVG canvas and follows the standard margin convention, with the line rendered via the `d3.line()` generator and a `curveMonotoneX` smoothing curve. Axis components are created using `d3.axisBottom` and `d3.axisLeft`, while circles representing each datapoint are appended using the `enter().append()` method. The chart demonstrates core D3 data-binding and scale APIs within a minimal, self-contained HTML file.

663anp3ca

80% match

Loading thumbnail…

line chart time data

This line chart visualizes daily values over a two-week period, with a red path connecting data points plotted by date and value. The y-axis starts at 8000 to emphasize variation, while each data point is marked with a circle. Using D3 v5, the code loads a CSV file, parses dates with `new Date()`, and applies `scaleTime` and `scaleLinear` for axes. The `line` generator with `curveBasis` creates the smoothed path, and SVG circles are appended for points, with axes rendered via `axisLeft` and `axisBottom`.

VVvgupta

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

79% match

Loading thumbnail…

Multiple line graph in v4

This example displays two time-series lines, showing "close" and "open" stock prices over a month, with circular markers at each data point. Built with D3 v4, it maps dates on a time scale and values on a linear scale, then appends SVG paths for each line and circles for the observances. The chart uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft`, and loads its comma-separated data from a local CSV file.

GGerardoFurtado

79% match

Loading thumbnail…

Basic line chart

This basic line chart displays a time series of yearly values from a CSV file, with a single blue line tracing the data points. The visualization uses D3 v4 to parse the CSV columns, mapping the "year" field to a time-scaled x-axis and the "value" field to a linear y-axis. Axes are rendered with d3.axisBottom and d3.axisLeft, and the line path is drawn using d3.line with a stroke width of 2.5 pixels. The chart includes labeled axes and is designed as a reusable template, with customizable data file, column names, and labels in the script.

EEleonore9

79% match