Keith Miller

@keith44·7 public vizzes

ICE-7 Resusable Charts

This example demonstrates a reusable D3 chart library applied to a Spotify song dataset, showing four distinct visualizations: a scatter plot of energy versus danceability, a pie chart of popularity groups, and line and area charts displaying average song popularity by release year. The code constructs each chart as a configurable function with getter/setter methods, using D3 v6 APIs such as `scaleLinear`, `axisBottom`, `axisLeft`, `rollup`, `mean`, `pie`, `arc`, and `area` to compute scales, aggregate data, and generate SVG paths. Charts are rendered into separate SVG elements with custom margins, titles, and axis labels.

May 10, 2026

Loading thumbnail…

dash

This dashboard visualizes the relationship between e-scooter trips and crashes in Denver using a Leaflet map and D3.js charts. The map overlays crash markers and geojson usage segments colored by a linear scale, while a separate heatmap shows crash counts by hour and weekday, and a bar chart displays annual crash counts with a crash-to-trip ratio line. User controls filter data by year and quarter. The visualization calculates relative risk based on visible markers and usage totals, with all SVG charts rendered using D3 v7's `scaleBand`, `scaleLinear`, and `rollups` aggregation.

Apr 25, 2026

Loading thumbnail…

ICE - 9

This example presents a gallery of static charts for the ICE-9 dataset, including stacked area charts, line charts, grouped and stacked bar charts, and scatter plots. The visualization uses Vue.js to render a single-page interface with Bootstrap navigation linking to each chart type. The charts are pre-rendered PNG images displayed within the HTML pages, with bar and scatter charts embedded via iframes. The page structure relies on Bootstrap's grid and list-group components for layout and navigation styling.

Apr 18, 2026

Loading thumbnail…

ICE-8 Network

This zombie evacuation network uses D3.js v7 to render an interactive SVG force-directed graph of evacuation routes between nine locations. Each node is colored by location type—such as safe zones, medical facilities, and danger areas—with a legend identifying the categories. A `d3.forceSimulation` with link distance and charge forces positions the nodes and edges drawn as lines. The graph highlights potential emergency pathways and resource distribution across the network.

Apr 12, 2026

Loading thumbnail…

ICE 8 Spatial Data - Tree

This example shows the hierarchical structure of the 82nd Airborne Division as a horizontal tree layout, with colored nodes indicating depth from the root division down to individual companies. It uses D3 v7’s `d3.stratify()` to convert parent-child data rows into a hierarchy, then applies the `d3.tree()` layout to position nodes. SVG circles and text labels are rendered via data joins, while `d3.linkHorizontal()` generates the connecting paths.

Apr 12, 2026

Loading thumbnail…

ICE-8 Map

This example visualizes average alcohol consumption per U.S. state using a choropleth map, where each state is colored on a red-yellow-green gradient according to its average number of drinks. The map is rendered with D3 v7 and topojson-client, using the `d3.geoAlbersUsa` projection and `d3.geoPath` to draw state boundaries from US Atlas TopoJSON data. Alcohol values from a CSV file are joined to states via `d3.index`, and a sequential color scale (`d3.scaleSequential` with `d3.interpolateRdYlGn`) maps values to colors, with a gradient legend included.

Apr 12, 2026

Loading thumbnail…

ICE-6 Encoding Data with Marks and Channels Scatter

This scatter plot visualizes the relationship between loan duration and credit amount, with each point representing an individual credit record. The visualization uses D3 v7 to load CSV data from a remote GitHub gist, map the numeric fields to linear scales, and render circles as marks. The SVG output includes axes generated with `d3.axisLeft` and `d3.axisBottom`, along with descriptive labels and a title. All circles are uniformly filled in forest green, encoding the data solely through spatial position along the x and y channels.

Mar 9, 2026