szy1900

@szy1900·8 public vizzes

Population time-series

This example shows population trends over time for world regions, with each region drawn as a colored line against year and population axes. A color legend on the right identifies each region, and the lines are sorted by their final population values. The visualization uses React with D3 v5, including `d3.line`, `d3.nest`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for styling. Data comes from UN population estimates CSV files, processed via a custom melt function, and rendered as animated SVG paths with transitions on the legend.

Jul 23, 2020

Loading thumbnail…

Line chart

This line chart shows the daily temperature in San Francisco over a week, with the date on the x-axis and temperature on the y-axis. The chart is rendered as an SVG using D3 v5, employing scaleTime and scaleLinear for the axes, and a curveBasis line generator for a smooth path. Data is loaded from a CSV file via d3.csv.

May 23, 2020

Loading thumbnail…

Temperature in multiple cities

This visualization displays population trends over time for multiple cities, with each colored line representing a different region. A vertical black line marks the currently selected year, and moving the mouse across the chart updates this selection and re-renders the view. The code uses D3 v5 APIs including `nest()`, `scaleTime()`, `scaleOrdinal()`, `line()` with `curveBasis`, and axis generators. Data comes from the UN population estimates CSV files, processed by melting wide-format years into tidy rows, and rendered as SVG paths with a categorical color legend.

May 23, 2020

Loading thumbnail…

Circles on a Map

This interactive map visualizes 2018 population data by country, overlaying semi-transparent teal circles on a natural Earth projection. Circle area encodes population magnitude using a square-root scale, while hover effects reveal exact figures and missing data is highlighted in red. Built with D3 v5, the visualization uses `geoPath` for map rendering, `geoCentroid` for positioning circles, and `scaleSqrt` for proportional sizing. Pan and zoom are enabled via D3's zoom functionality, with a size legend explaining the population scale.

May 22, 2020

Loading thumbnail…

Scatter Plot With Meun

This interactive scatter plot visualizes relationships between car performance attributes like horsepower, weight, and acceleration using an animated D3.js SVG. Users select different columns from dropdown menus to dynamically update the x- and y-axes, with the plot transitioning smoothly (via `.transition().delay()`) as circles reposition. The visualization uses D3's `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and grids, processing data from a local CSV file.

May 21, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for cars in the UCI Auto MPG data set. The visualization renders red, semi-transparent circles on an SVG canvas, with horsepower on the x-axis and weight on the y-axis. The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to draw tick marks and grid lines. Despite its straightforward presentation, the plot with all points using equal radius and opacity offers a basic view of the data’s distribution.

May 21, 2020

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economies using color-coded countries, with interactive filtering through a clickable color legend. Hovering over legend items dims non-matching countries, while clicking toggles filtering and highlights selected categories. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from TopoJSON world-atlas files, with country names and economy classifications merged from TSV metadata.

May 20, 2020

Loading thumbnail…

Face making

An animated face made of yellow circle, two eyes, and eyebrows greets viewers. The face is rendered with SVG shapes, centered within the viewport. Using D3 v5, the eyebrows bob up and down via chained `transition().duration(2000)` calls that shift their vertical offset. The mouth is created as a D3 `arc()` path, while the entire composition is built declaratively in React.

Apr 27, 2020