Atharvap2000

@Atharvap2000·3 public vizzes

Vega-Lite API Template

This example displays a scatterplot of ODI player statistics, plotting matches played against runs scored, with point size encoding centuries and tooltips revealing player names. Built with the Vega-Lite API, it uses the `vl.markCircle` and `vl.encode` methods to define the visualization, while D3’s `csv` function loads the dataset from a GitHub gist. The chart fills the entire viewport, applies a custom configuration for axes and fonts, and renders via Vega’s SVG renderer with an interactive tooltip handler.

May 29, 2021

Loading thumbnail…

Colors

This visualization displays a vertical stacked list of CSS color swatches, with each row representing one color from the dataset. The code loads a CSV file containing color names and their corresponding RGB hex values using `d3.csv`, then renders each row as a React `<div>` element with the `backgroundColor` style set to the hex value. The visualization is built with React hooks (`useState`, `useEffect`, `useCallback`), and the page initially shows a loading message before the color bars appear. The swatches are stacked vertically, creating a continuous gradient-like column of all colors in the dataset.

May 28, 2021

Loading thumbnail…

Assignment1

This example uses React and D3 to render a stylized smiley face as an SVG graphic. The face is composed of a yellow circle with a black stroke, two black eyes, and a mouth drawn using the D3 `arc` generator with specified inner and outer radii and angles. The `arc` path is generated with `d3.arc()`, while React manages the SVG elements and D3 v6 provides the arc calculation. The visualization demonstrates a simple, static data-free composition with hardcoded dimensions and coordinates.

May 27, 2021