Vega-Lite API Template

Looking at your code, I can see that you have a Vega-Lite scatterplot mostly set up, but there are a few issues that need to be addressed to get it working properly. The main problems are outdated CDN versions and some configuration issues. Here are the updated files: **index.html** ```html Vega-Lite API Template ``` **viz.js** ```javascript import vl from 'vega-lite-api'; export const viz = vl .markCircle({ size: 100, opacity: 0.7 }) .encode( vl.x().fieldQ('mpg').scale({ zero: false }).title('Miles per Gallon'), vl.y().fieldQ('horsepower').scale({ zero: false }).title('Horsepower'), vl.color().fieldN('origin').title('Origin'), vl.size().fieldQ('weight').title('Weight'), vl.tooltip().fieldN('name') ) .width(800) .height(500); ``` **index.js** ```javascript import vega from 'vega'; import vegaLite from 'vega-lite'; import vl from 'vega-lite-api'; import { Handler } from 'vega-tooltip'; import { config } from './config'; import { getData } from './getData'; import { viz } from './viz'; vl.register(vega, vegaLite, { view: { renderer: 'svg' }, init: view => { view.tooltip(new Handler().call); } }); const run = async () => { const marks = viz .data(await getData()) .width(window.innerWidth) .height(window.innerHeight) .autosize({ type: 'fit', contains: 'padding' }) .config(config); const viewElement = await marks.render(); document.body.appendChild(viewElement); }; run(); ``` **getData.js** ```javascript import { csv } from 'd3'; const csvUrl = 'https://gist.githubusercontent.com/curran/8c131a74b85d0bb0246233de2cff3f52/raw/194c2fc143790b937c42bf086a5a44cb3c55340e/auto-mpg.csv'; export const getData = async () => { const data = await csv(csvUrl); // Convert numeric fields from strings to numbers data.forEach(d => { d.mpg = +d.mpg; d.horsepower = +d.horsepower; d.weight = +d.weight; }); // Have a look at the attributes available in the console! console.log(data[0]); return data; }; ``` **config.js** ```javascript // Appearance customization to improve readability. // See https://vega.github.io/vega-lite/docs/ const dark = '#3e3c38'; export const config = { axis: { domain: false, tickColor: 'lightGray' }, style: { "guide-label": { fontSize: 16, fill: dark }, "guide-title": { fontSize: 20, fill: dark } }, legend: { labelFontSize: 16, titleFontSize: 20 } }; ``` **README.md** ```markdown # Vega-Lite Scatterplot This project creates an interactive scatterplot using Vega-Lite API showing car data with: - X-axis: Miles per gallon (mpg) - Y-axis: Horsepower - Color: Car origin (USA, Europe, Japan) - Size: Weight ## Setup 1. Install dependencies: `npm install` 2. Build the project: `npm run build` 3. Serve the files locally (e.g., with `npx serve` or any local server) ## Data Source The visualization uses the Auto MPG dataset from https://github.com/vega/vega-datasets ``` The key changes I made: 1. Updated all CDN links to current versions 2. Added numeric conversion in getData.js for proper data types 3. Improved viz.js with axis titles for better visualization 4. Added a README.md with basic documentation 5. Enhanced config.js with legend styling 6. Adjusted mark sizes and opacity for better visual appearance

Vega-Lite Scatterplot

NJ Smith

Vega-Lite Scatterplot

Setup

Data Source