Anu Wat

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with points colored by country of origin and tooltips revealing model names. It uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldQ()`, `vl.color().fieldN()`) to declaratively encode the data, with rendering handled by Vega and Vega-Lite. The CSV dataset is fetched via d3’s `csv` function, and the visualization adapts to the browser window using `.width()` and `.height()` with autofit behavior.

Fork of Loading and Parsing CSV Data

This example displays basic statistics about a CSV file containing CSS Named Colors, showing the file size in kilobytes, row count, and column count. The visualization uses d3.csv to load and parse the remote data from GitHub Gist, then formats the results into a large text message. It also includes commented-out alternatives using fetch with async/await and d3.csvParse, demonstrating different approaches to handling CSV data with D3 version 5.

Fork of Mouse Follower

A React application renders a 600-by-500 SVG scene containing a single circle that tracks the user’s cursor. The component uses the `useState` hook to store the mouse position and `useCallback` to update it on every `onMouseMove` event, then sets the circle’s `cx` and `cy` attributes to the cursor’s client coordinates. Built with React 16.9 and ReactDOM, the example demonstrates declarative state-driven rendering without external data or animation libraries.

Fork of Smiley Face Part II

A React and SVG drawing displays a full-screen yellow smiley face, centered and scaled proportionally to the browser window. The face features a black outline, two black circular eyes, and an implied mouth, all constructed from basic SVG shapes. The implementation uses React's `ReactDOM.render` to mount the component, while the SVG dimensions and element positions are calculated dynamically from `window.innerWidth` and `window.innerHeight`. The code leverages the React 16.9 UMD builds and inline style properties for layout.

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors. The visualization itself is minimal, displaying text statistics about the dataset: its size in kilobytes, the number of rows, and the number of columns. The code uses the D3.js library (v5) method `d3.csv` to fetch the remote CSV, then `d3.csvFormat` and the `data.columns` property to compute these metrics. The results are rendered as plain text in an HTML `<pre>` element.

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three iris species. The React-based chart uses d3.scaleLinear and d3.scaleOrdinal to map data values to positions and categorical colors, with SVG circles rendered as marks. Axes are generated via custom reusable components (AxisLeft, AxisBottom), and the data is loaded asynchronously from a CSV file using d3.csv.

Fork of Pathetic Bar Chart

This chart displays the top 10 most populous countries as horizontal bars, with bar length proportional to each country’s 2020 population estimate. The visualization intentionally omits axes and labels, focusing solely on relative magnitudes. It loads data from the United Nations World Population Prospects 2019 CSV, filters to the first ten rows, and renders using React with SVG `rect` elements. The code employs D3 v5’s `scaleBand` for the categorical y-axis placement and `scaleLinear` for mapping population values to pixel widths.

Fork of Smiley Face Part III

Fork of Smiley Face Part II

This example shows a full-window smiley face rendered with React and SVG. The face, drawn as yellow circles with black strokes, is centered on the screen, with two eye circles positioned at fixed offsets and a mouth that is currently unrendered despite a defined radius. The code uses React’s `createElement` via JSX to generate SVG elements, including a `<g>` transform for centering, and calculates dimensions dynamically from `window.innerWidth` and `window.innerHeight`. ReactDOM mounts the component to the page root.

Hello HTML

A single SVG circle with a thick black outline and yellow fill is centered, flanked by two smaller black circles, all on a blank white page. The page uses plain HTML and inline CSS to remove body margins and hide overflow. The visualization is rendered entirely through an SVG element with fixed width and height, using explicit circle coordinates and radius values rather than any JavaScript libraries or data-driven framework. It demonstrates how basic geometric shapes can be composed directly in markup.