GTHamonville

@GTHamonville·10 public vizzes

first_try_twitch

This example presents a nearly blank SVG canvas with a single line of instructional text. It demonstrates the most minimal setup for a D3.js visualization: a black SVG element is created on the page, and a text node is appended directly to it. The code uses the core `d3.select` and `svg.append` APIs, setting static attributes for position, font size, and font family. There is no data source or interaction; the output is solely the static text "Edit the code below to change me!" rendered in monospace.

Nov 17, 2017

Loading thumbnail…

tp_d3v2

A stacked bar chart displays task IDs along the x-axis and cumulative time on the y-axis, with bars colored by priority using `d3.scaleOrdinal` and `d3.schemeCategory10`. Each bar’s height reflects the sum of task times up to that point, sorted by time. The visualization is built with D3 v4, rendering SVG via `d3.axisBottom`, `d3.axisLeft`, and `d3.csv` to load the provided CSV dataset.

Nov 10, 2017

Loading thumbnail…

tp_d3

This visualization displays task data as a bar chart, with each bar representing a task and its height corresponding to the task’s time value. The bars are sorted in ascending order of time, and a computed cumulative time is logged to the console but not rendered. The chart uses D3 v4 to load a CSV file with `d3.csv`, scale data with `d3.scaleBand` and `d3.scaleLinear`, and render SVG rectangles. Axes are generated using `d3.axisBottom` and `d3.axisLeft`.

Oct 31, 2017

Loading thumbnail…

D3 treemap tutorial

This treemap visualization shows the distribution of task time across different priorities and statuses. It uses D3 v4 with an SVG rendering approach, loading CSV data and aggregating it by two keys (priority and status) using the `d3.nest` and `d3.rollup` functions. The treemap layout is generated with `d3.treemap`, and each rectangle is colored according to its parent priority, displaying a legend below.

Oct 31, 2017

Loading thumbnail…

bar_chart_steam

This example visualizes the average playtime for different video games from a CSV dataset. A bar chart displays each game on the x-axis and its average time in hours on the y-axis. The code uses `d3.csv` to load data, `d3.nest()` with a `rollup` function to compute mean times per game, and `d3.scaleBand` with `d3.scaleLinear` for scales. Bars are rendered as SVG rectangles with hover effects.

Oct 24, 2017

Loading thumbnail…

traitement_donnee_steam

This example presents two side-by-side scatterplots of the Iris dataset, comparing sepal and petal measurements across species. The left chart plots sepal length against sepal width, while the right chart plots petal length against petal width, with circle radius encoding a third quantitative variable and color encoding the categorical species via the d3.scaleOrdinal color scheme and d3.scaleSqrt for area. Built with d3.v4 and SVG, it includes axis labels, mouseover highlighting that thickens the selected dot’s stroke, and a transparent tooltip container using plain D3 selection methods and event handlers.

Oct 24, 2017

Loading thumbnail…

traitement_steam

Two coordinated scatterplots display the classic Iris dataset, contrasting sepal measurements on the left with petal measurements on the right. Each plot maps one measurement to the x-axis, another to the y-axis, and a third to circle radius via `d3.scaleSqrt`, while species determines color through `d3.scaleOrdinal` with `d3.schemeCategory20`. The code uses D3 v4 to render SVG circles with axes from `d3.axisBottom` and `d3.axisLeft`. Hovering over a dot increases its stroke width for emphasis, but no linked highlighting or selection between charts is implemented beyond this.

Oct 24, 2017

Loading thumbnail…

Coordinated Scatterplot Iris (d3.v4)

This example displays the Iris flower dataset in two coordinated scatterplots using D3.js v4 and SVG rendering. The left chart plots sepal length against sepal width, while the right chart shows petal length against petal width, with each dot sized by a third attribute and colored by species via `d3.scaleOrdinal`. Hovering over a point highlights it in both charts by increasing its stroke width. The code uses `d3.csv` to load the dataset and `d3.axisBottom` and `d3.axisLeft` for the axes.

Oct 17, 2017

Loading thumbnail…

iris

This visualization displays the classic Iris flower dataset as a scatterplot, mapping sepal length and width to the x and y axes, petal length to point size, and species to color. The rendering uses D3 v4’s SVG output. Data loading relies on `d3.csv` for parsing the CSV file, while scales are built with `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, plus axes from `d3.axisBottom` and `d3.axisLeft`. A categorical legend, built with circle elements, identifies the three species (setosa, versicolor, virginica), and a tooltip div is appended to the body but never made visible.

Oct 17, 2017

Loading thumbnail…

My first block

This block displays a closing stock price time series as a blue line with circular markers for each data point. It uses D3.js to render the visualization as SVG, with axes, tooltips on hover, and a smooth color/size transition on mouseout. The chart reads from a CSV file and parses the date column using a time format.

Oct 17, 2017