leoframba

@leoframba·5 public vizzes

CS360 Assignment 9

This choropleth map visualizes county-level US population estimates for 2020 using an Albers USA projection. It uses a threshold color scale with five blues to represent population ranges, and a legend with threshold labels clarifies the bins. The map is rendered as SVG using d3.geoPath, populating county paths by joining TopoJSON geometry with CSV data via FIPS codes. Data comes from the PopEst.csv file and the US.json TopoJSON topology.

May 7, 2022

Loading thumbnail…

CS360 A10

A choropleth map of the United States visualizes the average monthly transportation cost by state, with a color scale from light yellow to dark red. The map is rendered using SVG paths projected with `d3.geoAlbersUsa` and `d3.geoPath`, with state boundaries drawn as black strokes. Fill colors are assigned based on the `transportationCost` field from the `StateExp.csv` dataset, mapped through a linear color scale. A horizontal `d3.legendColor` legend displays the cost range, and a hover interaction logs the corresponding state ID to the console.

Apr 25, 2022

Loading thumbnail…

CS360 - A10

This example shows the top ten highest-grossing domestic films from a dataset of 112 movies, sorted by lifetime gross, using a horizontal bar chart. The chart displays movie titles on the y-axis and gross revenue on the x-axis, with labeled axes and tick lines rendered in SVG. The visualization is built with D3 v7, using scales and axes like `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`. Data is loaded from a local CSV file into fixed-width bars, with WebGL mentioned in metadata but not used in the code.

Apr 24, 2022

Loading thumbnail…

CS360 - A10

This visualization shows the population growth rate from 2010 to 2019 for each U.S. state (aggregated from county-level data in CSV form). It uses a horizontally-oriented bar chart where green bars represent states with positive growth and crimson bars indicate population declines, sorted from highest to lowest growth rate. The chart utilizes d3.scaleLinear for the x-axis (formatted as percentages), d3.scaleBand for the y-axis, and d3.axisBottom and d3.axisLeft for the axes. A d3.legendColor legend distinguishes between increase and decrease, with data processed by aggregating county populations per state.

Apr 24, 2022

Loading thumbnail…

p5.js example

This p5.js example presents multiple linked visualizations of a vehicle dataset, including a bar chart and dot plot comparing drivetrain and manufacturer effects on average miles per gallon. A heat map section is also coded, though its display is incomplete. The sketch loads CSV data from a Google Sheets URL using `loadTable`, processes the data in JavaScript, and renders the charts with the p5.js drawing API (`createCanvas`, `rect`, `ellipse`, `line`), using a static canvas sized at 1500 by 4500 pixels.

Feb 8, 2022