lrsavoie@wpi.edu

@lukesavoie·10 public vizzes

World Food Production

This example visualizes world food production data from Kaggle, showing how agricultural output varies by country, food type, and year. It presents a table of parsed CSV values, with each row displaying a country-year combination and its corresponding production figures for crops like maize, rice, and wheat. The code loads the dataset using an import statement, converts string values to numbers for all food categories, and renders the first record as JSON using `JSON.stringify`. The example uses plain JavaScript to handle data parsing and displays the result in an HTML `<pre>` element with a set font size.

Apr 30, 2024

Loading thumbnail…

(Hover) Line Chart Food Data

This interactive line chart visualizes coffee production in Bhutan over time, using World Food Production Data filtered to the country. It renders a single time-series line with a light gray plot area, while a mousemove event tracks the cursor position to draw crosshair lines within the chart’s bounds. The visualization uses D3’s scaleTime and scaleLinear for axes, d3-line for the path, and a ResizeObserver to adapt the SVG dimensions to its container.

Feb 14, 2024

Loading thumbnail…

Line Chart Food Data

This line chart visualizes Bhutan’s annual coffee production in tonnes from 1961 onward, sourced from the World Food Production dataset. The view filters the data to Bhutan and maps years to a time scale, with plot area filled in light gray. D3 version 7.8.5 is used, along with the `scaleTime`, `scaleLinear`, `line`, and `axisLeft` APIs, plus labels from `@curran/axis-labels`. Circles mark data points, while the default black line traces production trends over time.

Feb 8, 2024

Loading thumbnail…

Apple Quality Second Viz

This scatter plot visualizes the Apple Quality Dataset, mapping Juiciness on the x-axis and Crunchiness on the y-axis. Each circle represents an apple sample, with its position determined by those two attributes. The visualization uses D3’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while the `viz` function from the custom module handles rendering circles with configurable radius and opacity. Data is loaded via the `@lukesavoie/applequalitydata` package, and the chart includes axis labels courtesy of the `@curran/axis-labels` library.

Feb 8, 2024

Loading thumbnail…

Apple Quality First Viz

This example creates a scatter plot to visualize the Apple Quality Dataset, plotting each apple's weight on the x-axis and its size on the y-axis. The code uses D3's `scaleLinear`, `axisBottom`, and `axisLeft` functions to construct the chart, with points rendered as semi-transparent circles. The data is sourced from the `@lukesavoie/applequalitydata` library, and the visualization is built dynamically to fit the container's dimensions. The chart is designed to be easily forked and modified for other datasets.

Jan 31, 2024

Loading thumbnail…

Fork of Axis Labels

This example demonstrates how to add labeled axes to a D3 visualization. It renders a gray inner rectangle with a linear x-scale and y-scale, then uses D3’s `axisBottom` and `axisLeft` to draw the axes. The x-axis label is centered horizontally, while the y-axis label is rotated -90 degrees and positioned along the left edge. The code relies on D3 v7 APIs such as `scaleLinear`, `select`, `join`, and `axisBottom`/`axisLeft`, with modular functions for each axis and label component.

Jan 30, 2024

Loading thumbnail…

Largest Explosions

This visualization compares the scale of historic nuclear explosions against Mount Everest, using circles whose radii are proportional to blast size. Each blast is labeled and positioned relative to the mountain, with animated transitions that grow each circle from zero using D3’s `transition()` and `delay()`. The code employs `d3-select`, `d3-transition`, and SVG `circle` and `text` elements, with data on explosion yields sourced from Visual Capitalist. Semi-transparent fills and a sans-serif font keep the comparison clear, while the animation reveals each event sequentially for emphasis.

Jan 29, 2024

Loading thumbnail…

Apple Quality Dataset

This visualization displays the first row of the Apple Quality dataset, which contains seven numerical attributes—Size, Weight, Sweetness, Crunchiness, Juiciness, Ripeness, and Acidity—along with a quality label of either "good" or "bad." The code loads the data from a CSV file, converts each attribute to a number, and renders the first data point as a JSON object in a large monospaced font. The example uses the standard JavaScript `JSON.stringify` method within a container element to present the raw data structure.

Jan 24, 2024

Loading thumbnail…

Student Exam Performance

This visualization examines how study hours and previous exam scores affect pass/fail outcomes in a student performance dataset from Kaggle. The view displays the first record of the CSV as formatted JSON, showing the three variables: Study_Hours, Previous_Exam_Score, and Pass_Fail. The code uses a custom `main` function that writes the parsed data into an HTML `<pre>` element, with the dataset loaded and converted to numeric values using the `+` operator. The analysis questions focus on the independent and combined effects of these two predictors on the result.

Jan 24, 2024

Loading thumbnail…

Coding Circles

This example displays a simple tree scene composed of a brown trunk, a green circular canopy, and a green ground area, all drawn using D3.js. The visualization builds the scene by joining SVG elements—rectangles, circles, and lines—to a data array, using D3's `select` and `join` API. It sets positions, sizes, and fill colors directly from JavaScript objects, with the tree's branches and canopy sized relative to the container's dimensions. The code is structured as a call to `main` with a container, clearing existing SVG content before rendering each shape.

Jan 12, 2024