simple line chart from dataset

100%

simple line chart from dataset

✓ Published0🌍 Public

Last edited Nov 10, 2017

Created on Nov 9, 2017

This line chart displays seven monthly data points from a JSON dataset, plotting each value over time on a time-scaled x-axis and a linear y-axis. The chart incorporates interactive hover effects, highlighting a data point and displaying its value with a dashed red line. Built with D3 v4, the SVG visualization uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.json` for data loading, with animations on mouseover via `transition().duration()`.

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 displays seven monthly data points from a JSON dataset, plotting values over time. Built with D3 v4, it uses an SVG rendering with `d3.scaleTime` and `d3.scaleLinear` to map dates and values, and `d3.line` to draw the path. Circles mark each point, with mouseover interactions that highlight a point and show its value. The chart includes a date label below each point and displays the final value in large text near the line's end.

EElisaDnr

91% match

Loading thumbnail…

simple line chart from dataset

This visualization displays a simple line chart plotting seven monthly data points from a JSON dataset, with each point labeled by its abbreviated month and numeric value. The SVG chart includes a black polyline, small circles at each data point that turn red and fill on mouseover, and a large text label showing the final value. Built with D3 v4, it uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, `d3.line` to generate the path, and `d3.timeParse` to convert date strings.

LLRobergeon

90% match

Loading thumbnail…

simple line chart from dataset

A simple SVG line chart displays seven monthly data points from a local JSON dataset, plotting date against value. The D3 v4 code uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Circles mark each point, with hover effects changing their color to red and showing the same value label already displayed above each dot. The final value appears in larger text at the line’s end, while month labels sit below the chart.

EElisaDnr

89% match

Loading thumbnail…

simple line chart from dataset

A simple SVG line chart plots monthly values from an 11-point JSON dataset, with a black polyline, labeled x-axis dates, and a large final-value annotation. The visualization adds interactivity through gray circular markers at each data point; hovering a circle turns it red, reveals its value, and displays a vertical dashed guide line. The chart uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, with mouseover and mouseout events controlling opacity and stroke transitions. Animation effects appear via `transition().duration(300)` when changing marker color and opacity.

GGaret005

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

88% match

Loading thumbnail…

simple line chart from dataset

This example displays a simple line chart of seven monthly data points, with each point labeled by its date and value. It uses d3.v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to map the dataset to SVG paths and circles. The chart animates circle color on mouseover via `transition().duration(500)`, and the final value is appended as a text label. Data comes from an external `dataset.json` file containing name, value, and date fields.

LLRobergeon

88% match

Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of monthly values, displaying the trend over time with labeled points and a final value annotation. Built with D3 v4, it uses SVG for rendering and includes interactive hover effects that highlight individual data points with circles, reveal their values, and show dashed guide lines. The data comes from a local JSON file, and scales like `d3.scaleTime()` and `d3.scaleLinear()` handle positioning, while `d3.line()` draws the path.

EEnzoTheBrown

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

87% match