G

Guitong Li

@guitongli·22 public vizzes

Loading thumbnail…

optimizing missing migrant brushing

This visualization combines a world map and a bar chart to explore missing migrant incidents. The map uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render country boundaries, with circle radii scaled by `d3.scaleSqrt` to show death counts. Below, a brushable time-series bar chart using `d3.brushX` filters the map by date range through React state. Data comes from the Missing Migrants Project CSV, loaded via `d3.csv`. The React components manage scales, axes, and brushing interactions.

Loading thumbnail…

missing migrant brushing

This visualization combines a bar chart and a world map to show missing migrant incidents over time, with brushing on the bar chart filtering the map’s displayed data points. The bar chart bins reported dates by month using `d3.histogram` and `d3.timeMonths`, while the map projects locations with `d3.geoNaturalEarth1` and sizes circles by death counts with `d3.scaleSqrt`. A `brushX` selection on the bar chart updates the map’s filtered cities in real time. Data comes from a CSV of Missing Migrants Global 2019 records, rendered with React and SVG.

Loading thumbnail…

missing migrant points on atlas

This visualization displays red points representing missing migrants on a world map using a Natural Earth projection. The map uses d3.geoPath to render land masses and graticules from TopoJSON data, while city coordinates are projected from latitude and longitude. Circle sizes scale with the "Total Dead and Missing" count via d3.scaleSqrt. The data comes from the Missing Migrants Global 2019 subset. The visualization uses React with the d3-geo-projection library and SVG rendering.

Loading thumbnail…

missing migrants with Curran

This histogram visualizes the total number of dead and missing migrants per month, using data from the Missing Migrants Global 2019 subset. The code applies `d3.histogram` with `d3.timeMonths` thresholds to bin the data, then maps each bin to a rectangle whose height reflects the summed monthly fatalities. Axes are custom-rendered with React components, using `d3.scaleTime` and `d3.scaleLinear` for the x and y scales respectively. The visualization is rendered as SVG within a React application, with data loaded via `d3.csv`.

Loading thumbnail…

points on atlas

This visualization displays city population data as red circles plotted on a natural Earth projection world map. The map shows land masses in gray with white graticule lines and country borders. Circle radius encodes population using d3.scaleSqrt. The implementation uses d3-geo for the projection and path generation, topojson for world atlas data, and React for rendering SVG elements. City data comes from a CSV file loaded via d3.csv, while geographic boundaries come from the world-atlas TopoJSON dataset.

Loading thumbnail…

interactive color legend iris scatter plot

This interactive scatter plot displays the classic Iris dataset, mapping sepal and petal measurements along user-selectable x and y axes. A color legend categorizes the three iris species, and hovering over a species name dims the other points to highlight the selected group. Built with React and D3 v5, the visualization uses dropdown menus to swap axes and D3 scales (scaleOrdinal, scaleLinear) to position circles and assign colors. SVG rendering handles the marks and axes, while the legend’s mouse events filter and emphasize data by species.

Loading thumbnail…

color iris scatter plot

This interactive scatter plot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements across three species types. The React-based interface uses dropdown menus to switch between different measurement axes for both the x and y coordinates, while each species is color-coded via a D3 ordinal scale with a legend. The visualization utilizes d3.scaleLinear for mapping data values to SVG coordinates, d3.csv for loading the dataset from a GitHub-hosted file, and custom axis components built with React and D3’s tick generation. Hovering over a circle reveals its exact measurement value through a tooltip.

Loading thumbnail…

polishing iris scatter plot

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which features appear on each axis. The visualization uses React for component structure and state management, with d3.scaleLinear for axis scales and d3.extent for domain calculation. SVG circles render the data points, each with a tooltip showing the x-axis value. The axes are custom components built with React that leverage d3's tick generation, with grid lines, rotated axis labels, and formatted tick text.

Loading thumbnail…

menu iris scatter plot

This scatter plot visualizes the Iris dataset, allowing interactive exploration of relationships between different flower measurements (sepal length, sepal width, petal length, petal width) through two dropdown menus that control the x and y axes. The visualization uses React with D3 v5 for scales and axes, rendering SVG circles for data points. Axis components use D3's scaleLinear and extent functions to compute domains, while tooltips display formatted values. The data is loaded from a remote CSV file using D3's csv parsing utility.

Loading thumbnail…

iris scatter plot

This scatter plot visualizes the Iris flower dataset, mapping sepal length and sepal width for each sample. The visualization uses D3 v5 scales and axes, rendered through React components, with SVG circles representing data points. Axes are customized using D3's scaleLinear and format functions, with tick marks generated programmatically. The plot displays interactive tooltips showing the sepal length value when hovering over each circle, and the data is loaded from a CSV file hosted on GitHub.

Loading thumbnail…

menu scatter plot chart

This visualization demonstrates a dropdown menu that allows users to switch between different options, displaying the selected feature in the console. Built with React and D3, the interface includes a world map rendered using geoNaturalEarth1 projection and geoPath, with land masses and graticule lines shown. The project uses useState for managing the selected dropdown value and imports from d3-geo-projection for the map projection. The dropdown component is reusable, accepting options and an onSelectedValueChange callback. The map data comes from world-atlas TopoJSON, processed with topojson feature and mesh functions.

Loading thumbnail…

atlas project

This interactive world map uses a Natural Earth projection to display country boundaries and graticule lines rendered as SVG paths, with land masses filled in gray and country borders drawn in white. Built with React and D3, the visualization loads GeoJSON data from the world-atlas TopoJSON dataset, then uses d3.geoPath and d3.geoNaturalEarth1 to project and draw the geography, while d3.geoGraticule generates the latitude and longitude grid.

Loading thumbnail…

data canvas sense your city

This visualization displays temperature trends over a week in San Francisco using a line chart rendered with SVG. The React app loads CSV data via D3's `csv` parser, then uses `scaleTime` and `scaleLinear` to map timestamps to x-coordinates and temperatures to y-coordinates. The line path is generated with D3's `line` and `curveNatural`, while custom `AxisBottom` and `AxisLeft` components render ticks and gridlines. Circles with tooltips mark individual data points. The chart demonstrates integrating D3 scales, axes, and shapes within a React component structure.

Loading thumbnail…

refactor axis with d3

A bar chart displays the population of the top 10 most populous countries from 2018 United Nations estimates. The visualization shows custom D3 axes built with React components, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The `AxisBottom` component generates ticks and labels via `xScale.ticks()`, while `Marks` renders SVG rectangles with hover tooltips. Data loads asynchronously from a CSV file using `d3.csv` in the `useData` hook.

Loading thumbnail…

axis with d3

This visualization displays a horizontal bar chart of population data for the world’s most populous countries, with each bar labeled by country name. The bars are rendered as SVG rectangles within a React component, using D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. Axes are manually constructed by mapping over `xScale.ticks()` to draw grid lines and tick labels, while country names are positioned using the band scale’s bandwidth. Population values come from a CSV file loaded via `d3.csv`.

Loading thumbnail…

margin convention bar chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates the margin convention by applying a 20-pixel margin around a 500-pixel SVG canvas, with the inner chart area offset via a translate transform. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv()` to load remote data. Rectangles are rendered per country with widths proportional to population, while the axes styling shows customization through CSS tick and text formatting.

Loading thumbnail…

scaling bar chart

This visualization shows the populations of the top 10 most populous countries using a horizontal bar chart, with each bar’s length representing the population value from the United Nations 2018 estimate. The chart is rendered as an SVG within a React app, and the code uses `scaleBand` for the categorical country axis and `scaleLinear` for the quantitative population axis. The D3 `max` function sets the domain for the linear scale, while the `bandwidth()` method determines each bar’s height. Data is loaded from a CSV file via the `csv` function, and the bars are drawn as SVG `rect` elements.

Loading thumbnail…

color pie

This visualization displays the entire CSS color palette as a single pie chart, where each color name from the dataset is represented by a slice filled with its corresponding hex value. The chart uses a React component that loads data from a CSV file via `d3.csv`, then applies the `d3.pie` layout and `d3.arc` generator to render the SVG paths. The inner and outer radii are set to 200 and 300, creating a donut effect, with each slice colored directly from the data’s RGB hex column.

Loading thumbnail…

Corona App

This visualization displays a donut chart of named CSS colors, with each slice colored by its corresponding RGB hex value and sized equally. The data is loaded from a remote CSV file using `d3.csv`, and the chart is rendered with React and SVG. The `d3.pie` layout computes the arc angles, while `d3.arc` with inner and outer radii creates the donut shape.

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows how reported COVID-19 incidence rates vary by age group across reporting weeks, using a multi-series line chart built with the vega-lite-api library. The visualization combines d3.csv to fetch and parse data from a GitHub-hosted CSV file, filtering specific rows and transforming semicolon-separated fields into structured objects. The vega-lite-api defines the line mark, maps the meldewoche field to the x-axis, inzidenz to the y-axis, and altersgruppe to color. Rendering is handled by Vega-Lite and Vega, with a tooltip handler integrated for interactive data inspection.

Loading thumbnail…

1. face

A stylized face rendered as a single circle uses D3.js v7 to draw a smiling mouth with an animated arc path. The circle is centered within an SVG, while the mouth transitions its transform over two sequential 2,000-millisecond animations, shifting downward. The code employs `d3.arc`, `d3.select`, and SVG attributes, with a background color set via `styles.css`. The animation uses chained `.transition()` calls, and the static header metadata lists React as the framework, though the visible code is plain JavaScript with D3.

Loading thumbnail…

first viz

This example renders a simple face on an SVG canvas using D3.js. A large circle forms the head, and an arc path creates the mouth, which animates downward in two sequential transitions, each lasting two seconds. The visualization uses D3’s `arc` generator, `select`, `append`, and `transition` methods, applying transforms to shift the mouth’s position over time. The SVG background is set to a muted olive color via D3’s style method, with no external data source.