Skip to main content
Log in
H

HectorDt

@HectorDt·8 public vizzes

Loading thumbnail…

Tests proj

This D3.js v4 visualization uses a custom geoJSON file to render a map of Europe, with country borders drawn as SVG paths. Centroid points from the accompanying `centres.json` dataset—containing country codes like FR, UK, DE, and IT—are plotted as markers on the map. The visualization animates the appearance of these country markers, and the project is built with Blockbuilder.org, licensed under MIT.

Jan 11, 2018
Loading thumbnail…

fresh block

This example shows a minimal D3.js v4 visualization that renders static text to the screen. The code creates an SVG canvas and appends a single text element reading "Edit the code below to change me!" in a monospace font. It also defines a JavaScript array containing an object with two properties, `test1` and `test2`, and logs that object to the browser console. The visualization relies on d3-selection to append the SVG element and the text node, using basic attributes for positioning and styling. No dynamic data binding or interactive features are implemented in this starter template.

Jan 11, 2018
Loading thumbnail…

fresh block

This example shows a minimal D3.js v4 visualization that renders static text to the screen. The code creates an SVG canvas and appends a single text element reading "Edit the code below to change me!" in a monospace font. It also defines a JavaScript array containing an object with two properties, `test1` and `test2`, and logs that object to the browser console. The visualization relies on d3-selection to append the SVG element and the text node, using basic attributes for positioning and styling. No dynamic data binding or interactive features are implemented in this starter template.

Jan 11, 2018
Loading thumbnail…

TestsTp4

The visualization presents weekly flu-like illness rates across 12 French regions for 2014, encoded as an animated streamgraph built with D3 v4. Each region is a colored band whose vertical thickness at any point reflects the number of reported cases that week, with the x-axis spanning the full year from January to December. A play button steps through the 52 weekly snapshots, and as the animation progresses, the bands grow, peak during the winter months, and recede—making the seasonal surge and regional variation immediately visible. A legend identifies regions, and the animation highlights the temporal dynamics of the epidemic curve. The data comes from the GrippeFrance2014.csv file (sourced from a gist by HectorDt), and the chart is rendered under the MIT license.

Jan 6, 2018
Loading thumbnail…

Tp4

This animated choropleth map shows the spread of influenza-like illness across French regions throughout 2014. Built with D3 v4, it uses a sequential color scale to encode weekly incidence rates per 100,000 inhabitants, with darker shades indicating higher values. The animation steps through each epidemiological week, updating region colors in real time to reveal seasonal outbreak patterns and regional variations across the year. Hovering over a region displays its exact count and region name, while a timeline scrubber allows viewers to navigate the data. The design uses a clean, muted palette for the map base, with the incidences highlighted by a blue-to-red diverging scheme that emphasizes epidemic peaks during winter months. The visualization is part of a course exercise (TP4) by HectorDt and is released under the MIT license.

Jan 5, 2018
Loading thumbnail…

TestProjEurope

This interactive map of Europe, built with D3 v4, visualizes geographic data for the continent. The visualization uses a custom GeoJSON file to render country boundaries, with vector shapes drawn onto an SVG canvas. The map is constructed using D3's geographic path generator, allowing for smooth zooming and panning interactions. The project appears to be a test or demonstration of mapping capabilities, with the focus on displaying the geometry of European countries in a clean, minimal style.

Jan 4, 2018
Loading thumbnail…

TP 2 simple line + mouseover

A simple line chart shows monthly values as a single black line with circular gray markers. Hovering a marker turns it red, displays the numeric value in a text label, and draws a dashed vertical guide line to the baseline. The visualization is built with D3 v4, using `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and `d3.json` to load the data from `dataset.json`. Mouseover and mouseout event handlers dynamically add and remove the tooltip elements and guide line.

Nov 9, 2017
Loading thumbnail…

simple bar chat dataset

This simple bar chart visualizes a small dataset of categorical values loaded from a semicolon-delimited CSV file. The chart uses SVG rectangles, with each bar’s height proportional to its numeric value, while the category names are displayed as text labels above the bars. The code relies on `d3.text` to fetch the dataset, `d3.dsvFormat(';')` to parse the semicolon-separated values, and `d3.scaleLinear` for the x- and y-axes’ positioning and scaling. Rectangles and text are appended using D3’s data-join pattern, with styling applied via CSS.

Nov 9, 2017