J

jrcuster@dons.usfca.edu

@jadecuster·24 public vizzes

Loading thumbnail…

A9-Chloropleth

This choropleth maps poverty rates across U.S. counties using a red sequential color scale, with tooltips displaying the county name and exact poverty value on hover. The visualization employs d3.csv to load poverty data keyed by FIPS codes, d3.json to fetch TopoJSON boundaries, and d3.geoPath to render county shapes as SVG paths. A d3.scaleThreshold with seven bins assigns colors from d3.schemeReds, while mouse events drive a custom tooltip appended to the page. The code also uses d3-legend implicitly via script inclusion, though no legend is explicitly drawn.

Loading thumbnail…

A9-Proportional symbols

A proportional symbol map shows the average grocery cost per state across the U.S., with circle area scaled to cost and states in the top ten for cost highlighted in red. Built with D3 v3, it uses the `d3.geo` Albers projection and `topojson` for the state outlines, while `d3.scale.sqrt` maps cost values to circle radii. Hovering a circle reveals a tooltip with the state name and cost, and the underlying data is loaded from a CSV file.

Loading thumbnail…

A9- World Chloropleth

This choropleth visualizes poverty rates across U.S. counties using a threshold color scale with seven shades of red. It renders county boundaries as SVG paths via `d3.geoPath` and topojson, with each county filled according to its poverty value from a CSV dataset. Interactive tooltips display the county name and poverty figure on mouseover, powered by D3 event handlers. The visualization relies on d3.v6, topojson.v2, and d3-legend.

Loading thumbnail…

A9-World Chloropleth Map

This map of the United States overlays proportional symbols representing grocery costs by state, with red highlighting for the top ten most expensive states. Built with D3 v3, it uses an Albers USA projection and topojson for state boundaries, while circles are positioned by projecting state coordinates. Data from a CSV file drives the radius scale and tooltip interactions.

Loading thumbnail…

Fork of A9-Proportional symbols

This proportional symbols map visualizes the global distribution of MOOC subscribers, using a choropleth color scheme where darker reds indicate higher subscriber counts. The map uses a Mercator projection, rendered via `d3.geoPath` and `d3.geoMercator`, with data loaded from a CSV file containing country codes and totals. A `d3.scaleThreshold` color scale maps subscriber ranges to a red color scheme, and a legend created with `d3.legendColor` explains the thresholds. The geographic boundaries come from a GeoJSON world map.

Loading thumbnail…

A9-Proportional symbols

This example shows a choropleth map of poverty rates by U.S. county, with color intensity indicating the poverty value for each county. It uses d3.geoPath to render the topojson-based county boundaries, while d3.scaleThreshold and d3.schemeGreens map the data values to a green color ramp. Interactive tooltips display the county name and poverty value on hover, and a color legend is added via the d3-legend library. The data is loaded from a CSV containing poverty attributes per county.

Loading thumbnail…

AI ONLINE MOCKUPS

This interactive scatter plot displays the average AI adoption level and automation risk for various skills, categorized into low, medium, and high. Each circle represents a skill, positioned by its average values on the axes, colored by skill name, and labeled for identification. Built with D3 v7, the visualization uses `d3.csv` to load data from a gist, `d3.rollups` to aggregate by skill, and `d3.scaleLinear` for axes with ordinal risk labels. SVG circles, text labels, and styled axes render the final chart.

Loading thumbnail…

A8-node-link diagram with force-directed layout

This visualization shows a force-directed network of dolphin associations, with 62 nodes representing individual dolphins and links indicating their social connections based on affection data. The graph uses a static node-link diagram rendered in SVG, where each dolphin is a steelblue circle labeled with its ID. Built with d3.v7, it loads data from a CSV file and applies d3.forceSimulation with d3.forceLink, d3.forceManyBody, and d3.forceCenter to compute the layout. The nodes are draggable via d3.drag, with positions refreshed on each simulation tick.

Loading thumbnail…

A8-adjacency matrix

This visualization displays a dolphin interaction network as an adjacency matrix. Each cell represents the affection level between a pair of dolphins, with color intensity ranging from white to blue via a linear color scale indicating the strength of the connection. The code loads data from a CSV file, builds a symmetric matrix, and renders it using SVG rectangles within an HTML page. D3.js version 7 manages data binding, scales, and tooltips on mouseover, while row and column labels identify individual dolphins by their numeric IDs.

Loading thumbnail…

A8-adjacency matrix

This example visualizes a dolphin social network as an interactive force-directed graph. Nodes represent individual dolphins, and links show pairwise affections with thickness scaled by the strength of the relationship. The code loads dolphin interaction data from a raw CSV file hosted on GitHub using `d3.csv`, then applies a `d3.forceSimulation` with link, charge, and center forces to position the nodes within an SVG. Users can drag nodes via D3’s drag behavior, which temporarily fixes node positions during interaction.

Loading thumbnail…

A7-Small Multiples

This visualization displays Broadway show attendance trends as small multiples, with each panel representing a distinct month of data. Each chart plots attendance over time as a colored line within its own axes grid. The code uses D3 v7 methods like `d3.group` to partition the data by month, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` to generate the paths. Show names appear omitted, and labels are manually positioned with SVG `text` elements.

Loading thumbnail…

A7-Heat Map

A heat map visualizes weekly Broadway show attendance by month and year, with each cell shaded from yellow to red according to the number of attendees. Hovering a cell reveals a tooltip displaying the specific year and month. The visualization uses D3.js v7 to load CSV data, build band scales for the month and year axes, and apply a sequential color scale with the YlOrRd interpolator. The axes are labeled to clarify that months appear on the y-axis and years on the x-axis.

Loading thumbnail…

A7-4 Line Chart

This chart displays the relationship between weekly attendance and gross earnings for several Broadway shows, with each show represented as a separate colored line. The visualization uses D3.js v7 with an SVG rendering approach, and it applies a linear scale to both axes to plot the data points. A legend identifies the show categories using a categorical color scheme. The chart is built from a CSV data source containing show statistics, and the code leverages `d3.scaleLinear`, `d3.line`, `d3.group`, `d3.scaleOrdinal`, and `d3.legendColor` to construct the visual elements.

Loading thumbnail…

A6-Scatter Plot w/ Color

This scatterplot displays weekly Broadway show attendance against gross earnings, with each point colored by show type (Play or Musical). The visualization uses D3 v7 to load CSV data, apply linear scales for both axes, and render SVG circles. A d3.legendColor legend distinguishes the two categories, while axis labels clarify the quantitative variables. The chart highlights correlations between audience size and revenue across different production genres.

Loading thumbnail…

A6-Bar Graph w/ Color

This bar chart visualizes Broadway show gross earnings between 1990 and 1991, with each bar representing a weekly observation from the broadway_short.csv dataset. The bars use a sequential red color scale, mapping darker shades to higher gross values, with a d3.legendColor legend positioned at the right. The visualization is built using d3.v7, leveraging scaleBand for the x-axis (dates) and scaleLinear for the y-axis (attendance), rendering as SVG rectangles whose fill color is determined by the Statistics.Gross value.

Loading thumbnail…

A6-Bar Graph w/ Diverging Color

This bar chart shows Broadway show attendance by year, diverging from blue to red based on attendance values relative to the mean. Each bar’s height maps to the yearly attendance total, while its fill color uses d3.scaleDiverging with d3.interpolateRdBu. The chart is rendered as an SVG via D3 v7, reading data from a CSV file, and includes axes, labels, and a d3-legend color legend.

Loading thumbnail…

A4 - Scatter Plot

This scatter plot displays weekly Broadway performance data from the `broadway_short.csv` file, charting gross earnings over time. Each circle’s horizontal position encodes the date, while its vertical position maps to the weekly gross revenue; the circle's radius scales with attendance. The visualization is rendered as an SVG using D3 v7, employing `d3.scaleBand` for the x-axis dates and `d3.scaleLinear` for both the y-axis (gross) and the radius scale (attendance). Axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Strip Plot-A3

This is a strip plot visualizing Broadway show gross earnings and attendance. It uses D3.js version 7 to render circles in an SVG, with each circle's x-position determined by its date and y-position by its gross earnings. The circle radius maps to attendance figures using a linear scale. The chart includes axes labeled with dates and gross values, with data sourced from a `broadway_short.csv` file. The visualization makes it easy to compare earnings and attendance across different weeks.

Loading thumbnail…

A4-Bar Graph

This example displays Broadway shows' weekly gross earnings over time, revealing the performance of shows like Miss Saigon and Tru. It uses an SVG bar chart where each bar represents a week, with the chart's height encoding the gross revenue. The code employs D3 version 7 to handle data parsing, scaling, and rendering, specifically using `d3.scaleBand` for the x-axis dates and `d3.scaleLinear` for the y-axis gross values. The data is loaded from a CSV file, and axes are created with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Strip Plot-A3

This strip plot visualizes gross earnings data from a Broadway CSV dataset, displaying individual data points as ellipses overlaid on a box plot that shows quartiles, median, and whiskers. The visualization uses p5.js to load the CSV file via loadTable, sort the earnings values, and calculate statistical measures including IQR and outlier fences. The code maps dollar amounts to canvas coordinates using the p5.js map function and draws the box plot and outlier points on a 600x400 canvas with labeled axes.

Loading thumbnail…

Box Plot-A3

This example visualizes the distribution of Broadway show gross earnings using a box plot, highlighting the median, quartiles, whiskers, and outliers. The visualization is rendered with p5.js, which loads a CSV file from a GitHub gist in the `preload()` function and computes the five-number summary and interquartile range for outlier detection. The plot includes labeled axes, a box spanning the interquartile range, and individual points for values falling outside the upper and lower fences.

Loading thumbnail…

Histogram-A3

This visualization displays the distribution of Broadway productions by show type using a bar chart. It loads a CSV dataset from a GitHub gist and counts occurrences of Play, Musical, and Special categories, then renders the results with p5.js. The sketch draws gridlines with tick labels, blue bars scaled to the maximum count, and value labels above each bar, with axes labeled and positioned using p5.js `map()` and `text()` functions.

Loading thumbnail…

Scatter Plot Graph-A2

This scatter plot visualization uses p5.js to display the frequency of Broadway show types loaded from a remote CSV file. The code processes the data in `preload()`, counts occurrences by show type in `setup()`, and renders dots as circles on a Cartesian grid, with each dot representing 100 shows. The plot includes labeled axes with tick marks, and the x-axis categories are sorted alphabetically for readability. The visualization operates within a 400x500 pixel canvas, using p5.js functions like `loadTable()`, `ellipse()`, and `line()`.

Loading thumbnail…

Bar Graph-A2

This bar graph visualizes Broadway attendance aggregated by year, using data loaded from a remote CSV file. It uses the p5.js library’s `loadTable()` function in `preload()`, then aggregates the `Statistics.Attendance` values per `Date.Year` in `setup()`. In `draw()`, it renders a Cartesian coordinate system with labeled axes, gridlines, and blue bars whose heights are mapped from the maximum attendance value, using p5.js’ `map()` and `rect()` functions.