PUUDI

@PUUDI·13 public vizzes

color pie chart

This example visualizes the CSS named colors dataset as a radial burst of equal-width slices, with each slice filled with its corresponding color hex value. The visualization loads data from a CSV file using the `d3.csv` utility, then renders it as SVG paths via React. Each wedge is drawn with the `d3.arc` function, which computes the path based on calculated start and end angles derived from the data index. The code demonstrates manual angle computation rather than relying on `d3.pie`, and uses React state and effects for asynchronous data loading.

Nov 27, 2021

Loading thumbnail…

Vega-Lite API Template

This example visualizes automotive data from an auto-mpg CSV dataset, plotting engine weight against horsepower with circles colored by origin and sized by miles per gallon. The code constructs the visualization using the Vega-Lite API, registering it with vega and vega-lite, and rendering as SVG via d3.dsv. A custom configuration adjusts axis labels and tick styling for readability, while d3.csv loads the remote dataset. Tooltips display car model names on hover using vega-tooltip.

Nov 26, 2021

Loading thumbnail…

loading data with react and d3

This example demonstrates loading a remote CSV file into a React application using D3 utilities, displaying a summary message with file size, row count, and column count. The data source is a GitHub gist containing CSS color hex values. The React component uses the `useState` and `useEffect` hooks, while D3’s `d3.csv` fetches and parses the data, which is then stored in React state. The rendered SVG displays the formatted summary text using a `<pre>` element, with the loading state shown until data arrives.

Nov 25, 2021

Loading thumbnail…

color visualization

This example displays metadata about a CSS color dataset fetched from a remote CSV file. It reports the file size in kilobytes, the number of data rows, and the number of columns, rendered inside an HTML `<pre>` element. The code uses `d3.csvParse` to parse the raw text and JavaScript’s `fetch` API to retrieve the data from a GitHub gist, with D3 loaded via a CDN. The visualization is minimal, focusing solely on textual summary statistics rather than graphical representation.

Nov 24, 2021

Loading thumbnail…

moving Smiley Face Part II

This example shows a single yellow circle that follows the mouse cursor across an SVG canvas, creating a direct and immediate interaction. The circle’s position is updated on every mouse move, responding in real time to user input. The visualization is built with React, using the `useState` hook to track the cursor’s coordinates and the `useCallback` hook to handle the `onMouseMove` event. Rendering is handled through SVG elements, with React managing the circle’s `cx` and `cy` attributes.

Nov 24, 2021

Loading thumbnail…

smiley face

The visualization displays a simple smiley face composed of SVG circles and a d3.arc-generated mouth path. The face is rendered through React components, with randomized values for eye offset, eye radius, mouth radius, and mouth width passed as props to generate a single face. The background circle uses a yellow fill with a black stroke, while the eyes are solid black circles positioned symmetrically. The code imports d3’s arc function to create the mouth shape, and d3’s range utility to map over an array, though only one face is rendered. The SVG is centered using a group transform.

Nov 24, 2021

Loading thumbnail…

course example

This example demonstrates a smiling face rendered as an interactive SVG graphic. The face is centered on the screen, with a yellow circle, two black eyes, and a mouth, all sized relative to the browser window dimensions. The visualization is built using React and ReactDOM, where components define the SVG elements such as circles and groups. The code uses JSX to structure the SVG markup, with attributes like `stroke-width` and coordinates calculated from `window.innerWidth` and `window.innerHeight` to ensure the face fills the viewport. The rendering approach relies on React’s declarative component model to generate the final SVG output.

Nov 22, 2021

Loading thumbnail…

Let's make a face

This example draws a simple cartoon face in SVG using D3.js version 5. It composes a yellow circle for the head, two black circles for eyes, and an arc-based path for the mouth, all centered within an SVG canvas. The code uses D3’s `select` method to target the SVG element, `append` to add shapes, and the `arc` generator from D3 to create the mouth’s curved path. Eyebrow rectangles are also included, though their reference to an undefined `eyebrowsG` group indicates incomplete wiring in the provided source.

Aug 7, 2020

Loading thumbnail…

Let's make a face

Aug 7, 2020

Loading thumbnail…

Let's make a face

This example draws a simple yellow face using SVG shapes. It demonstrates basic D3.js selections and attribute manipulation by creating a large circle for the head, two smaller circles for eyes, and an arc for the mouth. The code uses d3.select to append elements, parse SVG width and height attributes, and a d3.arc path generator with inner and outer radii plus start and end angles. The right eye is positioned using an SVG group with a transform translation, while the left eye and mouth use direct coordinates.

Aug 7, 2020

Loading thumbnail…

Let's make a face

A simple SVG face is drawn with a large yellow circle for the head and two smaller black circles for eyes. Built with D3 v5, the example uses `select` to target the SVG element, then appends and styles the circles with chained `attr` calls for position, radius, fill, and stroke. The coordinates are derived from the SVG’s `width` and `height` attributes to center the face, while a plain CSS file resets the page margin and hides overflow.

Jul 28, 2020

Loading thumbnail…

Cars

This example presents a simple, styled report of cars as an HTML list. It shows three car entries, with the first item, a 2012 Nissan Leaf, highlighted in red via a CSS class. The page uses plain HTML for structure and CSS for visual emphasis, without any JavaScript libraries or data-loading mechanisms. The content is embedded directly in the markup, demonstrating a static, unstyled-by-default approach to data presentation.

Jul 28, 2020

Loading thumbnail…

Cars Report

This example renders the static text “Hello World” in a large HTML `<pre>` element. It uses vanilla JavaScript to select the element by ID and set its `textContent`, with no data visualization or external libraries. The React framework is referenced in metadata but is not imported or used in the code. The page also loads a `bundle.js` file, suggesting bundling setup, though no actual data or visual encoding present.

Jul 15, 2020