Tp2_DataViz_Hamizi

100%

Tp2_DataViz_Hamizi

✓ Published0🌍 Public

Last edited Nov 9, 2017

Created on Nov 9, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

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

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

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

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

76% match

Loading thumbnail…

Interactive Linechart by Flazyy

This interactive line chart visualizes monthly values from January to December 2016, with each point representing a named data category. The chart displays a black polyline connecting circular markers, with month labels below and value labels that appear on hover. The visualization uses d3.svg.line for the path, d3.scale.ordinal for the x-axis, and d3.scale.linear for the y-axis. Hovering over a circle triggers mouseover and mouseout events that highlight the point, reveal its value, and show a dashed vertical guide line. The data comes from a JSON file with name, value, and date fields, rendered as SVG elements.

FFlazyy

74% match