Gary Ditsch

@garyditsch·12 public vizzes

Opo Tx Data Map

A map of the United States shows circles sized by the number of opioid treatment centers in each city, using a square-root scale. The geographic boundaries come from the US Atlas TopoJSON, while city coordinates are loaded from a CSV. The visualization uses `d3.geoAlbersUsa` and `d3.geoPath` to render state paths, and `d3.scaleSqrt` to map center counts to circle radii, all drawn in SVG within a React component.

Mar 21, 2021

Loading thumbnail…

Opo Cities

The visualization depicts the geographic distribution of "opo" cities across the United States, with a dark landmass and circles sized proportionally to the number of centers in each city. Using React with D3 v5, it renders an Albers equal-area projection via `d3.geoPath`, plotting map features from the US Atlas TopoJSON and city coordinates from a CSV file. The circles’ radii are scaled by the square root of the `Centers` attribute, providing a clear comparison of city significance.

Mar 20, 2021

Loading thumbnail…

usmap

This example displays a choropleth-style map of the United States, drawn as gray state boundaries on a dark background. It uses the geoAlbersUsa projection to render the states as SVG paths, with the geographic data loaded from the us-atlas TopoJSON file. The React component fetches the data via useData, converts TopoJSON to GeoJSON with the feature function from topojson, and passes it to Marks, which generates the paths using d3.geoPath.

Mar 20, 2021

Loading thumbnail…

Scatterplot Transplant Data

A scatterplot displays the relationship between the number of deceased and living organ donors across US hospitals, with each circle representing a hospital and hovering reveals its name. The visualization uses React with D3 v6 for data loading and scales, specifically `d3.csv` to fetch the kidney transplant dataset and `scaleLinear` for both axes. SVG rendering handles the marks and axes, with gridlines drawn from `d3.ticks()` through custom `AxisBottom` and `AxisLeft` components. The chart encodes the two donor categories on separate linear scales, with axes labeled accordingly.

Mar 2, 2021

Loading thumbnail…

Style Refactored Transplant Bar

This bar chart displays kidney transplant totals by hospital, using horizontal bars to compare values across institutions. The visualization is built with React and D3 v6, leveraging `scaleBand` and `scaleLinear` for axes, while data is loaded from a CSV via `useData` hook. The chart filters to hospitals with at least 250 total transplants, with bars colored teal and including hover tooltips. SVG rendering handles marks and axis ticks, with styled gridlines and labels for readability.

Mar 2, 2021

Loading thumbnail…

Refactored Transplant Bar

A horizontal bar chart ranks the first five hospitals by total kidney transplants performed, combining counts of deceased and living donors. The visualization uses React to render SVG elements, with D3 v6 handling scales and axes: `scaleBand` positions hospital names on the y-axis while `scaleLinear` maps total counts to bar widths. Data loads from a CSV file via D3’s `csv` parser, and custom Axis components generate tick labels.

Mar 1, 2021

Loading thumbnail…

Transplant Bar

This visualization displays the total number of kidney transplants (combining deceased and living donors) for the top 20 hospitals from a CSV dataset. It uses a horizontal bar chart built with React and D3 v6, employing `scaleBand` for the categorical hospital names on the y-axis and `scaleLinear` for the numeric count on the x-axis. The SVG rendering includes axis ticks and gridlines, with bar widths proportional to transplant totals. Data is loaded asynchronously via `d3.csv` and parsed in a row function before being rendered.

Mar 1, 2021

Loading thumbnail…

Transplant

This example uses React and D3 v6 to load and display a CSV file of kidney transplant data. The page initially shows a loading message, then renders the total number of records from the dataset using a simple state update triggered by `d3.csv`. The visualization is minimal, presenting the data count as plain text rather than a chart, and demonstrates basic asynchronous data fetching with React hooks and D3’s CSV parser. The code relies on `d3.csv` and React’s `useState` and `useEffect` hooks.

Feb 28, 2021

Loading thumbnail…

Loading Data into React

A React application demonstrates asynchronous data loading by fetching a CSV file of CSS named colors via the `d3.csv` method. The interface displays a simple counter showing the number of data rows once loaded, with a fallback "Loading" message while the network request is pending. The example uses React's `useState` and `useEffect` hooks to manage state and trigger the D3.js file retrieval, then renders the result through `ReactDOM.render`. The minimal page imports React 17 and D3 6 from CDNs to integrate the ecosystem.

Feb 28, 2021

Loading thumbnail…

Parsing with D3

This example demonstrates how D3 parses CSV data from an external URL and logs the resulting JavaScript objects to the browser console. The page displays only the number 13 in a large font, while the actual parsing work happens quietly in the background. Using the `d3.csv()` method from D3 v6, it fetches a dataset containing CSS named colors from a GitHub gist and converts each row into an object. The code then outputs the parsed array via `console.log(text)`, showing the transformation from raw text into structured data without any visual rendering.

Feb 27, 2021

Loading thumbnail…

Tracking Mouse Lesson

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. The visualization demonstrates mouse-tracking interaction built with React and D3.js, where React state manages the cursor coordinates and re-renders the circle’s `cx` and `cy` attributes. The `onMouseMove` event handler captures client coordinates within an `<svg>` element, while D3 v6 is loaded but not directly used in the logic, and React’s `useState` and `useCallback` hooks support the responsive update cycle.

Feb 27, 2021

Loading thumbnail…

Smiley Face w/ SVG & D3

This example shows a smiley face composed of overlapping SVG shapes, assembled declaratively in React. The face includes a yellow background circle, two black eyes, and a mouth, all positioned relative to a center point. The code builds the mouth using d3’s `arc` generator with custom radius and angle settings, while the React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) render the SVG elements. Using d3.v6 and React 17, the visualization demonstrates reusable component composition and D3’s path generation for a simple, static graphic.

Feb 27, 2021