Lem Dulfo

@bytehala·5 public vizzes

Vega-Lite API Religion Stacked Bar Chart

This example presents a stacked bar chart visualizing the population of each country segmented by religion, using data from a CSV file about religion by country. The chart sorts countries by total population in descending order, with each bar colored by religion and tooltips revealing the specific religious group. Built with the Vega-Lite API, the code registers vega and vega-lite, then uses `vl.markBar()` to encode the x-axis as country, y-axis as population, and color as religion. The visualization loads data via `d3.csv` and renders as SVG, with customizable axes and labels from the configuration file.

Mar 11, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates loading external data with D3 utilities while managing it through React state. The application fetches a CSV file containing CSS named colors from a GitHub gist, then displays a summary of the loaded dataset, including file size in kilobytes, row count, and column count. It uses React’s `useState` and `useEffect` hooks to handle the asynchronous data loading, along with `d3.csv` for parsing, `d3.csvFormat` for measuring data size, and `ReactDOM.render` to mount the component. The interface initially shows a "Loading" message before presenting the computed statistics.

Mar 10, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data with D3 v6, displaying summary statistics about a remote dataset of CSS named colors. It uses `d3.csv` to fetch the file from a GitHub gist, then reports the formatted data size in kilobytes, row count, and column names in a pre element on a papaya-colored page. A commented-out alternative shows the equivalent workflow using the Fetch API with `async/await` and `d3.csvParse`.

Mar 9, 2021

Loading thumbnail…

Lem's Smiley

This example renders a static smiley face using React components and SVG. The `Face` component composes a yellow `FaceCircle`, a pair of `Eyes` with white shine highlights, and a `Mouth` drawn with d3’s `arc()` path generator using a half-circle angle range and a purple fill. Fixed numeric props for dimensions, eye offsets, and mouth radius define the layout. The `FaceGroup` component creates the SVG container and applies a centering translation via a `<g>` transform.

Mar 9, 2021

Loading thumbnail…

Mouse Follower

A full-screen SVG circle tracks the mouse in real time. It demonstrates React state management and event handling by updating the circle’s coordinates on every pointer movement. The application uses React’s `useState` and `useCallback` hooks within a functional component, rendering a single `<circle>` element inside an `<svg>` that covers the viewport. The `onMouseMove` event triggers a state update with the cursor’s `clientX` and `clientY` positions, causing React to re-render the circle at the new location.

Mar 8, 2021