Rona Xu

@rona-x·3 public vizzes

D3 Page Template

This example demonstrates a simple SVG line chart template using D3.js, where a red polyline connects six data points across a 500x400 canvas. The visualization shows a basic yet effective pattern for plotting series data, with points positioned at varying y-coordinates to create a descending then ascending trend. The code relies on D3 v7 loaded via CDN and constructs the line using an SVG path element with the `d` attribute, specifying coordinates through a path string. The `stroke` and `stroke-width` attributes control the visual styling, while `fill="none"` keeps the area under the curve transparent. This serves as a minimal starting template for building more complex D3 visualizations in plain HTML.

Dec 20, 2021

Loading thumbnail…

NYC Hate Crime Analysis

This interactive bar chart visualizes NYC hate crime counts by bias type, with buttons to switch between 2020 and 2021 data. The visualization uses D3.js v6 with scalable vector graphics (SVG) and animated transitions to update bar heights and axes smoothly. Data is loaded asynchronously from a CSV file hosted on GitHub, and the chart maps bias categories to the x-axis using `d3.scaleBand` while the y-axis uses `d3.scaleLinear` to represent counts. A custom `update()` function handles data parsing and re-rendering.

Dec 13, 2021

Loading thumbnail…

Untitled

This interactive bar chart displays bias-motivated incidents in NYC for 2020 and 2021, with buttons toggling between the two years. The visualization uses D3.js v7 within an HTML page, rendering as an SVG. It fetches CSV data from a GitHub repository and animates bar height, position, and axis transitions over one-second durations using D3’s scaleBand, scaleLinear, and transition methods. The chart highlights changes in incident counts across bias categories.

Dec 12, 2021