Fork of

Fork of Vega-Lite API Template

This example displays a scatter plot of Auto MPG data, with weight on the x-axis, horsepower on the y-axis, and color encoding the origin of each car. Point size represents miles per gallon, with tooltips showing car names. It uses the Vega-Lite API to construct the chart, which is rendered with Vega and Vega-Lite, while D3 fetches the CSV data. The visualization is configured for full-window display and includes custom styling for axes and labels.

Vvedanth bora

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through four variables from a grocery store dataset, cycling Profit, Quantity, Selling_Price, and Cost_Price on the x-axis while Cost_Price remains on the y-axis. SVG circles are colored by category (Frozen, Grocery, Produce) using a switch statement, with the reusable `scatterPlot()` module handling scales and axes via `scaleLinear`, `axisLeft`, and `axisBottom`. A `setInterval` triggers the x-value changes, rebuilding the plot and updating the axis labels, while custom legends and titles are appended dynamically. Data comes from a CSV loaded with `d3.csv`.

NNaveed945

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping miles per gallon and horsepower with point size reflecting mpg and color indicating origin. The visualization uses the Vega-Lite API to declare the chart specification, with D3.js loading the CSV dataset from a GitHub gist. Rendering is handled by Vega and Vega-Lite, while Vega Tooltip provides interactive hover details. The chart fills the viewport, and custom axis, label, and title styling improve readability against the dark text on a light background.

MMalcolm Mead

Fork of Vega-Lite API Template

This example displays a scatterplot of automobile data, mapping miles per gallon and horsepower from a CSV dataset, with points colored by origin and sized by mpg. The visualization uses the Vega-Lite API (vl) to construct the chart declaratively, while D3.js fetches the data via `d3.csv`. Custom styling is applied through a Vega-Lite config for axis and label appearance. The code registers Vega and Vega-Lite with the API, renders to SVG, and integrates a tooltip handler for interactive exploration.

LLeandro Miguel Narciso

Mmadipadiga.raviteja@gmail.com

Fork of Scatter Plot

This scatter plot visualizes the relationship between calorie content and price for food items, with each point colored by category using a categorical color scale. Built with D3 v6, the visualization renders as an SVG and loads data from a CSV file hosted on GitHub. The code defines linear scales for both axes, maps data values to circle positions, and applies the `d3.scaleOrdinal` color scheme with `d3.schemeCategory10` for category-based coloring.

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg) and horsepower for a set of automobiles, with points colored by origin and sized by weight, using the vega-lite-api to construct a scatter plot. The code loads CSV data from the UCI Auto MPG dataset via d3.csv, then renders the chart with Vega-Lite and Vega, configured with a custom dark theme for improved readability. Hovering over a point reveals the car’s name through a vega-tooltip handler. The visualization fills the entire viewport and uses a fit autosize mode with zero-suppressed scales.

Hhimchan94

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting each vehicle as a circle based on its origin, horsepower, and weight. The chart uses color to encode weight and circle size to represent miles per gallon, with tooltips showing vehicle names. Built with the Vega-Lite API and D3.js, it loads data asynchronously and renders an interactive scatter plot that fits the full window. The visualization configures axes and label styles, and integrates Vega tooltip for hover details.

Nnayak-sarvesh12

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of automotive data, mapping miles per gallon and horsepower with circle size representing vehicle weight and color indicating country of origin. Built using the Vega-Lite API, the code registers both Vega and Vega-Lite libraries, then chains mark and encoding specifications programmatically. Data is loaded asynchronously from a CSV file hosted on GitHub, using d3's csv parser, and rendered as an SVG with tooltips provided by the vega-tooltip handler.

Llingfa