Amit Wadhwa

@dubwalla·5 public vizzes

Coronavirus Deaths by Country over Time (with Voronoi Hover)

A multi-line chart displays cumulative COVID-19 deaths over time for each country, using a log scale on the y-axis. Data comes from the Johns Hopkins Coronavirus dataset and is rendered as SVG paths in React. A Voronoi overlay, built with `d3.Delaunay`, makes it easy to hover near any point on the chart; hovering highlights the nearest country’s line and shows a tooltip with the name, death count, and date, using `d3.scaleTime`, `d3.scaleLog`, and `d3.line()`.

Apr 26, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries, using a horizontal layout with a custom band scale for categories and a linear scale for values. The React application, built with D3 v5, renders SVG rectangles that encode population data, with tooltips revealing exact figures. Data comes from the United Nations World Population Prospects 2019, loaded via D3’s CSV parser. The chart includes styled axes with tick marks and labels, a custom axis label, and a Poppins font, all defined within a React component that scales axes and marks based on the parsed dataset.

Apr 26, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example loads a remote CSV file containing Yemen displacement data and displays basic summary statistics: file size in kilobytes, row count, and column count. It uses d3.csv to fetch and parse the data, then d3.csvFormat to measure the formatted string length, and d3.csvParse in commented alternatives with fetch and async/await. The visualization appears as a large-text pre element, showing the parsed dataset’s dimensions without any chart or graphical rendering.

Apr 26, 2020

Loading thumbnail…

Vega-Lite API Template

This visualization uses Vega-Lite's API to render a bar chart of household counts in Yemen, grouped by governorate of origin and colored by displacement date. It loads CSV data from a remote gist, configures axes and tooltips, and fits the chart to the browser window. The example demonstrates the `vega-lite-api` library alongside D3 and Vega tooltip handlers.

Apr 26, 2020

Loading thumbnail…

Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, showing engine displacement, horsepower, model year, and weight. Each circle represents a car, with position encoding displacement and horsepower, color encoding year, and size encoding weight. The code registers Vega, Vega-Lite, and the Vega-Lite API with tooltip support, loads data via `d3.csv`, and applies a custom config for axis and font styling. It demonstrates using `vl.markCircle`, `.encode`, and chaining methods to build an interactive chart programmatically.

Apr 26, 2020