RemiFaure

@RemiFaure·7 public vizzes

Simple Radar Chart

A simple radar chart displays two randomly generated 24-hour data series as radial lines around a central point, with colored polygons for each series. The visualization uses d3.js version 2.5.0 to render SVG elements, including concentric circular axes with tick labels and radial spokes for each hour. The code defines a linear radius scale from the merged data range, then draws paths using `d3.svg.line.radial()` to connect the data points, with green and blue strokes distinguishing the series.

Feb 9, 2018

Loading thumbnail…

Force-Directed Layout with Convex Hull

This example shows a force-directed network with a Voronoi partition, where 100 nodes are grouped into 36 clusters and positioned through a physics simulation. The nodes are colored by group, and hovering over a Voronoi cell briefly highlights the corresponding node. The code uses d3.forceSimulation with x, y, charge, collide, and center forces, then runs 120 manual ticks. It renders SVG circles, lines, and Voronoi paths using d3.voronoi, with a single link connecting two nodes.

Feb 9, 2018

Loading thumbnail…

Gist 6b64443aba2850cb55742070acbbd681

A choropleth-style map of U.S. states rendered with D3 v4, using the `d3.geoAlbersUsa` projection and `d3.geoPath` to draw each state's boundaries from the included `us-states.json` GeoJSON data. The SVG canvas is fixed at 700 by 580 pixels. No additional styling or interactivity is applied; the visualization simply displays the unadorned state outlines.

Feb 2, 2018

Loading thumbnail…

Grouped bar chart v4

This example presents a grouped bar chart with ten categorical groups along the x-axis and five colored series per group, using randomly generated data. The SVG visualization uses D3 v4’s `d3.scaleBand` for both the outer group positions and inner bars, with `d3.scaleLinear` mapping values from 0 to 1 to the vertical axis. Each series is assigned a distinct color via `d3.scaleOrdinal`, and the bars are rendered as nested `<g>` elements with `rect` shapes. The code includes axes with hidden x-axis path, and the layout is fixed at 960 by 500 pixels with defined margins.

Jan 29, 2018

Loading thumbnail…

Scatterplot Iris using different marks

This D3.js v4 visualization displays the classic Iris dataset as a scatterplot, mapping sepal length and width to the x- and y-axes while using different symbol shapes from `d3.symbols()` to distinguish the three iris species. A legend allows interactive filtering by clicking a species, which dims all other points to 0.1 opacity. The SVG rendering uses `d3.scaleOrdinal` for colors and `d3.scaleSqrt` for point sizing based on petal length.

Jan 26, 2018

Loading thumbnail…

Scatterplot Iris using different marks

This scatterplot of the Fisher Iris dataset maps sepal length and width on the x- and y-axes, using distinct marker shapes to encode the three species, while petal length determines point size via a square-root scale. The chart employs D3 v4’s `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` with `d3.symbols` to generate varied path marks. It renders as an SVG, includes axis labels, and adds a legend, all built from the inline `iris.csv` data.

Jan 26, 2018

Loading thumbnail…

Scatter plot iris

This example visualizes the classic Iris dataset as a scatter plot, showing the relationship between sepal width and sepal length across three flower species. Each species is represented by a colored square marker, with a legend in the top-right corner identifying the color mapping. The visualization uses D3.js v3 with SVG rendering, employing `d3.scale.linear` for the axes, `d3.svg.axis` for tick marks, and `d3.scale.category10` for the categorical color scheme on data loaded from a CSV file.

Jan 26, 2018