helloHailey-sketch

@helloHailey-sketch·4 public vizzes

map.js

This visualization shows the cumulative growth of China’s protected geographical indication products from 2003 to 2010. A choropleth map fills each province by the number of products registered up to a selected year, while a bubble map overlays proportional circles at province centroids. An interactive slider updates the year, and radio buttons switch between the two views. The code uses d3.json to load GeoJSON, d3.geoPath and d3.geoMercator for map rendering, d3.scaleThreshold and d3.scaleSqrt for color and size encoding, and d3.zoom for panning and zooming.

Nov 20, 2022

Loading thumbnail…

Fork of Choropleth Map

This example displays a choropleth map of China’s provinces, colored by economic group using an ordinal color scale from `d3.scaleOrdinal` and `schemeSpectral`. It renders geographic boundaries with `d3.geoPath` and a natural Earth projection, and supports interactive pan and zoom via `d3.zoom`. A legend, built with custom SVG circles and text, shows category colors. Province data comes from a local `chinaMap.json` file, with additional metadata merged from a TSV source.

Nov 16, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a treemap visualization that recursively partitions a rectangular canvas into nested rectangles, with each leaf node sized proportionally to its value. The code builds the layout manually using D3’s `scaleLinear` for area allocation and `scaleOrdinal` with the `schemeCategory10` color palette. It also computes text dimensions with a custom `visualWidth` helper and uses CSS-based font-family detection for cross-system compatibility. The data is loaded from a local JSON file and rendered as SVG rectangles and text labels.

Oct 16, 2022

Loading thumbnail…

Treemap Example

This treemap visualizes the hierarchical flare dataset, showing relative leaf-node values as nested rectangles colored by their top-level parent category. Built with D3 v6 and rendered as SVG, the example implements a custom treemap layout algorithm via recursive space partitioning that alternates between horizontal and vertical splits. The code uses d3.scaleLinear for proportional sizing, d3.scaleOrdinal with d3.schemeCategory10 for colors, and calculates text visibility based on rectangle dimensions. Data is loaded from a JSON file and displayed with interactive hover effects absent, focusing purely on static hierarchical encoding.

Oct 15, 2022