DataViz_TP2

100%

✓ Published0🌍 Public

Last edited Nov 9, 2017

Created on Nov 9, 2017

This example visualizes a simple line chart of monthly values using D3.js v4, rendering an SVG with a time-scaled x-axis and linear y-axis. It displays labeled data points as light grey circles connected by a black line, with the final value annotated at the end. Hovering over a circle highlights it in red, reveals the corresponding value label, and draws a dashed vertical guide line to the bottom of the chart. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.json` for loading `dataset.json`, and transitions via `transition().style()` for interactive feedback.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

tp2

This example shows a time-series line chart of seven monthly data points, with circles marking each value. Hovering a circle highlights it in red and displays its value as a label, while a dashed red vertical line appears beneath the point. The visualization is built with D3 v4, rendering to an SVG canvas. It uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` for the path, with data loaded from a local JSON file via `d3.json`.

EEssohanamKouyou

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

86% match

Loading thumbnail…

TP2_DataViz_Linechart

This example displays a simple line chart that plots seven data points, each labeled with a month abbreviation (e.g., "Jan 16") and a value. The chart uses a time-based x-axis and a linear y-axis, with the final value annotated in large text beside the line. Built with D3 v4, the visualization relies on `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, reading data from a local JSON file, and renders the line and labels as SVG elements within a fixed-width canvas.

BBarbierJeremy

86% match

Loading thumbnail…

TP Data Viz - dynamic line chart

A dynamic line chart plots a synthetic dataset of monthly values from January to December 2016, where hovering over a circular point highlights it in red, shows the value in a text tooltip, and draws a dashed vertical guide to the baseline. The chart uses an ordinal x-scale for categories and a linear y-scale, with the line, circles, and labels rendered as SVG elements. Built with D3 v3, it loads data from a JSON file via `d3.json`, applies date parsing with `d3.time.format`, and uses mouseover and mouseout events to toggle the interactive annotations.

AAllyaenn

85% match

Loading thumbnail…

TP2_BoltMaud

This example shows a simple line chart of monthly values from a small dataset, with a pattern-filled area emphasizing the data points. The chart uses D3 v4 to render an SVG, mapping dates to a time scale and values to a linear scale. A line path connects the points, and each circle uses a repeating pattern fill. Hovering over a circle highlights it in red, displays its value label, and draws a dashed vertical guide line; moving the mouse away removes the highlight and guide. The visualization employs d3.line, d3.scaleTime, d3.scaleLinear, and event handlers.

BBoltMaud

85% match

Loading thumbnail…

TP 2 simple line + mouseover

A simple line chart shows monthly values as a single black line with circular gray markers. Hovering a marker turns it red, displays the numeric value in a text label, and draws a dashed vertical guide line to the baseline. The visualization is built with D3 v4, using `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and `d3.json` to load the data from `dataset.json`. Mouseover and mouseout event handlers dynamically add and remove the tooltip elements and guide line.

HHectorDt

85% match

Loading thumbnail…

TP2-PICARD

This example visualizes a time series of monthly values (labeled A through L) using an SVG line chart with circular markers, rendered with D3.js v3. The chart maps categorical month names to the x-axis and quantitative values to the y-axis, with a distinct line path and a large numeric label for the final data point. It also demonstrates interactive hover effects: moving the mouse over a circle highlights it in red, displays its value in a temporary text label, and draws a dashed vertical guide line from the point down to the baseline. The data is loaded from a local JSON file, while scales and axes are constructed using `d3.scale.ordinal` and `d3.scale.linear`, with the line generated by `d3.svg.line`.

55C5

85% match

Loading thumbnail…

TP3 area simple line chart

This area chart visualizes a simple dataset of monthly values using a blue filled region beneath a black line. Built with D3 v4, it uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.area` and `d3.line` generating the SVG paths. Data is loaded from a local `dataset.json` file, parsed with `d3.timeParse`, and labeled with formatted month-year strings. The chart also highlights the final value’s numeric label beside the line’s end.

LLRobergeon

84% match