Skip to main content
Log in
B

BaptisteL54

@BaptisteL54·14 public vizzes

Loading thumbnail…

Simple Radar Chart

This simple radar chart displays monthly average temperatures for Paris, France, over multiple years, with each year rendered as a separate colored, semi-transparent polygon. The radial grid uses concentric circles and twelve spokes for months, with temperature values scaled linearly from -5 to 5 degrees. Built with D3 v4, the code loads JSON temperature data and maps each monthly reading to a radial position, closing each yearly loop. The visualization applies `d3.radialLine` for shape generation and uses `d3.scaleLinear` for both radius mapping and gradient color assignment.

Feb 16, 2018
Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed layout places 100 randomly generated nodes into nine groups, each node with a random radius and connections to a few peers. The visualization displays these nodes as colored circles with black links, overlaid by a Voronoi diagram that partitions the canvas into convex hulls around each node. Hovering over a cell highlights it in red and briefly enlarges the corresponding node. The code uses `d3.forceSimulation` with force functions for links, many-body repulsion, positioning, collision, and centering, running 120 simulation ticks before rendering the Voronoi polygons and SVG elements.

Feb 9, 2018
Loading thumbnail…

Force-Directed Layout with Convex Hull

This example shows 100 nodes grouped into nine clusters, each assigned a distinct color, with a Voronoi partition drawn over the simulated layout. The code uses d3.forceSimulation with forceX and forceY to position groups around a grid, plus d3.forceCollide to prevent overlaps, running 120 ticks before rendering. The Voronoi cells are computed with d3.voronoi and drawn as SVG paths, with a mouseenter effect that briefly highlights the corresponding cell in red. Nodes are rendered as circles using SVG, with links absent from the empty graph.

Feb 9, 2018
Loading thumbnail…

Grippe France 2014

A choropleth map of France displays the annual sum of flu-related medical visits in 2014 across 22 metropolitan regions, using color to indicate case totals. The visualization merges CSV data with GeoJSON regional boundaries, encodes the aggregated year sum into region fill colors, and displays the exact value as text on mouseover. It is built with d3.v4, using `d3.geoConicConformal` with a centered projection, `d3.geoPath` for rendering the map, `d3.scaleLinear` for color mapping (from red to blue over a 0–4500 range), and `d3.mouse` to position the hovered label.

Feb 2, 2018
Loading thumbnail…

Grippe France 2014

A choropleth map of French regions colors each region according to its total reported flu cases in 2014, using a red-to-blue linear scale. The visualization loads geoJSON region boundaries and CSV data, merges them by region name, and renders the polygons with `d3.geoPath` and a conic conformal projection. Hovering over a region displays its total case count via a temporary SVG text label, with the code leveraging `d3.csv` and `d3.json` for data loading.

Feb 2, 2018
Loading thumbnail…

Grippe France 2014

A choropleth map of French regions shows the total number of reported flu cases in 2014, with a linear red-to-blue color scale encoding case counts from zero to 3,000. The visualization uses D3 v4 with `d3.geoConicConformal` for projection and `d3.geoPath` to render region boundaries. Data from a CSV is merged with geographic features from a GeoJSON file, and hovering over a region displays its total via appended SVG text.

Feb 2, 2018
Loading thumbnail…

Stacked to Grouped

This visualization displays monthly stock prices for four companies (MSFT, AMZN, IBM, AAPL) across three selected years, rendered as SVG rectangles on a dark background. A click on a white circle toggles between stacked and grouped bar layouts. The code uses D3 v4 with `d3.scaleLinear` for axes and positioning, loading comma-separated stock data from an external CSV file.

Feb 2, 2018
Loading thumbnail…

Stacked to Grouped

This visualization displays monthly stock prices for four companies (MSFT, AMZN, IBM, AAPL) across selected years, initially rendered as stacked bars and toggling to grouped bars when a white circle is clicked. The code uses D3 v4 with SVG rendering, loading data from `stocks.csv` via `d3.csv`. It builds linear scales (`d3.scaleLinear`) for positioning and creates rectangles for each bar, with colors distinguishing companies. The chart updates by re-binding data and adjusting bar widths and heights, and includes labeled axes and a company legend.

Feb 2, 2018
Loading thumbnail…

Grouped bar chart v4 Stocks

A grouped bar chart displays monthly stock prices for Microsoft, Amazon, IBM, and Apple across four selected years. The visualization uses D3 v4's `d3.csv` to load data from a local CSV file and `d3.select` to append an SVG element with a dark blue background. Bars are drawn using `svg.selectAll("rect")` with a linear scale for the y-axis, and each group of four rectangles represents the four companies' prices for a given month. The chart includes axis elements created with `d3.axisBottom` and `d3.axisLeft`, plus text labels for each company.

Jan 31, 2018
Loading thumbnail…

Stacked bar chart v4 Stocks

This stacked bar chart, built with D3 v4, visualizes the monthly closing stock prices for four major tech companies (MSFT, AMZN, IBM, AAPL) across four selected years. It uses `d3.csv` to load data from `stocks.csv`, then filters and aggregates the data to display stacked rectangles. The chart employs `d3.scaleLinear` for both the x and y axes, with each month’s bar segmented by company, colored in grayscale, and rendered as SVG. The visualization includes axis labels and company legends, with a dark background for contrast.

Jan 31, 2018
Loading thumbnail…

Grouped bar chart v4

This grouped bar chart displays five series of ten random samples each, using color to distinguish the series and vertical bars to represent values. Built with D3 v4, it renders as SVG and uses `d3.scaleBand` for the categorical axes, `d3.scaleLinear` for the value axis, and `d3.scaleOrdinal` for color mapping, with data generated in JavaScript via `Math.random`.

Jan 31, 2018
Loading thumbnail…

Scatterplot Iris using different marks

This example visualizes the classic Iris dataset as a scatterplot, mapping sepal length and width to the x- and y-axes. Each data point is rendered as a distinct SVG symbol—circle, cross, or diamond—based on the flower’s species, with color further distinguishing the three classes. The code uses d3.scaleLinear for axes, d3.scaleOrdinal for color and symbol assignment, and d3.symbol with the d3.symbols array to generate the mark paths. A legend maps species to both symbol type and color, while petal length is encoded by a square-root size scale.

Jan 26, 2018
Loading thumbnail…

Scatterplot of iris.csv

A dark-themed scatterplot visualizes the classic Iris dataset, plotting petal width against petal length. Each of the 150 points is colored by species—setosa in blue, versicolor in green, and virginica in red—with white strokes for contrast. Hovering over a point enlarges its stroke and displays a temporary tooltip with its coordinates. The visualization is built with D3 v4, using `d3.scaleLinear` for the x- and y-axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circles with mouse event handlers. The code also attempts to calculate a linear regression line, though the final path is not rendered correctly.

Jan 26, 2018
Loading thumbnail…

fresh block

A grid of translucent blue circles represents the classic Iris flower dataset, with each circle’s horizontal position based on its index and petal width, while petal length defines a vertical scale that is not applied to the circle positions. The visualization uses D3 v4 to load the CSV file, create an SVG canvas, and bind the data to circle elements. It sets a fixed vertical center, fill, stroke, and radius, though the x-scale and y-scale are defined but only the x-scale influences the layout. The data comes from the included iris.csv file, rendered as SVG with a dark background.

Jan 25, 2018