miklud

@miklud·6 public vizzes

auto_rus of Vega-Lite API Template

This visualization displays Russian auto sales data by year, plotting the year on the x-axis and sales quantity on the y-axis as circular marks. The circles are colored by quantity and include tooltips showing brand names. It uses the Vega-Lite API with D3.js (`d3.csv`) to load data from a Gist, then renders the chart via Vega-Lite’s API, configured with custom axis styles and a dark theme for readability.

Mar 29, 2021

Loading thumbnail…

Vega-Lite API Template

A scatter plot displays automobile origin, horsepower, and weight, with each point sized and colored by weight and tooltips revealing model names. The visualization uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`) to construct a declarative spec, rendered as SVG via Vega-Lite and Vega. Data loads from a CSV of the Auto MPG dataset, and a custom config adjusts axis styling and font sizes. The example demonstrates programmatic chart building, programmatic width/height fitting, and tooltip integration via the `vega-tooltip` Handler.

Mar 24, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a simple, friendly face composed of SVG shapes, rendered with React and D3. A yellow circle forms the head, with black stroke outlining, while two dark circles serve as eyes and an arc generates the mouth using `d3.arc`. The face is positioned via a translated `<g>` element inside an `<svg>`, with all geometry parameters passed as React props. The visualization demonstrates a basic composable component structure, reusing `BackgroundCircle`, `Eyes`, and `Mouth` as building blocks within a `FaceContainer` that manages the SVG canvas dimensions.

Mar 22, 2021

Loading thumbnail…

Loading data with React & D3

A React and D3 example demonstrates asynchronous data loading by fetching a CSV of CSS named colors and displaying a summary message with file size, row count, and column count. The application uses React's `useState` and `useEffect` hooks to manage the data-fetching lifecycle, calling `d3.csv()` to parse the remote CSV file. Once loaded, the data is transformed through `d3.csvFormat` and rendered as SVG text. The visualization also includes a separate smiling face composed of reusable React components—`BackgroundCircle`, `Eyes`, and `Mouth`—where the mouth is drawn using D3's `arc()` path generator with specified angle parameters.

Mar 21, 2021

Loading thumbnail…

Loading and Parcing CSV data

This example demonstrates the basics of loading and parsing CSV data with D3. It fetches a remote CSV file containing named CSS colors and displays a summary of that data, including its size in kilobytes, the number of rows, and the number of columns. The result is rendered as large text inside a `<pre>` element. The code uses `d3.csv` to asynchronously load the file from a GitHub gist, then `d3.csvFormat` to measure the data size and `data.columns` to count the columns.

Mar 21, 2021

Loading thumbnail…

MouseFollower

A smiling face made of SVG circles and an arc follows the cursor across a brown background. The face, composed with React components, updates its position through a mouse-move event handler on an SVG element. The state hook `useState` tracks the cursor coordinates, and `useCallback` memoizes the event handler. The mouth is drawn using `d3.arc()` with specified inner and outer radii, while the eyes and background circle are plain SVG circles. The face translates as a group within an SVG container, responding live to pointer movement.

Mar 20, 2021