ZG

Fatal Police Shootings Category Selection

This interactive visualization displays fatal police shooting incidents across the United States, color-coded by user-selected attributes such as race, gender, or threat level. Built with React, D3 v5, and SVG rendering, it uses a choropleth-style map where each reported incident is represented by a semi-transparent circle. The code leverages `d3.nest()` to group counts by state and selected category, while a React Dropdown component updates the color scale via `scaleOrdinal()`. Data originates from a curated CSV dataset, and the map projection uses `geoNaturalEarth1()` with world-atlas TopoJSON boundaries.

Nov 5, 2020

Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a natural Earth projection world map with a time-series histogram to explore migrant deaths in 2019. The map displays bubbles sized by the total dead and missing, while the histogram aggregates the same data by month. A brush on the histogram filters the map in real-time, highlighting events within the selected date range. Built with React and D3 v5, the code uses `geoNaturalEarth1`, `geoPath`, `geoGraticule`, `scaleSqrt`, and `brushX` for the brushing interaction. Data comes from the Missing Migrants Project, and the map utilizes the World Atlas TopoJSON for country boundaries.

Oct 29, 2020

Interactive Color Legend on Graduate Admission dataset

A scatter plot visualizes graduate admissions by plotting GRE Score against CGPA, with university rating encoded as color through an ordinal scale. Built with React and D3 v5, the visualization renders SVG circles and includes an interactive color legend where hovering over a rating value fades non-matching points, using React's useState for hover state management. The axes use d3.scaleLinear with custom tick formatting via d3.format, and data loads from a CSV file using d3.csv.

Oct 15, 2020

Racism? All Lives Matter!

This bar chart shows the distribution of police shootings by race, revealing that White, Black, and Hispanic individuals are the most affected groups, with the White category having nearly twice the number of shootings as the Black category. The visualization uses vega-lite-api with d3.v5 to load CSV data from a Kaggle-hosted GitHub gist, then aggregates counts per race via a groupby transform. The bars are colored by race, and tooltips display the exact count and racial category when hovered. The chart is rendered through vega-lite’s SVG rendering with a custom dark theme from a config file.

Oct 15, 2020

Realize a Sketch from US police shootings

This bar chart visualization, built with the vega-lite-api on top of vega and vega-lite, displays the total number of US police shootings grouped by age and race from a Kaggle dataset. The visualization reveals that carrying guns is the most prevalent reason for shootings across all age groups. The chart aggregates the data using a transform that groups by age and race, counting occurrences. It uses a dark-themed config for improved readability, with the chart dimensions fitting the browser window via an autosize setting.

Oct 15, 2020

Scatter Plot with Menus on Graduate Admission Dataset

This interactive scatter plot explores the Graduate Admission dataset, allowing users to compare any two attributes by selecting them from dropdown menus for the X and Y axes. The plot displays each admission record as a circle, with a tooltip showing the X-axis value. React manages the interactive state, while D3 v5 handles the linear scales and SVG rendering. The visualization is built with a React component structure, using D3's `scaleLinear` for axis scaling and `csv` for data loading.

Oct 7, 2020

Multiple Views with Brushing

This example pairs a natural Earth bubble map with a time-series histogram, both rendered as SVG, to visualize global migrant deaths and disappearances. Brushing on the histogram filters the map’s circles in real time, showing only incidents within the selected date range. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for projections and country boundaries from TopoJSON, while the histogram aggregates monthly totals with `d3.bin` and `d3.sum`. Data comes from the Missing Migrants Project, with circle sizing scaled by `d3.scaleSqrt`. React manages state, and D3’s `brushX` drives the interactive filtering.

Sep 30, 2020

Stylized Scatter Plot

A scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. It uses React and D3 v5 to build an SVG chart with a linear scale for both dimensions, styled with teal circles and gray tick marks. The data is loaded asynchronously via `d3.csv` and rendered with custom Axis components, a `Marks` component using SVG circles, and formatted tick labels using `d3.format`.

Sep 30, 2020

Student Perfomance

The chart shows the distribution of student performance by race/ethnicity, with bars grouped and colored by parental level of education. It uses vega-lite-api to construct a bar mark, transforms data via vl.groupby and vl.count to aggregate counts, and encodes race/ethnicity on the x-axis, student count on the y-axis, and education level as color. Data is loaded asynchronously from a CSV using d3.csv, with vega-tooltip for interactivity.

Student Perfomance

This bar chart visualizes the distribution of student test preparation course completion (completed or not) across different race/ethnicity groups. It aggregates student counts per race/ethnicity and preparation status, with color encoding distinguishing the two course-completion categories and tooltips revealing exact counts. The visualization is built using the Vega-Lite API, which compiles specifications to Vega for rendering in SVG, while D3 handles CSV data loading from a GitHub Gist. The chart’s appearance is customized through a config object that adjusts axis styling and label fonts.

USA police shootings

A stacked bar chart displays the total number of police shootings per state, with each bar segmented by race to show demographic distribution. The visualization uses the vega-lite-api, building a bar mark with grouped aggregation via `vl.groupby` on state and race, and encodes counts as the y-axis. Data is loaded as CSV from a Kaggle-hosted gist using `d3.csv`. The chart is rendered with Vega-Lite, styled with custom axis and label configuration, and includes tooltips for count and race details.

Graduate Admission

This scatter plot examines graduate school admission factors, plotting CGPA against GRE Score for individual applicants. Point color encodes University Rating, while point size reflects Research output, revealing potential correlations between academic metrics and university prestige. The visualization is built using the Vega-Lite API, with data fetched from a GitHub-hosted CSV via d3.csv. Custom configuration in config.js adjusts axis styling and tooltip fonts, and the chart auto-fits to the browser window dimensions.

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a color scale, where users can click on color legend items to interactively filter the map. The map renders countries as SVG paths using `d3.geoPath` with a Natural Earth projection, while the legend employs `d3.scaleOrdinal` with a spectral color scheme. Hovering reveals country names and values via `<title>` elements. Clicking a legend category dims non-matching countries, and zooming is enabled through the `d3.zoom` module. Data originates from the world-atlas TopoJSON and TSV files.

Sep 16, 2020

Dataset 3 Students Performance in Exams

This example summarizes a CSV dataset of student exam performance by displaying key file statistics. It fetches the remote CSV using the Fetch API, parses it with `d3.csvParse`, and then reports the approximate file size in kilobytes, the total number of data rows, and the number of columns. The results are rendered as plain text inside a `<pre>` element. The visualization uses D3 v5 only for parsing and formatting, offering a minimal, non-graphical overview of the dataset’s structure and scale.

Dataset 2 Graduate Admission

This example fetches a CSV file of graduate admission data and displays a plain-text summary of its size and structure, including file size in kilobytes, row count, and column count. The visualization is minimal, serving as a data-loading diagnostic rather than a graphical chart. It uses the `d3.csvParse` method from D3 v5 to parse the remote CSV, and the `fetch` API to retrieve the text from a GitHub Gist URL. The parsed data’s `length` and `columns.length` properties are accessed to generate the summary text, which is rendered inside a `<pre>` element.

Dataset 1 U.S police shooting dataset

This example summarizes a U.S. police shooting dataset by displaying its file size, row count, and column count in a large text block. It fetches a remote CSV file and parses it with `d3.csvParse` after retrieving the raw text via the Fetch API. The visualization uses D3 v5 and reports basic dataset dimensions without any charts or graphics. Data comes from a GitHub gist containing the police shooting records.

Mouse follower

A white circle follows the mouse cursor across a blank SVG canvas. Built with React 16.9, the app tracks mouse movement via an `onMouseMove` handler on the `<svg>` element, updating the circle's `cx` and `cy` coordinates through React state. The initial circle position is centered at 480, 250, with a fixed radius of 30 pixels.