HW1 Chart3

HW1 Chart3

100% match

HW1 Chart3

This chart displays the number of calls per hour over a 24-hour period, using an area chart to emphasize the volume distribution. The data is loaded from a tab-separated file and mapped to a linear scale for both the x-axis (hour) and y-axis (call count). The visualization uses D3 v4 to render SVG elements, including a filled area path and a line path, with gridlines generated via custom axis functions. The chart is titled “PD Calls Per Hour” with axis labels for hour and number of calls, with the area filled in light steelblue and the line stroke in steelblue.

87% match

HW1 Chart4

A line chart displays the number of police department calls per day in the Southern District for December, with day on the x-axis and call count on the y-axis. The chart includes both horizontal and vertical gridlines and a highlighted title. Built with D3 v4, it loads tab-separated data via `d3.tsv`, maps values through `d3.scaleLinear`, and renders the series as an SVG path using `d3.line`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`.

86% match

HW1 Chart1

This bar chart shows the number of 911 calls per police district in San Francisco, with districts ordered alphabetically along the x-axis and call counts on the y-axis. Each bar is rendered as an SVG rectangle using D3 v4’s data join, with a steelblue fill that turns brown on hover. The chart includes labeled axes, a title, and a horizontal grid generated via `d3.axisLeft` with custom tick sizing, while the data is loaded from a tab-separated `data.tsv` file using `d3.tsv`.

83% match

modified for voronoi

This example visualizes SFPD incidents by neighborhood in 2016, combining both a bar chart of average incidents and a line chart showing incident trends over time. Each neighborhood’s bar and corresponding line are linked, with mouseover highlighting the active district and click filtering to show only that district’s line. The code uses d3.nest() to aggregate data by district, d3.scaleBand for the bars, d3.scaleTime for the date axis, and d3 transitions for interactive animations. The data is loaded from the SF Open Data JSON API, and the visualization renders with SVG.

GGoomble

Area Chart

A smooth, filled area chart visualizes a week of hourly temperature readings in San Francisco, mapping time on the x-axis and temperature on the y-axis. The SVG is rendered using D3 v5, with `scaleTime` and `scaleLinear` defining the axes and `area` with `curveBasis` generating the curved fill. Axis labels and a title are added, while data loads from a CSV via `d3.csv`.

Vvic126

Line Plots and Area

This example shows a week of hourly temperature readings in San Francisco as a smooth area chart, with individual data points highlighted as semi-transparent circles. It uses D3 v5 to load the CSV data, and scales time and linear values with `scaleTime` and `scaleLinear`. The area and line paths are generated with `area()` and curve interpolation, while axes are drawn using `axisLeft` and `axisBottom`. Circles are rendered via SVG and animated with a `transition` for a staggered appearance.

JJoshuaBruens

SF temp line chart

This line chart visualizes one week of temperature data in San Francisco, using a filled area under the curve to emphasize temperature variation over time. The chart includes labeled axes for time and temperature, with grid lines and a title. It loads CSV data from an external URL, parses timestamps and numeric temperatures, and renders the visualization using D3 v5’s `scaleTime`, `scaleLinear`, `area`, `axisBottom`, and `axisLeft` APIs. The SVG output displays a maroon area path over a clean white background.

Wwieswies