Jun Suzuki

CMAPSS Dataset Viz v2.2

This interactive scatterplot explores sensor data from NASA’s CMAPSS turbofan engine dataset, plotting a selected y-axis attribute (altitude, Mach, TRA, or T2) against elapsed time for a chosen unit and cycle. Users filter data through three dropdown menus built with React state, while D3 v7’s `scaleLinear` and `extent` handle axes and scaling. The React component renders SVG circles with opacity, axes via custom `AxisBottom` and `AxisLeft` components, and includes tooltips showing raw values. Data is loaded asynchronously from a remote CSV using `d3.csv`.

Dec 16, 2021

CMAPSS Dataset Sample 2.0

This interactive scatterplot visualizes flight traces from the CMAPSS turbofan engine dataset, plotting sensor readings such as altitude against elapsed time. Users filter the displayed trace by selecting a unit, flight cycle, and y-axis attribute from dropdown menus. The React application uses D3 v7 scales and axes to render SVG circles with opacity, while tooltips reveal exact coordinate values. Data is loaded as CSV files from GitHub gists.

Dec 13, 2021

Test CMAPSS select

This visualization shows flight trace data from the CMAPSS dataset, displaying sensor readings over time for selected aircraft units. Users can switch between y-axis attributes (Altitude or TRA) and select different units via dropdown menus. The scatter plot uses d3.scaleLinear for both axes, with data loaded asynchronously from CSV files via d3.csv. React manages the interactive state for attribute and unit selection, while the SVG rendering is handled entirely through React elements rather than d3 selection methods.

Dec 10, 2021

Polished Scatterplot with Menus

This interactive scatterplot displays the Iris Dataset, allowing users to select which numerical attribute appears on each axis via two dropdown menus. The visualization renders as an SVG using React and D3 v7, with scales created by `d3.scaleLinear` and axes built from custom `AxisBottom` and `AxisLeft` components. Circles are positioned with `Marks` and include native SVG `<title>` tooltips. The Y-axis dropdown includes both numerical columns and the categorical `species` attribute, though only numeric values are scaled.

Dec 8, 2021

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, encoding sepal and petal measurements along the x and y axes with species indicated by color. Users can dynamically change the plotted attributes via dropdown menus. Hovering over a color legend item fades all points of other species, allowing for focused comparison. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and renders points as SVG circles.

Dec 8, 2021

CMAPSS Dataset Sample 1.0

This visualization displays a scatter plot of aircraft altitude over time from the CMAPSS dataset, with each point representing a sensor reading. The React component uses D3 v7 scales via `scaleLinear` and `extent` to map data to SVG coordinates, while the axes are rendered as custom React components. The data is loaded asynchronously from a remote CSV file using D3’s `csv` function. Each circle includes a tooltip showing the exact time and altitude values.

Dec 8, 2021

HIV/AIDS Choropleth Map

This choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15-49 for the year 2017, with each country colored on a yellow-to-red sequential scale based on its infection rate. Countries lacking data are rendered in gray. The map uses a Natural Earth projection with graticule and interior borders, built with React and D3's `geoPath`, `geoNaturalEarth1`, and `geoGraticule` modules. Data is loaded from a CSV file containing IHME prevalence estimates, joined to country codes via ISO-3166 metadata.

Dec 7, 2021

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the total number of dead and missing migrants by incident date, using a logarithmic y-axis to accommodate the wide range of values. The chart is built with React and D3 v7, utilizing `scaleTime` and `scaleLog` for the axes, with SVG circles representing each incident. The data comes from the Missing Migrants Project, and hovering over a circle reveals the exact date via an SVG `<title>` element. Axis components are custom-rendered with tick marks and labels.

Missing Migrants (part 7) : Optimizing performance

A dashboard maps migrant deaths worldwide alongside a time-series histogram, with a linked brush filtering the map’s circles by date range. Built with React and D3 v7, it uses `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for circle sizing, and `brushX` for interactive filtering. The histogram aggregates monthly totals via `bin` and `timeMonths`, with axes rendered from `scaleTime` and `scaleLinear`. Data comes from the Missing Migrants Project CSV, with geographic boundaries from TopoJSON.

Missing Migrants (part 6) : Multiple Views with Brushing

Two coordinated views of migrant deaths worldwide from the Missing Migrants Project dataset show a world map with proportional circles and a time-series histogram. Brushing a time range in the histogram with `d3.brushX` filters the map’s circles to incidents within that period. The map uses `geoNaturalEarth1` and `geoPath` for the sphere, graticule, and landmasses, while the histogram bins monthly totals via `d3.bin` and `timeMonths`. Both views render in SVG with React.

Missing Migrants (part 5) : Multiple Views cleanup

This interactive visualization combines a world map with a time-series bar chart to explore migrant deaths and disappearances from the Missing Migrants Project dataset. The top panel displays a natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath, with circles sized by a sqrt scale representing total dead and missing per incident. The bottom panel shows a monthly histogram using d3.bin and d3.timeMonths, with axes rendered from d3.scaleTime and d3.scaleLinear. Both views are built with React and rendered as SVG, with the map using TopoJSON for geographic boundaries.

Missing Migrants (part 4)

A world map uses proportional circles to show the total number of dead and missing migrants per incident location, with bubble size scaled by d3.scaleSqrt. A separate date histogram below aggregates the same totals by month using d3.bin and timeMonths thresholds. The visualization relies on d3.geoNaturalEarth1 and d3.geoPath for map rendering, with data from a CSV of global migrant incidents. React manages the SVG output, combining both charts into a single interactive view.

Missing Migrants on a Map

This visualization maps the global distribution of missing migrants from 2014 to 2021, using a natural Earth projection rendered with `d3.geoNaturalEarth1` and `d3.geoPath`. Each circle represents a recorded incident, with its radius scaled proportionally to the total number of dead or missing via a square-root scale. The map overlays land polygons and country borders from the world-atlas TopoJSON dataset onto graticule lines. React manages the component hierarchy, while D3 loads the CSV data and handles geographic projections, all rendered as SVG elements with semi-transparent teal circles.

Missing Migrants (part 2)

A histogram displays monthly counts of dead and missing migrants from the Missing Migrants Project dataset, with time on the x-axis and total fatalities on the y-axis. Using d3.bin and scaleTime, the data is aggregated into monthly bins, while scaleLinear maps the aggregated sums to bar heights. React renders the SVG elements, with D3's axis and tick components providing labeled scales and tooltips showing exact counts.

Missing Migrants (part 1)

This scatterplot displays the total number of dead and missing migrants per incident over the course of 2020, using data from the Missing Migrants Project. Each circle represents an incident, positioned by its date on the x-axis and the death toll on the y-axis, with a tooltip showing the month. Built with React and D3 v7, the visualization uses `scaleTime` for the date axis, `scaleLinear` for the count, and SVG rendering. The dataset is loaded via `d3.csv` from a GitHub-hosted CSV file.

Points on a Map with Size

A world map rendered with D3’s geoNaturalEarth1 projection and geoPath displays city populations as semi-transparent circles sized by a sqrt scale. The visualization uses React to manage state and fetch data from the Sense Your City dataset and a TopoJSON world atlas. Marks include the sphere, graticule, land polygons, and interior boundaries, with circle radii proportional to each city’s population.

Nov 24, 2021

Points on a Map

This visualization displays a world map with a scatter plot overlay of city locations, using data from the Data Canvas Sense Your City dataset. The map renders geographic features with d3.geoPath and geoNaturalEarth1 projections, including graticules, landmasses, and country interiors. City points appear as semi-transparent teal circles projected onto the map using their latitude and longitude coordinates. The React-based application loads world atlas topology from unpkg and city CSV data, then renders everything as SVG elements through D3 v7's geo and projection utilities.

Nov 24, 2021

Scatterplot with Color Legend

This interactive scatterplot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. Each point represents an iris flower, colored by species with a corresponding legend. The visualization uses React components and D3 v7 scales (d3.scaleLinear, d3.scaleOrdinal) to render SVG marks and axes from CSV data.

Scatterplot with Color

This interactive scatterplot visualizes the Iris Dataset, with dropdown menus allowing users to select which flower measurements appear on the x- and y-axes. Each point represents an individual iris flower, colored by species using a d3.scaleOrdinal with three categorical colors. The React-based interface uses d3.csv for data loading, d3.scaleLinear for axis scales, and SVG circles rendered via React components for the marks. Axis components generate ticks and labels using D3 scale methods, while the axis labels and menus update dynamically based on user selections.

Scatterplot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across different species. Two dropdown menus let viewers independently select which attribute appears on the X and Y axes, with axis labels updating dynamically to reflect the chosen dimensions. The visualization is built with React and renders SVG circles using d3.scaleLinear for coordinate mapping, while d3.extent and d3.csv handle data scaling and loading from a remote CSV file. Tooltips display formatted attribute values on hover.

Menus with React

A React-based dropdown menu demonstrates state-driven selection through a pet-choice interface. The `Dropdown` component renders HTML `<select>` options, mapping over the `options` array to create `<option>` elements. The `App` component manages a `selectedValue` state via React's `useState` hook, logging each change to the console. The starter projects React 17 with ReactDOM, updating the selection visually and programmatically through the `onSelectedValueChange` callback. The page displays a large-print label and select element, with no external data source—the four pet choices are hardcoded in `index.js`.

React Starter

This example shows a minimal React application that renders the text “Hello React !” into a web page. It uses React 17 and ReactDOM to mount a functional `App` component onto a `div` with the ID `root`. The page loads the React libraries from a CDN and includes a hidden overflow style for the body. The code demonstrates a basic setup with `ReactDOM.render`, making it a clean starting point for integrating React with other visualization libraries.

World Map

This world map visualization displays global landmasses and interiors using a natural Earth projection, with graticule and sphere outlines for context. The example leverages React and D3 v7, specifically `d3.geoNaturalEarth1` for projection and `d3.geoPath` for rendering paths, while `topojson` features and meshes supply the geographic data. Land areas are filled in teal, with interior boundaries in a lighter shade, all rendered as SVG paths. The data originates from the World Atlas TopoJSON dataset.

Stylized Line Chart

This stylized line chart visualizes weekly temperature data from San Francisco, sourced from the Data Canvas Sense Your City dataset. The visualization uses React to render SVG elements, with D3’s `scaleTime` and `scaleLinear` mapping timestamps to positions along the axes. A smooth curve is drawn using D3’s `line()` generator with `curveNatural` interpolation, styled with a teal stroke. The chart includes labeled axes for time and temperature, with tick marks formatted using `timeFormat`.

Working with Time

This example visualizes a week of temperature readings in San Francisco, plotting each measurement as a dot along a time-based x-axis and a temperature-based y-axis. The scatter plot uses D3’s `scaleTime` and `scaleLinear` to map data to SVG coordinates, while React components render the axes and circular marks. The data is loaded via D3’s `csv` from a GitHub-hosted CSV file, and each circle includes a `<title>` tooltip formatted with D3’s `timeFormat` to show the specific day.

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting sepal width against petal length for each flower specimen. The chart uses React with D3 v7’s scale functions and SVG rendering, with the data loaded asynchronously via the `useData` hook. Axes are drawn with custom components that utilize D3’s tick generation, while circular marks use native SVG `<title>` elements for tooltips.

Stylized Bar Chart

A stylized bar chart displays the top 10 countries by 2020 population, sourced from the UN_Population_2019.csv data. The visualization uses an SVG rendering with React and D3 v7, employing `scaleBand` and `scaleLinear` to map country names and population values. Horizontal bars include native tooltips via SVG `<title>` elements, with axes labeled using a custom SI format that converts gigabytes to billions. The chart applies a Poppins font and custom styling for a clean, minimal aesthetic.

Refactored Bar Chart

This example displays a horizontal bar chart of the 2020 populations for the top ten countries, sorted by descending value. Built with React and rendered as SVG, it uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The custom `AxisBottom`, `AxisLeft`, and `Marks` components draw tick lines, labels, and rectangle bars by mapping data attributes to spatial scales. Population data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file.

Axes with React & D3

This example shows a horizontal bar chart of the top ten countries by 2020 population, with axes rendered manually using React components. The code loads UN population data via `d3.csv`, maps it with a custom row function, and uses `scaleBand` for the y-axis (countries) and `scaleLinear` for the x-axis (population). Tick marks and labels are generated with `xScale.ticks()`, while bars are drawn as SVG `<rect>` elements. The chart updates reactively through `useState` and `useEffect` hooks, with D3 v7 providing scales and data parsing.

The Margin Convention

This example shows the population of the top 20 countries as a horizontal bar chart, using a tidy margin convention to position the chart within an SVG. The React app fetches UN population data with d3.csv, parses the 2020 column, and scales the bars with d3.scaleLinear and d3.scaleBand. Bars are rendered as SVG `<rect>` elements inside a translated `<g>` group, with loading state handled by React state and useEffect. The code uses `d3.max` to set the x-domain and includes d3.v7 and React 17.0.2 via CDN.

UN World Population

This example visualizes the population of the top 20 countries in 2020 as a horizontal bar chart, using bars whose lengths are proportional to each country’s population. It renders with SVG inside a React component, loading data from a CSV file via D3’s `csv` function. The chart uses D3’s `scaleBand` for the y-axis categories and `scaleLinear` for the x-axis values, with React managing the state and rendering the rectangles. No interactive elements are present.

Visualizing Data with D3

This example visualizes CSS named colors as a radial burst, with each color represented as a slice of a pie chart. It uses React to load the data from a CSV file and render the chart, while D3’s `pie` and `arc` functions compute the slice geometry and generate SVG paths. The chart displays the full spectrum of named colors, filling each slice with its corresponding hexadecimal value.

Visualizing Data with React

A React application displays CSS named colors as stacked horizontal bars, each colored according to its RGB value from a CSV dataset. The visualization renders a full-width strip of 4-pixel-tall divs, creating a continuous color gradient that maps the entire color catalog. Using React 17 with hooks like `useState` and `useEffect`, it fetches data via `d3.csv` and conditionally renders a loading state before painting the color swatches. The component-driven approach shows how React manages data fetching and declarative styling with inline `backgroundColor` properties.

Loading Data with React

This example demonstrates how to load a dataset of CSS named colors using D3 utilities within a React application. The interface displays the dataset’s size in kilobytes, row count, and column count as large text on a blank canvas. React state manages the loaded data, with the `useState` hook storing the result and the `useEffect` hook triggering the asynchronous `d3.csv` fetch from a GitHub gist URL. The code uses React 17, D3 v7, and renders the summary information as SVG text.

Test

This visualization displays the top five religions by population in various countries, using a bar chart where each bar is stacked and colored by religion. The chart is built with the vega-lite-api library, which wraps Vega-Lite and Vega for declarative rendering, and it pulls data from a CSV file via d3's `csv` function. The visualization adapts to the browser window size and includes interactive tooltips, with custom styling applied through a configuration object to improve readability.

Loading and Parsing CSV Data

This example demonstrates how to load and parse a remote CSV file using D3 v7. It fetches CSS named colors data from a GitHub gist and displays summary statistics, including the file size in kilobytes, the number of rows, and the number of columns, in a large preformatted text block. The code uses `d3.csv` to retrieve and parse the data asynchronously, then accesses the resulting array and its `.columns` property. It also includes commented-out alternatives using the Fetch API with `d3.csvParse` and async/await.

Nov 15, 2021

Mouse Follower

A plain SVG circle follows the user's mouse cursor across a 960-by-500 canvas. The React component tracks `clientX` and `clientY` from a `mousemove` event handler, updating state to reposition the circle's `cx` and `cy` attributes. The example uses React's `useState` and `useCallback` hooks, with D3 v7 loaded for potential supplementary utilities, though rendering relies solely on SVG elements and React's declarative updates.

Nov 15, 2021