M

Manon ROMAIN

@manonromain·22 public vizzes

Loading thumbnail…

paris

This visualization shows the global prevalence of HIV/AIDS in 2017, with countries colored on a choropleth map using a yellow-to-red sequential scale. The map uses an Equal Earth projection rendered as SVG, with graticules and interior borders. Built with React and D3 v7, the code loads TopoJSON world atlas data and CSV data, then uses d3.geoPath to draw the map and d3.scaleSequential with d3.interpolateYlOrRd to encode prevalence values. Countries without data appear in grey.

Loading thumbnail…

Galère Césure with Color - React & D3

This example visualizes the email exchange network among colleagues involved in a thesis procedure, using a force-directed layout. Node position encodes sender or recipient roles, while node size reflects the total number of sent and received emails. A color legend identifies each person, and hovering dims unrelated nodes. The visualization is built with React and D3 v7, using `d3.scaleOrdinal` for color, `d3.scaleLinear` for positioning and sizing, and SVG circles for marks. Data comes from a CSV file loaded via `d3.csv`.

Loading thumbnail…

HIV/AIDS with React & D3

This visualization uses a D3 geoEqualEarth projection to render a world map colored by HIV prevalence rates for 2017, with a sequential YlOrRd color scale indicating the percentage of the population aged 15-49 affected. Built with React and D3 v7, the code loads country boundaries and interior lines via the topojson `feature` and `mesh` functions, while CSV data from IHME is joined to map geometries using ISO country codes. SVG paths render the sphere, graticules, and landmasses, with countries lacking data filled in grey.

Loading thumbnail…

Missing Migrants Brushing with React & D3

The visualization displays the global distribution of missing migrants and their incident dates, using a world map and a linked time-series histogram. Brushing a time range in the histogram filters the map’s circles, which are sized by the total number of dead and missing per incident. The map uses `d3.geoEqualEarth` projection, `d3.geoPath`, and `d3.geoGraticule`, while the histogram applies `d3.bin` and `d3.brushX`. Data comes from a CSV of missing migrant incidents up to 2021.

Loading thumbnail…

Missing Migrants Map & Hist with React & D3

This visualization combines a proportional-symbol world map with a time-series histogram to show the global distribution and monthly totals of dead and missing migrants. The map uses an Equal Earth projection with `d3.geoPath` and `topojson` world atlas data, sizing circles by the square-root scale of incident counts. The histogram bins incident dates into months using `d3.bin` and `d3.timeMonths`, summing deaths per bin via `d3.sum`. Both views render as SVG, built with React components and D3 v7, drawing from the Missing Migrants Project dataset.

Loading thumbnail…

Missing Migrants Map with React & D3

This interactive map visualizes reported incidents of missing migrants worldwide. Blue circles, sized by the total number of dead and missing using a square-root scale, are projected onto an Equal Earth projection using `d3.geoEqualEarth` and `d3.geoPath`. The React-based application loads data from a CSV and world atlas TopoJSON, rendering the map as SVG. It currently includes a placeholder date histogram, while the map marks are generated by a component that draws graticules, land masses, and the proportional circles.

Loading thumbnail…

Grouped Bar Chart with React & D3

This grouped bar chart visualizes the total number of dead and missing migrants over time, with each bar representing a monthly sum. The chart uses React for component-based rendering and D3 v7 for data loading, binning, and scales. Data is fetched via d3.csv and binned using d3.bin with time thresholds, then displayed as SVG rectangles. The x-axis uses d3.scaleLinear with d3.timeFormat labels, while the y-axis is also linear. Hovering a bar reveals its exact value via an SVG title tooltip.

Loading thumbnail…

World Map with Cities with React & D3

This map visualization displays major world cities as circles sized by population on an equal-Earth projection of the globe. Using React hooks, it loads geographic data via `useWorldAtlas` (from TopoJSON) and city data via `useCities` (from a CSV). The `Marks` component renders the sphere, graticules, land outlines, and interiors using `d3.geoPath` and `d3.geoGraticule`, while city circles are positioned by projecting coordinates and scaled with `d3.scaleSqrt`.

Loading thumbnail…

Polished Scatter Chart with Menus & Color - React & D3

This interactive scatter chart visualizes the Iris flower dataset, plotting sepal and petal measurements with a color-coded legend for species. Users control the X and Y axes through dropdown menus, while hovering over legend items highlights the corresponding species’ data points. Built with React and D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG circles rendered via React components. The chart also features custom axes and a color legend, with data loading handled through D3’s `csv` function.

Loading thumbnail…

Polished Scatter Chart with Menus - React & D3

This scatter chart displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through interactive dropdown menus. The visualization supports both quantitative and categorical axes; selecting "Species" switches the scale from a linear to an ordinal mapping. Built with React managing state and D3 v7 handling the SVG rendering, it uses `d3.scaleLinear` with `.nice()` for numeric axes and `d3.scaleOrdinal` for the categorical dimension. Data is loaded asynchronously from a CSV file using the `d3.csv` parser.

Loading thumbnail…

Scatter Chart with Menus - React & D3

This interactive scatter chart displays the Iris flower dataset, letting users swap the x- and y-axis variables among four numeric measurements and the categorical species attribute via React dropdown menus. The visualization uses D3.js v7 scales (linear and ordinal) to map data to SVG circles, with custom React components for axes and marks. It also demonstrates hybrid state management, where React hooks control the selected attributes while D3 handles the data-driven scales and positioning.

Loading thumbnail…

Stylised Scatter Chart with React & D3

A React-based scatter chart visualizes hourly Velib bike availability in Paris, aggregated from a remote CSV via `d3.csv` and `d3.rollups`. The SVG rendering uses `d3.scaleTime` for the x-axis (September 6–18, 2021) and `d3.scaleLinear` for the y-axis, with circles sized and positioned by bike counts. D3 generates tick marks, while React components (`AxisBottom`, `AxisTop`, `Marks`) handle layout, and a dropdown filters data options.

Loading thumbnail…

Sleect with React

This example demonstrates a simple React component for selecting a pet from a dropdown menu, with the chosen value managed through React’s `useState` hook and displayed in the browser console. The `Dropdown` component renders a native HTML `<select>` element, mapping over an array of options to generate `<option>` tags, and invokes a callback `onSelectedValueChange` upon user interaction. The styling is applied via CSS, and ReactDOM renders the App component into the root div. It uses React 17 and D3 v7 for the underlying libraries.

Loading thumbnail…

World Map with React & D3

This example renders a stylized world map using React and D3 v7, displaying landmasses, graticules, and country interiors in a warm color palette. It uses the `d3.geoEqualEarth` projection with `d3.geoPath` to draw SVG paths for geographic features, while country boundaries come from a TopoJSON world atlas (countries-50m.json) processed via `topojson.feature` and `topojson.mesh`. The visualization appears centered with interactive loading states managed through React hooks.

Loading thumbnail…

Line Chart with React & D3

This line chart displays the evolution of drinking water quality conclusions over time, using numerical values to represent different compliance levels. Built with React and D3 v7, the visualization renders as an SVG with time-scaled x-axis ticks and linear y-axis scaling. The code loads CSV data from a GitHub gist via `d3.csv`, sorts dates with `d3.ascending`, and uses `d3.line()` and `d3.timeFormat` to generate the path and formatted tick labels.

Loading thumbnail…

Stylised Bar Chart with React & D3

This stylized bar chart displays the total number of available bikes per hour, aggregated from a CSV file of Vélib’ station data. Built with React and D3 v7, the visualization loads the dataset via `d3.csv`, groups entries with `d3.rollups`, and sorts the results to highlight the top ten busiest hours. The code uses `d3.scaleBand` and `d3.scaleLinear` to position colored rectangles, with SVG axes and labels rendered through custom React components, all styled with the Poppins font.

Loading thumbnail…

Bar Chart with React & D3

This bar chart displays the top 10 hour-level time slots with the highest average number of available bikes, drawn as horizontal rectangles. It loads CSV data from a GitHub-hosted Velib bike-sharing dataset through D3’s `csv` and aggregates values with `d3.rollups` and `d3.mean`. React manages the component state and renders an SVG, while D3’s `scaleBand` and `scaleLinear` position the bars; axes and marks are defined as reusable React components.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading and visualizing a CSV dataset of bike availability from a GitHub-hosted file in a React application. It shows a scatterplot of randomly positioned circles, where each circle represents the total number of bikes available for a given hour, with the radius scaled by the summed value. The code uses React hooks (`useState`, `useEffect`) to fetch the data with D3’s `csv` method and `d3.rollups` to aggregate the dataset by date-hour. The circles are rendered as SVG elements, with random opacity and positions, displaying the processed data directly.

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot of the Auto MPG Data Set from the UCI Machine Learning Repository, loaded via D3’s `csv` function. The visualization renders circles encoding weight on the x-axis, horsepower on the y-axis, and a color scale for weight, with a tooltip displaying vehicle names. It demonstrates the declarative `vl` API, combining `markCircle`, `encode`, and configurable axes, while leveraging Vega, Vega-Lite, and Vega-Tooltip for interactive rendering. The chart fills the window and adapts to its size.

Loading thumbnail…

ReadingCSV

This example shows the size of a CSV dataset by displaying three statistics: the number of rows, the number of columns, and the file size in megabytes. It loads the data from a GitHub-hosted CSV file using `d3.csv`, then computes the file size by formatting the data back to CSV with `d3.csvFormat` and measuring its string length. The results are rendered as plain text inside a React component using `document.getElementById` to update the DOM.

Loading thumbnail…

MouseEvent

A circle follows the mouse as it moves across an SVG canvas, with its position updating in real time to mirror the cursor's coordinates. The example demonstrates a React component using the `useState` and `useCallback` hooks to manage the mouse position, while D3 v7's `range` is imported but unused. Mouse events are captured via `onMouseMove` on the SVG element, which calls `setMousePosition` with the `clientX` and `clientY` values from the event, rendering a single circle element that tracks the pointer.

Loading thumbnail…

Fork of HTML Starter

A grid of 20 randomly generated cartoon faces rendered in SVG using React and D3. Each face is composed of a yellow background circle, two eyes, and a smiling mouth, with all dimensions and positions randomized via `Math.random()` and the D3 `range` helper. The mouth path is drawn using the D3 `arc` generator, and the SVG is created through React components in a face container, demonstrating reusable component composition.