Skip to main content
100%

interactive line chart

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

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()`.

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

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.

Aalicemontel
93% match
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
91% 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…

simple line chart from dataset

This example shows a simple line chart that plots monthly values across twelve dates, with circles marking each data point and a dashed vertical line appearing on hover. The chart uses D3 v4 with time-series data, parsing dates with `d3.timeParse` and scaling them with `d3.scaleTime` and `d3.scaleLinear`. It renders an SVG path for the line, adds tooltips via circle elements, and includes labels for each month plus the final value. Data comes from a local JSON file, and hover interactions change circle colors and trigger a dynamic guide line.

TTanguideCrevoisier
85% 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
85% 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
85% match
Loading thumbnail…

TP 2.1 Interactive Line Chart

An interactive line chart displays twelve monthly data points from January to December 2016, encoded as a black path with gray circles. Hovering over a circle highlights it in red, reveals its numeric value label, and shows a dashed vertical guide line to the x-axis. The chart uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with SVG elements. Data is loaded from an external JSON file, and all labels and grid lines are rendered as SVG text and line elements with mouse event handlers.

CCharlesGaydon
83% 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
83% match