Skip to main content
Log in
G

GeniXiong

@GeniXiong·15 public vizzes

Loading thumbnail…

Boston Crime Reports

This interactive visualization maps Boston crime incident reports by neighborhood, with points colored by Uniform Crime Report category. A linked time-series histogram below the map shows the total number of incidents over time and includes a brush that filters the map to a selected date range. The map uses a D3 geoAlbers projection with geoPath to render TopoJSON neighborhood boundaries, while React manages the state for the brush selection and color legend. Data comes from a CSV of Boston crime reports.

Oct 29, 2019
Loading thumbnail…

Boston Crime Reports

A map of Boston displays crime incident reports as semi-transparent circles, colored by the Uniform Crime Report (UCR) part via an ordinal color scale. A linked date histogram below the map shows the total number of incidents over time, with a brush that filters the map’s circles by date range. The visualization uses React, D3’s `geoAlbers` projection, `geoPath`, `scaleOrdinal`, and `brushX`. Data comes from Boston Crime Reports and neighborhood GeoJSON files.

Oct 29, 2019
Loading thumbnail…

Seattle House Price Scatter Plot with Menus

This interactive scatter plot visualizes 2015 Seattle house prices, with each circle representing a home colored by number of floors. Users select X and Y axes from dropdown menus to explore relationships between attributes such as year built, price, living area, and lot size. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and `extent` for scaling, while SVG circles and custom `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks` components handle rendering. The data loads via D3’s `csv` parsing from a GitHub Gist.

Oct 27, 2019
Loading thumbnail…

2015 Seattle House Price data

This visualization displays 2015 Seattle house price data as an interactive scatter plot, where each circle represents a home. The x-axis maps year built, the y-axis shows price, circle size encodes living area in square feet, and color indicates the number of floors. The plot uses vega-lite-api to generate the chart, with data loaded via d3.csv from a GitHub-hosted CSV file. Custom axis styling and tooltips are configured through vega, vega-lite, and vega-tooltip, while the visualization renders as a fitted SVG canvas filling the browser window.

Oct 24, 2019
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset maps petal length against sepal width, with each point colored by species. Hovering over a species name in the color legend dims all other points to highlight the selected group. The visualization uses React hooks to manage hover state and re-render the SVG, with scales from d3.scaleLinear and d3.scaleOrdinal. Axes and legend ticks are built from reusable React components, and the data is loaded via d3.csv.

Oct 24, 2019
Loading thumbnail…

Multiple Views with Brushing

This interactive visualization combines a bubble map and a date histogram to explore migrant deaths and disappearances worldwide. The map displays incidents as proportional circles overlaid on natural Earth projections using `d3.geoNaturalEarth1` and `d3.geoPath`, while the histogram aggregates monthly totals. Users can brush the time axis with `d3.brushX` to filter the map’s displayed incidents in real time. Both views use SVG rendering within a React framework, with data sourced from the Missing Migrants Project CSV and country boundaries from World Atlas TopoJSON.

Oct 17, 2019
Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent dots. The visualization uses a natural Earth projection via d3.geoNaturalEarth1 and renders geographic features with d3.geoPath, including land masses and graticules. City coordinates are projected from latitude and longitude into SVG circle positions. The map loads country boundaries from World Atlas TopoJSON and city data from a Simplemaps CSV, with React managing the data-fetching hooks and rendering the SVG marks.

Oct 16, 2019
Loading thumbnail…

Top 150 US School Data

A scatter plot of the top 150 US schools overlays geographic points onto a map of the United States, encoding each school’s net price through a blue color gradient and its acceptance rate through point size. The visualization layers a GeoJSON map of US states with the school data using the vega-lite-api, pulling location coordinates from the CSV and rendering the map from a Vega US‑10m topology file. It relies on the Albers projection and the vega-lite-api’s `markGeoshape` and `markPoint` marks to combine both datasets in one view.

Oct 16, 2019
Loading thumbnail…

Scatter Plot of US TOP 150 Universities

The visualization is a scatter plot of the top 150 US universities, showing the relationship between rank on the x-axis and acceptance rate percentage on the y-axis. Circle size encodes the annual price divided by 1000. The plot uses React for component composition and d3.v5 for scale construction and CSV data loading from a GitHub gist. SVG rendering includes custom axis components and marks, with interactive-free static display of the dataset.

Sep 24, 2019
Loading thumbnail…

Car data visualization on mpg, price and origin

A scatterplot visualizes the cars dataset, plotting each car model as a circle positioned by city MPG and invoice price. Circle size encodes horsepower, color encodes the car’s origin, and a tooltip reveals the model name. The visualization uses the Vega-Lite API with D3.js for data loading, rendering as an SVG, and the Vega-Tooltip handler for interactive hover details. The axis and label styles are customized through a separate configuration.

Sep 24, 2019
Loading thumbnail…

Top Exporting Countries in 2018

This visualization shows the top 10 exporting countries in 2018, with bars broken down by export type to compare manufacturers versus total exports. The chart uses bar marks encoded with country names on the x-axis, export values on the y-axis, and color to distinguish series. The code loads CSV data via d3.csv, filters and aggregates totals, selects the top countries using d3.descending, and renders the chart with Vega-Lite and Vega, incorporating custom axis styling and tooltips.

Sep 22, 2019
Loading thumbnail…

US school ranking top 150

This example displays basic metadata about the US school ranking top 150 dataset, showing the file size in kilobytes, row count, and column count in large text. It loads a CSV file from a GitHub gist using `d3.csv` and formats the result with `d3.csvFormat` to calculate the byte size. The page also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, though the active version relies on D3 v5’s promise-based CSV loading.

Aug 29, 2019
Loading thumbnail…

2015 Seattle House Price

This example displays basic metadata about the 2015 Seattle house price dataset, showing its size in kilobytes, row count, and column count in large text. It loads a CSV file from a GitHub gist using D3 v5’s `d3.csv` method, which returns a promise, then formats the result with `d3.csvFormat` to calculate the byte size. The code also includes commented-out alternatives using `fetch` with async/await and `d3.csvParse`, illustrating different approaches to loading and parsing CSV data.

Aug 29, 2019
Loading thumbnail…

Car Brands and Prices

This example demonstrates how to load and summarize a CSV dataset of car brands and prices using D3 v5. The visualization displays basic statistics about the data file, showing its size in kilobytes, the number of rows, and the number of columns in a large-text format. The code uses the `d3.csv` method to fetch and parse the remote CSV file, then leverages `d3.csvFormat` to calculate the data size. An alternative approach using `fetch`, `async`/`await`, and `d3.csvParse` is also provided as commented-out code.

Aug 29, 2019
Loading thumbnail…

Hello HTML

Built with React and D3 v5, this example renders a cheerful smiley face as an SVG graphic. The code uses D3's `arc` generator to create the red mouth, while React's `ReactDOM.render` mounts the component into the DOM. Yellow circles form the face and eyes, with pink blushes positioned on the cheeks. All shapes are drawn declaratively through React JSX, using SVG elements like `<circle>` and `<path>` within a single `<g>` group centered on the canvas, with dimensions fixed at 960 by 500 pixels.

Aug 24, 2019