eranyoung

@eranyoung·7 public vizzes

Untitled

This choropleth map shows the population distribution across U.S. counties, with a color scale from light blue to red indicating population magnitude. The visualization is rendered as SVG using D3 v7, employing `d3.geoAlbersUsa` for projection and `d3.geoPath` to draw county boundaries from `counties.json`. Population data is loaded from `PopulationEstimates.csv` and matched to counties by name, with a tooltip showing county name and population on mouseover. The code uses a sequential color scale with an RGB interpolator.

Apr 13, 2022

Loading thumbnail…

Proportional Symbols Map

This visualization shows a proportional symbols map of U.S. states, where circle size encodes each state’s cost index and the top nine highest-cost states appear in red. It uses D3 v7 with SVG rendering, a `d3.geoAlbersUsa` projection, and `d3.geoPath` for both state boundaries and symbol placement. A `d3.scaleSqrt` maps cost indices to circle radii. The code loads state polygons from us-states.json and point data from expensive-states.json, adding tooltips on mouse events.

Apr 13, 2022

Loading thumbnail…

A8 Line Chart 2

This visualization displays nuclear warhead stockpiles for the US, Russia, UK, France, and China from 1945 to 2020, using a multi-line chart with a power scale on the y-axis. The lines are rendered as SVG paths with d3.line and curveBasis. Users can zoom and pan along the x-axis via d3.zoom, which rescales and redraws the lines through an update function. Hovering highlights a line, while clicking toggles its visibility.

Apr 5, 2022

Loading thumbnail…

Assignment 4 BoxPlot

This example displays a box plot of car torque values from a CSV dataset, summarizing the distribution with minimum, maximum, median, and interquartile range (Q1 and Q3). The visualization uses D3 v7 with an SVG rendering approach, employing `d3.scaleBand` and `d3.scaleLinear` for axes, and computes summary statistics via `d3.min`, `d3.max`, `d3.median`, and `d3.quantile`. A vertical line and shaded rectangle mark the range and interquartile spread, while horizontal lines indicate key values. The data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csv`.

Feb 24, 2022

Loading thumbnail…

Assignment 4 D3 BarChart

This bar chart displays the average math SAT scores of California students across multiple years, with each bar’s height mapping the score for a given year. It is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and SVG `rect` elements for the bars. Data is loaded asynchronously from a CSV file via `d3.csv`. Axis labels and a title are added as SVG text, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Feb 24, 2022

Loading thumbnail…

Untitled

A scatterplot displays the relationship between highway miles per gallon and horsepower for a dataset of cars. Each car is represented by a small circle, with the x-axis mapped to mpg and the y-axis to horsepower. The visualization uses d3.csv to load the data, then d3.scaleBand and d3.scaleLinear to position the circles within an SVG. Axes are rendered with d3.axisBottom and d3.axisLeft, and the chart includes a title and axis labels. The circles have a radius of 1.5 pixels.

Feb 21, 2022

Loading thumbnail…

Untitled

This bar chart shows the average math SAT scores of California students across multiple years, with each bar representing a yearly score. The visualization uses a band scale for the x-axis and a linear scale for the y-axis, both defined via `d3.scaleBand` and `d3.scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`, and the SVG rectangles are rendered with D3’s data join. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while a custom margin and translation position the chart within the SVG canvas.

Feb 21, 2022