Skip to main content
Log in
L

lintonylin

@lintonylin·13 public vizzes

Loading thumbnail…

Project - All Space Missions from 1957

This visualization displays a bar chart of all space missions since 1957, with each company’s mission count broken down by mission status. It uses the Vega-Lite API in JavaScript to create a horizontal bar chart, with company names on the y-axis sorted by mission count and status color-coding the bars. The data is loaded from a CSV file via d3.csv, and the chart renders as an SVG with tooltips for company, status, and count.

Nov 5, 2020
Loading thumbnail…

Project - All Space Missions from 1957

This world map visualizes all space missions since 1957, with each country represented by a pie chart showing the proportion of successful, failed, partially failed, and prelaunch failed launches. The pie chart area encodes the total number of launches using a square root scale. The visualization is built with D3 v5, using `d3.geoPath` and `geoNaturalEarth1` for the map projection, and `d3.pie` and `d3.arc` for the pie charts. Data comes from CSV files loaded with `d3.csv`, with country boundaries from TopoJSON.

Nov 4, 2020
Loading thumbnail…

Scatter Plot with Menus and Interactive color legend on Wine Recognition Dataset

This interactive scatter plot lets users explore the Wine Recognition dataset by selecting any two of thirteen chemical attributes for the x- and y-axes via dropdown menus. A categorical color scale distinguishes the three wine classes, and the interactive legend highlights points from one class at full opacity while dimming the others on hover, with tooltips revealing the exact values. Built with React and D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleOrdinal` for scales and renders SVG circles, with axes generated by custom components.

Oct 29, 2020
Loading thumbnail…

Relation Graph with d3-force

This interactive relation graph visualizes the character co-occurrence network from Victor Hugo's *Les Misérables*. Using `forceSimulation` from the `d3-force` library alongside the standard d3.v6 API, it maps characters to circles and their interactions to weighted lines. The SVG rendering supports both node dragging via the `drag` behavior and view zooming controlled through the `zoom` extension, which applies transforms to the network elements. Nodes are colored by their group assignment using the `schemeCategory10` palette.

Oct 28, 2020
Loading thumbnail…

US Police Shootings Visialization

A bar chart visualizes the frequency of US police shootings, grouped by the type of arms involved and colored by the victim's race, with tooltips showing exact counts. The visualization is built using the vega-lite-api to define the bar marks and encodings, while d3.csv loads the shootings dataset from a gist repository. Vega and Vega-Lite render the chart, with vega-tooltip providing interactive details, and a custom config adjusts font sizes and axis styles for readability. The chart fills the entire browser window, using the dataset's categorical and quantitative fields directly.

Oct 26, 2020
Loading thumbnail…

Scatter Plot with Menus on Wine Recognition Dataset

This scatter plot from the Wine Recognition dataset lets users explore relationships between 13 chemical attributes of three wine varieties. Dropdown menus select which attributes appear on the x- and y-axes, while a fixed color encoding distinguishes the wine classes. Built with React and D3 v5, the SVG visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and renders circles with tooltips that display the wine type and coordinate values. The data is loaded as CSV via `d3.csv`.

Oct 7, 2020
Loading thumbnail…

US Police Shootings variation by month and race Visialization

This visualization displays U.S. police shootings by month and victim race using a bar chart, revealing that shooting totals remain consistently high over time with white victims comprising the largest share. It aggregates CSV data from a public dataset, transforming dates into monthly periods and grouping counts by race. The chart is built with the Vega-Lite API, which wraps Vega and Vega-Lite, and automatically renders and exports to SVG. Custom axis styling and tooltips enhance readability.

Sep 29, 2020
Loading thumbnail…

Smiling Fall Guys

A smiling Fall Guys character is drawn in pink with white face, black-outlined eyes, and a curved mouth, rendered entirely with SVG shapes. The figure’s hands and feet are angled via rotated groups, while the mouth is generated using d3.arc with specified start and end angles. React components compose the SVG elements, and all dimensions are computed from the window size for a full-screen display. The example uses d3.arc for the smile path and React for declarative SVG markup.

Sep 22, 2020
Loading thumbnail…

Apps in the Microsoft Windows Store Visialization

A scatterplot of Microsoft Windows Store apps, using circle size to indicate the count of apps per category and rating level. The visualization plots app categories along the x-axis and their ratings on the y-axis, with the color encoding category and the size encoding the aggregated count. It is built with the vega-lite-api library, using D3’s `csv` loader to fetch data from a GitHub-hosted CSV file, and the encoding leverages `vl.groupby` and `vl.count` for aggregation, with tooltips enabled through the vega-tooltip handler.

Sep 17, 2020
Loading thumbnail…

All Space Missions from 1957 Visialization

This visualization displays all space missions from 1957 onward as a horizontal bar chart, showing the number of missions per company, broken down by mission status. The bars are color-coded by status, with tooltips revealing company names and mission counts. Built using the vega-lite-api with d3.v5 for data loading, the chart reads CSV data from a gist and renders via Vega-Lite’s markBar encoding, applying a custom config for dark text and light gray ticks. The data is aggregated using vl.groupby and vl.count.

Sep 17, 2020
Loading thumbnail…

Loading and Parsing CSV Data on "Dataset of the apps in the Microsoft Windows Store"

This example displays three statistics about a Microsoft Windows Store apps dataset in a large preformatted text block: the approximate file size in kilobytes, the number of rows, and the number of columns. Using D3 v5, it loads the remote CSV via `d3.csv` and reports the values computed from the parsed data, including `d3.csvFormat(data).length` to estimate the file size and the `data.columns` array to count columns. The data comes from a gist by lintonylin.

Sep 7, 2020
Loading thumbnail…

Loading and Parsing CSV Data on "US Police Shootings"

This example displays summary statistics for a CSV dataset of US police shootings, showing the file size in kilobytes, row count, and column count in large text. It loads the data using `d3.csv` from d3.v5, then reports `data.length` and `data.columns.length` after parsing. The code also includes commented-out alternatives using `fetch` with `async`/`await` and `d3.csvParse`, highlighting different parsing approaches. The data comes from a gist hosted on GitHub.

Sep 7, 2020
Loading thumbnail…

Loading and Parsing CSV Data on "All Space Missions from 1957"

This example displays summary statistics for a CSV dataset of all space missions from 1957, showing the file size in kilobytes, row count, and column count in large text. It loads the data using `d3.csv` with a promise, then calculates the metrics via `d3.csvFormat` and the parsed data’s `length` and `columns` properties. The code also includes commented alternatives using `fetch` with `async/await` and `d3.csvParse`, as well as a nested promise “pyramid of doom” pattern. The data source is a raw GitHub Gist URL.

Sep 7, 2020