YenTingWu

Multiple View With D3 Brush

This interactive dashboard combines a world map and a time-series histogram to explore missing migrant incidents. A D3 brush on the histogram filters the map’s bubbles, which represent total dead and missing, using a square-root size scale. The map uses `geoNaturalEarth1` and `geoPath` for projection, while the histogram employs `scaleTime`, `histogram`, and `brushX`. Data comes from the Missing Migrants Global CSV, rendered as SVG within a React framework.

Jul 14, 2021

Missing Migrants on a map

A world map displays circles sized by the total number of dead and missing migrants, with a histogram beneath charting the same totals over time. The visualization combines a React component using d3.geoNaturalEarth1 and d3.geoPath for the map with d3.scaleSqrt for circle radii. A d3.histogram bins reported dates into monthly intervals, while d3.scaleTime and d3.scaleLinear handle the axes. Data comes from a CSV file of global migrant incidents.

Jul 14, 2021

Missing Migrants Project Visualization

This visualization aggregates monthly totals of dead and missing migrants from the Missing Migrants Project dataset, using a bar chart to show the cumulative count over time. React components render SVG rectangles via a histogram binning function, with `d3.timeMonths` defining the temporal bins and `d3.scaleTime` mapping the reported dates to horizontal positions. The y-axis uses `d3.scaleLinear` to encode the summed values, while custom `AxisBottom` and `AxisLeft` components generate tick marks. The chart employs Zen Loop typography and teal-colored bars to present the data from the CSV file.

Jul 13, 2021

Point on the map

This example displays a world map with cities as semi-transparent blue circles, sized by population using a square-root scale. It shows geographical data in an SVG rendered with React and D3 v5. The map uses `geoNaturalEarth1` and `geoPath` for the sphere, graticules, land masses, and country borders, while city coordinates are projected and drawn as circles. Population data comes from a CSV of world cities, and the map data uses TopoJSON with the `world-atlas` package.

Jul 13, 2021

Interactive Color Legend

This example shows an interactive scatter plot of the Iris Dataset, where hovering over a species name in the color legend dims all points except those belonging to that species. The visualization uses React to manage hover state and render SVG elements, while d3.scaleOrdinal, d3.scaleLinear, and d3.extent handle color and positional scales. Marks are drawn as circles, and the legend triggers mouse events to filter the data for highlighting.

Jul 12, 2021

Colors Legend

This example visualizes the Iris Dataset with a scatter plot of petal length against sepal width. Points are colored by species using a categorical color scale, and a legend identifies each species. The visualization is built with React and D3 v5, using `scaleLinear` for axes and `scaleOrdinal` for colors, with circles rendered as SVG marks.

Jul 12, 2021

Stylized Scatter Plot with Colors

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width with points colored by species using D3 scaleOrdinal. Built with React and rendered as SVG, it uses d3.csv to load data and d3.scaleLinear for axes. Circles include tooltips via SVG title elements, while axis labels and tick formatting use D3's format function.

Jul 12, 2021

Polished Scatter Plot with Menus

The scatter plot uses the Iris dataset to display relationships between pairs of floral measurements, with D3.js handling the linear scales and axes while React manages the interactive dropdown menus for selecting X and Y attributes. The SVG renders marks as circles, with axis ticks formatted using d3.format and data loaded via d3.csv. The viewer can compare any two numeric attributes, such as petal length versus sepal width, revealing clusters in the flower measurements.

Jul 10, 2021

Stylized Line Chart

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length (x-axis) and sepal width (y-axis). A dropdown menu lets users change the x-axis attribute among sepal length, sepal width, petal width, or species. The chart uses D3's `scaleLinear` for both axes and renders SVG circles via React. The `extent` function computes the domain, and `format('.2s')` tick labels abbreviate large numbers with a 'B' suffix. Styling uses the Zen Loop cursive font.

Hello React Menu

This example shows a React dropdown menu for selecting a pet, with a large label and select element styled at a 4rem font size. The `DropDown` component renders a native HTML `<select>` element, mapping over an array of pet options and managing the chosen value through React's `useState` hook. The selected value is passed back to the parent `App` component via the `onSelectedValueChange` callback, which updates the component state. It demonstrates a basic controlled form component using React 16.9 and ReactDOM, with no external data sources or visualization libraries.

World Map

A world map rendered as an SVG uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw landmasses, graticules, and sphere outlines. The land is filled in blue, with gray interior borders, graticules, and sphere background. Data comes from the `world-atlas` TopoJSON file, processed with `feature` and `mesh` from `topojson`. The React component loads the data via `useEffect` and `json`, then passes it to the marks for rendering.

Make A Line Chart

A stylized line chart displays temperature over time for San Francisco, using a smooth natural curve to connect data points against custom axes. Built with React and D3 v5, the visualization employs `scaleTime`, `scaleLinear`, and `line().curve(curveNatural)` to generate an SVG path. The data loads from a remote CSV, filtered to a single city, with weekday tick labels formatted via `timeFormat`. Custom axis components render gridlines and labels, while the Zen Loop font and teal color scheme give the chart a distinct, hand-drawn aesthetic.

Working With Time

This stylized line chart visualizes how temperature varies over time in San Francisco, encoding each hourly observation as a large circular mark positioned along a time-scaled x-axis and linear temperature y-axis. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `extent` for scaling and domain computation, while `AxisBottom` and `AxisLeft` generate tick marks. The marks are rendered as SVG circles with tooltips showing the formatted weekday. The data is loaded asynchronously from a CSV file via `d3.csv` and filtered to a specific city.

Iris dataset

This bar chart displays the top 10 most populous countries in 2020, using horizontal bars sorted by population. The visualization is built with React and D3 v5, employing `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. SVG `<rect>` elements represent each country, with axes rendered as custom React components. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and formatted with `d3.format`.

Axis with React & D3

This example shows the top 10 most populous countries as a horizontal bar chart with axes, using population data from the United Nations World Population Prospects 2019. The chart renders as SVG through React, with state managed via `useState` and `useEffect`. Axes are built manually using D3 scales: `scaleBand` positions country labels on the y-axis, while `scaleLinear` positions numeric tick marks on the x-axis, with tick values generated by `xScale.ticks()`. D3’s `csv` loader fetches and parses the data, and `max` determines the domain for the x-scale.

Margin Convention

This example demonstrates the Margin Convention in D3 by displaying a bar chart of the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The chart initially appears as a bare visualization with no axes or labels, emphasizing the layout structure. The React component uses `useState` and `useEffect` to load CSV data via `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` position and size the rectangles within a specified margin. The SVG output is rendered with React, applying a translation transform to offset the inner chart area from the outer margins.

UN Population 2019 Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with bar length encoding each country’s 2020 population from the UN World Population Prospects 2019 dataset, though no axes or labels guide interpretation. The React app loads CSV data via `d3.csv`, sorts by population, and renders SVG rectangles using `d3.scaleBand` for the y-axis country positions and `d3.scaleLinear` for the x-axis population values. The chart updates when data finishes loading, initially showing a loading message.

Rendering data with data => React D3 L1

This example visualizes CSS named colors as a radial burst of pie slices, with each slice colored according to its RGB hex value from the loaded dataset. React manages the component state and rendering, while D3 utilities handle data loading and geometry computation. The code uses `d3.csv` to fetch the color data, `d3.pie` to calculate slice angles, and `d3.arc` to generate SVG path commands. The resulting SVG renders each category as a wedge radiating from the center, demonstrating a straightforward integration of D3 for data processing with React for declarative UI updates.

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a scatter plot of quantitative fields `gap` and `depth` from a CSV file fetched via d3’s `csv` function, with points colored by the categorical `place` field and a tooltip showing that same attribute. The visualization uses the Vega-Lite API (`vl.markCircle` and `vl.x().fieldQ()`) to define the mark encoding, then renders it as an SVG via Vega-Lite, with the `vega-tooltip` handler attached. The chart’s width and height are set to fill the browser window, and axis styling is customized through a config object for readability.

Fork of Loading and Parsing CSV Data

This visualization shows the result of loading and parsing a CSV file containing CSS named colors, displaying the file size in kilobytes, the row count, and the column count. It uses D3.js version 5's `d3.csv` method to fetch and parse the remote CSV data from a GitHub Gist, and `d3.csvFormat` to calculate the data size. React is the framework hosting the example. The parsed data statistics are rendered as text within an HTML `<pre>` element, demonstrating asynchronous data handling with promises in a minimal interface.

Jul 7, 2021

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time in response to pointer movement. The example uses React with the `useState` hook to track the mouse coordinates and re-render the circle's `cx` and `cy` attributes on every `mousemove` event. The SVG is rendered via ReactDOM, with a fixed width and height, and the code relies on the browser's native `clientX` and `clientY` event properties.

Jul 7, 2021