G

garrettriha

@garrettriha·29 public vizzes

Loading thumbnail…

CA Zip Code Map Part 2E

A choropleth map of California zip codes shaded by stroke mortality counts from CSV data. The visualization uses D3 v5 with `geoMercator` projection and `geoPath` to render SVG paths, while `scaleOrdinal` with `schemeSpectral` assigns colors based on death counts. Hovering highlights individual zip codes in red, and a zoom behavior enables interactive panning and scaling of the map.

Loading thumbnail…

CA Zip Code Map Part 2E

A choropleth map of California zip codes displays stroke mortality counts for 2016, with each zip code polygon filled in red. The visualization uses d3.geoMercator and d3.geoPath to project and render GeoJSON zip code boundaries, while d3.csv loads the stroke data joined to the map features. The SVG map supports d3.zoom for panning and zooming, and hover effects highlight individual zip codes.

Loading thumbnail…

CA Zip Code Map Part 2D

This visualization displays the number of stroke-related deaths per California ZIP code for 2016, using a choropleth-style map where each ZIP code area is rendered as a red SVG path. The map is projected using a Mercator projection centered on California, and users can zoom and pan the view. The code loads geographic boundaries from a public GeoJSON repository and joins them with mortality counts from a local CSV file using d3.csv and d3.json. Interactive zooming is handled through D3's zoom event, while d3.geoPath generates the map shapes.

Loading thumbnail…

CA Zip Code Map Part 2C

This map displays California zip codes with stroke fatality counts from 2016, using a Mercator projection. Hovering over a zip code highlights it in red, while tooltips reveal the count for each region. The visualization uses d3.geoMercator, d3.geoPath, and d3.zoom to render and navigate the geographic data. Zip code boundaries come from a GeoJSON file, joined with CSV data containing stroke counts, and the SVG is rendered with D3 v5.

Loading thumbnail…

CA Zip Code Map Part 2C

This map of California zip codes visualizes stroke mortality data from a CSV file, with each zip code area represented as a selectable polygon. The visualization uses a Mercator projection and D3’s geoPath to render the GeoJSON boundaries, while a zip code identifier appears as a tooltip when hovering over each region. Built with d3.v5, the map supports zooming and panning via d3.zoom, and employs event listeners to handle user interactions. The stroke counts are not visually encoded by color, but the data is accessible through the interactive tooltip.

Loading thumbnail…

CA Zip Code Map Part 2C

This example displays a choropleth-style map of California zip codes, with each region colored light blue and highlighted red on hover. The visualization renders stroke mortality counts for 2016 by overlaying zip code boundaries from a GeoJSON file onto a Mercator projection. The code uses D3 v5’s `geoMercator`, `geoPath`, and `zoom` to create an interactive, pannable SVG map, while stroke data from a CSV file is joined to the geographic features via zip code identifiers.

Loading thumbnail…

CA Zip Code Map Part 2B.1

This example maps California zip code boundaries and overlays stroke mortality data from a CSV file. Each zip code polygon is rendered using `d3.geoPath` with a Mercator projection, and hover effects highlight individual regions. The visualization supports pan and zoom interactions through the `d3.zoom` API. The GeoJSON data comes from an external GitHub repository, and the stroke counts are joined to the map by zip code, though the counts themselves are not visually encoded.

Loading thumbnail…

CA Zip Code Map Part 2B

This example maps California zip code boundaries, coloring each region light blue with a red hover highlight. It visualizes stroke mortality data by zip code, though the chart itself displays the geographic shapes without encoding the count values in the fill. The map uses a Mercator projection with d3.geoPath and d3.geoMercator, rendering SVG paths from a GeoJSON file of California zip codes. The stroke data is loaded from a CSV, and the map supports pan-and-zoom interaction through d3.zoom.

Loading thumbnail…

CA Zip Code Map Part 1B

This map displays California’s zip code boundaries as green polygons with thin black outlines on a gray background. It loads GeoJSON data from the OpenDataDE GitHub repository and renders the state using a projected `geoMercator` centered at coordinates [-120, 37], with `d3.geoPath` generating the SVG path strings. The visualization sets the map scale to 3.3 times the width and translates it to the center of the SVG canvas, delivering a static, full-state view without interactivity.

Loading thumbnail…

CA Zip Code Map

This example renders a choropleth-style map of California zip code boundaries using SVG. It loads GeoJSON data from a GitHub repository and draws each zip code region as a path with a green fill and black outline. The code uses d3.json and d3.geoPath with a d3.geoMercator projection centered on California, scaling the map to fit the viewport. The visualization provides a static geographic overview of all zip code areas in the state.

Loading thumbnail…

CA Zip Code Map

This example renders a choropleth-style map of California zip code boundaries using SVG. It loads GeoJSON data from a GitHub repository and draws each zip code region as a path with a green fill and black outline. The code uses d3.json and d3.geoPath with a d3.geoMercator projection centered on California, scaling the map to fit the viewport. The visualization provides a static geographic overview of all zip code areas in the state.

Loading thumbnail…

CA Zip Code Map part IIA

This visualization displays California zip code boundaries as a green choropleth map on a Mercator projection, centered on the state’s coordinates. Using d3.geoPath and d3.geoMercator, it renders SVG paths from GeoJSON data loaded from a GitHub repository. The map supports interactive zooming and panning via d3.zoom, with hover effects that turn individual zip codes red and show their five-digit identifiers as tooltips. The code relies on D3 v5’s modular imports for selection, projection, and event handling, with styling defined in CSS.

Loading thumbnail…

CA Zip Code Map part III

This map displays California zip code boundaries colored green, with stroke mortality counts from 2016 stored in a CSV file. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to render GeoJSON zip code polygons as SVG paths, while `d3.zoom` enables pan and zoom interactions. Hovering highlights regions in red, though the code does not yet bind the CSV count data to the map shapes.

Loading thumbnail…

CA Zip Code Map part II

This map of California zip code areas renders each region as a green SVG path with black outlines. Hovering over any zip code turns it red, and the map supports pan and zoom interactions through d3’s zoom event. Using d3.geoPath with a d3.geoMercator projection, it draws geographic features from GeoJSON data fetched from a GitHub repository containing California zip code boundaries. The visualization writes the zip code identifier as a tooltip on each path.

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with SVG elements animates its eyebrows upward and back down in a loop. The example demonstrates fundamental D3.js DOM manipulation, using `d3.select` to append a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth constructed with the `d3.arc` helper. Two sequential `transition` calls with a 2000-millisecond duration move the eyebrow group via its `transform` attribute, showing basic chained animation without data binding. The face is centered on an empty 960×500 SVG canvas, with styling handled by an external stylesheet.

Loading thumbnail…

Static SF Bay Area G. Riha Air Pollution and Income

This interactive scatter plot visualizes the relationship between air pollution and income across San Francisco Bay Area census tracts. Users can select different socioeconomic attributes from the dropdown menu, which updates the y-axis and data points accordingly. The visualization uses d3.csv for data loading, along with d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.axisBottom for axes. Circles are animated via transition().duration() and delay(), with SVG rendering and data sourced from a CSV file containing median income and healthcare/poverty statistics.

Loading thumbnail…

Orange County G. Riha Air Pollution and Income

This interactive scatterplot explores relationships between air pollution (PM2.5) and four socioeconomic attributes—median household income, median family income, percent without healthcare, and percent below poverty line—across California regions. Users select attributes via dropdown menus built with a custom `dropdownMenu` module. The visualization uses D3 v5 scales (`scaleLinear`), axes (`axisLeft`, `axisBottom`), and animated circle transitions (`transition().duration(300).delay(...)`) rendered as SVG. Data comes from `data.csv`, showing geographic variation in pollution exposure across income and demographic conditions.

Loading thumbnail…

Los Angeles G. Riha Air Pollution and Income

A scatterplot for the Los Angeles area compares PM2.5 air pollution levels (x-axis) against a user-selectable income or health attribute from a dataset of regional census tracts. Using D3 v5, the visualization loads a CSV and converts its string columns to numbers. Animated circles transition between positions when the user changes the y-axis variable through a dropdown menu. The chart relies on D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to render scales and axes.

Loading thumbnail…

#5 G. Riha Air Pollution and Income

This interactive scatter plot explores the relationship between PM2.5 air pollution levels and various socioeconomic indicators across Los Angeles, Orange County, and the San Francisco Bay Area. The visualization uses dropdown menus to let viewers switch which region and which income, health insurance, or poverty metric is displayed on the y-axis. Built with D3 v5, the plot uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, while a transition with a duration of 900 milliseconds and staggered delays animates each circle from the center to its final position. The SVG rendering uses semi-transparent teal circles.

Loading thumbnail…

#4 G. Riha Air Pollution and Income

An interactive scatter plot explores the relationship between air pollution (PM2.5 levels) and socioeconomic attributes—income, health insurance coverage, and poverty rates—across three California regions. Users select a region and an attribute from two dropdown menus to update the visualization. The D3 v5 code loads data from a CSV file, creates animated SVG circles, and updates scales and axes dynamically. The visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and custom `dropdownMenu` and `scatterPlot` modules, with a transition animating point positions over 900 milliseconds.

Loading thumbnail…

SF Bay Area G. Riha Air Pollution and Income

The scatterplot visualizes the correlation between PM2.5 air pollution levels and various socioeconomic attributes across census tracts in the San Francisco Bay Area and Los Angeles. Users select which attribute to display on the y-axis and which region to analyze via dropdown menus. The visualization uses D3.js (v5) to render an interactive scatterplot with animated transitions, where each circle represents a tract and its position is determined by the selected variables. The code leverages D3's `scaleLinear`, `axisLeft`, and `axisBottom` functions to construct the axes, while the `dropdownMenu` component manages user input. Data is loaded from a local CSV file containing median household income, family income, healthcare coverage, and poverty rates.

Loading thumbnail…

#3 G. Riha Air Pollution and Income

This interactive scatter plot explores the relationship between PM2.5 air pollution levels and various socioeconomic indicators across Los Angeles County census tracts, using data from the provided CSV. Users select which income, poverty, or health insurance metric to display on the y-axis, while the x-axis remains fixed on particulate matter concentration. The visualization uses d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for gridlines, and transitions circles with staggered delays per data point. A dropdown menu built with D3’s selection API lets viewers swap variables, dynamically re-rendering the SVG.

Loading thumbnail…

#2 G. Riha Air Pollution and Income

This interactive scatter plot explores the relationship between PM2.5 air pollution levels and various socioeconomic indicators, such as median household income, poverty rate, and lack of health insurance coverage, using data from census tracts. Dropdown menus let the user select any column for the y-axis while the x-axis remains fixed on PM2.5 levels. The visualization, built with D3 v5, renders circles with a fade and scale-in transition. It uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to build the chart, with SVG as the rendering format and a `transition().duration(900).delay()` animation.

Loading thumbnail…

G. Riha Air Pollution and Income

This interactive scatterplot explores the relationship between air pollution levels (ds_pm_pred) and household income across Los Angeles County census tracts. Users select different variables for the x- and y-axes via dropdown menus, enabling comparisons between pollution, income, poverty, and health insurance metrics. The D3 v5 visualization uses SVG circles with animated transitions, scaling axes with d3.scaleLinear, and rendering tick marks and labels through d3.axisBottom and d3.axisLeft. Data is loaded from a CSV file containing county-level demographic and environmental measurements.

Loading thumbnail…

G. Riha LA Pollution Analysis

This interactive scatter plot from G. Riha analyzes pollution and income across Los Angeles census tracts, showing PM2.5 air pollution values along the x-axis and median household income on the y-axis via a dropdown menu to toggle other demographic variables. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom for rendering tick marks. Circles are appended as SVG elements with opacity, while d3.format applies concise tick labels, and a custom dropdown menu component handles user selection.

Loading thumbnail…

G. Riha CA Pollution Analysis

This scatter plot examines the relationship between air pollution and median household income across census tracts in California. Each circle represents a neighborhood, positioned by its pollution level and income, revealing a potential correlation between environmental factors and economic status. The visualization uses D3 v5 with SVG rendering, employing scaleLinear for both axes and axisBottom/axisLeft for tick marks. Data comes from a CSV file containing predicted pollution values and census income data.

Loading thumbnail…

G. Riha Citibike & Poverty Analysis

This scatter plot compares CitiBike trip counts to the percentage of residents living below the poverty line across New York City neighborhoods, with each circle representing one neighborhood. The visualization uses D3 v5 with `csv` for data loading, `scaleLinear` for both axes, and SVG circles for data points. The y-axis is reversed to show poverty percentages ascending downward, and both axes include tick marks and formatted labels. Data comes from the included `data.csv` file, which combines CitiBike usage statistics with U.S. Census Bureau poverty estimates.

Loading thumbnail…

G. Riha Citibike Analysis

This scatter plot reveals the relationship between CitiBike trip counts and the percentage of workers who commute without driving alone, with each circle representing a New York City neighborhood. The visualization uses d3.csv to load the dataset and d3.scaleLinear to map bike trip counts and commute percentages to x- and y-axes, with axes formatted using d3.axisLeft and d3.axisBottom. Circles are rendered as SVG elements with d3.selectAll, and the y-axis is inverted to display higher commuter percentages at the top. The chart includes labeled axes and a title, styled through a separate CSS file.

Loading thumbnail…

G. Riha Citibike & Poverty Analysis

This scatter plot compares CitiBike trip counts to the percentage of residents living below the poverty line across New York City neighborhoods, with each circle representing one neighborhood. The visualization uses D3 v5 with `csv` for data loading, `scaleLinear` for both axes, and SVG circles for data points. The y-axis is reversed to show poverty percentages ascending downward, and both axes include tick marks and formatted labels. Data comes from the included `data.csv` file, which combines CitiBike usage statistics with U.S. Census Bureau poverty estimates.