158andCAT

@158andCAT·9 public vizzes

Smoothed Daily Coronavirus Deaths Line Chart

A smoothed multi-line chart compares daily COVID-19 deaths over time for the top 50 countries by cumulative deaths. The y-axis uses a logarithmic scale to accommodate wide value ranges, and the lines are smoothed via a repeated averaging technique. Built with React and D3 v5, the visualization uses a Voronoi overlay for hover detection to highlight a selected country's line and display a tooltip with details. Data is sourced from the Johns Hopkins Coronavirus dataset.

Jul 28, 2020

Loading thumbnail…

Smoothed Daily Coronavirus Deaths Line Chart

This chart shows smoothed daily coronavirus death counts over time for the top 50 countries by cumulative deaths, using a logarithmic y-axis to accommodate wide variations in scale. Hovering over any point highlights the entire country’s trajectory and displays a tooltip with the exact date and death total. Built with React and D3 v5, the visualization renders as an SVG and uses a Voronoi overlay for efficient hover detection. Data comes from the Johns Hopkins Coronavirus Dataset, with the daily counts smoothed via repeated averaging.

Jul 4, 2020

Loading thumbnail…

Smoothed Daily Coronavirus Deaths Line Chart

This chart displays smoothed daily coronavirus deaths over time for the top 50 countries by cumulative deaths, using a log-scaled y-axis and a time-scaled x-axis. Each country is represented by a gray line, and hovering over the visualization highlights the nearest country’s line and shows a tooltip with its name, date, and total death count. The example uses React with D3 v5 APIs such as `scaleLog`, `scaleTime`, `line`, and `axisBottom`, plus a Voronoi overlay (`d3.Delaunay`) for hit-testing. Daily death data is smoothed via repeated averaging in a custom `blur` function. Data comes from the Johns Hopkins Coronavirus Dataset.

Jul 4, 2020

Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population over time by region as multiple colored lines, using an ordinal color scale to distinguish each region. The chart orders the lines by their final population value, creating an intuitive ranking. It uses D3 v5 APIs including `nest()`, `scaleTime()`, `scaleLinear()`, `line()` with `curveBasis`, and `axisBottom`/`axisLeft`. Data is processed from UN population estimate CSVs, melted from wide to long format to generate the time-series paths.

Jul 2, 2020

Loading thumbnail…

Smoothed Daily Coronavirus Deaths Line Chart

This chart displays smoothed daily COVID-19 death counts for the top 50 countries by cumulative deaths, with a logarithmic y-axis to accommodate wide variation. Hovering over any data point uses a d3.Delaunay Voronoi overlay to highlight the corresponding country’s full line and show a tooltip with the date and total deaths. The smoothing is applied via a repeated averaging blur function to the raw Johns Hopkins dataset, and the visualization is rendered as an SVG using React and D3 scales, axes, and line generators.

Jul 2, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A dynamic bowl of fruit demonstrates D3's general update pattern for handling data changes. Simulated fruit purchases add apples and transform them into lemons, with each change triggering animated updates. The visualization renders SVG circles with size and color scales mapped to fruit type. D3 v5's join operation manages enter, update, and exit transitions, animating positional shifts and radius changes over 500 milliseconds.

Jun 25, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases for entering, updating, and exiting data. A bowl of fruit is rendered as SVG circles with labels, starting with five apples that are then removed, replaced with a lemon, or filtered out over time. The code uses d3.scaleOrdinal for color and radius mapping, along with selection.merge and selection.exit to handle dynamic data changes. The visualization shows how data joins manage transitions between states without animation, using explicit enter and exit logic.

Jun 25, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG data set. Each red semi-transparent circle represents a car, with positions determined by d3.scaleLinear scales for both axes. The visualization uses D3 v5 to load CSV data, parse numeric fields, and render SVG elements, including axes generated with d3.axisLeft and d3.axisBottom. The chart is styled with custom CSS, and the visualization runs within an SVG container as specified in the HTML structure.

Jun 24, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 15 most populous countries for the year 2020, using horizontal bars ordered by rank. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with an SVG rendering approach. Population data comes from the United Nations World Population Prospects 2019, loaded as a CSV. The chart omits the left axis labels and applies a black fill to all bars, creating a minimalist aesthetic.

Jun 23, 2020