TP2_RENDU

100%

✓ Published0🌍 Public

Last edited Nov 15, 2017

Created on Nov 15, 2017

A simple line chart visualizes a small time series dataset, with each data point rendered as a grey circle. Hovering over a circle highlights it in red, displays the corresponding value as text, and draws a dashed vertical guide line. The chart is built with D3 v4, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, with data loaded from a JSON file via `d3.json`. SVG elements and mouse event handlers drive the interactive annotations.

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/BarbierJeremy/'>BarbierJeremy</a>'s block: <a href='http://bl.ocks.org/BarbierJeremy/6371bc98b7f4a291836b3d47e6166771'>TP2_RENDU</a>

forked from <a href='http://bl.ocks.org/BarbierJeremy/'>BarbierJeremy</a>'s block: <a href='http://bl.ocks.org/BarbierJeremy/55edc1bfb8fbb9ae353d0bd5b2f1fcb3'>TP2_RENDU</a>

Similar vizzes

Loading thumbnail…

Rendu TP2

A simple line chart displays monthly values from a small JSON dataset, with time parsed via `d3.timeParse` and formatted with `d3.timeFormat`. An ordinal scale maps dates to x-positions, while a linear scale handles the y-axis. Semi-transparent gray circles mark each data point, and hovering over a circle turns it red, adds a dashed vertical guide line, and shows the numeric value as text. The chart also includes a final value label on the right edge.

LLRobergeon

83% match

Loading thumbnail…

DataViz_TP2

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.

BBkilian971

81% match

Loading thumbnail…

tp3

This chart displays a line graph with interactive circle markers, plotting seven categorical data points from a local JSON dataset. The visualization uses D3.js v3 with an ordinal x-axis and linear y-axis, rendering as SVG. On mouseover, a circle turns red, displays a tooltip with the numeric value, and draws a dashed vertical line extending downward. The line itself is drawn using a D3 path with the line generator.

JJeremyBesson

81% match

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

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

80% match

Loading thumbnail…

TP3

A line chart displays monthly values from a small JSON dataset, with circles marking each point. The visualization uses d3.svg.line and d3.scale.ordinal for positioning, while labels show abbreviated month names. Hovering over a circle highlights it in red, reveals its numeric value in black text, and draws a dashed vertical line beneath it; moving the mouse away restores the original grey and white styling. The chart is rendered as SVG with d3.v3.

MMelanieSalignat

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

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

78% match