Skip to main content
Log in
A

anduskong

@anduskong·9 public vizzes

Loading thumbnail…

yi xiao Map

This visualization displays a choropleth map of the United States, coloring each state by the log-transformed seven-day average of positive COVID-19 test results. The map also uses SVG tooltips to show each state’s name, seven-day death average, and positive test average. It loads CSV data and TopoJSON geometry, projecting it with `d3.geoAlbersUsa` and drawing paths via `d3.geoPath`. The color scale is a threshold scale from `d3.scaleThreshold` using `d3.schemeOrRd`, and it includes a custom color legend built with D3 selections.

Dec 17, 2020
Loading thumbnail…

Working with Time

This scatter plot visualizes COVID-19 data, showing the daily increase in positive cases (y-axis) against time (x-axis) as a series of circular marks. The visualization uses React to render SVG elements, with D3 v5 scales including `scaleTime` and `scaleLinear` to map data to coordinates. The code employs `d3.csv` for data loading from a GitHub-hosted CSV file, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Each circle includes a native SVG `<title>` element for tooltips displaying formatted dates, and the chart is styled with the Poppins font.

Dec 17, 2020
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes daily new positive COVID-19 cases over time using data from the Data Canvas Sense Your City Dataset. The React application, rendered as SVG, uses d3.scaleTime and d3.scaleLinear to map dates and case counts, with d3.line and curveNatural creating the smooth connection between points. Axis components generate ticks and labels, while the Poppins font and muted teal color scheme give the chart its distinctive aesthetic. The chart fetches its CSV data from a GitHub-hosted file, demonstrating a clean, minimal approach to temporal data visualization.

Dec 17, 2020
Loading thumbnail…

Untitled

This example demonstrates a dynamic heatmap visualization that maps a function across a two-dimensional grid. The code uses D3.js to create an SVG container, define scales, axes, and draw the heatmap by rendering pixel data onto a Canvas element via a foreignObject. The Canvas `createImageData` API is used to compute and display color values based on the linear mapping function, with opacity halved for transparency. The visualization updates interactively through inputs like sliders and checkboxes, which control the model parameters.

Dec 17, 2020
Loading thumbnail…

Hello VizHub

A minimal example demonstrates the core capabilities of VizHub, showing how a web page can combine a local stylesheet, a D3 library loaded from a CDN, and imported ES6 modules. The visualization renders the text "Hello VizHub!" centered on the page using a large font. The code imports the `select` function from `d3` to target the `#message` div and set its text content from a separate local module. The example illustrates modular code organization and dependency management within a single project.

Dec 17, 2020
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors world countries by economy category using a sequential color scale, with an interactive legend that filters the map by clicking a category. The map renders geographic features with `d3.geoPath` and `d3.geoNaturalEarth1`, while the legend circles respond to clicks to toggle the selected category, dimming non-matching countries. Pan and zoom are enabled via `d3.zoom`. Data comes from the World Atlas TopoJSON and TSV files, processed with TopoJSON’s `feature` method.

Dec 17, 2020
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of the world displays a categorical color scale, coloring each country by its economy income group. The map uses a geographic projection and SVG paths via `d3.geoPath` and the `geoAlbersUSA` projection. The color legend, built with `d3.scaleOrdinal` and `schemeSpectral`, shows discrete categories; clicking a legend item filters the map by fading non-matching countries to low opacity while highlighting the selected category. The data originates from a TopoJSON file and a TSV table loaded concurrently, which are merged by country ID.

Dec 17, 2020
Loading thumbnail…

Let's make a map with D3.js!

This example creates a tilegram map of the United States using D3.js and the TopoJSON library. It loads geographic data from `tile.topo.json` and renders each state as a path generator using `d3.geoPath` with a custom `geoTransform` projection. The SVG canvas is 1400 by 1000 pixels, and states are styled with their names and tilegram values from the data. The visualization demonstrates how to combine TopoJSON feature extraction with D3's geographic path rendering to produce a stylized map.

Dec 16, 2020
Loading thumbnail…

US states map : with colorScale. One color for each country

This example displays a choropleth map of US states, with each state assigned a distinct color from the d3.scaleOrdinal and schemeCategory10 palette. Hovering over a state turns it green, providing interactive feedback. The map is rendered as SVG paths using d3.geoPath with a geoAlbersUsa projection, processing TopoJSON county data from the us-atlas dataset. State names are included as tooltips via appended title elements.

Dec 16, 2020