Luis Fabian Cortes Perez

@cortesluis·2 public vizzes

Melting Data for Multiple Lines

This visualization displays population over time by region using multiple lines, with a legend positioned to the right. The chart uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with schemeCategory10 for color encoding. Data is processed through a custom melt function that reshapes UN population estimates from wide to tidy format, combining estimates from 1950–2014 with medium-variant projections through 2100. The line generator uses curveBasis for smooth paths, while axes employ d3.axisBottom and d3.axisLeft with gridlines.

Feb 20, 2020

Loading thumbnail…

Blank Canvas

This example presents an empty, rounded rectangle that fills the entire browser viewport as a blank canvas. The visualization uses D3 v5 to select the SVG element and dynamically set its dimensions based on the document body’s client width and height, then appends a single rectangle with a 40-pixel corner radius. The SVG rendering approach relies on the D3 `select` and `append` API, while the fixed-position CSS ensures the graphic stays locked to the screen edges without scrollbars.

Feb 20, 2020