Mark Mburu

@MarkMburu·7 public vizzes

Fork of Rendering Data with react and D3

A donut chart displays all CSS named colors as equal-width slices, each filled with its corresponding hex value. The visualization uses d3.pie to compute slice angles, d3.arc to generate SVG paths, and React hooks (useState, useEffect) to fetch and render data from a CSV of named colors. ReactDOM mounts the SVG output, which is drawn with d3.v6 within a React component.

May 5, 2021

Loading thumbnail…

Rendering Data with react

This example renders the CSS named colors dataset as a vertical sequence of colored strips, one per color, using React hooks (`useState`, `useEffect`) to fetch and store the data. It loads the CSV via d3.csv from a remote gist, then maps each row to a div whose background color is set from the “RGB hex value” field. A loading message appears until the data arrives, and the app uses ReactDOM.render to mount the component into the DOM.

May 5, 2021

Loading thumbnail…

Loadinf Data with react

This example demonstrates how to load external CSV data with D3 utilities and manage it through React state. It fetches a CSS named colors dataset from a GitHub gist, displaying file size, row count, and column count in a large text format. The visualization uses React’s `useState` and `useEffect` hooks to asynchronously load data via `d3.csv`, while a separate `message` module computes the statistics using `d3.csvFormat`. The interface shows a simple text summary rather than a graphical chart.

May 5, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature trends over time using the Vega-Lite API, rendering a line chart from CSV data. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with tooltips displaying temperature details. It uses the `vega-lite-api` library alongside `d3.csv` for data loading, with a custom dark theme applied through a configuration file. The chart fills the browser window and updates dynamically, leveraging Vega’s rendering capabilities with SVG output.

May 4, 2021

Loading thumbnail…

Loading Csv files

This example demonstrates the basic mechanics of loading and parsing a CSV file using D3. It shows a count of the file's size in kilobytes, the number of rows, and the number of columns displayed prominently on the page. The code uses `d3.csv` to fetch data from a GitHub gist containing CSS named colors, then calculates the formatted string length with `d3.csvFormat`. It also includes a commented-out alternative approach using the Fetch API with `async`/`await` and `d3.csvParse`.

May 2, 2021

Loading thumbnail…

Smiley Face Part 1

A single gray circle follows the mouse cursor across an SVG canvas, its position updating live as the pointer moves. The visualization demonstrates React state management with the `useState` and `useCallback` hooks, where mouse coordinates from the `onMouseMove` event drive the circle’s `cx` and `cy` attributes. Rendered via ReactDOM into a root div, the SVG uses D3 v6 for its helper functions, with a fixed 960×500 viewport and a 30-pixel radius. No external data is loaded; the interaction is purely event-driven.

May 2, 2021

Loading thumbnail…

Smiley Face Part 1

A yellow circle with black outline forms a happy face, composed of two eyes as small circles and a mouth drawn as a semicircular arc. The visualization is rendered in SVG via a React component hierarchy where parameters like eye offset, radius, and mouth dimensions are passed as props. The mouth is constructed using D3's `arc` API to generate a path, while the overall face is positioned within an SVG group, demonstrating a modular approach to assembling a basic chart or icon.

May 2, 2021