Skip to main content
Log in
B

Brian Olczak

@BrianOlczak·11 public vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot visualizes terrorist reports from April 2003, encoded by date and threat level, with points colored by agency (CIA) and tooltips revealing detailed notes. The visualization is built using the Vega-Lite API, with `vl.markCircle` for marks and `vl.x`, `vl.y`, `vl.color`, and `vl.tooltip` encodings. Data is loaded from a CSV file via `d3.csv`, and interactive tooltips are provided through vega-tooltip. The chart resizes to the window and uses a custom dark theme defined in `config.js`.

Apr 20, 2021
Loading thumbnail…

Fork of 2015 Seattle House Price data

This visualization displays 2015 Seattle house prices as a scatter plot, where each circle represents a house, with circle size encoding living area, color indicating floor count, and position mapping price against year built. It uses vega-lite-api to construct the chart, d3.csv for data loading, and vega-tooltip for hover interactions. The chart applies a logarithmic price scale, zero-suppressed year baseline, and semi-transparent circles to emphasize clustering patterns across the dataset.

Mar 5, 2021
Loading thumbnail…

Compare to a BMW

This visualization compares the fuel efficiency and horsepower of various automobiles, with each car represented as a circle sized by weight and colored by its country of origin. Hovering over a point reveals the car’s name. The chart is built using the Vega-Lite API, a high-level grammar for declarative visualization, which compiles specifications to Vega and renders via SVG. Data is loaded asynchronously from a CSV file using `d3.csv`, and the visualization is configured with custom axis styles and tooltips.

Feb 19, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s miles per gallon against its horsepower. Points are colored by country of origin and sized by vehicle weight, with tooltips revealing the car model. The visualization is built programmatically using the Vega-Lite API, where `vl.markCircle` and `vl.encode` define the marks, while `vl.x().fieldQ` and `vl.y().fieldQ` map quantitative fields. Data is loaded asynchronously via `d3.csv`, and the script’s `index.js` renders the chart into an SVG using the `vega` and `vega-lite` engines.

Feb 19, 2021
Loading thumbnail…

BMW

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and origin for various car models from the Auto MPG dataset sourced from the UCI Machine Learning Repository. Each circle represents a car, with position encoding mpg and horsepower, color encoding origin, and size encoding weight, all rendered using the vega-lite-api with D3’s CSV loader. The visualization uses a customized configuration to improve readability, featuring larger axis labels and dark text on a light background.

Feb 19, 2021
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for automobiles from the UCI Machine Learning Repository’s Auto MPG dataset. Each circle, colored by country of origin, uses both its vertical position and size to encode two different quantitative variables, while a tooltip reveals the car’s name. The visualization is built using the Vega-Lite API, which composes marks and encodings declaratively, with D3.js handling data loading via `csv`. The project registers Vega-Lite and Vega with the API, applies a custom dark-themed configuration for improved readability, and renders the output as an SVG that fills the browser window.

Feb 19, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s miles per gallon against its horsepower. Points are colored by country of origin and sized by vehicle weight, with tooltips revealing the car model. The visualization is built programmatically using the Vega-Lite API, where `vl.markCircle` and `vl.encode` define the marks, while `vl.x().fieldQ` and `vl.y().fieldQ` map quantitative fields. Data is loaded asynchronously via `d3.csv`, and the script’s `index.js` renders the chart into an SVG using the `vega` and `vega-lite` engines.

Feb 19, 2021
Loading thumbnail…

Fork of Scatter Plot with Small Points

This visualization displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point sized uniformly and colored solidly. The plot uses the auto-mpg dataset loaded via d3.csv, and each car’s name appears as a tooltip on hover. Built with the vega-lite-api library, it registers with vega and vega-lite, applying a customized configuration to remove axis domain lines and enlarge label and title fonts for readability. The chart fits the full window dimensions and uses an SVG renderer.

Feb 19, 2021
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile characteristics from the UCI Auto MPG dataset, comparing fuel efficiency (mpg) against horsepower while encoding weight through point size and origin through color. The visualization is built using the Vega-Lite API, which programmatically constructs the specification through chained methods like `markCircle`, `encode`, and field mappings. It imports and registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches CSV data via `d3.csv`, and renders to SVG with custom styling for axis labels and tooltips.

Feb 19, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s miles per gallon against its horsepower. Points are colored by country of origin and sized by vehicle weight, with tooltips revealing the car model. The visualization is built programmatically using the Vega-Lite API, where `vl.markCircle` and `vl.encode` define the marks, while `vl.x().fieldQ` and `vl.y().fieldQ` map quantitative fields. Data is loaded asynchronously via `d3.csv`, and the script’s `index.js` renders the chart into an SVG using the `vega` and `vega-lite` engines.

Feb 19, 2021
Loading thumbnail…

Fork of Scatter Plot with Small Points

This visualization displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point sized uniformly and colored solidly. The plot uses the auto-mpg dataset loaded via d3.csv, and each car’s name appears as a tooltip on hover. Built with the vega-lite-api library, it registers with vega and vega-lite, applying a customized configuration to remove axis domain lines and enlarge label and title fonts for readability. The chart fits the full window dimensions and uses an SVG renderer.

Feb 19, 2021