Simple line chart

100%

Simple line chart

✓ Published0🌍 Public

Last edited Nov 23, 2016

Created on Nov 23, 2016

This simple line chart visualizes a dataset of monthly values from January to December 2016. The chart plots a black line connecting twelve data points, with each point represented by a circle. Hovering over a circle highlights it in red, draws a dashed vertical guide line, and displays the value in a green tooltip. The visualization uses D3 v3, rendering SVG elements with ordinal and linear scales, a D3 line generator, and JSON data loading for the dataset.

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>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/65378e8a9e9a7b398ad3feb630b6df29'>simple line chart from dataset</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/28e789d17bc6e57bd18f550e12006ae8'>simple line chart from dataset</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/0b8c2ef7135505b913af23f7139ab70e'>simple line chart from dataset</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/6af3384cc7f2ce58d74bc10b2914a73b'>simple line chart from dataset</a>

forked from <a href='http://bl.ocks.org/MohamedZaki/'>MohamedZaki</a>'s block: <a href='http://bl.ocks.org/MohamedZaki/1d2127656accceba8cc88be4f35ed1b9'>simple line chart from dataset</a>

mit Licensed

Similar vizzes

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

89% match

Loading thumbnail…

simple line chart from dataset

A simple line chart displays monthly values from a small JSON dataset, plotting each data point as a grey circle. Hovering over a circle turns it red, enlarges it, reveals its numeric value above, and draws a dashed vertical line down to the x-axis. The visualization uses D3 v3 with SVG, employing an ordinal scale for x-positions, a linear scale for y-values, and mouseover/mouseout event handlers to animate the transitions.

AAlexdef74307

88% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of twelve monthly data points, where each point is marked by a red circle. The chart highlights the final value with a large number label and allows interactive exploration: hovering over a point turns it blue and draws a temporary vertical dashed line to the x-axis with the corresponding value displayed. The visualization is built with D3.js v3, using an ordinal scale for the x-axis (categories A–L) and a linear scale for the y-axis. Data is loaded from an external JSON file via `d3.json`, and the line, circles, and text are rendered as SVG elements with CSS transitions for hover effects.

BBrunoDumas

88% match

Loading thumbnail…

Simple line chart

This simple line chart visualizes twelve months of value data from `dataset.json`, plotting points for each month and connecting them with a single black line. The chart uses an ordinal x-axis for the month names and a linear y-axis for values, with a dashed line and green tooltip text appearing when hovered over a data point. Built with d3.v3, the visualization uses `d3.scale.ordinal`, `d3.scale.linear`, `d3.svg.line`, and SVG circles rendered via `d3.select`. The code also includes a final value label and uses the MIT-licensed blockbuilder.org framework.

AAlexZ33

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

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

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

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

87% match