Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Apr 3, 2021

Created on Mar 30, 2021

This example demonstrates a scatter plot of vehicle data, encoding hydrophobic interaction values along both the x- and y-axes. The visualization leverages the Vega-Lite API to construct a point mark, with data loaded from a CSV file via D3's `csv` function. The chart is rendered as an SVG, configured with custom axis and style settings, and uses the Vega tooltip handler for interactive data inspection.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example shows a scatter plot of automobile data, mapping cylinders to the x-axis and horsepower to the y-axis, with each car represented as a semi-transparent circle. The visualization is built using D3 v7, loading data from a CSV file via `d3.csv` and rendering SVG elements with `scaleLinear`, `axisBottom`, and `axisLeft`. Axis labels are added with rotated text, while margins define the chart’s inner dimensions. The code demonstrates a basic D3 starter template, including data type conversion and appended circle elements.

Ssplit56

84% match

Loading thumbnail…

Fork of D3 Starter

This scatterplot compares vehicle horsepower and weight using data from the auto-mpg dataset, loading CSV data via `d3.csv` and rendering with SVG circles. The chart uses `d3.scaleLinear` for both axes, `d3.extent` to set domains, and `d3.axisLeft`/`d3.axisBottom` with gridlines. The title and axis labels are added as SVG text elements, and the visualization is built with D3 v6 in a simple HTML page.

NNikhil Prakash

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of vehicles, plotting displacement against horsepower, with tooltips that reveal each vehicle’s name. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders marks as SVG points. It loads data from a remote CSV endpoint via d3.csv, applies custom axis and label styling from a shared configuration, and uses the Vega-Tooltip handler to display interactive hover information. The chart fills the browser window and uses a semi-transparent point style for readability.

SSherv169

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, with horsepower on the y-axis and weight on the x-axis. Each point represents a vehicle, colored by its origin and sized according to miles per gallon, with a tooltip showing the car’s name. Built using the Vega-Lite API running on D3.js, it loads a CSV from a GitHub gist and renders into a full-window SVG with custom axis styling and tooltip configuration from Vega Tooltip.

Dducan114

82% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a connected scatterplot showing how a numeric value changes over time, with a time-scaled X axis and linear Y axis. The visualization renders as an SVG using D3 v7, loading CSV data from a remote GitHub repository. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to draw the line and circular points. It also uses `d3.timeParse` to format dates and `d3.csv` for asynchronous data loading.

CCrystal Lee

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of car data, with each point representing a vehicle. The visualization uses a circular mark with low opacity to show the distribution of horsepower across different regions of origin, with tooltips revealing the car’s name. The chart is built using the Vega-Lite API, which programmatically defines the visualization, while D3’s `csv` method loads the dataset. The rendering is handled by Vega and Vega-Lite, with a custom tooltip handler and styling to improve readability.

Jjaowei

82% match

Loading thumbnail…

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

82% match