simple line chart from dataset

100%

simple line chart from dataset

✓ Published0🌍 Public

Last edited Nov 14, 2017

Created on Nov 9, 2017

A simple line chart displays seven monthly data points from a small JSON dataset, showing the trend of values from January to July 2016. The chart uses D3 v4 APIs including `d3.timeParse` for date parsing, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for the path. Circles mark each point; hovering highlights a point in red and adds a dashed vertical guide line with a value label. The SVG renders text labels for each month below the chart and the last value at the right edge.

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 example visualizes a simple time series with a line chart, plotting monthly values from a small JSON dataset between January and July 2016. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map dates and numeric values, while d3.line constructs the black stroked path. Each data point is marked by a semi-transparent grey circle that turns red on mouseover, triggering a dashed vertical guideline and a text label showing the exact value via d3.select and appended SVG elements. The chart also displays a permanent value label for the final data point at the right edge.

SSebDelSab

94% match

Loading thumbnail…

simple line chart from dataset

A line chart displays monthly values from a small JSON dataset, with points connected by a black stroke and labeled with formatted dates. The chart uses a time-scaled x-axis and linear y-axis, with the final value annotated on the right. On mouseover, D3 v4 appends a dashed vertical reference line and a temporary text label showing the hovered point’s value. The SVG is rendered manually with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.timeParse`/`d3.timeFormat` for date processing.

SSebDelSab

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

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

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

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

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

91% match

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