Heidi Stockton

@heidi8297·15 public vizzes

Portland Map

This visualization displays the neighborhoods of Portland, Oregon as a choropleth-style map using a conic equal-area projection. The map renders geographic boundaries as SVG paths generated with `d3.geoPath` and `d3.geoConicEqualArea`, with the data loaded as TopoJSON and converted to GeoJSON features using the `feature` function from `topojson`. The React application fetches the neighborhood data from a GitHub Gist and renders each boundary with a consistent teal stroke, creating a clean, minimalist view of the city’s districts.

Dec 8, 2021

Loading thumbnail…

Fork of Multivariate Choropleth Experiments

This map visualizes multidimensional racial demographics for New York census tracts by blending three HCL color scales into a single fill per tract. The code uses d3.geoPath to render TopoJSON shapes, with d3.scaleSqrt encoding population counts for White, Black, and Asian residents into opacity values that are multiplied via color-blend. Hovering reveals precise population counts, while an ordinal legend identifies each race’s base hue. Data comes from the 2018 American Community Survey API, and the visualization supports pan and zoom through d3.zoom.

Dec 8, 2021

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flower samples. Each circle represents a data point, with a tooltip revealing the precise x-axis value on hover. The visualization is built with React and D3 v6, using D3's `scaleLinear` for axis scaling and `extent` to compute the data domain. SVG rendering is used for all graphical elements, including custom axis components that generate tick marks and labels. Data is loaded asynchronously as CSV from a remote URL using D3's `csv` function.

Apr 23, 2021

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of ten countries from the 2019 UN Population dataset. The horizontal bars use a teal color scheme with a clean grid and axis labels. Built with React and D3 v6, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, with SVG rendering. Axis components are modularized, and each bar includes a tooltip showing the population value using D3's `format` function.

Apr 23, 2021

Loading thumbnail…

Refactored Bar Chart

This bar chart visualizes the population of the top 10 countries for the year 2020, sourced from a United Nations dataset loaded via D3’s `csv` utility. The chart uses React state management with the `useState` and `useEffect` hooks to asynchronously fetch and parse the data. Rendering occurs as SVG elements, with custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generating the axes and bars using D3’s `scaleBand` and `scaleLinear` for positioning and sizing.

Apr 23, 2021

Loading thumbnail…

Axes with React and D3

This example shows a horizontal bar chart of UN population data for 2020, displaying the top ten countries by population. The visualization uses React state to manage the loaded dataset and renders SVG elements through React components. The code leverages D3 utilities `csv` for data loading, `scaleBand` and `scaleLinear` for scaling, and `max` for domain calculation. Axes are drawn manually with SVG `line` and `text` elements positioned using scale outputs. The chart appears after a brief loading state, with bars, x-axis ticks, and y-axis country labels rendered from the fetched CSV.

Apr 22, 2021

Loading thumbnail…

The Margin Convention

This visualization displays a horizontal bar chart of the top 10 most populous countries for 2020, using data from the UN Population 2019 dataset loaded via D3’s `csv` utility. It leverages React’s `useState` and `useEffect` hooks to manage asynchronous data fetching and rendering. The chart maps country names to the y-axis using `d3.scaleBand` and population values to the x-axis with `d3.scaleLinear`, drawing SVG `<rect>` elements within a translated group that applies a 20-pixel margin on all sides.

Apr 22, 2021

Loading thumbnail…

Sad Population Chart

This chart displays the top 10 most populous countries for 2020 as horizontal bars, with each bar’s length proportional to its population. The visualization uses a React component to manage state and load data from a CSV via `d3.csv`, parsing the `Population` column. The layout is computed with `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering rectangles in SVG. The code demonstrates a simple integration of D3 scale utilities with React’s `useState` and `useEffect` hooks for data fetching.

Apr 22, 2021

Loading thumbnail…

Pie chart using data loaded with React and D3

This example displays a pie chart where each slice represents a named CSS color from a dataset loaded via `d3.csv`. The chart renders as SVG using React components, with `d3.pie()` computing the arc angles and `d3.arc()` generating the path shapes. React state manages the asynchronous data loading, and each slice’s fill color directly uses the `RGB hex value` from the CSV data.

Apr 22, 2021

Loading thumbnail…

Loading Data with React and D3 (attempt 2)

This example demonstrates how to load a CSV dataset of named CSS colors and render each color as a small rectangle using React components. The code uses D3’s `csv` utility to fetch and parse the data from a GitHub gist, then stores it in React state via the `useState` and `useEffect` hooks. Once loaded, the `data.map` function generates one div per color with its background set to the `RGB hex value` column. A loading message appears until the asynchronous data fetch completes.

Apr 22, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from the UCI Machine Learning Repository, plotting longitude and latitude coordinates while encoding magnitude type through color and gap distance through circle size. Point opacity is set to 0.5 with a fixed size of 300 pixels, and hovering reveals place names via tooltip. The visualization is constructed programmatically using the Vega-Lite API, which composes specifications through chained method calls. Data loading relies on d3.csv, while rendering uses Vega-Lite’s SVG renderer with custom configuration for axis styling and label fonts. The visualization dynamically fits the browser window dimensions upon load.

Apr 22, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load external data into a React application using D3 utilities. It fetches a CSV file containing named colors from a GitHub gist via `d3.csv`, then stores the resulting promise data in React state with the `useState` hook. The app renders the raw data object to the screen rather than visualizing it, and the stripped-down SVG markup in `index.html` suggests a possible future plot. It uses React 16.9, D3 v6, and SVG rendering, with dynamic sizing based on `window.innerWidth` and `window.innerHeight`.

Apr 21, 2021

Loading thumbnail…

Loading and Parsing CSV files

This example demonstrates how to load and parse CSV data from a remote URL using D3.js v6. It fetches a CSV file containing named color values and parses it into JavaScript objects with `d3.csvParse`. The page displays “Hello HTML” in large text while the parsed data is logged to the browser console, showing the transition from raw text to structured data. The implementation uses the Fetch API with an async/await helper function, highlighting a cleaner alternative to nested promise callbacks.

Apr 21, 2021

Loading thumbnail…

Mouseover interaction

A circle follows the mouse cursor across the screen, updating its position in real time. Built with React and rendered as SVG, the component tracks pointer movement via the `onMouseMove` event handler, using React hooks `useState` and `useCallback` to manage and update the mouse coordinates. The circle’s `cx` and `cy` attributes are bound to the current mouse position, producing a direct, responsive interaction without any animation or transition logic.

Apr 21, 2021

Loading thumbnail…

Smiley Face part 1

Five identical smiley faces are rendered in a row, each composed of SVG circles and an arc-based mouth. The faces are built from reusable React components, with `BackgroundCircle` for the yellow head, `EyeCircle` for the black eyes, and `Mouth` using `d3.arc` to generate the smile path. The `FaceContainer` centers each face within an SVG of fixed dimensions, while a single `Face` component parameterizes offsets, radii, and stroke widths. The code maps over an array of five items to duplicate the face, demonstrating component reuse with React and D3.

Apr 20, 2021