DataViz_Tp2_Meziani_Amina

100%

DataViz_Tp2_Meziani_Amina

✓ Published0🌍 Public

Last edited Dec 27, 2017

Created on Nov 8, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

83% match

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

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

83% match

Loading thumbnail…

Tp2_DataViz_Hamizi_ameliore

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.

NNaamaNaa

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

81% match

Loading thumbnail…

simple line chart from dataset

A simple line chart renders twelve monthly data points from a local JSON dataset, plotting values over time. The SVG visualization uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to draw the black line, with light gray circles for each point. Hovering over a circle triggers `handleMouseOver` and `handleMouseOut`, turning the circle red, displaying its value as text, and adding a dashed vertical guide line. The chart also labels each month along the bottom and shows the last value prominently on the right.

NNpfn

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

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

80% match