Sophie Engle

@sjengle·4 public vizzes

SF Arrests

This example displays arrest incidents from the San Francisco Police Department dataset for the most recent week, mapped over Analysis Neighborhoods and streets. It uses a Conic Equal-Area projection and a D3 geo path generator to render the basemap and arrest locations as circles. The visualization highlights neighborhoods on mouseover, with tooltips showing names. The code loads GeoJSON from SODA API endpoints and d3.json for data, while the styling is handled by CSS.

Mar 25, 2020

Loading thumbnail…

Gun Deaths in Florida

This visualization shows the number of firearm-related murders in Florida from 1989 to 2016, highlighting a noted increase after the enactment of the "Stand Your Ground" law in 2005. The data is sourced from the Florida Department of Law Enforcement. The graphic combines a red area chart with a black line and circular markers, using `d3.area`, `d3.line`, and `d3.axisBottom` to render the SVG. The code draws axes, a header, and a footer, with the area, line, and points positioned via `translate` functions.

Feb 21, 2020

Loading thumbnail…

Mobility Rate Bubble Chart

This bubble chart 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 average cohort size, while color indicates trends in parental income distribution. Built with D3.js v5 and Vue, it uses d3.scaleLinear, d3.scaleSqrt, d3.scaleDiverging, and d3-legend for axes and legends. Data from Opportunity Insights is filtered and sorted, with average reference lines and labeled bubbles for select universities.

Feb 12, 2020

Loading thumbnail…

Letter Count Bar Chart

This example demonstrates a bar chart that visualizes the frequency of each letter in a text excerpt from the Peter Piper nursery rhyme. It asynchronously loads the text file via `d3.text`, counts letters using JavaScript `Map` objects, and renders the chart with SVG rectangles. The visualization uses D3 v5 scales (`scaleLinear`, `scaleBand`) and axes (`axisBottom`, `axisRight`) to map counts to bar heights, with interactive updates triggered by `keyup` events on a textarea.

Jan 27, 2020