Rasike Abeyratne

@rasike-a·8 public vizzes

Zoomable Icicle - react

This example shows a zoomable icicle chart for navigating hierarchical data. The visualization presents a treemap-like layout where each category is a vertical slice, and clicking a rectangle zooms into that branch while smoothly animating the view. Built with React and D3 v7, it uses `d3.partition` for layout, `d3.scaleOrdinal` and `d3.interpolateRainbow` for color, and D3’s `transition` API for animated transforms. Data comes from a JSON file hosted on GitHub Gist.

Oct 4, 2021

Loading thumbnail…

Loading and Parsing Corona Virus Data

This example displays basic statistics about a COVID-19 deaths time-series dataset. The visualization reports the file size in kilobytes, the number of data rows, and the number of data columns in large text. It loads the global death records from the CSSE at Johns Hopkins repository using the `d3.csv` method to fetch and parse the remote CSV file. The code then uses `d3.csvFormat` to measure the payload size and accesses the resulting data array and its `columns` property.

Oct 1, 2021

Loading thumbnail…

World Map

This example visualizes countries from the World Atlas dataset using a frame-like small multiple of a world map, with map boundaries from `topojson`'s `feature` API. The code loads geospatial data via `d3.json` and renders SVG paths with `d3.geoPath`, while React manages the application state. The map is drawn with the `d3.geoPath` projection, and although a line chart path is defined using `d3.line` and `curveNatural`, that mark is not used for the map; instead, only the country features are displayed. The map uses a simple SVG layout with no interactive tooltips.

Sep 25, 2021

Loading thumbnail…

zoomable-icicle-ccia

This example shows the hierarchical structure of the Flare visualization library as an icicle chart, with rectangular bars representing nodes sized by their numeric value. The view is zoomable, allowing users to click on a bar to expand that node’s subtree, revealing its children. The visualization uses React for state management and D3.js for layout calculations and SVG rendering. The chart is rendered with animated transitions when navigating the hierarchy, implemented via D3’s transform and opacity interpolation.

Sep 23, 2021

Loading thumbnail…

zoomable-icicle-ccia-js

This interactive visualization is a zoomable icicle chart that displays the hierarchical structure of the "flare" dataset. Users can click on rectangular segments to drill down into nested categories, with the chart smoothly animating the expansion and contraction of branches. The visualization is built with React and D3.js v7, using the `partition` layout to compute rectangle positions and sizes. Each node's rectangle area is proportional to its value, and the color scheme distinguishes different top-level categories.

Sep 23, 2021

Loading thumbnail…

corona-virus

This example presents an empty HTML document titled “corona-virus” with no visible visualization or interactive content. The page includes an embedded YouTube video and minimal markup, but the body contains no script, canvas, or SVG elements. The code references no data sources, rendering libraries, or APIs such as D3 or Three.js. As a result, the visualization appears to be incomplete or a placeholder, showing only a blank page with a video iframe and no data-driven graphics.

Sep 16, 2021

Loading thumbnail…

corona-virus

This example displays a static "Hello HTML" message centered on the page, with the browser’s console logging the string "Hello JavaScript!". It uses plain CSS for styling and a standard JavaScript `console.log` call for output. The page is built with vanilla HTML and JavaScript only, without any external libraries or data sources.

Sep 16, 2021

Loading thumbnail…

part 1 of smiley face

A grid of eighteen randomly varied smiley faces is rendered as SVG via React. Each face uses a yellow background circle, two black eyes, and a mouth arc generated with the d3 `arc` function, with randomized stroke widths, eye positions, and mouth dimensions. The code composes reusable React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`) inside a shared `FaceContainer` that applies a center translation via a D3-style transform. The faces are static, generated once from an array of 18 elements, with no animation or interaction.

Sep 16, 2021