Skip to main content
SimilarExport ZIP
100%

Tp2_DataViz_Hamizi_ameliore

✓ Published0🌍 Public
NNaamaNaa
Last edited Nov 10, 2017
Created on Nov 9, 2017

This interactive line chart visualizes monthly values as a series of labeled circles connected by a path. Data from a local JSON file is loaded via `d3.json()`, with dates parsed using `d3.timeParse()`. A scatter plot of translucent gray circles overlays the line; hovering a circle changes its fill to red, reveals its value label, and displays a vertical dashed line. These interactions use D3 v4 selections, transitions, and time/linear scales (`d3.scaleTime()`, `d3.scaleLinear()`). The SVG rendering is produced with `d3.line()` and appended elements.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/NaamaNaa/'>NaamaNaa</a>'s block: <a href='http://bl.ocks.org/NaamaNaa/3442a42dbe424868f96484e753c3386f'>Tp2_DataViz_Hamizi</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Tp2_DataViz_Hamizi

This visualization displays a monthly dataset for 2016 as a black line chart, with each data point marked by a semi-transparent gray circle. A value label and a dashed vertical guide line are hidden by default, becoming visible when hovering over a circle, which also turns red and fades in the corresponding text label. The code uses d3.json to load the data, d3.timeParse and d3.timeFormat for date handling, and d3.line with time and linear scales to generate the SVG path. Animations rely on transition().duration(500) to adjust opacity and font size during mouseover and mouseout events.

NNaamaNaa
91% match
Loading thumbnail…

DataViz_Tp2_Meziani_Amina

A line chart displays twelve monthly data points from a JSON dataset, plotting values over time from January to December 2016. The SVG visualization uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.timeParse` to render the line and axes. Semi-transparent circles sit on each point; hovering a circle animates its fill to red, reveals the corresponding numeric value, and shows a dashed vertical guide line, with `transition.duration` and `style` opacity changes handling the effects.

AAminaSGitHub
82% 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
77% 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
77% 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
76% 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
75% match
Loading thumbnail…

Interactive line chart

This interactive line chart displays monthly values from January to December 2016, with each data point represented as a labeled circle along a single black line. Hovering over a circle highlights it in red, enlarges its corresponding value label, and reveals a dashed vertical guide line. Built with D3 v3, the visualization uses an ordinal x-scale, a linear y-scale, and SVG elements including paths, circles, and text. Data loads from a local JSON file via `d3.json`, with dates parsed using `d3.time.format` and values formatted with `d3.format`.

OOrhanYaz
75% 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
74% match