Ctuauden (@Ctuauden), VizHub

SNCF_dataviz_corentin

This visualization compares two French railway stations by displaying their available on-site amenities, access modes, and traveler trip purposes side-by-side as small colored rectangles. The code uses D3 v4 (`d3.csv`, selections, and attribute manipulation) to load a dataset of SNCF station statistics, then renders SVG rectangles to encode each categorical variable for both selected stations. Station identifiers are defined in the script, and the tooltip and text elements display station names derived from the underlying CSV data.

Mar 5, 2018

Loading thumbnail…

SNCF_dataviz_corentin

This visualization compares two SNCF train stations, selected by their UIC codes, showing their 2016 passenger counts, the percentage variation from 2015, and station names. It renders these metrics as static text labels on an SVG canvas using D3 v4. The code loads station data from a CSV file, calculates the year-over-year variation, and formats numbers with `d3.format`.

Feb 9, 2018

Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed network graph shows 100 colored nodes grouped into 30 clusters, linked by sparse connections and enclosed by a Voronoi partition that updates as nodes settle into position. The code runs 120 ticks of `d3.forceSimulation` with forces for links, charge, X/Y positioning, collision, and centering. Hovering a Voronoi cell highlights the enclosed node and its incident links. Rendering uses SVG circles, lines, and paths, with `d3.voronoi` computing the polygon boundaries over the simulated node coordinates.

Feb 9, 2018

Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed layout positions 100 randomly generated nodes into 30 groups using a simulation from the d3.forceSimulation API, with forces for charge, collision, and x/y anchoring. The nodes are grouped by index modulo 30, and a Voronoi partition, created via d3.voronoi, draws convex hull-like polygons around each node’s cell in red on mouseover. The SVG output animates over 120 simulation ticks, filling each polygon white and outlining it in black, with node colors assigned from d3.schemeCategory20. The data is procedurally generated, not from an external source, and rendered entirely in the browser.

Feb 9, 2018

Loading thumbnail…

Carte Grippe France

This choropleth map visualizes the total number of flu cases across French administrative regions for 2014, using a blue-to-red linear color scale to indicate intensity. Hovering over a region reveals its name and total case count via a tooltip. Built with D3 v4, the map uses `d3.geoConicConformal` for the projection and `d3.geoPath` to render region boundaries from a GeoJSON file, while the data comes from a CSV sourced from a gist.

Feb 5, 2018

Loading thumbnail…

Carte Grippe France

This choropleth map of metropolitan France visualizes the total number of influenza cases recorded per region for the year 2014. Hovering over a region displays its name and total case count in a tooltip. The visualization uses D3 v4 to load a TopoJSON file of regional boundaries and a CSV of weekly case data. D3’s `geoConicConformal` projection and `geoPath` render the SVG regions, which are colored using a linear scale mapping the cumulative `somme2014` values to a blue-to-red gradient.

Feb 5, 2018

Loading thumbnail…

Carte Grippe France

This choropleth map visualizes the total number of flu cases across French administrative regions for 2014, using a blue-to-red linear color scale to indicate intensity. Hovering over a region reveals its name and total case count via a tooltip. Built with D3 v4, the map uses `d3.geoConicConformal` for the projection and `d3.geoPath` to render region boundaries from a GeoJSON file, while the data comes from a CSV sourced from a gist.

Feb 5, 2018

Loading thumbnail…

Carte Grippe France

This choropleth map visualizes the total number of flu cases across French administrative regions for 2014, using a blue-to-red linear color scale to indicate intensity. Hovering over a region reveals its name and total case count via a tooltip. Built with D3 v4, the map uses `d3.geoConicConformal` for the projection and `d3.geoPath` to render region boundaries from a GeoJSON file, while the data comes from a CSV sourced from a gist.

Feb 5, 2018

Loading thumbnail…

Carte Grippe France

This choropleth map visualizes the total number of flu cases across French administrative regions for 2014, using a blue-to-red linear color scale to indicate intensity. Hovering over a region reveals its name and total case count via a tooltip. Built with D3 v4, the map uses `d3.geoConicConformal` for the projection and `d3.geoPath` to render region boundaries from a GeoJSON file, while the data comes from a CSV sourced from a gist.

Feb 5, 2018

Loading thumbnail…

Carte Grippe France

This choropleth map of metropolitan France visualizes the total number of influenza cases recorded per region for the year 2014. Hovering over a region displays its name and total case count in a tooltip. The visualization uses D3 v4 to load a TopoJSON file of regional boundaries and a CSV of weekly case data. D3’s `geoConicConformal` projection and `geoPath` render the SVG regions, which are colored using a linear scale mapping the cumulative `somme2014` values to a blue-to-red gradient.

Feb 5, 2018

Loading thumbnail…

Carte Grippe France

This choropleth map visualizes the total number of flu cases across French administrative regions for 2014, using a blue-to-red linear color scale to indicate intensity. Hovering over a region reveals its name and total case count via a tooltip. Built with D3 v4, the map uses `d3.geoConicConformal` for the projection and `d3.geoPath` to render region boundaries from a GeoJSON file, while the data comes from a CSV sourced from a gist.

Feb 5, 2018

Loading thumbnail…

Carte Grippe France

This choropleth map of metropolitan France visualizes the total number of influenza cases recorded per region for the year 2014. Hovering over a region displays its name and total case count in a tooltip. The visualization uses D3 v4 to load a TopoJSON file of regional boundaries and a CSV of weekly case data. D3’s `geoConicConformal` projection and `geoPath` render the SVG regions, which are colored using a linear scale mapping the cumulative `somme2014` values to a blue-to-red gradient.

Feb 5, 2018

Loading thumbnail…

Carte Grippe France

This choropleth map visualizes the total number of flu cases across French administrative regions for 2014, using a blue-to-red linear color scale to indicate intensity. Hovering over a region reveals its name and total case count via a tooltip. Built with D3 v4, the map uses `d3.geoConicConformal` for the projection and `d3.geoPath` to render region boundaries from a GeoJSON file, while the data comes from a CSV sourced from a gist.

Feb 5, 2018

Loading thumbnail…

Carte Grippe France

This choropleth map of metropolitan France visualizes the total number of influenza cases recorded per region for the year 2014. Hovering over a region displays its name and total case count in a tooltip. The visualization uses D3 v4 to load a TopoJSON file of regional boundaries and a CSV of weekly case data. D3’s `geoConicConformal` projection and `geoPath` render the SVG regions, which are colored using a linear scale mapping the cumulative `somme2014` values to a blue-to-red gradient.

Feb 5, 2018

Loading thumbnail…

Stocks Bar chart

This interactive chart displays monthly stock price data for MSFT, AMZN, and IBM from 2000 to 2010, aggregated by year. Clicking the chart toggles between stacked bars and grouped circles, each colored by company. The visualization uses d3.csv to load data, d3.nest for aggregation, d3.scaleBand and d3.scaleLinear for axes, and d3.stack for the stacked layout, with all elements rendered as SVG.

Feb 2, 2018

Loading thumbnail…

transition grouped <-> stacked

This example demonstrates the animated transition between stacked and grouped bar charts. Ten random samples are displayed as five series, with the chart type toggling on a click. The visualization uses D3 v4’s `scaleBand` for categorical axes and `scaleLinear` for the y-axis. During transitions, `transition()` with duration and delay functions animates the bars’ positions and heights, reshaping the layout smoothly while maintaining the same underlying data.

Feb 1, 2018

Loading thumbnail…

transition grouped <-> stacked

This example demonstrates the animated transition between stacked and grouped bar charts. Ten random samples are displayed as five series, with the chart type toggling on a click. The visualization uses D3 v4’s `scaleBand` for categorical axes and `scaleLinear` for the y-axis. During transitions, `transition()` with duration and delay functions animates the bars’ positions and heights, reshaping the layout smoothly while maintaining the same underlying data.

Feb 1, 2018

Loading thumbnail…

Scatter Plot : Legend filtering

This interactive scatter plot displays the Iris dataset, plotting sepal length against sepal width, with point size encoding petal length and both color and symbol shape distinguishing the three species. A legend on the right allows filtering by clicking a species: selecting one dims all other points to 10% opacity, while clicking the same legend item again restores full visibility. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleLinear`, `d3.scaleSqrt`, `d3.symbol`, and `d3.schemeCategory20`. Data is loaded from a local CSV file, and tooltips are present though their content is not defined.

Jan 26, 2018

Loading thumbnail…

Scatter Plot Iris

A scatter plot displays sepal width versus sepal length for 150 iris flowers, drawn as green diamonds using D3 v4’s SVG rendering with `d3.symbolDiamond`. A computed least-squares regression line, rendered via `d3.line` and helper functions, overlays the points to show the positive trend. Axes are generated with `d3.axisBottom` and `d3.axisLeft` on a linear scale, and data loads from an external CSV file.

Jan 26, 2018

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

Jan 19, 2018

Loading thumbnail…

D3 bar chart with data-binding

This D3 v4 bar chart demonstrates interactive data-binding by rendering an SVG with rectangles sized from a hardcoded array of numbers. The chart uses `d3.scaleLinear` for the y-axis and `d3.scaleBand` for the x-axis, with bars turning red on mouse hover and green on click, while retaining the green color after the click via a custom `__clicked` property. The example, forked from romsson's block, differs from its non-binding predecessor by applying D3's `selectAll` and `.data()` method to attach data to shapes, enabling direct event handlers that reference each data value.

Jan 19, 2018