Skip to main content
Log in
R

Rahel Gunaratne

@kael558·13 public vizzes

Loading thumbnail…

test

This network graph displays the connections among Kenneth Rainin Foundation initiatives, including Arts Web, Social Impact Commons, Community Arts Stabilization Trust, and AmbitioUS, each with child nodes representing partner organizations. The visualization uses D3 v6’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces to position nodes, while user interaction via `drag` lets viewers move nodes. Node and link colors come from a generated palette in `colors.js`, and the SVG rendering shows circles sized by node hierarchy and text labels.

Jun 20, 2021
Loading thumbnail…

Vizz

This force-directed network diagram visualizes hierarchical relationships between demographic, academic, and enrollment data categories, with linked nodes representing attributes such as degree type, academic unit, and academic year. The D3 v6 simulation uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, forceCenter, and forceRadial to position nodes and links. SVG circles are color-coded by group and rendered as labels within the 960×500 container. Users can drag nodes to reposition them, which triggers hover effects that highlight nodes with a thicker stroke. Data is loaded from a JSON file containing nodes and links.

Jun 19, 2021
Loading thumbnail…

Force Network

This example demonstrates a force-directed network graph with draggable nodes connected by arrowed links. The visualization uses D3.js v6’s `d3.forceSimulation`, combining `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes. Nodes are colored by group, with hover highlighting via CSS classes, and SVG markers render arrowheads. Data comes from an external `data.json` file, loaded asynchronously with `d3.json`.

Jun 18, 2021
Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous countries as horizontal bars, with axis ticks and labels rendered manually. The React component loads data from the UN World Population Prospects 2019 CSV via `d3.csv`, then uses `scaleBand` and `scaleLinear` to position bars and axes. D3’s `xScale.ticks()` generates grid lines, while SVG text elements draw tick labels. Rendering is done through React’s JSX within an SVG, replacing D3’s direct DOM manipulation.

May 19, 2021
Loading thumbnail…

Fork of Stylized Bar Chart

This is a bar chart displaying the top 10 most populous countries, sorted by population, using data from the United Nations World Population Prospects 2019. The chart uses React and D3 v5, with scales created via `d3.scaleBand` and `d3.scaleLinear` to map countries and population values to SVG coordinates. Horizontal bars are rendered as SVG rectangles, with hover tooltips showing the formatted population value. Styling is applied via CSS, using the Poppins font and a teal color scheme.

May 13, 2021
Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the left axis and population values on the bottom axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `<rect>` elements for the bars. Data comes from the United Nations World Population Prospects 2019 CSV file, loaded via `d3.csv`. Pre-styled axes are rendered as separate React components with tick marks and labels.

May 13, 2021
Loading thumbnail…

Fork of Rendering Data with React & D3

This example displays all CSS named colors as a full radial burst of filled arcs, where each slice represents one color from the dataset. It loads the CSS color data using D3's `csv` utility, then transforms it with `d3.pie` and renders each slice as an SVG `<path>` using `d3.arc`. React manages the component state and lifecycle, using `useState` and `useEffect` to fetch the data, while the pie chart assigns equal value to every entry to create the even distribution.

May 12, 2021
Loading thumbnail…

Fork of Pathetic Bar Chart

This fork displays the top 10 most populous countries as a minimal, axis-free bar chart using SVG rectangles. The React app loads United Nations population data from a CSV, sorts by 2020 figures, and maps country names to vertical bands while bar widths correspond to population via d3’s scaleBand and scaleLinear. The code, using d3.v5 and React 16.9, computes maximum population with d3.max and renders each bar as a <rect> element. The chart intentionally omits axes, labels, or other decoration, creating a “pathetic” visual that highlights only the raw ranking.

May 12, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to construct an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The plot displays each car as a circle, with its position determined by miles per gallon and horsepower, while color encodes the country of origin and size reflects vehicle weight. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite specifications, and includes tooltips via vega-tooltip. Data is loaded through d3.csv, and the chart resizes to fit the browser window.

May 11, 2021
Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load and display a summary of CSS named color data using React and D3. The visualization renders a plain-text message showing the dataset’s size in kilobytes, row count, and column count. Data is fetched asynchronously with D3’s `csv` method, while React’s `useState` and `useEffect` hooks manage the loading state and prevent infinite re-fetching. The final output is presented inside a `<pre>` element, initially displaying “Loading...” until the data arrives.

May 11, 2021
Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across a blank SVG canvas, with its position updating in real time to mirror the pointer’s movements. The example demonstrates a simple interactive overlay using React’s `useState` and `useCallback` hooks to track mouse coordinates, rendered as an SVG `<circle>` element positioned by `cx` and `cy` attributes. The code uses the React and ReactDOM libraries (version 16.9.0) via a `bundle.js`, with mouse events handled directly on the SVG element. No external data is involved; the rendering is purely responsive to user input.

May 11, 2021
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSS Named Colors dataset loaded from a CSV file, displaying the file size in kilobytes, row count, and column count in large text. It uses D3 v5’s `d3.csv` method with a Promise to fetch and parse the data asynchronously, while also providing commented alternatives using the Fetch API with `async`/`await` and `d3.csvParse`. The visualization is minimal, focusing on the data-loading process rather than graphical rendering, with all output written into a DOM element via `textContent`.

May 11, 2021
Loading thumbnail…

Fork of Hello HTML

This example shows a grid of cartoon faces, each with a yellow circular background, two eyes, and an arc-shaped mouth. The faces are generated by mapping over an array created with `d3.range` and rendering React components for each face. The code uses `d3.arc` to compute the mouth path, and each face randomizes its eye radius and mouth dimensions using `Math.random`. The `Face` component composes smaller components like `BackgroundCircle`, `Eyes`, and `Mouth`, all placed inside an SVG via `FaceContainer`.

May 10, 2021