Skip to main content
Log in
C

Christian Potdevin

@cpotdevin·18 public vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numeric attributes map to the x and y axes via React dropdown menus. A color legend for species acts as a filter: hovering over a legend item fades non-matching points and highlights those of the selected species. The visualization uses React state for UI interactions, D3 scales and axes for rendering the SVG marks (d3.scaleLinear, d3.scaleOrdinal), and the d3.csv utility for loading data.

Apr 11, 2021
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between different measurements (sepal length, sepal width, petal length, petal width) by selecting attributes for the x and y axes via React dropdown menus. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding of species, and renders circles as SVG marks. React state management tracks the selected attributes, while d3.csv loads the data and d3.format formats axis tick labels, with a color legend indicating species.

Apr 11, 2021
Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, using React state to let users select which flower measurements appear on the X and Y axes, while color encodes species via d3.scaleOrdinal. The SVG rendering uses d3.scaleLinear for axes and d3.extent for domains, with React components for the dropdown menus. Axes are drawn with custom AxisBottom and AxisLeft components, and each data point is a circle with an SVG title tooltip.

Apr 11, 2021
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes to plot on the X and Y axes via two dropdown menus. React state manages the selected attributes and triggers re-rendering of the SVG chart, while D3 (d3.scaleLinear, d3.extent) handles scaling and data loading from the CSV file. The chart includes labeled axes with tick marks and circles with tooltips for each data point.

Apr 11, 2021
Loading thumbnail…

Menus with React

This example showcases a pet-selection dropdown menu built with React. It displays a labeled select element containing seven options, from a placeholder prompt to various animals like dogs, cats, and parrots. The React code defines a reusable Dropdown component that manages its state via the useState hook, with the selected value controlled by the parent App component. The interface uses ReactDOM to render the menu into the page, with large 4rem text styling for the label and select.

Apr 10, 2021
Loading thumbnail…

React Starter

This example displays a blank canvas that fills the entire browser window, rendering the text “Hello React!” in the center. The page initializes the React DOM by loading React and ReactDOM from the unpkg CDN and mounting the App component to the root element. The code uses `ReactDOM.render()` to inject the component, while the viewport dimensions are captured via `window.innerWidth` and `window.innerHeight`. Despite defining constants for potential eye and mouth positions, the actual visualization only shows the static text output, with no additional graphics or interactions.

Apr 10, 2021
Loading thumbnail…

World Map

This world map visualization displays global landmasses and country boundaries using a Natural Earth projection. The SVG rendering employs D3’s `d3.geoNaturalEarth1` projection with `d3.geoPath` to draw land features, graticules, and country interiors from a TopoJSON dataset loaded via `d3.json`. React’s `useState` and `useEffect` hooks manage asynchronous data fetching. The map uses distinct fills for land, sphere background, and stroke styles for interiors and graticules, creating a clean, informative geographic view.

Mar 29, 2021
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature trends in San Francisco using data loaded from a CSV file via `d3.csv`. The chart renders as an SVG with a smooth curve generated by `d3.line().curve(d3.curveNatural)`, overlaid with axis ticks and labels created through custom React components. The visualization leverages `d3.scaleTime` and `d3.scaleLinear` for positioning, while `d3.extent` and `d3.timeFormat` handle domain calculation and tick formatting. Circles on the curve include native SVG `<title>` tooltips, and the design employs a Poppins font and teal color scheme.

Mar 29, 2021
Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot displays the relationship between sepal length and sepal width for Iris flowers, using a clean SVG rendering with circular marks and labeled axes. The visualization loads data from a CSV file via d3.csv, with React state managing the asynchronous data fetching. D3’s scaleLinear functions, d3.extent, and d3.format handle the axis scaling and tick formatting, while custom React components (AxisBottom, AxisLeft, Marks) render the chart elements. The plot includes axis labels, a rotated y-axis label, and tooltips showing formatted sepal length values on each circle.

Mar 29, 2021
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries in 2020, using a horizontal layout with labels on the left and a proportional population axis on the bottom. The visualization is built with React and D3 v5, where `d3.scaleBand` positions the country categories and `d3.scaleLinear` maps population values to bar widths. The code uses custom React components for the axes and marks, rendering as SVG rectangles with native tooltips. Data loads asynchronously from a CSV file via `d3.csv`, and the axis labels apply a customized tick formatter that converts values into billions.

Mar 27, 2021
Loading thumbnail…

Refactored Bar Chart

This refactored bar chart displays United Nations population data for ten countries, using horizontal bars where length encodes population. Built with React and D3 v5, it separates chart components into distinct modules for axes and marks, rendering the visualization as SVG. The code loads the CSV via `d3.csv`, calculates scales with `d3.scaleBand` and `d3.scaleLinear`, and uses React hooks (`useState`, `useEffect`) to manage asynchronous data loading, with each bar rendered as a `<rect>` element.

Mar 27, 2021
Loading thumbnail…

Rendering Data with React & D3

This example shows a horizontal bar chart of the top 10 countries by projected 2020 population, rendered as SVG. It demonstrates how React state manages the loaded data while D3 utilities compute the scales and ticks. The code uses `d3.csv` to fetch the UN Population 2019 dataset, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the numeric x-axis. React's `useState` and `useEffect` hooks handle the asynchronous data loading and trigger the declarative rendering of bars, axis lines, and labels.

Mar 27, 2021
Loading thumbnail…

Rendering Data with React

This example uses React and D3 to render a circular pie chart of CSS named colors loaded from a CSV file. The visualization displays each color as a slice arranged around a central point, with the fill color derived from the `RGB hex value` column in the data. The code uses React state via `useState` and `useEffect` to fetch the CSV with `d3.csv` and update the UI, while `d3.pie` and `d3.arc` generate the SVG path geometry. A loading message appears until the data is fully fetched and parsed.

Mar 26, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a line chart of weekly temperature data for San Francisco, using the Vega-Lite API to construct the visualization declaratively. The chart renders temperature values over time with a tooltip on hover, styled with custom axis configuration. It loads CSV data via d3.csv, registers Vega and Vega-Lite with the vega-lite-api library, and renders the final output as an SVG using vega-tooltip for interactivity. The visualization fills the entire browser window and adapts to its size.

Mar 22, 2021
Loading thumbnail…

Loading Data with React & D3

This example demonstrates how React and D3 can work together to load and summarize a CSV dataset. It fetches a list of CSS named colors from a GitHub gist using D3’s `d3.csv` utility, storing the parsed data in React state via the `useState` and `useEffect` hooks. While the data loads, it displays a loading message; once available, it shows the file size in kilobytes, row count, and column count, computed with `d3.csvFormat`. The visualization is minimal—just text in a `<pre>` element—but clearly illustrates the data-loading workflow.

Mar 21, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count in a large HTML `<pre>` element. The program fetches text using the browser’s Fetch API, then converts it into an array of objects with `d3.csvParse`, which is part of D3 v5. The data comes from a GitHub gist containing CSS named colors. The output provides a concise summary of the dataset’s structure without rendering any charts or visualizations.

Mar 21, 2021
Loading thumbnail…

Mouse follower

A React component renders an SVG circle that follows the mouse pointer across a 960×500 viewport. On every mouse move, the `onMouseMove` event handler updates the circle’s `cx` and `cy` coordinates via React’s `useState` and `useCallback` hooks. The circle starts centered and has a fixed radius of 30 pixels. The example demonstrates interactive SVG rendering with React, using only ReactDOM and no external data or visualization libraries.

Mar 21, 2021
Loading thumbnail…

Smiley Face Part I

Ten mostly identical smiley faces are rendered in a row on a yellow background, each face showing the same basic features with slightly randomized eye sizes. The visualization demonstrates how React components can encapsulate D3.js drawing logic within an SVG canvas, with each face generated by a reusable `Face` component. The code uses React for component structure and the D3.js `arc()` API to construct the mouth path, while the `d3.range()` function drives the creation of ten instances with varying `eyeRadius` values for subtle visual differentiation.

Mar 19, 2021