ftjyangf

@ftjyangf·9 public vizzes

Scatter Plot with Menus

This interactive scatter plot explores relationships between car attributes from the UCI Auto MPG dataset. Two dropdown menus let users select which numeric columns map to the X and Y axes, using a reusable `dropdownMenu` module. The `scatterPlot` module renders SVG circles with D3 scales and axes, animating points into place via `transition().duration(2000)` with staggered delays. Data is loaded with `d3.csv` and parsed as numbers before rendering.

Jun 5, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page with a single SVG path rendered as a pink, organic blob shape. The path uses a static `d` attribute and is hoverable, with CSS changing its fill to red on mouseover. The page loads D3 v5 and TopoJSON from a CDN, though no JavaScript code is present in the main file. The rendering relies on an inline SVG element, and the sample serves as a starting point for HTML-based visualizations.

Jun 4, 2020

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications with an interactive legend that filters countries by color value. Clicking a legend item isolates the corresponding economy type, dimming non-matching countries to 10% opacity, while hovering over legend entries updates their clarity. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` for map projection, `d3.zoom` for panning and zooming, and `d3.scaleOrdinal` with `d3.schemeSpectral` for color encoding. World geometry comes from TopoJSON data loaded via `d3.json`, with country names and economy attributes merged from TSV data.

Jun 1, 2020

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows countries colored by economic grouping, with a color legend that filters the map when clicked. Clicking a legend item dims unselected countries and highlights those matching the chosen category. The visualization uses d3.geoPath with d3.geoNaturalEarth1 for projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for colors. Country boundaries come from the world-atlas TopoJSON dataset, with hover effects and tooltips showing country names and values.

May 31, 2020

Loading thumbnail…

Sized Points on a Map

This example displays cities with populations exceeding 50,000 as sized points on a world map, using the natural Earth projection. Country boundaries and graticules appear beneath the points. The visualization uses React with D3 v5, including `geoNaturalEarth1`, `geoPath`, and `geoGraticule`. City population data is loaded from a CSV via `d3.csv`, while land and interior boundaries come from World Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`. Circle radii are scaled by population values.

May 26, 2020

Loading thumbnail…

Sized Points on a Map

This example displays a world map with city points sized by population. It uses a Natural Earth projection via D3's `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country interiors. The map’s cities, sourced from a Simplemaps database, are drawn as SVG circles with radii scaled by the square root of population using D3’s `scaleSqrt`. The visualization is built with React and D3, with styles for the land, sphere, and graticules defined in CSS, and data loaded asynchronously from external files.

May 25, 2020

Loading thumbnail…

World Countries Tree

The World Countries Tree visualizes the hierarchical structure of continents, regions, and countries using a horizontal dendrogram layout. It renders the data as SVG paths with curved links connecting parent nodes to their children. The implementation uses D3 v5 APIs including `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to compute the layout and generate the connecting paths, while styling employs the Playfair Display font and a teal stroke color against a clean background.

May 23, 2020

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as an interactive tree diagram. Using D3 v5’s `tree` layout and `linkHorizontal` path generator, the SVG renders curved links between parent and child nodes, with country names positioned along the hierarchy. The code loads hierarchical JSON data, applies `hierarchy` to structure it, and styles text with serif fonts, varying font size by depth. The visualization relies on D3’s selection, zoom, and JSON loading APIs, with static rendering of all nodes and links.

May 23, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that renders the text “Hello HTML” in large, centered type. It uses a plain HTML document with embedded CSS to set the body text alignment and font size. The page relies solely on standard HTML and CSS, with no external libraries or JavaScript. The styling is defined inline within a `<style>` tag in the document’s head.

Mar 17, 2020