Jincheng Liu

@jl6298·3 public vizzes

D3 World Map

The map displays the University Diversity Index for each U.S. state, using a white-to-blue color scale where darker shades indicate higher diversity. It is rendered as an SVG using `d3.geoPath` and `d3.geoAlbersUsa` with data from a JSON file. On mouseover, a histogram image for the hovered state appears, which is appended dynamically and follows the cursor. The visualization is built with React, D3 v4, and the `d3-legend` library for the color legend.

Dec 15, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3.js visualization: it renders the text "Hello D3 version 7" in the center of the page using a font size of 13em. The code imports the `select` function from D3 and uses it to select the `body` element, then chains the `.text()` method to set its textual content. The visualization relies on D3 version 7.6.1, loaded from the unpkg CDN in the HTML file, with the main JavaScript logic contained in an external `bundle.js` script.

Dec 15, 2022

Loading thumbnail…

D3 World Map

This D3 world map visualizes university diversity across U.S. states, using a blue-white linear color scale mapped to each state’s diversity index. Hovering over a state with the mouse reveals a histogram image of that state’s diversity distribution. The visualization uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` for rendering state boundaries, and `d3.legendColor` for the color scale, with data from a static JSON file.

Dec 14, 2022