Rogery Vargas

@rogery1999·2 public vizzes

Fork of Selecting a Year on a Line Chart Rogery

A multi-line chart visualizes United Nations population estimates and projections from 1950 to 2100, grouped by world region with a color legend. A draggable vertical line marks a selected year, and moving the mouse over the chart updates that selection and re-renders the visualization. The code uses d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and d3.axisBottom/axisLeft, rendering SVG paths and circles.

Apr 19, 2021

Loading thumbnail…

Fork of Melting Data for Multiple Lines Rogery

This example shows population trends over time for world regions, with multiple lines plotted on a shared time axis and colored by region. The chart uses a legend to identify regions, with lines sorted by their final population value. It loads data from UN population estimates CSV files, processes it with a custom melt function, and renders using D3 v5 with SVG. Key APIs include d3.line, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.nest, and d3.axisBottom.

Apr 19, 2021