wkj0713@gmail.com

@KangjianWu·13 public vizzes

Global Pandemic Overview

This visualization presents a global pandemic overview by coloring countries on a natural Earth projection map according to their total COVID-19 deaths. An interactive tooltip displays detailed case statistics for each country on hover, while a color gradient legend indicates the severity scale. Built with D3.js, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for map rendering, `d3.scaleSequential` for the color encoding, and fetches geographic and pandemic data from external JSON and CSV sources.

Apr 17, 2024

Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates plot visualizes COVID-19 case data across six quantitative dimensions—total cases, deaths, recovered, active cases, tests, and population—using D3.js in React. Each line represents a country, colored by total deaths, with a cyan-on-navy color scheme and screen blending for overplotting. Users can brush along any axis to filter the data; brushed intervals persist across axes, and the polylines fade smoothly (500ms) to show only rows within all active selections. The visualization supports dynamic brushing interactions, enabling exploratory analysis of multi-dimensional relationships in the dataset.

Mar 20, 2024

Loading thumbnail…

Top 10 Countries by COVID-19 Cases Bar Chart

This bar chart displays the top 10 countries by total COVID-19 cases, with each bar’s height representing the case count and the country name labeled on the x-axis. The visualization uses d3.csv to load data from a GitHub gist and d3.scaleBand for positioning bars, while d3.scaleLinear maps the case values to the y-axis. Hovering over a bar changes its fill color to orange, implemented through d3 selection event handlers. Axes and labels are generated using the @curran/axis-labels library alongside d3.axisLeft.

Mar 14, 2024

Loading thumbnail…

Covid Cases gragh

This visualization shows worldwide COVID-19 total cases on a choropleth map, coloring each country red, orange, or green based on case thresholds. It uses d3.geoNaturalEarth1 and d3.geoPath to render the world.geojson features, while COVID data from a CSV is joined to country names. Hovering over a country reveals a tooltip with the exact total cases. The SVG remains responsive through CSS, and the map uses d3’s join pattern for efficient rendering.

Feb 23, 2024

Loading thumbnail…

Covid Cases and Deaths WorldWide Simple Scatter Plot

This visualization presents a scatter plot comparing total COVID-19 cases against total deaths for countries worldwide, using logarithmic scales on both axes to accommodate wide data ranges. Each circle represents a country, with its position determined by case and death counts, while color encodes mortality categories (low, medium, or high) derived from the death-to-case ratio. The plot is rendered as an animated D3.js visualization, utilizing `scaleLog`, `scaleOrdinal`, and `schemeCategory10` for color mapping, with interactive legend hover effects that dim non-matching countries. The data is loaded from a GitHub-hosted CSV file, and the visualization employs a reusable module structure with separate axis-label utilities.

Feb 23, 2024

Loading thumbnail…

Fork of Circles with D3

A fireworks rocket launches from a red tube, erupting into a burst of orange particles that scatter and fade against a black background. The animation begins after a two-second delay, with each particle expanding from the launch point and moving outward with randomized trajectories. Built with D3.js v7, the visualization uses SVG primitives and a transition with `easeCubicOut` easing to animate the particles' positions and opacity, creating a simple, looping firework effect.

Feb 7, 2024

Loading thumbnail…

Line Chart of COVID-19 Total Cases in the World's Most Populated Countries

This line chart displays the total COVID-19 cases for the world's ten most populated countries, sorted by population. The visualization uses D3.js APIs including `csv` for data loading, `scaleBand` and `scaleLinear` for coordinate mapping, and `line` to generate the path connecting data points. The data comes from a GitHub-hosted CSV file, with the chart rendering on an SVG canvas with axes labeled "Country" and "Total Cases".

Feb 3, 2024

Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes Olympic 2021 medal counts, plotting gold medals against total medals for each country. It uses D3 v7, with `scaleLinear` and `extent` to map data, `axisLeft` for the y-axis, and custom `xAxis`/`yAxis` helpers. Circles are rendered with `selectAll().join('circle')`, sized and colored via attributes. The underlying CSV is fetched with `csv()` from D3. A gray `innerRectFill` background and axis labels highlight the correlation between gold and overall performance.

Jan 25, 2024

Loading thumbnail…

Fork of Solar System

This animated visualization displays the relative sizes of the planets in the solar system, with distances not to scale. Planet radius is proportional to the data, and each planet uses an SVG radial gradient to give it a shaded, more three-dimensional appearance against a starfield. The code uses D3.js selections and transitions (transition.attr, transition.delay) to animate the growing radii and label opacity sequentially. Data comes from Wikipedia’s list of gravitationally rounded objects of the Solar System. A static starfield background is also generated programmatically.

Jan 23, 2024

Loading thumbnail…

Fork of Solar System

This animated visualization presents the solar system with planets positioned across the screen, scaled proportionally to their actual radii while distances are compressed for clarity. Each celestial body and its label fades in sequentially from the sun outward, using D3’s `transition` and `easeLinear` for smooth motion. The code leverages D3’s data join to bind planetary data from Wikipedia, rendering circles and text elements with `selectAll` and custom transition delays. A black SVG background and distinct fill colors for each planet emphasize the size hierarchy, from Mercury to the sun.

Jan 23, 2024

Loading thumbnail…

Video Game Sales

This visualization displays the first record from the Video Game Sales dataset, showing detailed sales figures across regions and global totals. The code loads the CSV data, converts numeric fields, and renders a formatted JSON object in a styled HTML container. The example demonstrates basic data loading and preprocessing with a simple text-based output, using vanilla JavaScript to parse and display the dataset.

Jan 23, 2024

Loading thumbnail…

Covid Cases and Deaths WorldWide

This example displays the first row of a COVID-19 dataset as a JSON object, showing total cases, deaths, recoveries, active cases, tests, and population for a single country. It imports the data from a CSV file and parses the numeric fields by removing commas. The code uses the native `JSON.stringify` method to format the data and displays it within an HTML `<pre>` element, with the font size controlled by a JavaScript variable. The dataset originates from a Kaggle source on worldwide COVID-19 cases and deaths.

Jan 23, 2024

Loading thumbnail…

Olympic Games 2021 Medals

This example displays the first row of the Olympic Games 2021 Medals dataset as a formatted JSON object. It uses the raw CSV data, which is loaded and parsed with the `data.csv` import, and the `JSON.stringify` method to generate a readable representation. The visualization, authored by KangjianWu, relies on the `main` function to inject the output into a container, providing a static snapshot of the dataset's structure for inspection.

Jan 22, 2024