W

w.fukuyama@gmail.com

@fu160·31 public vizzes

Loading thumbnail…

Pie of CSS Colors

This example displays all named CSS colors as stacked horizontal stripes, one per row, using each color’s RGB hex value as the background. The React app fetches a CSV of named colors via `d3.csv`, stores the result in state with `useState`, and maps over the data to render a series of divs with fixed width and height. The visualization relies on React’s `useEffect` for data loading and ReactDOM for mounting, with D3 used solely for CSV parsing.

Loading thumbnail…

mouse move

This example displays a smiley face with eyes and a mouth that react to mouse movement. The visualization uses React components to render SVG elements, with the face’s features positioned relative to the center. The code leverages D3’s `arc` API to draw the mouth shape, while the eyes and background circle are simple SVG circles. The face’s dimensions and offsets are passed as props, allowing the visual to respond dynamically to user interaction.

Loading thumbnail…

Fetch Color Data

This example demonstrates how to load and process CSV data from a remote URL using D3.js within a React application. It fetches the CSS named colors dataset via `d3.csv`, calculates the size of the formatted CSV string in kilobytes, and counts the number of rows and columns in the parsed data. The results are displayed as text in a preformatted block, showcasing D3’s data-parsing capabilities and the integration of React for rendering the output. The code highlights the use of `d3.csvFormat` and `d3.csvParse` for data transformation.

Loading thumbnail…

Fork of React Starter

This example shows a grid of fifteen smiley faces, each rendered as a reusable React component. It demonstrates how to compose SVG elements with React components and D3’s arc generator. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, with the mouth drawn using D3’s `arc` API. Faces are generated by mapping over an array from `d3.range`, and each eye radius varies randomly per face. The visualization uses React’s declarative rendering to build SVG output, with styling applied through inline SVG attributes.

Loading thumbnail…

Fork of Smiley Face

This example shows a grid of identical smiley faces, each composed of a yellow circle, two black eyes, and a D3-generated arc for the mouth. The visualization demonstrates how React components can be composed and reused, with each face rendered as an SVG group translated to its position. The code uses React for component structure and state management, while D3's `arc()` generator creates the mouth path. The faces are arranged by mapping over an array generated with `range(4*4)`, producing a 4x4 grid. The data source is a CSS named colors CSV fetched asynchronously, though it does not affect the rendering.

Loading thumbnail…

smiley

This example shows a simple smiley face drawn on an SVG canvas, with two black eyes and a yellow circular face outlined in black. The code uses React 18 via a UMD build and renders the graphic entirely through static SVG elements, including `<circle>` tags for the face and eyes. No interactive behavior or data binding is present; it is a purely presentational visualization demonstrating basic SVG shapes and styling within a React setup.

Loading thumbnail…

Brushing-Combined Migrants on a Map

A world map displays migrant deaths as green bubbles scaled by mortality count, synced with a brushing-enabled time histogram below. Dragging the histogram’s brush filters the map’s bubbles to show only incidents within the selected date range. Built with React and D3 v7, it uses `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizing, and `brushX` with `scaleTime.invert` to link selections. Data comes from a CSV of reported migrant incidents.

Loading thumbnail…

Combined Migrants on a Map

A world map displays the locations of migrant deaths, with green circles scaled by the number of deceased through d3.scaleSqrt. A date histogram below aggregates monthly death totals using d3.bin and d3.timeMonths, with bars drawn via d3.scaleLinear and d3.scaleTime. The visualization renders with React and SVG, using d3.geoNaturalEarth1 and d3.geoPath for the map, and loads data from a CSV file containing coordinates and reported dates.

Loading thumbnail…

Migrants on a Map

This visualization displays migrant deaths as proportional circles on a natural Earth projection map. The data, sourced from a CSV file containing coordinates and death counts, is plotted using d3.scaleSqrt to size each circle according to the number of fatalities. The map is rendered with React and SVG elements, utilizing d3.geoNaturalEarth1 and d3.geoPath for geographic projections, with d3.geoGraticule adding grid lines. The world atlas features come from TopoJSON, and the circles are semi-transparent green to show overlapping incidents.

Loading thumbnail…

Combined Migrants on a Map

This example visualizes global migrant deaths by plotting circles on a natural Earth projection map. Each circle’s radius is scaled to the reported number of fatalities, using a square-root scale for proportional sizing. The map displays landmasses, graticules, and country interiors via `d3.geoPath` and `d3.geoNaturalEarth1`, while React components render SVG circles and axes. Data is loaded from a CSV file, and the world atlas comes from TopoJSON, with styling controlled by CSS classes.

Loading thumbnail…

Fork of Stylized Line React

This visualization presents a time-series bar chart of reported migrant deaths and missing persons, aggregated into monthly bins from a CSV dataset. The chart displays the total count per month along a continuous time axis, with bars whose heights correspond to the summed values. The implementation uses React components, D3 v7 utilities such as `scaleTime`, `scaleLinear`, `histogram` for binning, and `timeMonths` for thresholds, rendering as SVG with custom axes and marks. The data is loaded via `d3.csv` from a remote gist, and styling uses the Poppins font.

Loading thumbnail…

Points on a Map

This visualization layers city population data onto a world map using a natural Earth projection. Semi-transparent green circles, sized with a square-root scale, represent each city’s population, with larger circles indicating more populous urban centers. The map includes geographic graticules, land masses, and country interiors rendered via `d3.geoNaturalEarth1` and `d3.geoPath`. The React app loads TopoJSON world-atlas data and CSV city coordinates through custom hooks, with map features styled distinctly in light grays.

Loading thumbnail…

Scatter Plot with Colors

This scatter plot displays the Iris dataset, comparing selected attributes such as petal length and sepal width, with each point colored by species. Interactive dropdowns allow users to switch the axes, while hovering over the color legend highlights points of that species and fades the others. Built with React and rendered as SVG, it uses D3's `scaleLinear` for axes and `scaleOrdinal` for the categorical color mapping, fetching the data via `d3.csv`.

Loading thumbnail…

PolishedScatter Plot with Menus

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus control which attribute is mapped to the x-axis and y-axis. The visualization updates dynamically with each selection, rendering axes, labels, and circular marks within an SVG canvas. Built with React and D3 v7, the example uses `scaleLinear` for continuous scales and `extent` to compute data domains. Data is loaded via D3's `csv` function from a remote gist URL, with numeric values parsed on import. The implementation separates concerns into components for axes, dropdowns, and data marks.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on each axis. The visualization uses React for state management and D3 v7 for scales and SVG rendering, with axes generated by custom axis components and circles representing individual flowers. Data is loaded asynchronously via D3’s `csv` parser from a remote GitHub gist, and the plot updates dynamically as menu selections change.

Loading thumbnail…

Menus

This example shows a simple pet-selection interface with a dropdown menu. The App component uses React’s `useState` hook to track the chosen pet, initializing with “hamster” and logging each selection to the console. A reusable `Dropdown` component renders a native `<select>` element with options for six animals. The `bundle.js` file bundles the React code, while the page loads React and ReactDOM from unpkg and renders the interface into the `#root` div. Styling scales the label and select font to 4em for visibility.

Loading thumbnail…

React Starter

This example displays a minimal React application that renders the text “Hello Reacr” in the browser. It uses React 16.13.1 and ReactDOM to mount a functional component, `App`, into a `#root` div. The page is bundled with JavaScript into `bundle.js`, with global styling applied via CSS to remove margins and hide overflow. The code demonstrates the basic structure for starting a React-based data visualization with a static, text-only output.

Loading thumbnail…

World Map

This example displays a natural Earth projection of the world, using a flat SVG canvas. Landmasses are filled in teal, while graticules and a light gray sphere background define the map’s frame—the latter including a polygon that traces national interiors. Built with React and D3 v7, it leverages `geoNaturalEarth1` for projection, `geoPath` for rendering geographic features, and `geoGraticule` for the grid. The underlying data is fetched from the `world-atlas` TopoJSON source, with terrain and boundary polygons extracted via `feature` and `mesh` from the `topojson` library.

Loading thumbnail…

Stylized Line React

A stylized line chart visualizes temperature readings over time, with the data plotted in a smooth natural curve across a clean Cartesian plane. The visualization utilizes React components to render SVG elements, employing D3's `scaleTime` and `scaleLinear` for axis scaling, `line` with `curveNatural` for path construction, and custom `AxisBottom` and `AxisLeft` components for tick marks. The chart presents a single continuous trend line, styled with a teal stroke, against a minimal background with labeled axes indicating time and temperature, sourced from a remote CSV file fetched via D3's `csv` function.

Loading thumbnail…

Fork of Stylized Bar React

This example shows a scatter plot of Iris flower measurements, visualizing sepal length against sepal width using circles. The code uses React with D3 v7, employing `scaleLinear` for axes and `extent` to compute domains. Data is loaded asynchronously from a CSV using D3's `csv` function. SVG rendering is used, with the chart styled using the Poppins font and custom tick and mark colors.

Loading thumbnail…

Stylized Bar React

A sorted horizontal bar chart shows the top nine countries by 2020 population, with teal bars and labeled axes. The visualization uses React to render SVG elements via modular components, with D3’s `scaleBand` and `scaleLinear` mapping data to positions and sizes. Population values are formatted with `.2s` notation, and the dataset is loaded dynamically from a CSV using D3’s `csv` function, styled with the Poppins font.

Loading thumbnail…

Fork of Axis World Population

This visualization displays the population of the top nine countries in 2020, sorted in descending order using horizontal bars. Built with React and D3 v7, it uses `scaleBand` for the y-axis country categories and `scaleLinear` for the x-axis population values, with data loaded from a CSV via `d3.csv` and rendered as SVG `<rect>` marks. The chart includes custom axis components for ticks and labels, with the population normalized to millions for readability.

Loading thumbnail…

Axis World Population

This example displays the world’s most populous countries for 2020, ranking the top nine by population size. Using React to manage state and lifecycle, it loads a CSV file via `d3.csv`, then sorts and slices the data to isolate the largest nations. The visualization employs `d3.scaleBand` for the vertical country axis and `d3.scaleLinear` for the horizontal population axis, rendering the result as SVG rectangles and text labels within a fixed-width viewport. Gridlines and tick marks are generated from the linear scale’s ticks.

Loading thumbnail…

World Population

This visualization displays the populations of the top four countries in 2020 as horizontal bar charts, sorted from largest to smallest. The data is loaded from a CSV file using `d3.csv` and rendered as SVG rectangles. The code uses React for component state management, `d3.scaleBand` for the y-axis country categories, and `d3.scaleLinear` for the x-axis population values.

Loading thumbnail…

D3 Arcs - CSS Colors

This example visualizes all 148 named CSS colors as filled arc segments arranged in a pie chart, using data from a CSV file loaded via `d3.csv`. Each arc is colored with its corresponding `RGB hex value` using the `d3.arc` and `d3.pie` APIs, while the React component manages state and fetching. The SVG output is centered on a 960×500 canvas, with each segment sized equally to showcase the full spectrum of CSS color names.

Loading thumbnail…

CSS Colors

This example visualizes all 148 named CSS colors as horizontal stripes stacked vertically. Each stripe’s background color is set directly from the dataset’s RGB hex values, loading from a CSV via d3.csv. The React component uses useState and useEffect to fetch and render the data as divs with fixed width and height, creating a simple swatch gallery. The visualization relies on d3 v7 for CSV parsing and React 16 for rendering.

Loading thumbnail…

csv

This example loads a CSV file of CSS named colors and displays a summary of its contents, including the number of rows, columns, and file size in kilobytes. The data is fetched asynchronously using D3’s `csv` function from a GitHub gist URL, then processed in a React component with `useState` and `useEffect`. The output renders as large text via a `<pre>` element, showing the static info derived from the parsed dataset.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between a car's country of origin and its horsepower using a scatter plot. Each point represents a car, with opacity applied to reveal overlapping data points, and a tooltip displays the car's name on hover. The visualization is built using the Vega-Lite API, which generates a specification rendered to SVG via Vega and Vega-Lite. It loads the Auto MPG dataset from the UCI Machine Learning Repository using `d3.csv`, and customizes axis styling and tooltip appearance through a configuration object.

Loading thumbnail…

Mouse Follower

A grid of sixteen cartoon faces with yellow circular heads, black eyes, and curved mouths fills the screen. Each face is rendered as an SVG using React components that compose background circles, eye elements, and a d3 arc path for the mouth. The faces are generated by mapping over a d3 range array, with each Face component receiving identical fixed geometry for consistent appearance.

Loading thumbnail…

Mouse

A yellow circle with black stroke and a simple mouth follows the mouse cursor in this interactive SVG sketch. The face is composed from reusable React components—BackgroundCircle, Eyes, and Mouth—within a FaceContainer that translates the coordinate system to the cursor position. React's `useState` and `useCallback` handle mouse movement events on the SVG element, while D3's `arc` API constructs the mouth path. The code demonstrates a declarative, component-based approach to building interactive data visualizations with React and D3.

Loading thumbnail…

Smiley Face

A grid of 16 identical smiley faces renders across the screen, each composed of SVG circles for the yellow background and black eyes, plus an arc-generated mouth. The code uses React components to structure the face, with D3’s `arc` API shaping the mouth path. A CSV fetch attempts to load named CSS colors, though the result is only logged. The faces are positioned via SVG translation, with each face sized at 166 by 166 pixels.