R

Robert Curtis

@zelekhut42·17 public vizzes

Loading thumbnail…

Final Project

This interactive visualization displays U.S. minimum wage trends from 1968 to 2017 using a dual choropleth map and line chart. Users click states to compare their minimum wage both in raw dollar values and adjusted 2018 dollars, with the line chart updating to show historical trajectories for selected states. A slider allows browsing different years. The visualization uses d3.geoPath for map rendering, d3.scaleLinear for color encoding, and d3.line for the time-series data, sourced from Kaggle. A color legend helps interpret the wage ranges.

Loading thumbnail…

Minimum Wage Scatter Plot

This scatter plot visualizes US minimum wage data by state from 1968 to 2017, sourced from Kaggle, with each point representing a state-year observation. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for gridlines and tick marks, and d3.scaleOrdinal with d3.schemeSpectral to color points by state origin. A color legend with clickable elements filters the data by dimming non-selected categories. The SVG rendering leverages d3.select, data joins, and standard SVG circles.

Loading thumbnail…

Final Project Week 3

This visualization compares minimum wage data across U.S. states with two choropleth maps (one for a current year, one for 2018) and a line graph of trends over time. Users click states to select them, which highlights them on both maps and adds their wage trajectories to the graph using d3.line and d3.curveBasis. The maps use d3.geoPath with a custom scaler and a topojson feature collection. A d3.scaleOrdinal color legend with d3.schemeSpectral maps each selected state to a unique line color.

Loading thumbnail…

Final Project Week 2

Two choropleth maps of U.S. states display minimum wage values from a CSV dataset, with a legend that lists selected states and color-coded circles. Clicking states toggles their inclusion, adding them to an ordinal color scale and generating corresponding time-series line graphs lower on the page. The visualization uses d3.geoPath and a geoTransform projection for the maps, d3.line with curveBasis for the graph paths, and d3.scaleOrdinal with schemeSpectral for coloring.

Loading thumbnail…

Final Project Week 1

Two small choropleth maps of U.S. states display two different data variables side by side, colored with distinct sequential scales. Users can click individual states to toggle their selection across both maps, with selected states tracked in a shared array. The maps are rendered as SVG paths from TopoJSON data, projected with a custom geoTransform scaling, and colored using d3.scaleLinear with data from CSV files filtered to 1970.

Loading thumbnail…

Minimum Wage Scatter Plot with Interaction Menus

This scatter plot displays US minimum wage data by state from 1968 to 2017, sourced from Kaggle, with interactive dropdown menus to select which columns to plot on the x- and y-axes. The visualization uses D3 v5 with scaleLinear axes, axisBottom and axisLeft for gridlines, and animated circle transitions via transition().duration() with staggered delays. Data is loaded using d3.csv, and the dropdownMenu module re-renders the graph when selections change.

Loading thumbnail…

Cars Scatter Plot 2

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. A color-coded legend allows users to filter points by origin (USA, Japan, Germany), with non-selected origins dimmed to 20% opacity. Built with D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` with `schemeSpectral` for colors, and SVG rendering for circles, axes, and interactive legend.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing fruit sit in a row across an SVG canvas. Clicking an apple or lemon adds its ID to a selected set, drawing a black outline around it. The bowl animates over time as apples are removed and one apple is replaced by a lemon, using D3 v5's `data` join, `transition()` with a 1000-millisecond duration, and `scaleOrdinal` for color and radius mapping.

Loading thumbnail…

Minimum Wage in Massachusetts Line Chart

This line chart displays Massachusetts’ minimum wage from the late 1960s to 2017, with the y-axis representing dollar values and the x-axis representing years. The chart uses a smooth, curving line to connect annual data points, sourced from a Kaggle dataset on US state minimum wages. Built with D3 v5, the visualization leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path, while a CSV file is fetched and filtered for Massachusetts before plotting.

Loading thumbnail…

Bowl of Fruit Special Cases and Transitions

A bowl of fruit renders apples and lemons as colored circles with labels, using d3 transitions to animate changes in a small dataset. Five apples appear initially, then one is removed, another swaps to a lemon, and a final apple disappears. The code uses `scaleOrdinal` for color and radius mapping, while `selection.enter`, `merge`, and `exit` handle state updates. SVG shapes and transitions with `.duration(1000)` smoothly shrink exiting circles and text, and reposition remaining fruit.

Loading thumbnail…

Graph of bars with one rotated

This example recreates a figure from Chapter 5 of Munzner’s *Visualization Analysis & Design*, displaying a 4-by-6 grid of small, solid steel-blue rectangles. All bars are identically sized except for the one at the third column and third row, which is rotated 90 degrees, making it taller than wide. The graphic is built with D3 v5 using manual `append` calls to create SVG `rect` elements without data binding. A light gray border encloses the layout, rendered without axes, labels, or interaction.

Loading thumbnail…

US minimum wage

A terminal-style summary of US minimum wage data displays row count, column count, and file size in kilobytes, followed by a JSON preview of the first 50 rows. The page uses D3 v5’s `select`, `csv`, and `csvFormat` functions to fetch a Kaggle dataset covering 1968–2017 state minimum wages, and renders the output as black-on-green text with a large monospaced font.

Loading thumbnail…

Countries of the world

This example displays a summary of a dataset containing information about countries, including population, GDP, and literacy. It shows the number of rows, columns, and total data size in kilobytes, followed by a preview of the first ten rows. The visualization uses D3’s `select` and `csv` functions to load the data. Results are rendered as text using HTML `pre` elements, with a black background and green monospace styling. The csv data from Kaggle is fetched and printed as JSON.

Loading thumbnail…

Multidimentional Poverty Measure

This example summarizes the content of a poverty dataset, showing the first ten rows and basic table statistics like row count, column count, and file size. It loads its data from a Kaggle CSV file containing multidimensional poverty measures for various countries and regions. The visualization uses D3 version 5 to fetch and parse the data, then displays the summary as plain text in a terminal-like interface with a black background and green monospaced font. The code relies on D3’s `csv` and `csvFormat` functions to handle the data, with the presentation styled through custom CSS.

Loading thumbnail…

Top 10 Best Selling Albums Bar chart

This horizontal bar chart ranks the ten best-selling albums of all time by reported unit sales, with the Eagles' *Their Greatest Hits* leading and Fleetwood Mac's *Rumours* at the bottom. Each album is a steelblue rectangle whose length encodes the numeric value, while the album titles appear on the y-axis. The chart is built with D3 v5, using `scaleLinear` and `scaleBand` for the axes and `axisLeft`/`axisBottom` for ticks. Data is parsed from a CSV file via D3's `csv` loader, with unit counts converted to numbers. Sales figures come from a Business Insider article.

Loading thumbnail…

Let's Tweak a Face

A cartoon face animates through a sequence of transformations: its yellow head fades to light blue, the eyes' pupils shift upward, eyebrows rise dramatically, and the mouth cycles through arc-based shapes, shrinking to a dot before expanding into a wide circle. Built with D3 v5, the visualization uses SVG elements and chained transitions, including `transition.attr` and the `arc()` generator to redraw the mouth path. Each facial feature is positioned relative to a central group, with timed delays coordinating the staggered animation effects across the head, eyes, and mouth.

Loading thumbnail…

Click the Countries for Interaction

This interactive map illustrates world countries and allows users to click individual nations to toggle their fill color between light green and yellow. Built with D3 v5 and TopoJSON, it renders geographic features using the `geoNaturalEarth1` projection and `geoPath` generator. The visualization includes zoom and pan capabilities via `d3.zoom`, with country name tooltips from a TSV dataset. Clicking a country updates an array of selected IDs, triggering a re-render that recolors the clicked nation.