Alex Pietrick

@apietrick24·20 public vizzes

Final Project: Honey Production in the United States (CS 573 Assignment #14.1)

This interactive visualization combines a choropleth map of the United States with a line graph to explore honey production data per state and year. A drop-down menu switches the displayed variable among five metrics, and clicking a state adds its yearly trend to the line graph. Hovering reveals tooltips with values. Built with D3 v4, it uses `d3.geo.albersUsa` and `d3.geo.path` for the map, with SVG rendering and animation for interactivity.

Dec 13, 2021

Loading thumbnail…

Interactive: United States Honey Production per Year (CS 573 Assignment #13.1)

This interactive line graph shows United States honey production trends over time, letting users select among five variables: number of colonies, yield per colony, total production, stockpiles, and production value. The SVG visualization aggregates state-level data by year, computing averages for each metric. A dropdown menu updates the y-axis scale and line display, while a hover tooltip reveals exact values per year. Built with D3 v4, the code employs d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.group, with data drawn from a CSV hosted on GitHub.

Nov 23, 2021

Loading thumbnail…

Average Honey Production in the United States (CS 573 Assignment #12.1)

A choropleth map of the United States displays each state’s average honey production value from 1998–2012, with values encoded using a gray-to-orange linear color scale. The visualization uses the D3.js v3 library with the Albers USA projection (`d3.geo.albersUsa`) and `d3.geo.path` to render SVG paths from GeoJSON. Hovering over a state triggers a tooltip showing the state name and its production value, while clicking a state toggles its fill to yellow, an interaction designed for future linkage to a line graph. Data is aggregated from an external CSV via `d3.csv` and grouped by state.

Nov 17, 2021

Loading thumbnail…

Untitled

This interactive line chart displays the total honey production in the United States from 1997 to 2012, aggregated by year and grouped by state. A dropdown menu lets viewers select among six metrics—number of colonies, yield per colony, total production, stocks, production value, and price per pound—to switch the displayed line. The visualization uses d3.line, d3.scaleLinear, and d3.schemeSet2 for scaling and coloring, with SVG circles marking each year’s data point. It loads data from a CSV file hosted on GitHub, processes it with d3.group and array methods, and updates the path via a custom update function.

Nov 10, 2021

Loading thumbnail…

Iterated: United States Honey Production per Year (CS 573 Assignment #9.1)

This interactive line graph visualizes total honey production across all 50 US states per year, aggregating raw state-level data into a single national trend line with data points. It uses D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveMonotoneX` to render an SVG chart. The code groups the CSV dataset by year via `d3.group`, sums production values, and displays the result with a steelblue line and circles, alongside labeled axes and a title.

Oct 28, 2021

Loading thumbnail…

Forked Iterated: United States Honey Production per Year (CS 573 Assignment #9.X)

This example shows a line chart of total United States honey production aggregated by year from 1998 to 2012, using the d3.csv, d3.group, and d3.scaleTime APIs to aggregate raw state-level data into yearly totals. The chart renders as an SVG with d3.line for the path and circles for data points, while a custom menu component built with d3.dispatch lets the user select a different quantitative column—such as number of colonies or price per pound—to update the y-axis and line via d3.scaleLinear and d3.axisLeft.

Oct 28, 2021

Loading thumbnail…

United States Honey Production per Year (CS 573 Assignment #7.X)

This line graph visualizes the total honey production in all 50 US states per year, using a dataset from a GitHub gist. The visualization employs D3 v5 to render an SVG line chart, with a monotone curve connecting data points. The code uses D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct the axes and plot. Styled with CSS, the chart includes axis labels and a title, with circles marking individual data points despite a placeholder loop that only draws one circle.

Oct 25, 2021

Loading thumbnail…

Proof of Concept: Interactive Brush (CS 573 Assignment #8.1)

This example demonstrates a proof-of-concept interactive brush applied to an area chart of honey production across U.S. states over time. The visualization shows aggregate production values by year, with a focus chart above and a smaller context chart below. Users can brush along the x-axis in the context chart to zoom and pan the focus chart’s time range. The code uses D3 v5 APIs including `d3.brushX`, `d3.area`, and `d3.scaleTime` to implement the linked brushing and zooming behavior.

Oct 21, 2021

Loading thumbnail…

Honey Production in the United States with Brushing (CS 573 Assignment #8.X)

A choropleth map and linked time-series histogram show U.S. honey production by state, with circles sized by total production value. Users brush a time range in the histogram to filter the map to show only years within that selection, using `d3.brushX` and React state. The map uses `d3.geoAlbersUsa` and `d3.geoPath` for U.S. state outlines, while the histogram bins monthly sums via `d3.histogram` and `d3.timeMonths`. Data comes from a CSV of honey production values loaded with `d3.csv`.

Oct 21, 2021

Loading thumbnail…

Loading and Parsing: Honey Production in the United States Dataset (CS 573 Assignment #7.X)

This example demonstrates the first step of visualizing the Honey Production in the USA dataset by loading and parsing its CSV file. It displays the file’s size in kilobytes, row count, and column count in a large pre-formatted text element. The code uses D3 v5’s `d3.csv` method to fetch and parse the data, and `d3.csvFormat` to calculate the raw file size. The data originates from a Kaggle dataset hosted on GitHub, covering U.S. honey production from 1998 to 2012.

Oct 15, 2021

Loading thumbnail…

Book Publishing Dataset Interactive Scatter Plot (CS 573 Assignment #6.1)

This interactive scatter plot visualizes a book publishing dataset, with each point colored by publisher and revealing the title, author, publisher, and axis values on hover. Users can select different quantitative or categorical attributes for both axes via dropdown menus, triggering animated transitions of the circles and axes. Built with D3 v6, it uses `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `transition` to smoothly update positions, while a custom tooltip displays details. Data is loaded as CSV from a GitHub gist.

Oct 6, 2021

Loading thumbnail…

Iterated: Published Book by Average Rating and Gross Sales (CS 573 Assignment #5.1)

This scatter plot compares published books’ average ratings against their gross sales, with each point colored by publisher and sized by units sold. A hover tooltip reveals the book’s title, author, publisher, rating, and sales. The visualization uses D3 v6 scales (scaleLinear), axes (axisLeft, axisBottom), and SVG circles, styled with CSS, to render the data. The tooltip is implemented with div elements and mouseover/mouseout events. The dataset is loaded via d3.csv from a GitHub Gist.

Oct 6, 2021

Loading thumbnail…

A Book's Expected Gross Sales Based on Publisher (CS 573 Assignment #4.1)

This bar chart displays the average gross sales per book for seven major publishers, using the Book Publishing Dataset. A horizontal bar represents each publisher, with bars colored red for averages below $1,500 and green for those above, and hovering turns the selected bar yellow. The visualization is built with D3.js v5, using `csv` to load data, `scaleLinear` and `scaleBand` for axes, and `axisBottom` and `axisLeft` for tick marks, rendered as SVG.

Sep 30, 2021

Loading thumbnail…

Scatter Plot: Books' Average Rating Compared to Number of Ratings (CS 573 Assignment #3.1)

This scatter plot visualizes the relationship between a book's average rating and its number of ratings using the Book Publishing Dataset. It reveals a slight trend where books with more ratings tend to have lower average ratings, while also showing that higher-rated books generally sell more copies. The visualization encodes the number of units sold through circle size, with points rendered as semi-transparent green circles. The code uses d3.csv for data loading, d3.scaleLinear for axes and size mapping, and d3.axisLeft and d3.axisBottom for chart axes within an SVG rendered by d3.select.

Sep 30, 2021

Loading thumbnail…

Scatter Plot: Locations of the Battles in the Seven Years' War (CS 573 Assignment #3.2)

This scatter plot shows the locations of battles during the Seven Years' War, with longitude on the x-axis and latitude on the y-axis. Distinct clusters reveal major theaters of combat in Northern Europe and India. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load and map the data from a GitHub Gist, rendering orange circles as SVG elements sized at a fixed radius of five pixels.

Sep 30, 2021

Loading thumbnail…

Scatter Plot: Forest Fires in Brazil (CS 573 Assignment #3.3

This scatter plot visualizes the number of forest fires per Brazilian state for each month, using data from a Brazilian Forest Fires Dataset. Each red circle represents a state’s fire count, with the y-axis showing fire frequency and the x-axis displaying the year; the non-continuous vertical patterns highlight disparities between states with low versus high fire occurrences. The visualization is rendered as an SVG using d3.v6, employing `d3.csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll('circle').join()` for data binding and circle placement.

Sep 30, 2021

Loading thumbnail…

Loading and Parsing: Forest Fires in Brazil (CS 573 Assignment #2.3)

This visualization loads the Brazilian Forest Fires dataset from a GitHub-hosted CSV file and displays a summary of its size and structure in large red text. It uses D3 v5’s `d3.csv` method to parse the data, then calculates and presents the file size in kilobytes, the total row count, and the number of columns. The example demonstrates both the primary async/await approach with `d3.csv` and includes commented-out alternatives using `fetch` and `d3.csvParse`.

Sep 30, 2021

Loading thumbnail…

Loading and Parsing: Book Publishing Data (CS 573 Assignment #2.1)

This example displays the loading and parsing of a book publishing dataset, presenting the file size, row count, and column count. It fetches a CSV file from a GitHub gist using the D3.js library, specifically the `d3.csv` function, and computes the file size in kilobytes with `d3.csvFormat`. The resulting information is rendered in a large, green, monospaced text block. The dataset contains over 1000 books and 14 attributes, including publishing year, author, genre, and sales data.

Sep 30, 2021

Loading thumbnail…

Loading and Parsing: Seven Years' War Data (CS 573 Assignment #2.2)

This visualization parses the Battles of the Seven Years’ War dataset and displays basic statistics about the loaded CSV file, including its size in kilobytes, row count, and column count. The data is fetched from a GitHub gist using `d3.csv`, which automatically parses the CSV into JavaScript objects. The example also demonstrates alternative loading approaches via commented-out code using `fetch` with `async/await` and `d3.csvParse`. All results are rendered as large orange text inside an HTML `<pre>` element, using D3 v5.

Sep 30, 2021

Loading thumbnail…

SVG Fundamentals (CS 573 Assignment #1)

This hand-drawn SVG scene depicts a stylized gray cat seated on a brown table, constructed entirely from vector primitives. The composition features a large oval body, a smaller head, triangular ears with pink inner polygons, a blue fish held in front, and a curled tail; all elements are composed of circles, ellipses, paths, polygons, and lines. The rendering uses raw SVG markup within an HTML file, with explicit `fill` and `stroke` attributes for colors and outlines. The code relies on fundamental SVG APIs directly, such as `circle`, `ellipse`, `polygon`, and `path` elements, to build the static illustration.

Sep 30, 2021