Simple line chart

100%

Simple line chart

✓ Published0🌍 Public

Last edited Jul 19, 2017

Created on Jul 19, 2017

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.

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>

forked from <a href='http://bl.ocks.org/FrissAnalytics/'>FrissAnalytics</a>'s block: <a href='http://bl.ocks.org/FrissAnalytics/4760e0a99f73d51636be36550ef995fb'>Simple line chart</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/e7a1d481c032586926ba17f0c7a8f75a'>Simple line chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

simple line chart from dataset

This line chart visualizes monthly values from a small JSON dataset, plotting twelve data points from January to December 2016. The chart uses D3 v3 with SVG rendering, employing an ordinal x-scale for categories, a linear y-scale for values, and a dashed line path to connect the points. Interactive grey circles respond to mouseover by turning red and revealing hidden value labels and vertical dashed guides, which are initially styled white to remain invisible. The chart also includes monospace date labels beneath the x-axis.

MMelanieSalignat

88% match

Loading thumbnail…

Simple line chart

A simple line chart displays twelve months of numeric values, with a black polyline connecting evenly spaced points and a large label showing the final value. The chart includes interactive circles that turn red on hover, revealing the corresponding value and a dashed vertical guide line using SVG transitions. Built with D3.js v3, it uses ordinal and linear scales, SVG paths for the line, and JSON data loaded via `d3.json`.

JJulesSauvinet

88% match

Loading thumbnail…

simple line chart from dataset

This example displays a simple line chart that plots monthly values from a JSON dataset, with circular markers at each data point along the path. The chart uses an ordinal x-scale and a linear y-scale to position the points, while a monospace font labels each month below the axis. Hovering over a circle triggers a mouseover event that turns the point red, draws a dashed vertical guide line, and reveals the numeric value as a green tooltip; moving the mouse away removes these temporary elements. The visualization is built with D3 v3, rendering SVG elements like paths, circles, and text, and loads its data from a local `dataset.json` file.

MMohamedZaki

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

FFrissAnalytics

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

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

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

87% match