Chris Bushong

@CTBushong·5 public vizzes

Svelte D3 Starter

This example demonstrates a minimal Svelte application that uses two-way data binding to display the sum of two numeric inputs in real time. It shows how Svelte’s reactive declarations update the displayed calculation whenever either input changes. The code imports a Svelte component from `src/App.svelte` and mounts it to the DOM via `new App({ target: document.body })`. The component uses Svelte’s `bind:value` directive on the number inputs, while the project includes D3 v7.1.1 as a dependency but does not invoke any D3 functions here.

Nov 9, 2021

Loading thumbnail…

US Redomestication States

This interactive choropleth map shows the prevalence of HIV/AIDS across US states for the year 2017, with darker orange-red fills indicating higher infection rates and gray for states with missing data. The visualization uses React components to render an SVG, with d3.geoAlbersUsa and d3.geoPath projecting TopoJSON state boundaries from the us-atlas dataset. Color encoding relies on d3.scaleSequential with an interpolateYlOrRd scheme, while HIV prevalence data comes from an IHME CSV file joined to state codes via ISO-3166 lookup.

Sep 20, 2021

Loading thumbnail…

US Redomestication Map

This interactive map of the United States visualizes state-level data regarding laws on entity redomestication and conversion. Using a sequential color scale from the `d3.sequential` API, each state is shaded according to its prevalence measure, with states lacking data rendered in gray. The map is built with `d3.geoPath` and `geoNaturalEarth1` projections, featuring graticules and interior state boundaries. Data for the visualization originates from a CSV file on HIV prevalence, while state boundaries are sourced from a TopoJSON file. The application is implemented in React using hooks like `useState` and `useEffect` to manage data loading.

Sep 16, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower in the auto-mpg dataset, plotting points as a scatterplot with opacity to reveal density. Built using the Vega-Lite API, it defines a point mark with quantitative fields for both axes and tooltips showing car names. The code registers Vega and Vega-Lite, fetches CSV data via d3.csv, and renders the chart as SVG, applying custom axis and label styling from a config object.

Jul 8, 2021

Loading thumbnail…

Chris Fork of Hello HTML

This example shows a simple SVG face composed of a yellow circle for the head, two smaller circles for eyes, and a black outline, fixed at the center of a 960 by 500 canvas. The visualization is built with a bare HTML page that loads React and ReactDOM from a CDN, but the drawing itself is achieved directly through SVG markup in the `index.html` file, with no dynamic data or interaction. The accompanying `index.js` merely logs the React object, and a YouTube video is embedded in the README for reference. The rendering relies on static SVG elements rather than any charting or data-processing library.

Jun 13, 2021