Skip to main content
100%

simple line chart from dataset

✓ Published0🌍 Public
Aalicemontel
Last edited Nov 26, 2017
Created on Nov 26, 2017

This example shows a simple line chart plotting a dataset of monthly values from January to July 2016. The chart displays seven data points connected by a black line, with each point labeled by its month and the final value highlighted in larger text. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Data is loaded from an external dataset and formatted using `d3.timeParse` and `d3.timeFormat`.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/855207ac5fb5c170de59b9c69ea56012'>simple line chart from dataset</a>

mit Licensed

Similar vizzes

Loading thumbnail…

simple line chart from dataset

This simple line chart visualizes a small time series dataset containing seven monthly values from January to July 2016. The chart displays a black polyline connecting labeled data points, with each point marked by a circle and the final value annotated numerically. Built with D3 v4, the visualization uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to construct the plot from data loaded via `d3.json`. The SVG rendering includes monospace labels for dates below the chart and a larger value label offset to the right of the last point.

EElisaDnr
93% match
Loading thumbnail…

simple line chart from dataset

A simple line chart displays seven monthly data points from January to July 2016, with values ranging from 10 to 50. The visualization shows a single black line with labeled x-axis dates and a large final value label. Using D3 v4, the code parses ISO date strings, applies time and linear scales, and generates the path via d3.line. Data loads from an external dataset.json, with SVG rendering and monospace font labels highlighting the last point's value.

EEssohanamKouyou
93% match
Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of seven monthly values from January to July 2016, showing a trend with peaks in May and dips in March and June. The chart uses an SVG canvas, with time parsed via `d3.timeParse` and formatted with `d3.timeFormat`, while an ordinal time scale on the x-axis and a linear scale on the y-axis map the data. The line path is generated by `d3.line`, and circles represent each data point. Hovering a circle highlights it in red, draws a dashed vertical guide line, and displays the value in bold text, all implemented with D3 v4 event handlers. The data comes from the included `dataset.json` file.

CChaf1A
92% match
Loading thumbnail…

simple line chart from dataset

This line chart displays a dataset of seven values, one per month from January to July 2016, on a time-based x-axis and a linear y-axis. A black polyline connects the points, with light grey circles marking each data value. Hovering over a circle highlights it in red, reveals the numeric value above it, and draws a dashed vertical guide line down to the baseline. The chart uses SVG rendering with D3 v4, including `d3.scaleTime`, `d3.line`, and transition effects for the hover interactions. Data is loaded asynchronously from a JSON file.

RRomainCandy
92% match
Loading thumbnail…

simple line chart from dataset

This simple line chart visualizes a time series of seven monthly values from January to July 2016. The chart uses a black stroked line and light gray circular markers, with interactive mouseover effects that highlight a point in red and display its numeric value. Built with D3 v4, it employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and SVG circles for points. Data is loaded from an external `dataset.json` file, and labels show abbreviated month names and the final value.

EEssohanamKouyou
92% match
Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart plotting seven monthly data points from a JSON dataset, with labeled x-axis dates and a final value annotation. The SVG rendering uses d3.v4 with a time scale for the x-axis (`d3.scaleTime`), a linear scale for the y-axis (`d3.scaleLinear`), and a `d3.line` generator to create the path. Data is parsed from `dataset.json` using `d3.timeParse` for date formatting, and the line is styled with a black stroke via CSS.

TTanguideCrevoisier
92% match
Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of seven monthly values from January to July 2016. The chart shows a fluctuating trend, with values rising from 10 to 50 before dropping back to 10. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to construct the path, while `d3.json` loads the data from `dataset.json`. Axis labels display formatted dates, and the final value is annotated with a text element.

LLRobergeon
92% match
Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart tracking monthly values from January to July 2016, with each data point labeled by its month and the final value displayed in large text at the chart’s edge. The visualization highlights the overall upward trend and the final peak of 50. The code uses D3 v4 to parse dates with `d3.timeParse` and format them via `d3.timeFormat`, scales the data with `d3.scaleTime` and `d3.scaleLinear`, and draws the line using a `d3.line` path. The data comes from an external `dataset.json` file, and the chart is rendered as an SVG.

EEssohanamKouyou
91% match