Anurag Desai

@anurag3·6 public vizzes

Vega-Lite API Template

This scatterplot displays the relationship between happiness score and logged GDP per capita for countries in the 2020 World Happiness Report, with point color encoding regional indicator and size representing healthy life expectancy. Tooltips reveal country name, happiness score, and GDP per capita on hover. The visualization is built using the vega-lite-api library, which wraps Vega-Lite’s declarative syntax, while D3’s `csv` function loads the external dataset. The chart automatically fits the window dimensions and uses a custom configuration to adjust axis and label styling.

Sep 18, 2020

Loading thumbnail…

Vega-Lite API Template

This example visualizes the World Happiness Report 2020 data, plotting each country’s happiness score against its logged GDP per capita, with points colored by regional indicator and tooltips showing country details. Built with the Vega-Lite API, it uses `vl.markPoint()` and `vl.encode()` to define the scatter plot, while `d3.csv` loads the remote dataset. The visualization is rendered as an SVG via Vega and Vega-Lite, with a custom configuration for axis and label styling, and it fills the browser window using an autosize fit setting.

Sep 18, 2020

Loading thumbnail…

Diabetes Data

This example loads a CSV dataset on diabetes in adult females from a GitHub gist and compares the number of text bytes, rows, and columns in the file. It reads the data using the `d3.csv` request method, then formats it with `d3.csvFormat` to measure its size in kilobytes, and displays these figures in a large `<pre>` element on the page. The visualization is a simple textual summary, not a chart, highlighting the dataset’s dimensions for comparative analysis of medical predictor variables. The data originates from the Pima Indians Diabetes Database on Kaggle.

Sep 10, 2020

Loading thumbnail…

World Happiness Report 2020 Data

This visualization parses the World Happiness Report 2020 CSV dataset to display basic file metrics: its size in kilobytes, row count, and column count. The code uses `d3.csv()` to load and parse the remote CSV, then `d3.csvFormat()` to measure its length. The results are rendered as large text inside a `<pre>` element, demonstrating a minimal data-loading workflow with D3 v5. The underlying dataset originates from Kaggle and contains happiness scores alongside GDP, life expectancy, social support, and freedom indicators for correlation analysis.

Sep 10, 2020

Loading thumbnail…

Space Race Data

This example presents summary statistics from a dataset of space missions since 1957, comparing countries’ programs by success and activity rates. It uses d3.csv to load the CSV, then d3.csvFormat and array filters to compute total missions, successful missions, percentage success, and active rockets. The results are rendered as plain text in a large pre element, showing the data’s size, column count, and key metrics. The source is a Kaggle dataset, accessed via a GitHub gist URL.

Sep 10, 2020

Loading thumbnail…

Smiley Face Part II

A React-rendered SVG smiley face fills the browser window, with a yellow circle, concentric-ringed eyes, a red arc mouth, and angled eyebrow lines. The code uses React 16.9 and D3 v6’s `arc()` generator to construct the mouth path, while all other shapes are plain SVG elements. Position and size values are derived from `window.innerWidth` and `innerHeight`, and the face is centered via a group translation. The example demonstrates combining React’s declarative component structure with D3’s geometric utilities for static SVG visualization.

Sep 3, 2020