Skip to main content
Log in
A

amrubal

@amrubal·20 public vizzes

Loading thumbnail…

beeswarm

A beeswarm plot visualizes the percentage of honeybee colonies affected by various stressors across U.S. states in 2015. Each circle represents a state’s reported value for a stressor category, colored by type (e.g., Varroa mites, pesticides) using a color scale. The horizontal axis uses a logarithmic scale. The layout is computed with `d3.forceSimulation`, applying forceX, forceY, and forceCollide to arrange points, while `d3.voronoi` adds hover regions. Data comes from a CSV file, rendered as SVG.

May 5, 2022
Loading thumbnail…

Assignment 10: Grade A (Proper)

This example displays a bar chart of total votes for three presidential candidates—Bernie Sanders, Donald Trump, and Hillary Clinton—using data from the CORGIS election dataset. The React-based visualization, rendered as SVG on an HTML canvas, draws bars scaled by vote count along a linear y-axis and categorical x-axis. It leverages d3.scaleBand and d3.scaleLinear to compute positions, and d3.axisBottom and d3.axisLeft to generate labeled axes with a rotated y-axis title.

Apr 25, 2022
Loading thumbnail…

Assignment 10: Grade A (Misleading)

This visualization displays the total number of votes for three presidential candidates using a bar chart, with the y-axis truncated to begin at 10,000,000 votes. This misleading scale exaggerates the visual differences between candidates, making the vote counts appear more disparate than they are. The chart is rendered as an SVG using D3 v7, with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Data is loaded from a local `data.csv` file containing candidate names and vote totals.

Apr 25, 2022
Loading thumbnail…

Assignment 4: Bar Chart

This example shows the number of women in five selected STEM majors in a bar chart, with the count of females on the y-axis and the major names on the x-axis. The data is loaded from a CSV file derived from the Corgis graduates dataset. The chart is rendered as an SVG using D3 v7, with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to draw the axes.

Apr 25, 2022
Loading thumbnail…

Assignment 10: B Grade

A bar chart displays four years of monetary values from the included CSV file, with each bar labeled directly above it using the dollar amount. The chart uses ordinal and linear D3 scales for positioning, while axes are generated with `d3.svg.axis`. Text labels are appended as SVG `<text>` elements with a class applied for styling. The visualization renders in SVG, leveraging D3 v3’s CSV loading and time parsing to format the year values, and relies on React only as the hosting framework.

Apr 25, 2022
Loading thumbnail…

Assignment 9: Proportional Map

This map of the United States uses green circles of proportional size to depict the relative housing cost index for each state, with a legend indicating values of 100, 200, and 300. The visualization renders the state outlines as an SVG path from TopoJSON data, while the data-driven symbols are drawn from a centroid point layer. The code employs d3.geo.path and d3.scale.sqrt for the projection and proportional scaling, loading the dataset from a CSV file to define the circle radii.

Apr 13, 2022
Loading thumbnail…

Assignment 9: Choropleth Map

This choropleth map displays the percentage of adults with a bachelor's degree or higher across U.S. counties for 2015–19, using a blue color scale. The visualization loads geographic data from a TopoJSON file and county-level statistics from a CSV, then renders each county as an SVG path filled according to its value. The code uses d3.geoPath for map projections, d3.scaleThreshold for color binning, and d3.schemeBlues for the palette. A legend with a bottom axis communicates the percentage ranges, and state boundaries are overlaid as white lines.

Apr 11, 2022
Loading thumbnail…

Assignment 8: Zoom and Pan (with filter and brushing)

This interactive visualization displays daily temperature readings for New York, San Francisco, and Austin across two years, rendered as multi-colored lines on a time-series chart. Users can zoom and pan along the time axis via mouse interactions, while clicking a city’s label toggles its line’s visibility and hovering temporarily grays out non-targeted lines. The code uses D3 v7’s `d3.zoom`, `d3.axisBottom`, and `d3.line` with basis curves, extracting data from a TSV file. React and SVG provide the framework and rendering, with CSS styling for lines and axes.

Apr 4, 2022
Loading thumbnail…

Assignment 8: Filtering

This visualization plots daily temperature readings for New York, San Francisco, and Austin as smooth, colored lines over time using D3.js v7 with an SVG renderer. Users can click on a city label to toggle the visibility of its corresponding line, effectively filtering which data series are displayed. The chart includes a time-based x-axis, a temperature y-axis, and a zoom interaction (d3.zoom) for panning and scaling. Data comes from a TSV file loaded with d3.tsv.

Apr 4, 2022
Loading thumbnail…

Assignment 8: Brushing (with filtering)

This visualization displays daily temperature records for New York, San Francisco, and Austin from October 2011 to April 2012. Three colored lines represent each city, with a legend and hover interactions that highlight individual series while dimming others. Users can click a city label to hide or show its corresponding line, filtering the display. Built with D3 v7 and React, the code uses d3.tsv for data loading, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scales, d3.line with curveBasis for path generation, and d3.axisBottom for the time axis.

Apr 4, 2022
Loading thumbnail…

Assignment 7: Node-Link Diagram

This node-link diagram visualizes a social network of high-tech firms using the soc-firm-hi-tech dataset from networkrepository.com. The SVG rendering shows 36 nodes connected by 113 edges, with each node represented as a green circle and links as light blue lines. The visualization uses d3.forceSimulation with three forces: d3.forceLink for edge-based attraction, d3.forceManyBody for repulsion between nodes, and d3.forceCenter to keep the layout centered. Node positions update dynamically on each simulation tick, moving the circles and lines to reflect the force-directed layout.

Mar 28, 2022
Loading thumbnail…

Assignment 6: Bar Chart with Diverging Color Scale

A horizontal bar chart displays population growth rates for 35 countries, with bars extending from a central zero line and colored along a diverging red-yellow-green scale to distinguish negative from positive growth. The chart ranks countries by annual growth percentage, from the United States at 1.05% down to Germany at -0.35%, and includes country labels positioned beside each bar. The visualization uses d3.csv to load data, d3.scaleBand for the categorical y-axis, d3.scaleSequential with d3.interpolateRdYlGn for the diverging color scale, and d3.legendColor to render a horizontal legend. SVG rectangles represent the bars, with axes and labels drawn using d3.axisBottom and SVG text elements.

Mar 16, 2022
Loading thumbnail…

Assignment 6: Bar Chart with a Sequential Color Scale

This example presents a bar chart showing the number of women in select STEM majors, with each bar colored using a sequential green color scale that encodes the value. The visualization is rendered as an SVG using D3 v7, with a React-based project structure. It loads data from a CSV file, uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateGreens` for coloring. A legend is added via the d3-legend library to explain the color mapping.

Mar 7, 2022
Loading thumbnail…

Assignment 6: Scatter Plot

A scatter plot visualizes the correlation between property and violent crime rates in California and New York from 1960 to 2019. The chart uses d3.csv to load state_crime.csv, d3.scaleLinear for axes, and d3.scaleOrdinal with d3.legendColor to color-code the two states. Circles are positioned with SVG attributes and a legend is rendered horizontally.

Mar 7, 2022
Loading thumbnail…

Assignment 5: Bubble Chart

This bubble chart displays relationships between four HIV-related indicators across 20 countries using a 2020 dataset. The x-axis maps the total number of people living with HIV, the y-axis shows AIDS-related deaths, bubble size encodes new HIV infections, and bubble color represents adult HIV prevalence. The visualization uses D3.js v7 with SVG rendering. The code employs linear scales (`d3.scaleLinear`) for both axes, a square-root scale (`d3.scaleSqrt`) for bubble sizing, and a linear color scale (`d3.scaleLinear`) ranging from light blue to dark navy. Data is loaded from a CSV file using `d3.csv`, with a legend indicating infection and prevalence extremes.

Mar 1, 2022
Loading thumbnail…

Assignment 5: Line Chart

This line chart displays the birth rate of Sao Tome and Principe from 1980 to 2013, with rates declining from approximately 41 to 35 births per 1,000 people. The visualization uses d3.csv to load the data, then draws a blue SVG path with d3.line, employing d3.scaleLinear for both axes and rendering tick labels with d3.axisBottom and d3.axisLeft. The data originates from the CORGIS global development dataset.

Feb 28, 2022
Loading thumbnail…

Assignment 3: Box Plot

This example visualizes the distribution of horsepower among vehicles using a box plot, displaying key summary statistics including the minimum, first quartile, median, third quartile, and maximum values. The visualization uses the p5.js library to load a CSV dataset, calculate statistical measures, and render the box-and-whisker plot on a canvas. The plot includes numeric labels for each quartile and endpoint, with lines and rectangles drawn using p5.js built-in shape functions. Data comes from a modified cars_2.csv file containing 99 horsepower measurements.

Feb 15, 2022
Loading thumbnail…

Assignment 3: Histogram

This visualization displays a histogram of highway miles per gallon (MPG) for the first 100 cars in an edited dataset from cars_1.csv. It uses p5.js to load the CSV table in preload(), draw the canvas in setup(), and render five manually defined bins spanning 10–34 MPG in draw(), with editable bin limits and no framework dependency despite its React listing.

Feb 14, 2022
Loading thumbnail…

Assignment 2: Dot Plot (working!)

This dot plot displays the total number of new marijuana users aged 18–25 for each U.S. state and the District of Columbia. Each state is listed vertically with its corresponding value plotted as a point along a horizontal scale. The visualization uses the p5.js library to load a CSV dataset, render the canvas, and draw axes, gridlines, labels, and data points. The data source is a remote CSV file containing state names and user totals.

Feb 11, 2022
Loading thumbnail…

Assignment 2: Bar Graph (Working Version)

This bar graph displays total marijuana new users aged 18–25 for each U.S. state plus Washington, D.C., using horizontal bars scaled by value. The visualization loads data from a CSV file via p5.js’s `loadTable` in `preload`, then draws the chart in `setup` and `draw` with canvas rectangles and lines. State names appear on the left, with corresponding numeric labels at each bar’s end. The code uses p5.js 1.4.0 for rendering, with axes, tick marks, and a title generated programmatically on a 1500×1500 canvas.

Feb 8, 2022