DanielMa

@daniel008·9 public vizzes

Iterating Fast with Vega Lite API

This example visualizes the distribution of populations across countries and religions, using circle size to represent population magnitude for each country–religion pair. It is built with the Vega-Lite API, which constructs a specification programmatically through chained methods like `vl.markCircle()`, `vl.x()`, and `vl.size()`. The underlying data is loaded via D3’s `csv` function from a Gist containing UCI Machine Learning Repository data. The visualization renders to SVG through Vega and Vega-Lite, with tooltips provided by vega-tooltip and axis styling customized via a shared config object.

Oct 20, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset in a React app using D3 utilities. It fetches CSS named colors data from a GitHub gist via `d3.csv`, stores the result in React state with the `useState` and `useEffect` hooks, and then displays a message showing the file size in kilobytes, row count, and column count. The `d3.csvFormat` function calculates the data size, while React renders the summary as text. The visualization uses D3 v7 and React 16.9 with no charting, focusing solely on data loading and state management.

Oct 19, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse external CSV data, displaying the file size, row count, and column count of the dataset. Using D3 v7, it fetches a CSV file containing CSS named colors via `d3.csv`, which parses the data into an array of objects. The resulting metrics are formatted and rendered as large text in an HTML page. Alternative implementations using `fetch` with `d3.csvParse` are shown in commented code, highlighting different approaches to the same task.

Oct 19, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A React-based SVG portrait renders a large yellow smiley face with exaggerated, cartoonish features. The face combines a circular head with detailed, independently defined eye and mouth components, which are positioned and scaled using SVG group transforms. The visualization is built with React components for the eyes and smile, with styling controlled through CSS classes. The rendering relies on the React DOM API to mount the SVG elements, and the overall composition demonstrates how reusable React components can be assembled into a single SVG scene.

Oct 11, 2021

Loading thumbnail…

Fork of Smiley Face Part V

This example renders a grid of identical smiley faces, each composed of a yellow circle with black stroke, two eyes, and a mouth drawn using an SVG path. The faces are generated by mapping over a range of numbers, with each face created through modular React components that accept props for positioning and sizing. The code uses React fragments, the D3 arc generator to compute the mouth shape, and ES6 module imports to split components across files, with the final SVG output handled by a central container component.

Oct 11, 2021

Loading thumbnail…

Episode 10 – Let’s Make a Face Part VI (Compartmentalizing Complexity)

This example displays a grid of 18 randomly generated cartoon faces, each with yellow circular backgrounds, black outline strokes, eyes, and mouths. The code decomposes the face into separate React components—FaceContainer, BackgroundCircle, Eyes, and Mouth—to manage complexity. It uses React for component structure, D3’s arc generator for mouth shapes, and renders SVG elements. Each face’s dimensions and features (stroke width, eye offset, mouth radius) vary randomly, creating a diverse collection.

Oct 4, 2021

Loading thumbnail…

Smiley Face Part II

A large yellow circle with a black outline sits centered on a plain white canvas, flanked by two smaller solid black circles positioned to its upper left and right. The piece represents an incomplete smiley face, missing its mouth and other features. The visualization is built with a static SVG rendered directly in an HTML file, using circle elements with coordinates and radii to define the geometry. React and ReactDOM are included but only render a simple "Hello JSX" heading, which is not visually integrated into the main drawing.

Sep 30, 2021

Loading thumbnail…

Fork of Hello HTML

A simple SVG smiley face rendered directly in HTML, showing how static shapes can be assembled without JavaScript libraries or external data. The code draws a yellow circle for the head with a black stroke, plus two smaller unfilled circles for the eyes, all positioned using fixed pixel coordinates inside an `<svg>` element that spans 960 by 500 pixels. The example demonstrates basic SVG geometry: a filled `<circle>` with `fill` and `stroke` attributes forms the face, while two additional circles use the default black fill for the eyes, omitting a mouth despite the comment hinting at one.

Sep 29, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a single unpositioned SVG circle with a radius of 100 units. The circle is rendered without any coordinate attributes, placing it at the default origin of the SVG viewport. The page is a minimal HTML document that uses raw SVG markup directly in the body, with no external libraries or JavaScript. It serves as a basic demonstration of embedding vector graphics in a web page.

Sep 29, 2021