Skip to main content
Log in
M

mariahdiaz

@mariahdiaz·21 public vizzes

Loading thumbnail…

State Choropleth Map

A choropleth map of the United States displays county-level unemployment rates from 2021, using a blue sequential color scale and a corresponding legend. The visualization is built with D3.js v5, leveraging `d3.geoPath` for rendering SVG paths, `d3.scaleThreshold` for color binning, and `d3.json` to load TopoJSON geographic data. A hover tooltip, implemented with a D3-selected `div`, reveals each county's specific unemployment percentage.

Nov 10, 2022
Loading thumbnail…

Proportional symbols map

A proportional symbol map displays the relative housing cost index for each U.S. state, with circle size scaled by the square-root of the housing cost value and the top ten most expensive states highlighted in red. The visualization uses D3 v3 with `d3.geo.path` to render state boundaries from TopoJSON and U.S. state centroids, overlaid with circles sized via `d3.scale.sqrt`. Hovering over a symbol reveals a tooltip with the state name and its housing cost.

Nov 8, 2022
Loading thumbnail…

D3 Diverging Color Bar Chart

This interactive D3 bar chart visualizes the percentage change in natural gas consumption by the electric power sector across eleven U.S. states, with bars diverging from a central zero axis. Each bar’s fill color reflects the magnitude and direction of change using a sequential color scale based on the `interpolateRdBu` interpolator. The chart employs `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for both the horizontal value scale and bar lengths, and `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` for axis ticks. A `d3.legendColor` legend with nine cells maps the color scale to the numeric range. Data is loaded from a CSV file via `d3.csv`.

Nov 8, 2022
Loading thumbnail…

D3 Bubble Chart

This bubble chart compares cereal manufacturers by plotting the relationship between cereal rating (x-axis) and sodium levels (y-axis), with bubble size representing calorie content. The visualization uses circles colored by manufacturer via `d3.scaleOrdinal` with `d3.schemeSet1`, positioned using `d3.scaleLinear` for both axes. The data comes from `data.csv`, which contains manufacturer, rating, calories, and sodium values for 77 cereals. Circle sizes are scaled with a linear scale mapping calories to radius, and the chart includes legends for both bubble size and color, using D3 v7's `d3.select`, `d3.csv`, and `d3.axisBottom`/`d3.axisLeft` APIs to build the SVG graphic.

Nov 3, 2022
Loading thumbnail…

D3 Bar Chart

This example visualizes natural gas consumption by the electric power sector across eleven U.S. states, using a horizontal bar chart where each bar’s length encodes the consumption value in billion BTU. The chart is built with D3.js (v7) and rendered as SVG, using `d3.csv` for data loading, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft`/`d3.axisBottom` for tick marks. Each bar is labeled with its exact value, and the plot includes a title and axis labels. The data comes from the included `data.csv` file.

Nov 1, 2022
Loading thumbnail…

D3 Line Chart

This line chart displays annual video game sales in North America from 2001 to 2014, with sales values in millions plotted across a time-based x-axis and a linear y-axis capped at 6.5. The visualization uses D3.js v7 to load CSV data via `d3.csv`, parse years with `d3.timeParse`, and render axes with `d3.axisBottom` and `d3.axisLeft`. A single hot-pink path is drawn using `d3.line` within an SVG canvas, accompanied by a title and axis labels.

Nov 1, 2022
Loading thumbnail…

Edge Bundling

A node-link diagram of 16 circularly arranged nodes demonstrates edge bundling to reduce visual clutter from interconnections. The radial layout positions nodes equidistantly, with curved paths drawn for each directed relationship between nodes. This example uses D3 v4 and SVG, employing a `d3.hierarchy` with `d3.cluster` to compute the tree layout, and `d3.radialLine` with `d3.curveBundle.beta(0.75)` to create the bundled edges. Hierarchical data is loaded from a local JSON file.

Oct 28, 2022
Loading thumbnail…

D3 Adjacency Matrix

An adjacency matrix displays 16 nodes from the soc-tribes dataset as a symmetric grid, where hot pink cells indicate connections and white cells represent absent links. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleBand` for axis positioning and `d3.csv` for data loading. Interactive tooltips highlight rows and columns on mouseover, while the matrix symmetrizes directed links by mapping both directions into a shared `Map` structure.

Oct 27, 2022
Loading thumbnail…

D3 Node-Link Diagram

This example shows a node-link diagram of social network data, using a force-directed layout to position 16 nodes and their connecting links. The visualization uses D3 v7's `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to calculate the layout, while rendering nodes as SVG circles and edges as lines with animated tick updates. Node colors come from `d3.scaleOrdinal` with the `schemeSet1` palette, and hovering a node triggers a tooltip via mouseover events. Data is loaded from a CSV file containing source, target, and link values.

Oct 25, 2022
Loading thumbnail…

D3 Interaction

This example shows an interactive multi-series line chart of average temperatures in New York, San Francisco, and Austin from October 2011 through April 2012, loaded from a TSV file. Using d3.tsv and D3’s time scale, the code renders three colored temperature curves with SVG paths and a basis curve interpolation. Users can hover over the chart to highlight one city’s line while dimming others, or click a line to toggle its visibility. Interactions rely on event handlers and D3 selection methods, with a `d3.axisBottom` and linear y-scale providing the axes.

Oct 13, 2022
Loading thumbnail…

D3 Scatter Plot

This scatter plot displays U.S. natural gas consumption by the electric power sector in billion BTU per year from 2000 to 2010. The code loads data from a CSV file and renders it as an SVG using D3 v7. It uses `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for tick marks. Circles are appended to represent each data point, with axis labels and a title included.

Oct 7, 2022
Loading thumbnail…

D3 Boxplot

This example presents a boxplot that visualizes the distribution of industrial natural gas prices in Hawaii, measured in dollars per million BTU. The plot summarizes the data’s minimum, first quartile, median, third quartile, and maximum values, which are computed from a CSV dataset using the d3.quantile, d3.min, and d3.max functions. The visualization is rendered as an SVG graphic, with the boxplot oriented vertically using a linear scale for the y-axis and a band scale for the x-axis. The code imports specific D3 v7 modules—including scaleLinear, scaleBand, axisLeft, and axisBottom—to construct the chart, while custom lines and rectangles are manually appended to the SVG to draw the box, whiskers, and median line.

Oct 7, 2022
Loading thumbnail…

D3 Color Scatterplot

This scatterplot compares cereal manufacturers by plotting each product's rating against its calorie count. The visualization encodes the manufacturer as color, with Kellogg's points in red and Nabisco points in blue, and includes a categorical legend to distinguish the two brands. The chart is rendered as an SVG using D3 v7, with linear scales for both axes and a sequential color legend built with the d3-legend library. The underlying data is loaded from a CSV file containing manufacturer, rating, and calorie fields.

Oct 3, 2022
Loading thumbnail…

D3 Sequential Color Bar Chart

This bar chart displays natural gas consumption by the electric power sector across eleven U.S. states, with each bar’s length encoding the consumption value in billion BTU. A sequential color scale using `d3.scaleSequential` and `d3.interpolatePuRd` maps higher consumption to darker hues, with a `d3.legendColor` legend clarifying the gradient. The chart is rendered as SVG using D3 v7, with axes created via `d3.axisBottom` and `d3.axisLeft`, and data loaded from a CSV file.

Oct 3, 2022
Loading thumbnail…

D3 Scatterplot Matrix

A D3.js scatterplot matrix compares SAT scores in math, reading, and writing, along with enrollment, across Manhattan, Bronx, and Brooklyn schools. Each row and column corresponds to one of the four variables, producing twelve scatterplots that reveal correlations and borough-specific clusters, with points colored by borough via a d3.scaleOrdinal. Built with d3.csv, scaleLinear, axisBottom/axisLeft, and an SVG rendering, the matrix is generated by nested loops over the variable pairs. A title and legend clarify the plot.

Sep 27, 2022
Loading thumbnail…

P5 Bar Chart

A P5 bar chart visualizes natural gas prices in California over time, with bars representing prices for each year sampled from an external CSV dataset. The chart highlights that 2005 had the highest price, with an annotation noting a connection to the recession. Using p5.js, the code loads data via `loadTable`, renders rectangles with `rect()`, and displays axis labels and annotations through `text()`. A loop iterates through rows, scaling price values to bar heights, while grid lines are drawn using `line()`.

Sep 20, 2022
Loading thumbnail…

P5 Heatmap

This interactive visualization displays natural gas consumption across selected U.S. states from 2005 to 2011 using a heatmap grid. The color intensity of each rectangle reflects the consumption value, with blue indicating lower consumption and pink indicating higher consumption. The P5.js sketch loads data from a CSV file containing state, year, and consumption columns, then renders the grid on a 600x500 canvas. The code normalizes consumption values by dividing by 950,000 and maps them to the fill color's red channel. State labels appear along the left axis, with years displayed across the top.

Sep 20, 2022
Loading thumbnail…

P5 BoxPlot

This example renders a boxplot of industrial natural gas prices in Hawaii using p5.js. It loads CSV data from a GitHub gist, computes quartiles and median from the price array, and draws the plot with rectangles, lines, and text labels. The chart displays minimum, maximum, and quartile values on a numeric scale, with axes marked from 0 to 800. The sketch uses p5.js functions like `loadTable`, `createCanvas`, and `rect` within the `setup` and `draw` loops.

Sep 20, 2022
Loading thumbnail…

P5 Dot Plot

This example visualizes natural gas prices in the industrial sector from 1961 to 2016 using a dot plot. Each dot represents a sampled year, positioned horizontally by price and vertically by time, with labels for both the year and price value. The code uses the p5.js library, loading CSV data from a GitHub repository via `loadTable`, then rendering points, text, and axis lines on a 600x500 canvas. The plot includes a labeled x-axis for price increments and annotations for the most and least expensive years.

Sep 20, 2022
Loading thumbnail…

P5 Histogram

This example displays a histogram of kerosene consumption in billion BTU, with data binned into eight ranges from 0-100 to 701-800. The visualization uses p5.js functions like `createCanvas`, `loadTable`, `rect`, and `line` to render the bars and grid. The data is loaded from a CSV file hosted on GitHub, and the chart includes labeled axes and a title. The code manually assigns each row to a bin and scales bar heights by a factor of 20, rather than using a dedicated charting library.

Sep 20, 2022
Loading thumbnail…

P5 Strip Plot

This example shows a strip plot of industrial petroleum prices for New Mexico, displaying individual data points as circles along a horizontal band. The p5.js sketch loads a CSV dataset via `loadTable()`, then uses `random()` to jitter each point horizontally to reduce overlap. The y-axis is scaled to price values, with tick labels and axis lines drawn using p5.js drawing functions like `line()`, `circle()`, and `text()`. The visualization uses a fixed canvas size of 400 by 700 pixels and does not update or animate.

Sep 20, 2022