Saurabh Jaswal

@jaswalsaurabh·2 public vizzes

Vega-Lite-Api

This example shows a scatter plot of automotive data from the auto-mpg CSV dataset, mapping acceleration on the x-axis and horsepower on the y-axis with tooltips displaying vehicle names. The visualization is built with Vega-Lite API, leveraging the `vl.markPoint()` method for the chart and `vl.x().fieldQ()`/`vl.y().fieldQ()` for quantitative encodings. It uses React for the component structure, D3’s `csv` loader in `getData.js` to fetch data, and Vega-Lite’s tooltip module for interactive hover details. The styling configuration adjusts font sizes and axis appearance, while the page loads Vega, Vega-Lite, and Vega-Tooltip libraries via CDN.

Oct 20, 2022

Loading thumbnail…

Smiley Face Part 1

This example displays a yellow smiley face rendered with SVG circles and an arc, while also displaying metadata about a CSS named colors CSV dataset. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth created using `d3.arc()` with specified inner and outer radii and start and end angles. The React app uses `d3.csv` to fetch the dataset and displays the file size and row count using `d3.csvFormat`. The face’s position is hardcoded, while the mouse move handler updates state but does not visibly affect the rendered output.

Oct 19, 2022