simple line chart from dataset

100%

simple line chart from dataset

✓ Published0🌍 Public

Last edited Nov 13, 2017

Created on Nov 10, 2017

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.

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

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

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, 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 example displays a simple line chart of seven data points, each with a name, value, and date. The chart shows the trend of values over time from January to July 2016, with a line connecting the points and a label for the final value. It is rendered as an SVG using D3 v4, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` for the path. The data is loaded from a local JSON file. Interactive tooltips appear on mouseover, using D3 selections to highlight the point and display its value.

RRade-Mathis

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 simple line chart visualizes a small dataset of monthly values across seven categories, showing the trend of a metric over time. The chart encodes each data point as a grey circle on a black polyline, with the x-axis using an ordinal scale for category names and the y-axis using a linear scale for values. The code, built with D3 v3, parses dates from the dataset and renders the SVG with a fixed size. On mouseover, circles turn red, a dynamic value label appears, and a dashed guide line drops to the baseline; the final value is labeled at the line’s end.

FFrancoisDEAVEIRO

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 line chart visualizes a small dataset with monthly values, displaying a black polyline and red translucent circles for each data point. The chart includes a time-based x-axis and a linear y-axis, with the last value printed in large text. The code loads data from “dataset.json” using `d3.json`, parses dates with `d3.timeParse`, and renders the chart with SVG shapes. Hovering over a circle triggers a dashed vertical line and a temporary value label, using D3’s selection and event handlers.

AAubret

91% match