cj-luo

@cj-luo·6 public vizzes

SF Arrests

This map of San Francisco shows arrests from the last week, with each incident represented as a symbol over a basemap of neighborhood boundaries and streets. It uses the D3 v5 library with a Conic Equal-Area projection and renders everything as SVG. The code loads geographic data from GeoJSON endpoints and fetches live arrest data from the SODA API, filtering for entries with a resolution starting with "Cite or Arrest". Interactive tooltips reveal neighborhood names, and hovering highlights the corresponding district on the map.

Apr 6, 2020

Loading thumbnail…

SF Arrests

This visualization maps arrests in San Francisco over the past week, plotting incidents as circles atop neighborhood boundaries and streets. It uses a Conic Equal-Area projection with d3.geoPath to render the basemap and arrest points from the city’s SODA API, filtered to citations or arrests. Hovering a neighborhood highlights its outline and shows its name, while a details panel displays data for selected incidents. The code relies on D3 v5 for loading GeoJSON and JSON data, and for handling interactive mouse events.

Apr 5, 2020

Loading thumbnail…

SF Arrests

This visualization shows San Francisco arrest incidents from the past week, mapped by neighborhood with streets for context. Arrests appear as semi-transparent circles, and hovering over a neighborhood highlights its boundary and displays its name. The map uses a conic equal-area projection and is rendered with SVG paths via `d3.geoPath`. It loads GeoJSON basemaps and street data from Socrata APIs, while arrest records are fetched dynamically from the SODA API using date-range and resolution filters. Interactions include mouseover highlighting and tooltips.

Mar 27, 2020

Loading thumbnail…

Gun Deaths in Florida

This visualization re-creates and redesigns a chart of gun deaths in Florida, showing the annual count of murders committed with firearms from 1989 to 2016, with a note marking the enactment of the “Stand Your Ground” law in 2005. The code uses D3.js v5 with SVG rendering, employing `d3.area()`, `d3.line()`, and `d3.axisBottom()`/`d3.axisLeft()` to draw the chart layers. Data comes from the Florida Department of Law Enforcement’s UCR offense data, filtered and mapped through a CSV file. Styling uses custom CSS with black strokes, white fills, and a Times New Roman font.

Feb 21, 2020

Loading thumbnail…

Mobility Rate Bubble Chart

This bubble chart visualizes the relationship between median parent household income and mobility rate for California universities, with bubble size representing average cohort size and color indicating income trend changes. The visualization uses D3 v5's scale functions including `d3.scaleSqrt` for bubble sizing and `d3.scaleDiverging` with `d3.interpolatePiYG` for coloring. It leverages the d3-legend library for color and circle legends. The data comes from Opportunity Insights' Mobility Report Cards dataset, filtered to California institutions, with labels highlighting select universities.

Feb 14, 2020

Loading thumbnail…

Mobility Rate Bubble Chart

This visualization shows the mobility rate of universities in California, plotting median parent household income against the percentage of students who move from the bottom to the top income quintile. Circle size represents the average number of students per cohort, while color indicates the trend in parents from the bottom income bracket. The example uses the d3-legend library by Susie Lu for its legends and filters the Opportunity Insights dataset to the state of California, rendering the chart with SVG elements and D3.js v5 scales.

Feb 14, 2020