Laura Jackson

@ShinyVerse·4 public vizzes

Fork of Vega-Lite API

This example uses the Vega-Lite API to render a bar chart of population by country, with data loaded from a CSV file. The visualization encodes country names on the x-axis and population values on the y-axis, sorting bars by population size. The page imports Vega, Vega-Lite, and Vega-Lite API libraries, registers them together with Vega Tooltip for interactive hover details. Custom axis styling and font sizes from a config object improve readability, while the chart resizes to fit the window using the view’s width and height properties.

Dec 19, 2021

Loading thumbnail…

react and d3 CSV

This example demonstrates loading and displaying a remote CSV dataset within a React component. It uses d3.csv to fetch named color data from a GitHub gist, then shows the row and column counts as text on screen. The application integrates d3.v7 with React 16.9, employing React hooks like useState and useEffect to manage the asynchronous data loading state, displaying “loading” until the data arrives.

Dec 19, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates a minimal workflow for loading and parsing a CSV file using D3. It fetches a remote dataset of named colors from a GitHub Gist, parses the text with the `d3.csvParse` API, and displays the result in a large `<pre>` element. The visualization shows the number of columns and rows extracted from the data, rendered via DOM text content. The code uses the Fetch API and D3's `csvParse` from D3 v7, providing a compact, practical demonstration of CSV ingestion.

Dec 19, 2021

Loading thumbnail…

Interactive react

A single dark circle follows the cursor across a full-screen SVG canvas, reacting instantly to every mouse movement. The visualization uses React 16.9 with the `useState` and `useCallback` hooks to track pointer coordinates, updating the circle's `cx` and `cy` attributes via ReactDOM rendering. The example demonstrates React's declarative approach to interactive graphics, with the `onMouseMove` event handler on the root SVG element driving all state changes in real time.

Dec 19, 2021