kbriggs1

@kbriggs1·4 public vizzes

Suicide Rates Per Generation

This visualization displays projected population changes from 1950 to 2100 for global regions, with each line color-coded by region and sorted by final population size. A vertical line marks the currently selected year, which users can change by moving the mouse across the chart. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `nest`, `line` with `curveBasis`, `axisBottom`, and `axisLeft` to render the SVG. Data comes from two UN population estimate CSV files, merged and melted into yearly observations for each region.

Aug 26, 2019

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows UN population estimates and projections from 1950 to 2100 for world regions as multi-line charts, with a movable vertical line that selects a year. Moving the mouse across the chart updates the selected year, which is rendered as a black vertical line. The chart uses D3 v5 with SVG rendering, employing `d3.line` with `curveBasis` for smooth paths, `d3.nest` to group data by region, and `d3.scaleTime` and `d3.scaleLinear` for axes. A custom color legend maps regions using `d3.scaleOrdinal` with `schemeCategory10`.

Aug 26, 2019

Loading thumbnail…

Selecting a Year on a Line Chart

This line chart visualizes UN population estimates and projections by region from 1950 to 2100, with a vertical line marking a selected year. A clickable mouse-interceptor rectangle lets users hover to update the selected year via `setSelectedYear`, which re-renders the chart. The visualization uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest for grouping, rendering as SVG with an ordinal color scale legend. Data comes from two CSV files loaded with d3.csv, combining estimates and medium-variant projections.

Aug 26, 2019

Loading thumbnail…

Melting data with multiple lines

This visualization shows suicide generation numbers over time from 1985 to 2016, with multiple colored lines representing different regions and countries sorted by their final values. The chart uses d3.line with curveBasis smoothing, d3.scaleTime for the x-axis, and d3.scaleOrdinal with schemeCategory10 for line colors. Data is melted from wide CSV format using d3.nest and d3.range, and a custom color legend is rendered alongside the SVG axes.

Aug 26, 2019