Skip to main content
100%

interactive line chart from dataset

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

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.

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/821e46e9f46dfb69f637ef2e46c2be1f'>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/4f07701cd4b3c8d721e8a5d1d533af43'>simple line chart from dataset</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
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
91% 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
88% 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
Loading thumbnail…

simple line chart from dataset

This simple line chart displays seven monthly data points from a JSON dataset, plotting values over time. Built with D3 v4, it uses an SVG rendering with `d3.scaleTime` and `d3.scaleLinear` to map dates and values, and `d3.line` to draw the path. Circles mark each point, with mouseover interactions that highlight a point and show its value. The chart includes a date label below each point and displays the final value in large text near the line's end.

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

simple line chart from dataset

This line chart displays a dataset of seven values, one per month from January to July 2016, on a time-based x-axis and a linear y-axis. A black polyline connects the points, with light grey circles marking each data value. Hovering over a circle highlights it in red, reveals the numeric value above it, and draws a dashed vertical guide line down to the baseline. The chart uses SVG rendering with D3 v4, including `d3.scaleTime`, `d3.line`, and transition effects for the hover interactions. Data is loaded asynchronously from a JSON file.

RRomainCandy
86% match