Skip to main content
Log in
A

ArnaudBru

@ArnaudBru·9 public vizzes

Loading thumbnail…

[interactive] Scatterplot Iris using different marks

This interactive scatterplot displays the classic Iris dataset, plotting sepal length against sepal width. Each flower is represented by a distinct SVG symbol whose shape and color encode its species. The visualization uses d3.scaleOrdinal with d3.symbols to generate different mark types, while d3.scaleLinear maps the quantitative axes. A legend allows filtering by clicking on a species, which dims all other symbols by reducing their opacity. The code relies on d3.csv for data loading and d3.axisBottom and d3.axisLeft for the axes.

Feb 19, 2018
Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed network diagram positions 150 nodes into nine distinct groups, with each node colored by group membership. The visualization overlays a Voronoi tessellation—computed using `d3.voronoi`—on top of the node positions, creating clickable cells that highlight adjacent nodes and connected links on mouseover. Randomly generated links between nodes are drawn as black lines, and hovering a Voronoi cell temporarily dims unrelated links while emphasizing those touching the hovered node. The layout uses `d3.forceSimulation` with charge, position, and collision forces, running 200 ticks before rendering static SVG circles and paths.

Feb 9, 2018
Loading thumbnail…

Interactive Map

The map visualizes weekly influenza case counts across French regions for 2014, with a choropleth shading that aggregates all November values per region. Built with D3 v4, it uses `d3.csv` to load the case data and `d3.json` for regional GeoJSON boundaries, then joins them by region name. The `d3.geoConicConformal` projection renders the map, while `d3.scaleLinear` with an HCL interpolator maps summed counts to a blue color scale. Hovering a region reveals its name via a tooltip div, and null values remain uncolored.

Feb 7, 2018
Loading thumbnail…

Interactive Map

This interactive map displays world countries on an equirectangular projection, with hover highlighting and rollover labels showing country names. Users can zoom and pan the map, with limits ensuring the map never leaves the viewport. The visualization uses D3.js v4’s `d3.zoom`, `d3.geoPath`, and `d3.geoEquirectangular` for rendering, while JQuery handles container sizing. Country labels are positioned using `Path.Centroid`, and the map resizes responsively with the window, recalculating zoom and translate extents. Data comes from a geographic GeoJSON source embedded in the SVG rendering.

Feb 2, 2018
Loading thumbnail…

Map

A choropleth-style interactive map displays world country shapes in light gray against a dark background. Hovering over a country highlights it in a darker tone and reveals its name in a label with a blue background, while all labels remain hidden by default. The visualization uses D3 v4 with `d3.geoPath` to render geographic features from GeoJSON data, with CSS classes controlling country fill, stroke, and label visibility. The map fills the entire viewport within a dedicated SVG container.

Feb 2, 2018
Loading thumbnail…

Map

A choropleth-style interactive map displays world country shapes in light gray against a dark background. Hovering over a country highlights it in a darker tone and reveals its name in a label with a blue background, while all labels remain hidden by default. The visualization uses D3 v4 with `d3.geoPath` to render geographic features from GeoJSON data, with CSS classes controlling country fill, stroke, and label visibility. The map fills the entire viewport within a dedicated SVG container.

Feb 2, 2018
Loading thumbnail…

Transition Stacked Bar - Grouped Bar

This example shows a transition between a stacked bar chart and a grouped bar chart for monthly stock price data from Microsoft, Amazon, and IBM. Clicking the visualization triggers an animated morphing of the bars, where the stacked representation reorganizes into side-by-side groups per time period. The code employs D3 v4 APIs including `d3.transition`, `d3.scaleBand`, and `d3.scaleLinear`, with SVG rects animated via the `transition` method. It uses the `d3.nest` and `d3.mean` functions to aggregate the data from a CSV file.

Feb 2, 2018
Loading thumbnail…

DataViz Scatterplot

This scatterplot visualizes the classic Iris dataset, plotting sepal length against sepal width for 150 flowers. Points are colored by species (setosa, versicolor, virginica) and use distinct symbols (cross, circle, triangle-up) via the D3 `d3.svg.symbol` API, with a legend mapping these shapes to species names. The chart includes labeled axes, a light gray grid, and uses scales from `d3.scale.linear` for positioning and `d3.scale.category10` for colors. Built with D3 v3, it renders SVG elements and loads data from a CSV file.

Jan 30, 2018
Loading thumbnail…

Interactive Scatterplot Iris using different marks

This interactive scatterplot visualizes the classic Iris dataset, using four quantitative variables to position and size each flower sample. The x and y axes map sepal length and width, while petal length controls the size of each point through a square-root scale. Each of the three Iris species is encoded with a unique symbol and color, assigned via d3.symbols and d3.scaleOrdinal. Clicking a legend item filters the plot by dimming non-selected species, offering a simple way to compare groups. The visualization is built with D3.js v4, rendering marks as SVG paths within an HTML page.

Jan 26, 2018