simple line chart from dataset

100%

simple line chart from dataset

✓ Published0🌍 Public

Last edited Nov 14, 2017

Created on Nov 14, 2017

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.

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

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

95% match

Loading thumbnail…

simple line chart from dataset

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.

SSebDelSab

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

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, 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

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

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

90% match

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

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

90% match