The Problem of Occlusion

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with tooltips revealing vehicle names. Each point uses a semi-transparent fill to visualize overlapping data. The visualization is built using the Vega-Lite API, with custom configuration for axis styling and label fonts. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG using Vega-Lite’s `markPoint` encoding with quantitative scales for both axes.

DDaMei1993

76% match

Vega-Lite API Template

This example renders a scatterplot of automobile data using the Vega-Lite API, with each circle representing a car model positioned by its country of origin and horsepower. The visualization shows overlapping points with low opacity to reveal density patterns. It loads data from a CSV file using d3.csv, constructs the mark and encoding specifications through vl.markCircle and vl.encode, then renders the final SVG using Vega charting libraries bundled with Vega-Tooltip. The code demonstrates a workflow that builds a Vega-Lite specification programmatically rather than writing JSON directly, minimizing boilerplate while retaining full expressiveness.

Vega-Lite API Template

This example showcases a scatter plot of automobile data, with each point representing a vehicle’s year and horsepower. It uses the Vega-Lite API to declaratively define the visualization, registering with Vega, Vega-Lite, and d3.csv for data loading. The plot is configured with custom axis styling and tooltips, rendered as an SVG that fills the window, and includes a semi-transparent point mark for overlapping data.

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV file, plotting engine horsepower against the origin of each vehicle. The visualization employs semi-transparent black circles to reveal overlapping points, with tooltips displaying car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches data via d3.csv, and applies a custom configuration for axis styling and label fonts. The chart dynamically fits the browser window using an autosize type of “fit” with padding.

Scatter Plot with Small Points

This example displays a scatter plot of automobile data, plotting engine displacement against horsepower, with tooltips revealing each vehicle’s name. The visualization uses the vega-lite-api to construct the chart, which is rendered with Vega-Lite and Vega, while d3.csv loads the data from a remote URL. The mark is configured with small, fixed-size points and a custom config adjusts axis and label styling.

CChris Briggs

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement against horsepower, with opacity to reveal overlapping points and tooltips displaying car names. The visualization is built using the Vega-Lite API, which compiles specifications to Vega, and renders with D3.js’s CSV loader to fetch the auto-mpg dataset. The code customizes axes and text styling via a config object, and integrates Vega-Tooltip for interactive hover details.

Ttjcocucci

Scatter Plot with Small Points

This example displays a scatter plot of automobile data from the auto-mpg dataset, plotting engine displacement against horsepower. Each point represents a vehicle, with tooltips showing the car name on hover. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications into JavaScript methods. The code registers Vega and Vega-Lite, loads the CSV data via d3.csv, and renders the chart as SVG with a custom configuration for styled axes and labels.

74% match