KaminariOS

@KaminariOS·6 public vizzes

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for individual flowers while color-coding points by species. The visualization uses D3 scales (scaleLinear, scaleOrdinal with schemeCategory10) to position and color marks, rendered as SVG circles within a React component structure. Axes are generated through reusable React components using D3’s tick generation, with formatted numeric labels and axis titles for petal length and sepal width. Data loading is handled asynchronously via D3’s CSV fetching and parsing utilities.

Jun 8, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris flower dataset, mapping petal length against sepal width for three species. Hovering over the color legend highlights only the corresponding species points while fading the others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles via the `Marks` component. The dataset loads through D3's `csv` parser from a GitHub gist.

Jun 3, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. It shows population values per country, with customized axes that remove domain lines and use formatted tick labels for readability. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering as SVG. Population data is loaded from a CSV file, with each value multiplied by 1000 before being plotted.

Apr 17, 2021

Loading thumbnail…

Face

A smiling face is drawn as a large SVG circle with two eyes and a curved mouth, rendered in a bold block style against a plain background. The page loads a bundled React application via `bundle.js`, which injects the face into an empty `<svg>` element sized 960 by 500. The visual uses CSS to center the content and set an oversized font size, though the face itself is constructed through SVG shapes rather than text. The example demonstrates a minimal React setup with static SVG rendering, containing no interactive behavior or data-driven logic.

Apr 17, 2021

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays a single text message, “Hello VizHub!”, on a blank page. It demonstrates a minimal D3 setup by loading the library via UNPKG and using ES6 modules to import a local string. The example shows how to combine a local `styles.css` file, a global `d3` script tag, and modular JavaScript imports to build a simple visualization scaffold in the VizHub environment.

Apr 15, 2021

Loading thumbnail…

Hell cars report

This visualization presents a “Hell cars report” as a minimal, blank HTML page that currently loads no data or drawing logic. It uses a bare React-free structure with only a title, relying on CSS and JavaScript as described in its README. No charts, datasets, or interactive elements are implemented in the visible code; the page simply renders an empty body. The example serves as a static starter template, with no calls to libraries like D3, Three.js, or Canvas APIs. It demonstrates a clean, framework-light approach for future visualization development.

Apr 15, 2021