Skip to main content
SimilarExport ZIP
100%

HW1 Chart1

✓ Published0🌍 Public
LLjfernando
Last edited Feb 12, 2017
Created on Feb 11, 2017

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`.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

HW1 Chart3

This chart shows the number of SF PD calls per hour in December, with an area plot and a line overlay that both encode the count across a 24-hour period. It uses D3 v4’s `d3.tsv` loader to parse the data file, `d3.area` to create the filled region, and `d3.line` with a linear curve for the stroke. The SVG includes grid lines generated via `d3.axisBottom` and `d3.axisLeft`, with the x-axis labeled “Hour” and the y-axis “Number of Calls,” all rendered in a crisp, block-oriented layout.

LLjfernando
83% match
Loading thumbnail…

HW1 Chart3

This chart shows the number of SF PD calls per hour in December, with an area plot and a line overlay that both encode the count across a 24-hour period. It uses D3 v4’s `d3.tsv` loader to parse the data file, `d3.area` to create the filled region, and `d3.line` with a linear curve for the stroke. The SVG includes grid lines generated via `d3.axisBottom` and `d3.axisLeft`, with the x-axis labeled “Hour” and the y-axis “Number of Calls,” all rendered in a crisp, block-oriented layout.

LLjfernando
83% match
Loading thumbnail…

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`.

LLjfernando
82% match
Loading thumbnail…

Grouped Bar Chart

This grouped bar chart shows the proportion of call types—Alarm, Fire, Non Life-threatening, and Potentially Life-Threatening—across five San Francisco districts. The visualization uses d3.csv to load the data, d3.scaleBand for the x-axis and grouped bars, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color encoding. The SVG rendering includes axes, gridlines, and a legend, with percentages formatted using d3.format.

LLjfernando
81% match
Loading thumbnail…

HW1 Chart2

This bar chart displays the number of reported incidents per crime category in descending order, sourced from a tab-separated data file. The horizontal bars use a steelblue fill that turns brown on hover, with a light grey grid highlighting the value scale. It is built with D3.js v4, using `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and SVG rect elements for rendering.

LLjfernando
76% match
Loading thumbnail…

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.

LLjfernando
75% match
Loading thumbnail…

Grouped Bar Chart

A grouped bar chart displays population percentages across four age groups for five San Francisco districts, with each district’s bars colored by age category and a legend identifying them. The visualization loads data from a CSV file using d3.csv, then applies d3.scale.ordinal for x-position and color encoding, d3.scale.linear for the y-axis, and d3.svg.axis to render axes with SI-prefix formatting via d3.format. Bars are drawn as SVG rectangles, with heights computed from the parsed numeric values.

LLjfernando
75% match
Loading thumbnail…

midterm1

This chart uses both a bubble chart and a bar chart to compare the number of records and potential threats across 33 San Francisco districts. District names are on the x-axis, with counts on the y-axis, and each district is represented by a circle whose size encodes the number of records and whose color encodes the number of potential threats. Built with D3 v4, the code loads data from a CSV using `d3.csv`, sorts districts by record count, and uses `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleSequential` with an orange color interpolator. The SVG output highlights circles on hover by changing their stroke to red, though the underlying data source is a gist with a local file named `forbubblechart.csv`.

GGoomble
75% match