inar-vision

@inar-vision·7 public vizzes

Fork of Vega-Lite API Template

A bar chart displays Finnish crime statistics from 2019 and 2020, sourced via a StatFin API request filtered by court, crime group, and appellant. The visualization uses Vega-Lite API for encoding, with `vl.markBar` for bars and `vl.y().fieldQ('name')`/`vl.x().fieldN('age')` mappings. Data is fetched asynchronously with d3.csv and d3.json, though the chart ultimately plots sample JSON objects with names and ages rather than the fetched statistics. Custom styling includes dark axis labels and enlarged fonts via a config object.

Sep 5, 2022

Loading thumbnail…

Fork of Vega-Lite API Template 3

This visualization uses a Vega-Lite API specification to render a scatter plot of automobile data from a CSV file. Each circle represents a vehicle, positioned by origin and horsepower, with color encoding weight and size encoding miles per gallon (mpg), with tooltips showing the car name. The code builds the chart declaratively using the `vega-lite-api` library, registering it with vega and vega-lite, and loads data via d3.csv. Custom configuration adjusts font sizes and axis styling for readability.

Sep 1, 2022

Loading thumbnail…

Fork of Vega-Lite API Template 2222

This example visualizes the relationship between fuel efficiency, horsepower, and vehicle origin in the classic Auto MPG dataset. Each car is represented by a semi-transparent circle, with position encoding miles per gallon and horsepower, while color distinguishes country of origin and circle size encodes vehicle weight. Built using the Vega-Lite API for JavaScript with D3.js version 5, the visualization renders as an interactive SVG chart. Data is loaded asynchronously from a CSV file hosted on GitHub, and the chart includes tooltips showing car names.

Sep 1, 2022

Loading thumbnail…

Load data with D3

This example demonstrates the process of loading and exploring a CSV dataset with D3, showing file size, row count, and column count. It first downloads a CSS-named-colors CSV file from a GitHub gist, then displays its dimensions. Built with React, the example uses the `useState` and `useEffect` hooks to trigger the asynchronous `d3.csv` loading and updates the view. The `d3.csvFormat` and `data.columns` methods calculate the data summary, while the React code renders the text output in an SVG-based page.

Sep 1, 2022

Loading thumbnail…

Load and parse CSV data

This example demonstrates how to load and parse CSV data using D3.js v7 in a minimal HTML page. It fetches a remote CSV file containing CSS named colors via the Fetch API and d3.csv, then summarizes the result as text: the file size in kilobytes, row count, and column count displayed in large monospace text. The code also includes a commented alternative using d3.csvParse to parse raw text fetched separately, showing two approaches to CSV handling in D3.

Sep 1, 2022

Loading thumbnail…

Smiley Face Part move with react

A React-based SVG visualization renders a single yellow circle that follows the mouse cursor across the full browser window. The circle’s position updates live via React state and the `onMouseMove` event handler, which captures `clientX` and `clientY` coordinates. Using the `useState` and `useCallback` hooks from React 16.9, the component re-renders the SVG circle on every pointer movement, demonstrating declarative interaction with mouse input in a minimal, single-element graphic.

Sep 1, 2022

Loading thumbnail…

Fork of Hello HTML

This example shows a grid of 18 randomly generated cartoon faces rendered as SVG. Each face combines a yellow background circle, two eyes, and a mouth, with their sizes and positions randomized within a defined range. The visualization uses React components to assemble the facial features, with the D3 `arc` API generating the mouth shape as a path. D3's `range` function creates the array of faces, and the entire composition is displayed in a bare minimum HTML page.

Sep 1, 2022