jessand4

@jessand4·7 public vizzes

Mass School District Boundaries

This visualization maps school district boundaries across Massachusetts using a topojson-derived GeoJSON dataset. Built with React, the app loads geographic data via d3.json and converts it with topojson.feature, then renders each district path using d3.geoPath. The map uses an inverted y-axis via geoIdentity’s reflectY method, with districts drawn in flat gray and teal strokes against a 960x500 SVG canvas.

Nov 18, 2019

Loading thumbnail…

Multiple Views with Fast Brushing

This visualization displays global migration incidents with a bubble map showing the total number of dead and missing migrants per city, filtered by a linked date histogram below. Brushing a time range in the histogram updates the map’s circles in real time, using React’s `useState` and D3’s `brushX`, `scaleSqrt`, `geoNaturalEarth1`, and `geoPath`. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON, rendered as SVGs.

Nov 18, 2019

Loading thumbnail…

Commute Flows by County

This visualization presents county-to-county commuting flows across the United States, with each rectangle representing the volume of daily commuters between a work county and a residence county, encoded on a logarithmic orange color scale. The arrangement allows viewers to detect regional commuting patterns and compare relative flow magnitudes, though the data appears to show no obvious geographic hotspots. Built with the Vega-Lite API (using `vl.markRect`, `vl.x().fieldN()`, and `vl.color().fieldQ()`), it loads a CSV via `d3.csv`, renders as an SVG through Vega-Lite’s automatically generated specification, and includes tooltips for exact flow values. The chart uses a custom dark theme from `config.js` and scales to fit the window size.

Nov 17, 2019

Loading thumbnail…

Vega-Lite API Template

This example visualizes commuting flows, plotting the relationship between the margin of error and the commuting flow volume for different work counties. It uses a scatter plot with circles whose size is also encoded by commuting flow, and both the x- and y-axes use a logarithmic scale. The visualization is built programmatically with the Vega-Lite API, which registers the Vega and Vega-Lite libraries, and it renders to an SVG canvas. The data is loaded from a remote CSV file using d3’s `csv` function, and the chart includes interactive tooltips provided by the vega-tooltip handler.

Nov 17, 2019

Loading thumbnail…

World Countries Tree

This visualization shows a hierarchical tree of world countries, organized by continent and sub-region. The tree layout displays each country as a text label, with branching paths connecting nations to their regional groupings, using a zoomable interface for navigation. The code uses d3.hierarchy and d3.tree to compute the layout, d3.linkHorizontal for the connecting paths, and d3.zoom for panning and scaling. Data comes from a nested JSON file, and the SVG rendering highlights the structure with teal links and Playfair Display typography.

Nov 17, 2019

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data, displaying restaurant categories (fast food, pizza, Mexican, etc.) across multiple cities, with each arc segment representing a portion of the total. The visualization uses D3 v5's hierarchical layout and partition functions to compute the arc geometry, rendering the sunburst as SVG paths with animated transitions. Clicking on a segment zooms into that subtree, using `d3.interpolate` and `transition.attrTween` to smoothly animate the arc angles and radii. The data originates from the Observable `@observablehq/flare` dataset, loaded dynamically via the Observable standard library's `require` function.

Nov 17, 2019

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes hierarchical data, showing the proportion of food categories across multiple cities. The data is loaded from the `@observablehq/flare` dataset and rendered as an SVG with animated transitions. Users can click on arcs or the central circle to zoom in and out. The code uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and `d3.scaleOrdinal` with an interpolated rainbow color scheme, along with `transition.attrTween` for smooth updates.

Nov 17, 2019