dimanya

@dimanya·7 public vizzes

Dmitry HTML

This example presents a minimal HTML page that demonstrates the fundamental structure of a web document using CSS and JavaScript, though the visible implementation is nearly empty. The page contains only a basic `<!DOCTYPE html>` declaration, a `<head>` with a title, and an empty `<body>`, showing the bare-bones starting point for web development. It references the React Starter as a related resource, indicating potential for framework-based extensions. The code relies on standard HTML elements — `html`, `head`, `title`, and `body` — without any external libraries or custom scripts, making it a purely structural demonstration of web document markup.

Jul 8, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto MPG data, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color for the car’s origin and size for weight, with tooltips revealing car names. The visualization is built with the Vega-Lite API, which compiles specifications to Vega, and rendered via D3 v5. It loads CSV data from the UCI Machine Learning Repository and customizes axis and label styling through a configuration object.

Jul 21, 2021

Loading thumbnail…

Rendering Data with React & D3

This example visualizes CSS named colors as a color wheel, with each color represented by a slice of a circle. The code loads data from a CSV file using D3’s `csv` utility and manages it with React’s `useState` and `useEffect` hooks. Rendering is done as SVG, where each slice is drawn with D3’s `arc` generator, positioned around a central point, and filled with the corresponding hex value from the dataset.

Jul 16, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays temperature trends over time as a line chart, with points sized and colored by temperature values. The example is built using the Vega-Lite API, which generates a Vega-Lite specification that is rendered as an SVG via the Vega rendering engine. The data is loaded as CSV from a Gist using D3’s `csv` function, and interactive tooltips are enabled through the Vega-Tooltip handler. Appearance is customized through a configuration object that adjusts axis styles and typography.

Jul 14, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how React and D3 can work together to load and summarize a CSV dataset. It fetches color data from a GitHub gist using d3.csv, stores the parsed result in React state via the useEffect hook, and displays a text summary of the data’s size, row count, and column count. The visualization is minimalist, rendering the summary as plain text within a React component, with no charts or graphics shown.

Jul 14, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example displays summary statistics from a CSV file containing CSS named colors, showing the file size in kilobytes, row count, and column count in large text. The visualization loads the data using D3 v7’s `d3.csv` method, which parses the remote CSV from a GitHub gist. It then computes the formatted CSV size with `d3.csvFormat` and accesses the parsed array’s `length` and `columns` properties to report the dataset’s dimensions. The result is rendered into a `<pre>` element, demonstrating a minimal, text-based overview of the data’s structure without any charts or graphical elements.

Jul 14, 2021

Loading thumbnail…

Fork of Hello HTML

A grid of 18 smiling faces, each rendered with randomized facial features, fills the screen. The code uses React components to compose the face structure and D3's `arc` function to draw the curved mouths. Each face combines a yellow circle background, two eyes, and a mouth, with parameters like eye offset, eye radius, and stroke width varied using `Math.random`. The SVG output is generated through a `FaceContainer` component that centers each face within a 160 by 160 pixel viewport.

Jul 9, 2021