phamiter253

@phamiter253·9 public vizzes

SF Arrests

This example maps arrests in San Francisco over the past week, using a conic equal-area projection to display neighborhood boundaries and street lines as a basemap. Arrest locations are drawn as circles, with neighborhood highlighting and tooltips on hover. The code loads basemap and street GeoJSON from SODA endpoints, queries live arrest data via d3.json, and renders everything with d3.geoPath into SVG.

Mar 27, 2020

Loading thumbnail…

Untitled

This interactive stacked bar chart displays survey data across U.S. states for two years, showing proportions within three rating categories. A dropdown menu lets viewers switch between 2017 and 2018, triggering animated transitions of the bars, axes, and total-value labels. Built with D3 v5, the visualization uses `d3.stack()` to generate the layered series, `d3.scaleBand()` and `d3.scaleLinear()` for positioning, and SVG transitions with `transition.duration()` for smooth updates.

Mar 24, 2020

Loading thumbnail…

ColorIsFake Midterm

This visualization compares average emergency response times across San Francisco neighborhoods, separating alarm and fire incidents by color-coded bundles. Animated stacked bars update when a user selects a year from the dropdown or toggles sorting. Built with D3 v5, it uses `d3.nest()` and `d3.layout.stack()` to aggregate CSV data, `d3.scaleOrdinal` for the categorical color mapping, and SVG transitions for the year-driven updates.

Mar 24, 2020

Loading thumbnail…

Stack Chart Template

This stacked bar chart visualizes cause-of-death data by age group in selected South African countries, sourced from WHO data. It uses D3.js (version 3.5.6) with SVG rendering and animation. The chart displays either raw death counts or percentages, toggled via radio buttons. It leverages D3’s layout stack, ordinal and linear scales, and axes APIs, with rectangles transitioning smoothly between the two modes.

Mar 24, 2020

Loading thumbnail…

Untitled

This interactive stacked bar chart visualizes fire and alarm response times across San Francisco neighborhoods from 2012 to 2019. A dropdown menu switches between years, and a checkbox toggles sorting by total average response time or alphabetical order. Built with D3 v5 in a React-free HTML page, it uses `d3.csv`, `d3.stack`, `scaleBand`, `scaleLinear`, and `scaleOrdinal` to render SVG rectangles and total-value labels. Axes transition smoothly via d3 transitions, while the data comes from a CSV file with `Group`, `Neighborhoods`, `Year`, and `Avg` columns.

Mar 24, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using a horizontal bar layout. Built with React and D3 v5, the visualization loads United Nations population data via `d3.csv`, sorts by the 2020 estimate, and renders as an SVG. The code constructs band scales for categories and linear scales for numeric axes, with custom axis components for ticks and labels. Bar marks include tooltips formatted with `d3.format`. The design uses the Poppins font and a teal color scheme for a modern aesthetic.

Mar 18, 2020

Loading thumbnail…

Mobility Rate Bubble Chart

This chart shows California universities’ mobility rates—the percentage of students from the bottom income quintile reaching the top—versus median parent household income. Circle size represents average cohort count, and color indicates the change in the share of parents from the bottom 40% of income distribution between 1980 and 1991. Built with D3 v5 in Vue, it uses SVG rendering, d3.axisBottom and d3.axisLeft for scales, and d3-legend for color and size legends. Data comes from Opportunity Insights, filtered to California institutions.

Feb 28, 2020

Loading thumbnail…

Letter Count Bar Chart

This interactive bar chart displays the frequency of each letter in the text of the “Peter Piper” nursery rhyme, loaded asynchronously via `d3.text()`. Users can edit the text in a textarea to update the counts live, with the visualization re-rendering on each keyup event. The chart uses D3 v5 scales (`d3.scaleLinear` for counts, `d3.scaleBand` for letters), SVG rectangles for bars, and axes (`d3.axisBottom`, `d3.axisRight`). Letter counting is implemented in JavaScript with a `Map` object, and updates use D3’s data join.

Feb 28, 2020

Loading thumbnail…

Gun Deaths in Florida

A rough re-creation of a controversial chart showing the number of murders committed using firearms in Florida from 1989 to 2016. The visualization uses an area chart for total firearm deaths, a line for the trend, and annotations marking the 2005 "Stand Your Ground" law. Built with D3 v5 and rendered as SVG, it loads data from a CSV file, uses `d3.area`, `d3.axisTop`, and `d3.axisLeft`, and draws circles and heavy axis lines. Data originates from the Florida Department of Law Enforcement.

Feb 21, 2020