Skip to main content
100%

interactive line chart

✓ Published0🌍 Public
Aalicemontel
Last edited Nov 26, 2017
Created on Nov 26, 2017

An interactive line chart displays monthly values from a small dataset, with pink circular markers for each data point and a black polyline connecting them. Hovering over a circle highlights it in red, reveals its value in a tooltip, and draws a dashed vertical line from the point to the x-axis. The visualization uses D3 v4 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `transition.style` for the hover effects. Data is loaded from a JSON file and rendered as SVG, with axis labels shown at the bottom.

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/f205420d21ced66810058d4cdf25c6dd'>interactive line chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

interactive line chart from dataset

This interactive line chart visualizes a time series of monthly values from a small JSON dataset, plotting seven data points with circles connected by a black line. Hovering over a circle highlights it in red, reveals a dashed vertical guideline from the point to the baseline, and displays the exact value as text. The chart uses D3 v4 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.timeParse` for date handling. Mouseover and mouseout events control opacity for the guide lines and value labels.

Aalicemontel
94% match
Loading thumbnail…

interactive line chart

This interactive line chart displays a time series of values over twelve months, with a circular marker at each data point. Hovering over a circle highlights it in red and reveals a tooltip showing the exact value, along with a dashed vertical line connecting the point to the x-axis. The visualization uses D3 v4 with an SVG canvas, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`. It loads external CSV data from a gist, parses dates with `d3.timeParse`, and animates the hover transitions with `transition().duration()`.

Aalicemontel
93% match
Loading thumbnail…

Interactive line chart

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.

OOrhanYaz
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
87% match
Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden
87% match
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
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
86% 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
85% match