Kelsey Xu

@KelseyXu229·8 public vizzes

Interactive WorldMap

This interactive visualization displays a world map colored by each country’s economy type, using a natural Earth projection. The map supports pan and zoom through `d3.zoom`, with country names and economy values shown as tooltips via SVG `<title>` elements. It loads geographic data from the world-atlas TopoJSON and country names from a TSV file, then maps economy categories to a spectral color scale using `d3.scaleOrdinal`. The code relies on `d3.geoPath` to render countries and a sphere outline, with hover effects changing country fills to red.

Feb 18, 2022

Loading thumbnail…

Untitled

This interactive choropleth map displays neighborhood-level economic and demographic data for a city, with a dropdown menu to select among over 40 metrics such as employment rates, business counts, and commercial property statistics. A checkbox toggles whether downtown neighborhoods are included in the visualization. Hovering over a neighborhood updates a tooltip showing the area’s name and its value for the selected metric. The map is rendered using D3.js with SVG paths from a GeoJSON file, and the dropdown dynamically updates the choropleth’s color scale using the viridis color palette.

Feb 18, 2022

Loading thumbnail…

WorldMap

This example renders an orthographic world map using D3.js and TopoJSON. It loads country boundaries from the world-atlas dataset and projects them onto a sphere with `d3.geoOrthographic()`. The map draws a blue sphere background and light green country paths with thin black strokes using `d3.geoPath()`. The visualization demonstrates basic data joining and SVG path generation from geographic features.

Feb 17, 2022

Loading thumbnail…

Untitled

This interactive choropleth map displays a wide range of socioeconomic indicators for city neighborhoods, selectable via a dropdown menu. Built with React and D3.js, it renders neighborhood polygons as SVG paths, with colors encoding the chosen variable. A tooltip reveals the neighborhood name and its exact value on hover. A checkbox toggles the inclusion of the downtown area. The map data is visualized from a linked dataset, allowing for dynamic exploration of employment, education, and business statistics.

Feb 17, 2022

Loading thumbnail…

Interactive World Map

This interactive visualization displays kernel density estimates of iris sepal length distributions for three iris species, with a dropdown menu to switch between species. The d3.js code loads data from a CSV file, computes density curves using kernel density estimation, and renders them as smooth SVG paths. A transition animates the curve when a new species is selected.

Feb 17, 2022

Loading thumbnail…

Temperature

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses d3.csv to load the dataset, then renders a smooth curved line with d3.line and curveBasis. Time and temperature scales are created with d3.scaleTime and d3.scaleLinear, while d3.axisBottom and d3.axisLeft generate the axes. The chart includes labeled axes for Time and Temperature, grid lines via tickSize, and a title, all drawn as SVG elements within a 960x500 viewport.

Feb 12, 2022

Loading thumbnail…

Organization Graph

This example, realized with React and rendered as SVG, visualizes an organization graph of arts and community organizations. The graph layout is computed using `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces. Node size reflects the degree of connectivity, and colors are assigned from a custom palette. The `drag` interaction lets users reposition nodes, overriding the simulation’s output. Data is defined in the `data.js` module, specifying nodes, links, and link distances.

Feb 12, 2022

Loading thumbnail…

Organization Network Graph

This example shows a simple organization network graph with three nodes—Alice, Bob, and Carol—connected by two links. The graph uses a force-directed layout to position the nodes and edges, with circles representing people and lines representing connections. Built with React and D3 v7, the visualization employs `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute positions, while SVG elements are updated on each simulation tick. The data is hardcoded in the source, and rendering occurs entirely through SVG.

Feb 11, 2022