TsaiJie

missing migrant

This visualization displays the total number of dead and missing migrants over time, aggregated into monthly bins as a histogram. The code uses d3.csv to load data from the Missing Migrants Global 2019 dataset, d3.bin and d3.timeMonths to create temporal bins, and d3.scaleTime and d3.scaleLinear for the axes. React renders the SVG graphic, with d3’s timeFormat used for tick labels and native SVG `<title>` elements providing tooltips. The chart is built using d3 v5 within a React 16 application.

Mutiple Wiews Missing Migrants on a Map With brush

This interactive visualization combines a natural Earth projection map with a time-series histogram to explore missing migrants globally. The map uses `d3.geoNaturalEarth1` and `geoPath` to render circle marks scaled by the square root of casualties, while the histogram aggregates monthly totals using `d3.bin` and `scaleTime`. A `brushX` brush on the histogram filters the map’s data by date range, demonstrating linked views within a single SVG rendered with React and D3 v5. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Mutiple Wiews Missing Migrants on a Map

This visualization combines a geographic bubble map with a temporal bar chart to show missing migrants worldwide. The map uses a natural Earth projection with graticules and country boundaries, where circle size encodes the total dead and missing per location. A date histogram below aggregates monthly death tolls using d3.bin and d3.timeMonths. d3.scaleSqrt and d3.geoPath power the map, while the data comes from the Missing Migrants Project CSV. React manages the component structure, with SVG rendering for both views.

Missing Migrants on a Map

A world map displays the locations of missing migrants, with semi-transparent circles sized by the total number of dead and missing per incident. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with graticules and country boundaries from World Atlas TopoJSON. Circle radii are scaled using `d3.scaleSqrt` based on the maximum death toll, and React manages the SVG rendering. Data comes from the Missing Migrants Global 2019 CSV, loaded with `d3.csv`.

points on map

A world map scatter plot displays the population of cities as semi-transparent circular points, sized by a square-root scale so larger cities appear with proportionally larger radii. The visualization uses an equal-earth projection with graticules and country boundaries, rendered via D3’s `geoPath` and `geoGraticule` in SVG. City data comes from a CSV of world cities, with sphere and country shapes drawn from a TopoJSON world atlas. React manages the interface, while D3’s `scaleSqrt` maps population values to visual radius.

word map

This example shows a world map rendered as a choropleth of country boundaries, with a light gray graticule grid and sphere outline drawn behind them. The visualization uses React to manage the SVG output and d3’s `geoEqualEarth` projection, `geoPath`, and `geoGraticule` to construct the geographic shapes, while TopoJSON’s `feature` and `mesh` methods parse the World Atlas dataset for country polygons and interior borders. Country fills use a teal color, and boundary lines are styled via CSS classes.

May 10, 2021

d3 Starter

This example uses D3 v6 and the SVG rendering framework to display the classic Iris dataset as a scatter plot. It loads the CSV from a GitHub gist and parses numeric columns, then uses `scaleLinear` for both axes to map petal length against sepal length. The code demonstrates D3's modern `join` API to bind data to circles, and includes `axisLeft` and `axisBottom` for labeled axes with a custom font size. The plot fills the browser window, resizing with `window.innerWidth` and `window.innerHeight`.

May 6, 2021

Interactive Color Legend Scatter Plot

A scatter plot of the Iris dataset, with sepal width on the y-axis and petal length on the x-axis, colored by species. Hovering over a color legend item fades out points from other species and brightens the selected one. Built with React and D3 v5, it uses `d3.csv`, `scaleLinear`, and `scaleOrdinal`, with `onMouseEnter` and `onMouseOut` events for interactivity, and renders axes, legend, and marks as SVG elements.

Color Legend Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. A categorical color legend distinguishes the three iris species via a d3.scaleOrdinal color scale with custom ranges. The visualization uses React components to render SVG elements, with d3.scaleLinear for both axes and separate AxisBottom, AxisLeft, Marks, and ColorLegend components. Data is loaded asynchronously using d3.csv from a remote Gist URL.

Color Scatter Plot

This color scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal width for different iris species. Each data point is represented as a colored circle, with the color scale mapping to the species attribute using a D3 ordinal scale with three distinct colors. The visualization is built with React and rendered as an SVG, using D3's scaleLinear for the x and y axes, which include formatted tick labels and axis titles. Hovering over a point reveals its exact value through an SVG title tooltip.

Learn Polished Scatter With Menu

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements for individual flowers. Users can select which attributes to plot on the X and Y axes using drop-down menus, with both axes updating dynamically to reflect the chosen variables. The visualization is built with React and rendered as SVG, using D3's `scaleLinear` and `extent` functions to compute scales and domains. Axis components are custom React components that generate tick marks and labels, while the `Marks` component renders circles with tooltips for each data point.

Fork of Polished Scatter Plot with Menus

This scatter plot visualizes the Iris dataset, displaying sepal and petal measurements as individual circles. Users can select any of the four measurement attributes or species for the X and Y axes via dropdown menus built with ReactDropdown, with axis labels updating accordingly. The visualization uses React hooks (useState, useEffect) to manage state and load data via d3.csv, while d3.scaleLinear, d3.extent, and d3.max power the SVG rendering. Axes and marks are custom React components, with d3.ticks generating tick marks and native SVG <title> elements providing hover tooltips formatted using d3.format.

Learn Scatter With Menu

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between four measured attributes (sepal length, sepal width, petal length, petal width) by selecting which attribute appears on each axis via two dropdown menus. The visualization uses React to manage component state and render SVG elements, while D3’s `scaleLinear` and `extent` functions handle data scaling and domain calculation. Axis components generate ticks and labels, and circle marks include hover tooltips. The dataset is loaded asynchronously via D3’s `csv` fetch method.

selectmenu

This example shows a React-based dropdown menu for selecting a pet from a list of predefined options. The selected value is displayed in the console, demonstrating state management. The code uses React hooks (`useState`) to track the current selection and ReactDOM to render the application. A reusable `DropDown` component accepts options, an id, and a change handler, mapping over the options to generate `<option>` elements within a `<select>` tag. The example highlights splitting React components into separate ES6 modules and uses D3 v5 for utility purposes, though no visualization is rendered.