yoyo2050

@yoyo2050·3 public vizzes

Earthquakes

This heatmap visualizes earthquake counts across U.S. states from 2010 to 2015, with each cell colored by magnitude category. The view initially filters to the "10 to 99" category, but a dropdown menu lets viewers switch between magnitude ranges. Built with D3 v5, the code uses `d3.scaleBand` for axes, `d3.scaleQuantize` for color mapping, and `d3.nest` for category grouping. SVG rectangles render the data, with tooltips showing exact counts via mouseover and mouseleave events.

Sep 29, 2019

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for global regions, displaying multiple lines on a chart with a color-coded legend. The data is sourced from UN population estimates and projections, spanning from 1950 to 2100. The code uses d3.csv and d3.nest to process and group the data, while d3.line with curveBasis generates the smooth paths. Color is assigned via d3.scaleOrdinal with schemeCategory10, and the chart includes axes rendered with d3.axisBottom and d3.axisLeft, with a custom color legend component for identifying each region.

Sep 28, 2019

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population over time by region, showing multiple lines that trace changes from 1950 to 2100. It uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales. The code melts wide-format UN population data into tidy rows using a custom `melt` function, then nests it with `d3.nest()` to generate paths via `d3.line()`. A color legend and gridlines are added, with data sourced from UN population estimates and medium-variant projections.

Sep 28, 2019