Interactive line chart

100%

Interactive line chart

✓ Published0🌍 Public

Last edited Nov 24, 2016

Created on Nov 17, 2016

A static line chart plots monthly values from a JSON dataset, with month labels along the x-axis and a black line connecting points. Hovering over a circular point highlights it in red, enlarges its value label, and reveals a dashed vertical guide line. Built with D3 v3, the visualization uses ordinal and linear scales, SVG paths for the line, and interactive mouseover and mouseout events to toggle element visibility and opacity.

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…

Interactive line chart

This interactive line chart displays monthly values from January to December 2016, with each data point represented as a labeled circle along a single black line. Hovering over a circle highlights it in red, enlarges its corresponding value label, and reveals a dashed vertical guide line. Built with D3 v3, the visualization uses an ordinal x-scale, a linear y-scale, and SVG elements including paths, circles, and text. Data loads from a local JSON file via `d3.json`, with dates parsed using `d3.time.format` and values formatted with `d3.format`.

OOrhanYaz

91% match

Loading thumbnail…

Interactive line chart by Flazy

This interactive line chart visualizes monthly data from a JSON dataset, showing changes in values over time. The visualization combines a black polyline with gray dashed vertical drop lines and circular markers at each data point. Hovering over a circle highlights it in red, enlarges the corresponding value label, and makes its dashed line more visible, providing immediate feedback on the selected data point. The chart uses d3.json to load data, d3.svg.line for the path, d3.scale.ordinal for the x-axis, and d3.scale.linear for the y-axis, all rendered as SVG elements with transitions on mouse events.

FFlazyy

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

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

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

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

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

84% match

Loading thumbnail…

Interactive Linechart by Flazyy

This interactive line chart visualizes monthly values from January to December 2016, with each point representing a named data category. The chart displays a black polyline connecting circular markers, with month labels below and value labels that appear on hover. The visualization uses d3.svg.line for the path, d3.scale.ordinal for the x-axis, and d3.scale.linear for the y-axis. Hovering over a circle triggers mouseover and mouseout events that highlight the point, reveal its value, and show a dashed vertical guide line. The data comes from a JSON file with name, value, and date fields, rendered as SVG elements.

FFlazyy

84% match