Song Tao Chen

Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, with each circle representing a data point. The React-based D3 v5 application uses `scaleTime` for the x-axis and `scaleLinear` for the y-axis, rendering axis ticks and circular marks as SVG elements. Tooltips display formatted timestamps via the `title` element, while the chart is styled with a Poppins font and custom colors for ticks and marks.

Jan 17, 2022

points on a map redo

This visualization displays a world map with city population data rendered as proportional circles. The map uses an equal-area natural Earth projection with graticule lines and geographic boundaries. City markers are sized using a square-root scale based on population values, allowing for comparison of relative magnitudes. The example loads geospatial data from the world-atlas package and city data from a CSV file, then renders everything as SVG elements using React and D3's geoPath and geoGraticule APIs. The visualization highlights the distribution of populated cities across continents with a clean, minimalist aesthetic.

Jan 17, 2022

Fork of US Daily COVID-19 Vaccination Dashboard

This dashboard visualizes COVID-19 vaccination data across US states, combining a choropleth map with a daily bar chart. A dropdown menu selects a state, updating the bar chart to show daily vaccination doses over time. Brushing the bar chart updates the map’s circles, which represent the share of fully vaccinated people per state on the selected date. Built with React and D3 v6, it uses `d3.forceSimulation` for circle positioning and `d3.geoPath` for map rendering, with data from the US Vaccination Data by State/Territory gist.

Jan 16, 2022

Nice example I want

This animated visualization explores crime cases against women in India across states and years. It features a choropleth map of India alongside two donut charts, all driven by dropdown selectors for year and crime type. The map and donuts update smoothly with transitions, using d3.rollups to aggregate the CSV dataset. The code leverages d3.v7 for rendering, including d3.geoPath for the map and d3.arc for the donuts, with custom color themes per crime category.

Jan 16, 2022

Multiple Views with Fast Brushing

This visualization combines a world map and a time-series bar chart to explore migrant deaths and disappearances. Users brush a date range on the histogram to filter the map’s circle markers, which scale by the number of casualties. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for landmasses, while the histogram bins monthly totals via `d3.bin` and `brushX`. Data comes from a CSV of global missing migrant incidents, rendered with React and D3 v5.

Jan 14, 2022

Fork of Line Chart for ILINet Flu Surveillance Data(example)

This visualization presents a multi-panel dashboard of ILINet flu surveillance data, combining a scatter plot, U.S. map, bar chart, and line chart to explore state-level flu metrics. Users can switch the y-axis attribute via a React dropdown. The code uses d3.scaleLinear, d3.scaleOrdinal, d3.geoAlbers, and d3.geoPath for rendering, with data loaded via d3.csv from a GitHub-hosted dataset.

Jan 13, 2022

Multiple Views Cleanup

This example combines a bubble map and a time-series histogram to visualize global migrant deaths and disappearances. The map uses `geoNaturalEarth1` and `geoPath` from d3-geo to project circle markers scaled by the square root of the death count, while the histogram uses d3’s `bin` and `scaleTime` to aggregate reported dates. React components structure the SVG, with data loaded via d3-fetch from a CSV of the Missing Migrants Project.

MIssing Migrants on a map

This map visualizes the global distribution of missing migrants, with each circle representing a reported incident. The circle’s area is scaled by the square root of the total dead and missing count, using a size scale from d3.scaleSqrt. The geographic context is rendered with d3.geoPath and the Natural Earth projection, including land masses, graticules, and country interiors. Data is loaded from a CSV via d3.csv, while world atlas topology is fetched as JSON and processed with topojson.feature and mesh. Circles use a teal fill with partial opacity.

Missing Migrant of Working with Time

This histogram shows the monthly total of dead and missing migrants over time, based on data from the Missing Migrants Project subset. The visualization uses a bar chart with time on the x-axis and the aggregated death count on the y-axis, with hover tooltips displaying exact values. Built with React and D3 v5, it leverages `d3.scaleTime`, `d3.bin` with `timeMonths` thresholds, and `d3.sum` to aggregate the data, while custom SVG components like AxisBottom, AxisLeft, and Marks render the chart. The code loads CSV data via `d3.csv` and renders as SVG.

Sized Points on a map

This visualization displays global cities as sized points on a natural Earth projection map, with circle radii scaled proportionally to population using d3.scaleSqrt. The map renders landmasses, graticules, and country interiors as SVG paths generated via d3.geoPath, while city positions are projected from longitude and latitude coordinates. The React component loads world atlas TopoJSON and city CSV data asynchronously, then applies semi-transparent teal circles to highlight population distribution across continents.

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against sepal width with points colored by species. Hovering over the color legend highlights the corresponding species by increasing the opacity of its data points while fading others. The visualization uses React with D3 v7 scales and SVG rendering, including custom AxisBottom, AxisLeft, Marks, and ColorLegend components. The color legend employs mouse events to trigger the hover state, with the ordinal color scale mapping three distinct species to individual colors.

Jan 10, 2022

Fork of Scatter Plot With Color Legend

This example visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. Each point is colored by species, with a color legend to the right identifying the three categories. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and renders as SVG. Custom React components handle axis ticks and legend marks, with tooltips providing formatted sepal length values on hover.

Jan 10, 2022

Scatter Plot With Color

This scatter plot visualizes the Iris dataset, displaying sepal length against sepal width, with each of the three iris species distinguished by a unique color from a d3.scaleOrdinal range. Built with React and rendered as SVG, the chart uses d3.scaleLinear for both axes and d3.format for tick labels. Data is loaded asynchronously via d3.csv. A native SVG `<title>` element provides simple tooltips on each circle.

Jan 7, 2022

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that dynamically change the X and Y axes. The visualization uses React for state management, d3.scaleLinear and d3.extent for scaling axes, and d3.csv for data loading. SVG circles with d3.format-based tooltips display data points, while custom AxisBottom and AxisLeft components render ticks. The ReactDropdown component enables attribute selection, with axis labels updating accordingly to reflect the current measurements displayed.

Jan 7, 2022

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, enabling exploration of relationships between sepal and petal measurements. Users can dynamically select which numerical attribute to display on each axis via dropdown menus, with the plot updating instantly. The visualization is built using React and D3 v7, rendering SVG circles and axes. The `scaleLinear`, `extent`, `csv`, and `format` D3 functions are used for data loading, scaling, and tick formatting, while React `useState` manages the selected attributes.

Jan 6, 2022

Menus with React

This example shows a pet-selection menu built with React, demonstrating how to manage form state with the `useState` hook and a reusable `Dropdown` component. The interface displays a label and a `<select>` element with five animal options, defaulting to "hamster"; changing the selection logs the chosen value to the console. The code uses React and ReactDOM from UMD builds, along with JSX syntax, to render the component tree into the `#root` element.

Jan 5, 2022

React Starter

This example shows a minimal React application that renders the text “Hello React!” inside a full-screen viewport. It demonstrates how to mount a React component into the DOM using `ReactDOM.render` from `react-dom`, with the component defined as a functional component in `index.js`. The page loads React and ReactDOM from CDN scripts in `index.html` and uses a bundled `bundle.js` for the application code. No data visualization is present; the focus is purely on the React starter setup.

Jan 5, 2022

Smiley Face Part II

A modular smiley face built with React and SVG, composed of a yellow background circle, two black eyes, and an arched mouth. The face is centered within a 960x500 viewport using a FaceContainer that applies a translate transform. The mouth is drawn with a `d3.arc()` path, while eye and circle positions are controlled via props. The code defines reusable components—BackgroundCircle, Eyes, and Mouth—and renders them through the main Face component, demonstrating a component-based approach to data-visualization primitives.

Jan 5, 2022

World Map

This example renders a world map using D3’s geoNaturalEarth1 projection and geoPath to draw landmasses, graticules, and country interiors from TopoJSON data loaded via d3.json and processed with topojson.feature and topojson.mesh. The React component uses the useData hook to fetch and transform the world-atlas dataset, while SVG paths are styled with CSS for distinct land, sphere, and interior strokes. The visualization presents a clean, static geographic overview without interactivity.

Jan 4, 2022

Stylized Line Chart

A stylized line chart visualizes temperature over time using a smooth, natural curve rendered as an SVG path. The chart displays data from a San Francisco weekly temperature CSV dataset, with a time-scaled x-axis and linear y-axis. Built with React and D3 v7, it uses `scaleTime`, `scaleLinear`, and `curveNatural` to generate the line, while custom axis components render ticks with styled strokes and labels. The Poppins font and muted color palette give the visualization a refined, modern appearance.

Jan 4, 2022

Stylized scatter plot

This stylized scatter plot visualizes the Iris dataset, showing the relationship between sepal length and sepal width for individual flowers. Built with React and D3 v7, it renders SVG circles using d3.scaleLinear for both axes, with the x-axis formatted via d3.format. The visualization includes labeled axes, tick marks, and a native SVG tooltip element that displays the formatted x-value when hovering over each data point.

Jan 3, 2022

Stylized Bar Chart

This stylized bar chart visualizes the top 10 countries by population in 2020, sourced from the UN Population 2019 dataset. Horizontal bars display population values, with a linear x-axis formatted to use "B" for billions and a categorical y-axis listing country names. The visualization is built with React, D3 v7 (using `scaleBand`, `scaleLinear`, and `format`), and rendered as SVG. It demonstrates proper margin handling, custom axis components (`AxisBottom`, `AxisLeft`), and a tooltip via `<title>` elements.

Jan 1, 2022

Refactored Bar Chart

This visualization displays a horizontal bar chart of the top 10 countries by population in 2020, using data loaded from a CSV file of UN population estimates. The example demonstrates how to structure a React-based D3 chart with clearly separated axis and mark components, with margins applied to position the left and bottom axes. It uses D3 v7’s scaleBand and scaleLinear for scales, react-fragments to render SVG groups, and a custom useData hook with d3.csv for data fetching. The chart highlights the importance of margin configuration for effective axis placement.

Jan 1, 2022

Axes with React & D3

This example shows a horizontal bar chart of UN population data for 2020, with custom axes rendered using React and D3. The chart displays the top 10 countries by population, using D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Ticks for both axes are manually generated via `xScale.ticks()` and mapped to SVG `<line>` and `<text>` elements, with margins applied via a `<g>` transform. Data is loaded asynchronously from a CSV using `d3.csv`.

Jan 1, 2022

The Margin Convention

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of UN population data for 2019. The chart displays the top 10 countries by population using SVG rectangles, with scales created via `d3.scaleBand` and `d3.scaleLinear`. A margin object defines the inner plotting area dimensions, and a `<g>` element translates the chart into place. Data is loaded asynchronously from a CSV using `d3.csv`, and the visualization is built with React components and D3 v7.

Dec 29, 2021

Pathetic Bar Chart

This bar chart displays the top 10 countries by 2020 population from a CSV file loaded with d3.csv. Horizontal bars are positioned using d3.scaleBand for the y-axis and scaled with d3.scaleLinear for the x-axis. Rendered as SVG rectangles within a React component, the chart initializes with a “Loading…” message until the asynchronous data arrives. The example demonstrates combining React state management via useEffect and useState with D3’s data-loading and scaling utilities.

Dec 29, 2021

Fork of Fork of Rendering data with react d3 arc

This visualization displays the CSS named colors as a donut chart, with each color represented by a single wedge of equal size. The chart uses D3’s `arc` generator to compute the SVG path for each slice, with angles evenly distributed across the full circle. Data is loaded from a CSV file using D3’s `csv` utility, and the chart is rendered in a React application with SVG elements, where each wedge’s fill is set to the corresponding RGB hex value from the dataset.

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower, with additional encodings for origin (color) and weight (size). The plot uses a scatter plot with semi-transparent circles, presenting data as points with tooltips displaying car names. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications, with the `vl.markCircle` method configuring the marks and `vl.x()`/`vl.y()` for quantitative scales. Data is loaded asynchronously via `d3.csv`, and the final render uses Vega’s SVG output with a custom tooltip handler.

Loading Data with React and D3

This example demonstrates how to load and summarize a CSV dataset using React state and D3 utilities. The app fetches CSS named colors from a GitHub gist via `d3.csv`, stores the parsed data in React’s `useState` hook, and displays a text summary. The `message` function computes file size in kilobytes using `d3.csvFormat`, along with row and column counts. While loading, the interface shows the word "loading" until the asynchronous `useEffect` hook completes the data request.

Fork of Loading and Parsing CSV Data

This example displays basic statistics about a CSV file containing CSS named colors, showing the file size in kilobytes, the number of rows, and the number of columns in large text. The code uses `d3.csv` to fetch and parse the data from a GitHub Gist URL, then calculates the formatted output length with `d3.csvFormat` and accesses the parsed array’s `length` and `columns` properties. The results are rendered into a `<pre>` element via the DOM’s `textContent`, with styling set to a large font size for readability. No charts or visual encodings are involved; the focus is purely on demonstrating data loading and parsing workflows.

Fork of Loading and Parsing CSV Data

This example demonstrates how to fetch and log the contents of a CSV file containing CSS named colors, displaying the raw text in the browser console. It uses the Fetch API with an asynchronous `fetchText` function to retrieve the CSV from a GitHub Gist URL, then logs the parsed text output. The code also includes commented-out alternative syntax for handling the fetch response with nested promises. No visualization is rendered on the page; the body remains empty while the data loading process is shown through console output.

Dec 27, 2021

Mouse Follower

A React component renders an SVG circle that follows the mouse pointer across a 960 by 500 viewport. The circle’s center coordinates are updated via React’s `useState` hook and a `handleMouseMove` callback attached to the SVG’s `onMouseMove` event. The `useCallback` hook memoizes the event handler, and `ReactDOM.render` mounts the app. The visualization demonstrates basic state-driven interactivity without external data, using only React and SVG primitives.

Dec 27, 2021