Line Chart

100%

✓ Published0🌍 Public

Last edited Oct 17, 2017

Created on Oct 17, 2017

This line chart visualizes monthly values for categories A through L, showing trends over time with a thick orange line connecting circular data points. The chart includes value labels and date labels for each point. Built with D3.js v3, it uses an ordinal x-scale, a linear y-scale, and SVG rendering. Hovering over a circle triggers a smooth transition that enlarges the point to yellow, reveals its corresponding value text, and draws a vertical orange line from the baseline, using D3's selection filtering and transition methods. The data comes from a local JSON file.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/1f30281d2031a196b4183d5efd525728'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/5d2b29d394da6dde2ad269b2207f25bd'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/29e957a5cea1120a7e2e452cb9403ab9'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/86578550014807580802dbf51685462c'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/b032e4b119d42c0a80108eb7e39d1b53'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/83db7f54677f7979f59ccf984e82bb0e'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of twelve monthly data points, where each point is marked by a red circle. The chart highlights the final value with a large number label and allows interactive exploration: hovering over a point turns it blue and draws a temporary vertical dashed line to the x-axis with the corresponding value displayed. The visualization is built with D3.js v3, using an ordinal scale for the x-axis (categories A–L) and a linear scale for the y-axis. Data is loaded from an external JSON file via `d3.json`, and the line, circles, and text are rendered as SVG elements with CSS transitions for hover effects.

BBrunoDumas

83% match

Loading thumbnail…

simple line chart from dataset

This simple line chart visualizes a small dataset of monthly values across seven categories, showing the trend of a metric over time. The chart encodes each data point as a grey circle on a black polyline, with the x-axis using an ordinal scale for category names and the y-axis using a linear scale for values. The code, built with D3 v3, parses dates from the dataset and renders the SVG with a fixed size. On mouseover, circles turn red, a dynamic value label appears, and a dashed guide line drops to the baseline; the final value is labeled at the line’s end.

FFrancoisDEAVEIRO

82% match

Loading thumbnail…

Simple line chart

A simple line chart displays twelve months of numeric values, with a black polyline connecting evenly spaced points and a large label showing the final value. The chart includes interactive circles that turn red on hover, revealing the corresponding value and a dashed vertical guide line using SVG transitions. Built with D3.js v3, it uses ordinal and linear scales, SVG paths for the line, and JSON data loaded via `d3.json`.

JJulesSauvinet

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

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

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

80% match

Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of monthly values, displaying the trend over time with labeled points and a final value annotation. Built with D3 v4, it uses SVG for rendering and includes interactive hover effects that highlight individual data points with circles, reveal their values, and show dashed guide lines. The data comes from a local JSON file, and scales like `d3.scaleTime()` and `d3.scaleLinear()` handle positioning, while `d3.line()` draws the path.

EEnzoTheBrown

80% match

Loading thumbnail…

Simple line chart

This simple line chart visualizes a dataset of monthly values from January to December 2016. The chart plots a black line connecting twelve data points, with each point represented by a circle. Hovering over a circle highlights it in red, draws a dashed vertical guide line, and displays the value in a green tooltip. The visualization uses D3 v3, rendering SVG elements with ordinal and linear scales, a D3 line generator, and JSON data loading for the dataset.

FFrissAnalytics

80% match