Exo TP 2

100%

✓ Published0🌍 Public

Last edited Nov 9, 2017

Created on Nov 9, 2017

This example shows a simple time-series line chart of seven monthly data points from a JSON dataset, with each date labeled beneath the line and the final value displayed to the right. The chart uses a black polyline rendered as an SVG path, with a time scale for the x-axis and a linear scale for the y-axis. The code relies on D3 v4’s `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to process dates, map values, and draw the path. A circle element is prepared for potential interaction but is not shown.

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'>Exo TP 2</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

87% match

Loading thumbnail…

TP2Devoir

This example displays a simple time series line chart of seven monthly data points from a small JSON dataset, plotting values across dates. The chart encodes values with a black line, light-grey circular markers, and faint dashed vertical guides. Hovering over a circle turns it red, reveals its corresponding value label, and highlights its dashed guide line. The visualization uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.timeParse`, rendering to SVG with interactive mouseover and mouseout events.

AAlsaxian

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

83% match

Loading thumbnail…

tp2

This interactive line chart visualizes a small time series dataset containing seven monthly values. A black line connects circular markers, which turn red and display their numeric value on hover, along with a dashed vertical guide line descending to the baseline. The bottom axis shows abbreviated month labels. Built with D3 v4, the visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and SVG elements with transition effects for the hover interactions. The data is loaded from a local JSON file.

TTheo-Jaunet

81% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart plotting seven monthly data points from a JSON dataset, with labeled x-axis dates and a final value annotation. The SVG rendering uses d3.v4 with a time scale for the x-axis (`d3.scaleTime`), a linear scale for the y-axis (`d3.scaleLinear`), and a `d3.line` generator to create the path. Data is parsed from `dataset.json` using `d3.timeParse` for date formatting, and the line is styled with a black stroke via CSS.

TTanguideCrevoisier

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

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

81% match

Loading thumbnail…

simple line chart from dataset

This example displays a simple line chart of seven monthly data points, with each point labeled by its date and value. It uses d3.v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to map the dataset to SVG paths and circles. The chart animates circle color on mouseover via `transition().duration(500)`, and the final value is appended as a text label. Data comes from an external `dataset.json` file containing name, value, and date fields.

LLRobergeon

81% match