B

Benoit Mouly

@benoitMouly·16 public vizzes

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This fork visualizes the estimated 2010 religious composition of the world’s 20 most populous countries as a stacked horizontal bar chart, with each bar’s segments colored by religion. Hovering over a bar reveals a tooltip with the country, religion, and population count, while hovering over the legend highlights bars for a specific religion by overlaying semi-transparent layers. The chart is built with D3.js version 3, using `d3.layout.stack` for stacking, `d3.svg.axis` for scales, and the `d3-legend` and `d3-tip` libraries for the legend and tooltips. Data originates from the Pew Research Center’s Global Religious Landscape report, processed via a custom script.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart visualizes the top 10 most populous countries using United Nations World Population Prospects 2019 data, loaded via d3.csv. Built with React and rendered as SVG, the chart uses d3.scaleBand and d3.scaleLinear for axes, with a customized Poppins font and a teal color scheme. Each bar’s tooltip displays the population value formatted using d3.format. The code reuses modular components for axes and marks, and displays a loading state before the data arrives.

Loading thumbnail…

Axes with React & D3

This example displays the top 10 most populous countries as horizontal bars with D3-generated axes inside a React component. It uses `d3.csv` to load UN population data for 2020, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the continuous x-axis. The React `useState` and `useEffect` hooks manage data fetching, while manual SVG elements render the axes ticks and gridlines, with D3’s `scaleBand().ticks()` providing numeric tick values.

Loading thumbnail…

World map

This world map visualizes geographic boundaries using a Natural Earth projection, rendering landmasses, country interiors, and graticules as SVG paths. The code applies the `geoNaturalEarth1` projection and `geoPath` from d3-geo to convert TopoJSON data from the world-atlas dataset into drawable shapes, with `geoGraticule` generating the latitude/longitude grid. Land areas are filled in teal with lighter borders, while sphere and graticule layers provide subtle background contrast. React manages the component state, loading the TopoJSON asynchronously via `useEffect` and `d3.json`.

Loading thumbnail…

Working with Time

A line chart shows temperature readings over one week in San Francisco, drawn as a smooth natural curve across time. The visualization uses React with D3 v5 scales and axes, including `scaleTime` for the x-axis and `scaleLinear` for the y-axis, rendering SVG elements. Data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv`, with time formatted as abbreviated weekdays. The chart includes labeled axes and a teal curve, with tick marks styled in muted gray.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width on a fixed SVG canvas. The visualization uses React components to render D3 v5 scales and axes, with circular marks colored teal and labeled axes using the Poppins font. Tick marks and labels are generated via custom AxisBottom and AxisLeft components using D3’s scaleLinear. Data is loaded asynchronously from the provided CSV URL using D3’s csv parser, with all numeric fields coerced to numbers.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using horizontal bars, with population values on the x-axis and country names on the y-axis. The visualization omits axis lines but includes tick labels and a population axis title, with bars colored teal and labeled using a native SVG `<title>` tooltip. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and loads data from a CSV of UN population estimates for 2020. The SVG rendering is driven by reusable axis and mark components.

Loading thumbnail…

Refactored Bar Chart

This example displays a horizontal bar chart of the top 10 most populated countries using data from a UN Population CSV file. The chart initially renders without axes, showing only colored bars, before the refactored code adds x and y scales. Using React with D3 v5, it employs `scaleBand` for the categorical country axis and `scaleLinear` for population values. The `AxisBottom` and `AxisLeft` components generate tick marks and labels, while `Marks` renders the rectangles, with the final SVG output composed of these reusable parts.

Loading thumbnail…

The Margin Convention

The visualization displays the ten most populous countries as horizontal bars, lacking any axes, labels, or scales. The chart appears "pathetic" by design, emphasizing only the raw lengths of bars against a blank canvas. Data comes from a CSV file containing UN population figures for 2020. The code uses React with D3’s `scaleBand` and `scaleLinear` to map countries and population values, rendering SVG `<rect>` elements inside a translated group based on a fixed margin.

Loading thumbnail…

Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a "pathetic" bar chart: bars are colored black, with no axes, labels, or any scaling context. The chart uses React with state management and effect hooks to fetch and process data from a CSV via `d3.csv`, then renders SVG rectangles. Bar lengths are computed with `d3.scaleLinear` against the population maximum, and vertical positioning uses `d3.scaleBand` over country names, though these scales are hidden from the final output.

Loading thumbnail…

Fork of Fork of Loading Data with React & D3

A radial burst chart displays CSS named colors from a CSV file as equal-width slices of a pie, each filled with its corresponding hex value. The React component uses the `useState` and `useEffect` hooks to load data asynchronously via D3's `csv` function, then renders SVG paths generated by `d3.pie` and `d3.arc`. While loading, the UI shows a large "Loading..." message. The visualization uses D3 v5 with React 16.9 and renders entirely through SVG elements.

Loading thumbnail…

Fork of Loading Data with React

This example shows the CSS named colors dataset rendered as a horizontal stacked bar chart, where each row is a colored strip corresponding to a color’s RGB hex value. The visualization uses React hooks—`useState`, `useEffect`, and `useCallback`—to manage asynchronous data loading via `d3.csv`, displaying a loading message until the data arrives. React then maps over the parsed CSV rows to generate the colored divs, demonstrating a simple integration of D3’s data fetching with React’s state-driven rendering in an SVG-less, HTML-based layout.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load a CSV dataset of CSS named colors using D3’s `csv` utility within a React component. The application uses React’s `useState` and `useEffect` hooks to manage asynchronous data fetching and update the UI once the data arrives. The view displays a plain-text summary of the loaded data, including its size in kilobytes, row count, and column count, rendered inside a `<pre>` element. The code relies on `d3.csv`, React’s state management, and `ReactDOM.render` to bind the component to the DOM.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the basic workflow of loading and parsing CSV data with D3.js. It fetches a remote CSV file containing named CSS colors and displays the file size in kilobytes, the number of rows, and the number of columns as text on the page. The code uses `d3.csv` to load the data and `d3.csvFormat` to measure its size, while `data.length` and `data.columns.length` report the dataset structure. The concise output highlights the parsed data’s dimensions without visualizing the actual color values.

Loading thumbnail…

Mouse Follower

A single circle tracks the mouse cursor across an SVG canvas, moving to follow the pointer’s exact coordinates. The example uses React state management with `useState` and `useCallback` to update the circle’s `cx` and `cy` attributes on every `mousemove` event. It renders with D3’s `arc` import unused, relying instead on a plain SVG circle. The visualization demonstrates basic interaction and state-driven DOM updates within a React component.

Loading thumbnail…

Smiley face part1

A grid of twenty smiling faces, each rendered as a red SVG circle with a black stroke, black eyes, and a mouth arc, demonstrates a reusable component-based approach to data visualization. Built with React and D3, the code constructs each face from modular React components that accept parameters for geometry and styling. The mouth uses D3’s `arc` API to generate a path, while the face positions are fixed, but eye radius is randomized. The example shows how to compose SVG primitives into structured, parameterized visual elements.