simple line chart from dataset

100%

simple line chart from dataset

✓ Published0🌍 Public

Last edited Nov 17, 2016

Created on Nov 17, 2016

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.

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/9fd823dc025714e187fe75dae8941a25'>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/db47022c63938c2a13cf7b1ed7795c8e'>simple line chart from dataset</a>

mit Licensed

Similar vizzes

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a local JSON dataset, with labeled date tick marks and a grey line connecting data points. Each data point is a semi-transparent grey circle that highlights in red with a black value label and connecting dashed line on mouseover, then reverts on mouseout. The chart uses D3 version 3 APIs including `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.line` to create the line path. SVG elements are rendered directly via `d3.select("body").append("svg")`, and the data is loaded with `d3.json`.

MMelanieSalignat

94% match

Loading thumbnail…

simple line chart from dataset

A simple line chart displays twelve monthly values from a small JSON dataset, with each month labeled on the x-axis and a bold numeric readout for the final data point. The chart uses d3.svg.line to draw the path, while d3.scale.ordinal positions the categorical months and d3.scale.linear maps values to the y-axis. Interactive circles respond to mouseover by turning red, enlarging, adding a dashed vertical guide, and showing the current value as text, with transitions on mouseout restoring the original appearance.

NNaram22

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

91% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a JSON dataset, with interactive circles and date labels. The chart maps categorical month names to an ordinal x-scale and numeric values to a linear y-scale, rendering the line as an SVG path. Hovering over a circle or date label triggers animated transitions, enlarging the element, displaying a tooltip with the value, and drawing a temporary dashed vertical line via d3.svg.line and d3.select.append. The visualization uses D3 v3, SVG for rendering, and transitions for mouseover effects.

RRaphael-Diana

91% match

Loading thumbnail…

simple line chart from dataset

A simple line chart plots twelve monthly values from a small JSON dataset, with a gray circle for each point and a black polyline connecting them. Hovering a circle turns it red, enlarges it, and increases the font size of the corresponding month label and the final value annotation. Built with D3 v3, the chart uses an ordinal x-scale and linear y-scale, `d3.svg.line` for the path geometry, and `d3.select` with event handlers for interactive feedback.

NNaram22

91% match

Loading thumbnail…

simple line chart from dataset

A simple line chart maps twelve monthly values from a JSON dataset, with categorical x-axis labels (A–L) and a linear y-axis. The SVG rendering uses D3 v3 scales and the `d3.svg.line` generator to draw the black polyline. Semi-transparent grey circles at each data point act as interactive dots; hovering one turns it red and reveals the corresponding value label and a dashed vertical guide line by switching their fill and stroke from white to black. Month labels appear below the axis using `d3.time.format`.

RRomyRatolojanahary

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

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

90% match