Skip to main content
Log in
C

Catherine-Yu

@Catherine-Yu·15 public vizzes

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, with each city represented by a distinct colored line. The visualization uses D3 v4’s SVG rendering, parsing a TSV file with `d3.tsv` and `d3.timeParse`. It encodes time on the x-axis via `d3.scaleTime`, temperature on the y-axis with `d3.scaleLinear`, and city categories using `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart includes interactive zooming through `d3.zoom` and clickable city labels that toggle line visibility.

Mar 24, 2017
Loading thumbnail…

Radar Chart

This example presents five radar charts, one per San Francisco neighborhood, comparing the proportions of emergency call types: potentially life-threatening, alarm, fire, non-life-threatening, and other. Each chart plots a single series of data points, drawn as an SVG polygon using custom D3 functions, with axes and level rings. The code builds each radar chart from CSV data parsed in JavaScript, applying different colors per neighborhood and enabling hover interactions that highlight the focused area while dimming others. The implementation relies on D3 v3 for selections, transitions, and mouse events.

Mar 19, 2017
Loading thumbnail…

fresh block

This visualization compares San Francisco dispatch call data across five neighborhoods using a series of radar charts. Each chart isolates a single region, plotting the count of calls by type—such as Alarm, Fire, and Non-life-threatening—on axes radiating from the center, with larger shapes indicating higher frequencies. The charts are rendered as SVG using the D3.js v3 library’s radar-chart module, with custom styling applied via CSS. The static charts are generated from hardcoded CSV data, with each neighborhood assigned a distinct color to aid comparison.

Mar 17, 2017
Loading thumbnail…

radar-char-new

This radar chart displays emergency call data across five San Francisco neighborhoods, breaking down incidents by type such as potentially life-threatening, alarm, fire, and non-life-threatening calls. The visualization uses a custom `RadarChart` module built with d3.v3, where each neighborhood’s values are mapped to axes with the `RadarChart.draw` function. Data is parsed from comma-separated strings into series, and the chart’s color and dimensions are configured through `RadarChart.defaultConfig`. Each radar chart is rendered into separate div containers, with shapes colored distinctly for comparison.

Mar 17, 2017
Loading thumbnail…

radar-char-new

This example displays a radar chart comparing emergency call categories—potentially life-threatening, alarm, fire, non-life-threatening, and other—across several San Francisco neighborhood regions (TI, NE, SE, NW, SW). The code builds each polygon from hardcoded CSV-style string data, parsing it into the radar-chart format and drawing it with the custom `RadarChart.draw` API built on d3.v3. Each region is rendered as a separate chart instance with a distinct color, using the radar-chart.js library’s polygon and circle rendering.

Mar 17, 2017
Loading thumbnail…

radar-char-new

This example presents five radar charts comparing emergency call categories—potentially life-threatening, alarm, fire, non-life-threatening, and other—across San Francisco neighborhoods (TI, NE, SE, NW, SW). Each chart displays a single polygon with color-coded areas, using the custom `RadarChart.draw` function and the `RadarChart` library built on D3 v3. The code parses CSV-formatted strings, sets per-chart colors via `RadarChart.defaultConfig`, and renders each region’s data in a separate container with a shared title.

Mar 17, 2017
Loading thumbnail…

Version1

This radar chart compares emergency call types across geographic regions (NE, NW, SE, SW, TI) using five axes with three concentric grid levels. The D3.js v3 visualization renders SVG polygons and circles for each category, with hover interactions that highlight one area while dimming others via CSS class toggles. Data is embedded as a CSV string parsed in JavaScript, and custom tooltips display values on mouseover. The chart uses `RadarChart.chart()` and `RadarChart.draw()` from a reusable module with configurable radius, dimensions, and transition durations.

Mar 16, 2017
Loading thumbnail…

radarChart

This interactive radar chart compares emergency call volumes across five geographic regions (NE, NW, SE, SW, TI) for three call types: Alarm, Fire, and Non-life-threatening, plus Potentially Life-Threatening. Built with D3 v3 and SVG, it renders polygonal areas per category with a hover focus effect that dims non-selected regions. The chart uses six axes with three concentric grid levels, and its tooltip displays exact values on mouseover. Data is embedded as CSV and parsed dynamically within the page.

Mar 16, 2017
Loading thumbnail…

Florida Gun Deaths

A line and area chart displays the annual number of firearm murders in Florida from 1989 to 2015, highlighting a decline through the 1990s and a rise after 2005. The SVG visualization uses d3.scaleLinear, d3.line, and d3.area to encode the data, with axes generated via d3.axisBottom and d3.axisLeft. The chart reads from a CSV file and the code includes labels for the title, source, and annotations.

Mar 3, 2017
Loading thumbnail…

Tier Name vs. Pivot Field Names HeatMap

This heatmap visualizes the relationship between different university tier names and pivot field names, showing how metrics like parental income and child earnings vary across institutional categories. The chart uses a quantile color scale with eight color buckets to represent the proportional values from the s4.csv data file. Built with D3 v4, the visualization renders as an SVG with text labels for both axes, and includes an animation feature that appears to update the heatmap cells. The color scheme transitions from light teal to dark blue, providing a clear gradient for comparing data intensity across the twelve university types and seven metric fields.

Feb 25, 2017
Loading thumbnail…

Tier Name vs. Pivot Field Names HeatMap

This heatmap visualizes the relationship between twelve university tier types and seven metrics concerning children’s and parents’ income and marital status, with each cell’s color intensity representing the proportional value from the `s4.csv` dataset. Using D3.js v4, the SVG chart positions category labels along the axes and renders colored rectangles based on a quantile color scale. The visualization includes a bold title and employs static, non-interactive rendering, with a custom legend and color palette defined in the code.

Feb 24, 2017
Loading thumbnail…

Sheet2

This piece loads a CSV file asynchronously and displays its contents as a pie chart. The code retrieves the data using `d3.xhr` and parses it with `d3.csv.parse`, then assigns category names and numeric magnitudes to each slice. The chart is drawn with `d3.scale.category20` for colors, using a fixed canvas size and outer radius. The title is extracted from the first line of the CSV, and slice labels use a small Arial font.

Feb 13, 2017
Loading thumbnail…

Sheet2

A pie chart displays the distribution of incident counts across police districts, using a categorical color scale and labels positioned around each slice. The chart loads comma-separated data via `d3.xhr`, parses it with `d3.csv.parse`, and renders the visualization using `d3.layout.pie` and `d3.svg.arc`. Text annotations show the district name and magnitude for larger arcs, with the title drawn as an SVG text element. The code relies on D3 v3 and a fixed canvas size of 600 by 600 pixels.

Feb 13, 2017
Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, sourced from a TSV file. Each city’s temperature trend is drawn as a colored line, with points highlighted by circles and extreme values (below 20° or above 89°) labeled directly on the plot. The visualization uses D3 v4 APIs such as `d3.tsv` for data parsing, `d3.timeParse` for date handling, `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal` and `d3.schemeCategory10` for encoding, and `d3.line` with SVG paths to render the series.

Feb 11, 2017
Loading thumbnail…

Multi-Series Line Chart

The visualization displays daily average temperatures over one year for New York, San Francisco, and Austin as three multi-series lines. Each city’s line is encoded by color across a time-scale x-axis and linear y-axis in degrees Fahrenheit. The chart loads a TSV file with d3.tsv, parses dates using d3.timeParse, and computes domains with d3.extent, d3.min, and d3.max. It renders axes via d3.axisBottom and d3.axisLeft, and draws the smoothed lines with d3.line using d3.curveBasis.

Feb 10, 2017