mingchao080910

@mingchao080910·3 public vizzes

Document

This example analyzes British shipping routes and their environmental impact on major cities. It presents four interactive SVG visualizations: a map of the UK with city pollution levels, an arc chart ranking ship categories by sailing mileage, a line chart showing hourly sailing distances, and a scatter plot relating trip duration to distance. The code loads AIS track data and Emission data, using D3 modules such as `d3.nest`, `d3.sum`, and `d3.scaleBand` for aggregation, plus `d3.arc`, `d3.line`, and `d3.geoPath` for rendering, with transitions animating the arc chart.

Mar 29, 2020

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economy category using an ordinal color scale with a spectral scheme. The visualization supports zooming and panning through d3.zoom, while d3.geoNaturalEarth1 and d3.geoPath render the geographic features from TopoJSON world-atlas data joined with TSV country metadata. Countries display a tooltip with their name and economy value on hover, and a custom color legend built with SVG circles and text shows the category mapping.

Mar 26, 2020

Loading thumbnail…

HTML Starter

This example renders a single line of text, “Hello HTML,” centered on the page at an exaggerated 13em font size. It demonstrates the minimal structure of an HTML document with embedded CSS styling, using no external JavaScript or data. The `index.js` file is essentially empty, containing only a commented import of `select` from D3, which is not executed. The visualization serves as a bare-bones starting point for web-based projects, showing how static HTML and CSS alone can create a simple visual output.

Mar 16, 2020