Interactive line chart by Flazy

100%

Interactive line chart by Flazy

✓ Published0🌍 Public

Last edited Oct 17, 2017

Created on Oct 17, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

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

80% match

Loading thumbnail…

simple line chart from dataset

This line chart visualizes a small dataset with monthly values, displaying a black polyline and red translucent circles for each data point. The chart includes a time-based x-axis and a linear y-axis, with the last value printed in large text. The code loads data from “dataset.json” using `d3.json`, parses dates with `d3.timeParse`, and renders the chart with SVG shapes. Hovering over a circle triggers a dashed vertical line and a temporary value label, using D3’s selection and event handlers.

AAubret

79% match

Loading thumbnail…

simple line chart from dataset

This line chart displays seven monthly data points from a JSON dataset, plotting each value over time on a time-scaled x-axis and a linear y-axis. The chart incorporates interactive hover effects, highlighting a data point and displaying its value with a dashed red line. Built with D3 v4, the SVG visualization uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.json` for data loading, with animations on mouseover via `transition().duration()`.

MMilowB

79% match

Loading thumbnail…

simple line chart from dataset

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.

MMelanieSalignat

79% match

Loading thumbnail…

simple line chart from dataset _ Final version

This example shows a monthly time series of twelve data points from a local dataset, with a single black polyline connecting values, labeled x-axis dates, and a large final-value annotation. It also adds light-gray circular markers that turn red on hover, displaying the current value and a dashed vertical guide line. Built with D3 v4, it uses `d3.scaleTime` for the date axis, `d3.scaleLinear` for values, `d3.line` to generate the path, and SVG elements rendered via the code. The dataset is loaded with `d3.json` from a static file, and all interaction logic resides in `mouseover` and `mouseout` event handlers.

EElisaDnr

79% match