Sofi

@SofiaTM31·3 public vizzes

Fork of Melting Data for Multiple Lines

Multiple semi-transparent lines show population change over time for world regions, with a categorical color legend identifying each region. The visualization uses d3.line with curveBasis to smooth paths and d3.scaleOrdinal for coloring, while d3.axisLeft and d3.axisBottom render axes with gridlines. Data comes from UN population estimates (1950–2014) merged with medium-variant projections (2015–2100), processed via a custom melt function. The code relies on d3.scaleTime and d3.scaleLinear for scales in this SVG-based chart.

May 18, 2021

Loading thumbnail…

Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects 2017. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the population axis and `scaleBand` for country categories. The chart customizes axes by removing default ticks and domains, adding a formatted tick label that converts values using `format('.3s')` with G replaced by B. Population data is loaded from a CSV file and multiplied by 1000 before rendering, with each bar colored steelblue via CSS.

May 15, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the ten most populous countries in 2020 as horizontal bars, sorted by population, with a labeled x-axis formatting values in billions. The chart is built with React and D3 v5, using a `scaleBand` for the y-axis and a `scaleLinear` for the x-axis. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Each `<rect>` mark includes an SVG `<title>` element for tooltips. Styling uses Poppins font and custom colors for bars and axes.

May 10, 2021