Goomble

for hw3

This example displays a blank interactive canvas with a single static text label, “Edit the code below to change me!”, rendered in monospace font at a fixed position. It uses D3 v4 to select the body element, append an SVG container sized 960 by 500 pixels, and add a text element with custom styling. The visualization serves as a minimal starter template, showing how D3’s selection and append methods create basic SVG output without any data binding or dynamic behavior.

Apr 7, 2017

Multi-Series Line Chart

This multi-series line chart visualizes the daily average temperatures for New York, San Francisco, and Austin over one year. Loaded from a TSV file, the data is parsed with `d3.tsv` and `d3.timeParse`, with dates mapped to the x-axis via `d3.scaleTime` and temperatures to the y-axis with `d3.scaleLinear`. Lines are drawn with `d3.line` and colored using `d3.scaleOrdinal` with a `d3.schemeCategory10` palette. The chart supports pan and zoom through the `d3.zoom` interaction, and clicking a city’s label highlights its line while dimming others via CSS transitions.

Mar 25, 2017

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.

Mar 25, 2017

fresh block

This visualization compares SFPD incidents across San Francisco neighborhoods in 2016 using two synchronized SVG charts: a bar chart sorted by average incidents and a line chart showing daily trends. Hovering over a bar highlights the corresponding line, while clicking filters the line chart to that neighborhood. The code uses nested data aggregation via `d3.nest()`, and transitions with `d3.transition()` to animate highlights. Both charts share the same dataset, sourced from SF Open Data's SFPD Incidents 2016 Daily, with scales set using `d3.scaleLinear()` and `d3.scaleBand()`.

Mar 25, 2017

midterm 2 block

This stacked bar chart displays population totals for U.S. states, broken down by age groups, with states sorted descending by total population. The visualization uses D3 v4’s `d3.stack()` and `d3.scaleBand` to generate the bars, while `d3.axisBottom` and `d3.axisLeft` render the axes. Data comes from an external CSV file, and a legend identifies each age category using an ordinal color scale. The chart renders as SVG with a hidden domain line for a cleaner look.

fresh block

This horizontal stacked bar chart displays fire department staffing by district, breaking down personnel counts across seven roles such as TRUCK, ENGINE, and MEDIC. Built with d3.v4, it uses `d3.stack()` with `d3.stackOffsetNone` to compute layers, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. The SVG elements are colored via `d3.scaleOrdinal` with `d3.schemeCategory20`, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with data loaded from a CSV file.

fresh block

A stacked bar chart titled “Batallion Performance Assessment” displays monthly military data from April 1854 to March 1856, with segments for wounds, other causes, and disease. The chart uses d3.stack with keys for each cause, d3.scaleBand for the monthly y-axis, and d3.scaleLinear for the x-axis. Rendered as SVG via d3.v4, the bars are colored using d3.scaleOrdinal and d3.schemeCategory20. The visualization sorts months by total personnel, showing how disease dominated casualties early on, while wound counts rise later.

fresh block

This stacked bar chart visualizes historical death data from the Crimean War, breaking down monthly mortality into categories of disease, wounds, and other causes. The implementation uses D3 v4's `d3.stack`, `d3.stackOffsetNone`, and `d3.scaleBand` for the time-based y-axis and linear x-axis. It sorts months by total deaths and renders layers via SVG rectangles, with axes configured through `d3.axisLeft` and `d3.axisBottom`. The color scheme uses `d3.schemeCategory20` to distinguish the three mortality categories.

fresh block

A small SVG bar chart displays three horizontal stacked bars for consecutive months, with two colored series per month. The chart uses a custom d3.layout.stack() transform to compute stacked sums, then maps each bar’s width to its value and positions groups via d3.scale.ordinal() and rangeRoundBands. A yellow legend panel lists series names with color swatches, and hovering a segment updates a tooltip via d3.select() and d3.classed(). Data is hardcoded as JavaScript arrays in the block.

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

parallel coordinates

This parallel coordinates chart displays six dimensions of college data—including parental income, kid earnings, and mobility rate—across six tiers of institutions, with each tier color-coded via `d3.svg.line` strokes. The visualization uses `d3.scale.ordinal` for axis placement and `d3.scale.linear` for each dimension, rendering gray background paths for all records and colored foreground paths for focus. Users can brush along any axis using `d3.svg.brush`, which filters the foreground lines to highlight subsets. Data comes from the embedded `mrc_table.csv` file.

Mar 1, 2017

fresh block

This example presents a parallel coordinates chart showing the relationship between college tier and five numerical factors: the proportion of female students, married students, parental income, kid earnings, and mobility rate. The visualization uses grey background lines for all data categories and blue foreground lines for the currently focused tier. Users can brush along any axis to filter the displayed lines. The implementation relies on d3.v3, specifically using `d3.svg.brush` for interactive filtering, `d3.scale.ordinal().rangePoints` for the categorical axis, and `d3.svg.line()` to draw the polylines, with data loaded from the included `mrc_table.csv` file.

Mar 1, 2017

Linking to Data Table

This example links a parallel coordinates plot to a data table, displaying planetary data from NASA.gov. Built with the d3.parcoords library and D3.js, it renders the chart using SVG axes and canvas layers for the lines. The table, created with d3.divgrid, updates to show filtered data when users brush along any axis, with hover highlighting syncing between the two views.

Linking to Data Table

A parallel coordinates chart displays planetary data from NASA, with each axis representing a dimension like orbital period or mass. Brushing and dragging axes are supported, alongside a linked data table showing the first ten rows. The visualization uses the `d3.parcoords` library for canvas rendering of lines, while a custom `d3.divgrid` component handles the table. Hovering over a table row highlights the corresponding line via the `parcoords.highlight` API, and brush events update the table's filtered data.

fresh block

This visualization uses a parallel coordinates chart to compare five socioeconomic metrics across different types of educational institutions, with data loaded from a CSV file. The SVG rendering uses d3.svg.axis, d3.svg.line, and d3.scale.ordinal to draw axes and paths, while d3.svg.brush enables interactive filtering along each dimension. Users can drag axes to reorder dimensions and brush ranges to highlight specific institutions, with a d3.divgrid table below showing the raw data values.

d3 | Parallel Coordinates

This example shows a parallel coordinates plot of planetary data from NASA, displaying each planet’s day length, distance from the Sun, orbital period, mass, and diameter as linked polylines across vertical axes. Users can brush along any axis to filter the highlighted lines, and drag axes to reorder them. The visualization uses the d3.parcoords library, built on d3.v3, with SVG for axes and canvas layers for rendering shadow, foreground, and highlight strokes, plus animation during drag transitions.

Linking to Data Table

A parallel coordinates chart displays multidimensional planetary data from NASA, rendered with the d3.parcoords library. It uses the Canvas API for drawing and SVG for axes. A linked data table, built with d3.divgrid, lists the first ten rows of the dataset. Hovering over a table row highlights the corresponding polyline in the chart, while brushing axes filters the table to show only the brushed data points, using d3's event system.

Linking to Data Table

A parallel coordinates chart displays planetary attributes—day length, distance from the Sun, orbital period, mass, and diameter—from NASA fact sheet data. The visualization uses the `d3.parcoords` library with SVG axes and canvas-rendered lines, colored by day length via a linear scale. Brushing filters the data, updating an accompanying data table built with `d3.divgrid`. Hovering over table rows highlights corresponding lines in the chart.

Linking to Data Table

This example links a parallel coordinates chart with a scrollable data table to explore planetary characteristics from NASA’s planetary fact sheet. It uses the d3.parcoords library for the interactive axes and brushing, while a custom d3.divgrid renders the table, with mouseover events highlighting corresponding rows in the parallel coordinates via the `highlight` method. The SVG axes and canvas-based rendering show dimensions like day length, distance from the Sun, and orbital period.

Line Chart

This line chart displays the daily number of crimes over a 31-day period, with the x-axis mapping days and the y-axis mapping crime counts. The SVG rendering uses D3 v4, specifically `d3.scaleTime` and `d3.scaleLinear` for position encodings, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded from a CSV file via `d3.csv`, with numeric parsing applied to both fields. The line is drawn in steelblue with rounded joins and caps, and the y-axis is labeled "Price ($)".

fresh block

A line chart displays daily crime counts across a 31-day period, with points connected by a single path. The visualization uses D3 v4 with `d3.scale.linear` for both axes, `d3.svg.axis` for ticks, and `d3.svg.line` to generate the path. Data from `numbers3.csv` is loaded via `d3.csv`, with day and crimes values parsed as numbers. An SVG canvas of 600x270 pixels, excluding margins, renders the axes and line, showing a fluctuating trend peaking around day 16 and dipping near day 25.

Dsnap - Charts

This example presents a categorical bar chart that displays dollar values for a range of electronics and accessory product categories. The chart uses D3 v3 APIs including `d3.scale.linear` for both axes, `d3.scale.quantize` for color mapping, and `d3.svg.axis` for rendering tick marks. Horizontal bars, initially zero-width, grow to their final length via a one-second `transition` animation. The view combines SVG grid lines, a colored bar for each category, and white text labels showing the dollar amount.

fresh block

A horizontal bar chart displays the number of assault incidents by resolution type, with purple bars extending from a shared left axis. The visualization uses D3 v4’s `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, rendering SVG rectangles for each bar. Data from the CSV is loaded via `d3.csv`, and axes are drawn with `d3.axisBottom` and `d3.axisLeft`, including a grid of horizontal tick lines. The chart highlights that "NONE" is the most common resolution, while "EXCEPTIONAL CLEARANCE" and "UNFOUNDED" are the rarest.

fresh block

A horizontal bar chart displays the number of cases by resolution type, using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Rectangles represent each value, with a custom tooltip showing the category and amount on mouseover. Data loads from a CSV file via d3.csv, and axes are drawn with d3.axisBottom and d3.axisLeft under d3.v4.

Test

A bar chart displays counts for three crime categories—attempted theft, petty theft, and grand theft—using a linear y-scale and band x-scale. Bars exceeding half the maximum value are highlighted in red, while the rest use a teal fill. The chart is built with D3 v4, loading data from a CSV via `d3.csv`, rendering SVG rectangles, and adding axes with `d3.axisBottom` and `d3.axisLeft`.

Test

A bar chart displays the frequency of different theft-related incidents, with counts ranging from 14 to 1800. The visualization uses D3 v4 with `d3.scaleBand` for the x-axis categories and `d3.scaleLinear` for the y-axis count scale. Data is loaded from a CSV file using `d3.csv`, then rendered as SVG rectangles with a yellow fill. Axis ticks and labels are generated using `d3.axisBottom` and `d3.axisLeft`.

Test

This example uses a dataset of bicycle-related crimes to render a bar chart in SVG, plotting categories from a CSV file along a band scale against their counts on a linear scale. The chart displays the values from the `numbers.csv` data as vertical bars, with axes positioned on the right and bottom using `d3.axisRight` and `d3.axisBottom`. The visualization is built with D3 v4, using `d3.scaleLinear` for the count axis and `d3.scaleBand` for categorical spacing, all within a single SVG element selected via `d3.select`.

Test

A bar chart displays count values from a CSV file across a categorical axis. The chart uses D3 v4 to load the data with `d3.csv`, scales the counts with `d3.scaleLinear` and the category positions with `d3.scaleBand`, and renders axes via `d3.axisBottom` and `d3.axisRight`. The SVG plot is positioned with margins, and the code includes calls to `getBoundingClientRect` to determine the available space. The visualization is built as a static SVG graphic with no interactive features.