Rohinton Kazak

@rkazak·11 public vizzes

Rendering un-population data with React & D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, using React state to manage the data and D3 scales to position the bars. It loads the un-population CSV via `d3.csv`, maps the population values, and renders SVG rectangles with `scaleBand` and `scaleLinear`. Grid lines and tick labels are generated from `xScale.ticks()`. The chart uses React hooks (`useState`, `useEffect`) to fetch and update the data, with D3 v6 providing the scaling and CSV parsing utilities.

May 27, 2021

Loading thumbnail…

Fork of Rendering data with React & D3

This example displays a pie chart of CSS named colors loaded from a CSV file, with each slice filled by its corresponding RGB hex value. The visualization uses React hooks (useState, useEffect) to fetch the data via d3.csv and manage the loading state, while d3.pie and d3.arc compute the slice geometry. Each slice is rendered as an SVG path element controlled by React’s declarative JSX syntax. The chart uses an outer radius equal to the full width, creating a semicircular donut shape.

May 25, 2021

Loading thumbnail…

Rendering data with React & D3

This example demonstrates how React and D3 can work together to visualize data about CSS named colors. It loads a CSV file of color names and their hexadecimal RGB values using D3’s `csv` utility, then renders each color as a horizontal strip with a background style set to its hex value. The React `useState` and `useEffect` hooks manage the asynchronous data loading and state updates, while the `message.js` module computes summary statistics like byte size, column count, and row count. The visualization presents a simple stacked list of colored bands, showcasing the integration of D3’s data parsing with React’s component-based rendering.

May 25, 2021

Loading thumbnail…

Load Data with React & D3

This example demonstrates how to load and display metadata about CSS named colors using React’s `useState` and `useEffect` hooks alongside D3’s `csv` utility. The React component fetches a CSV file from a GitHub gist, stores the parsed data in state, and renders a text summary showing the data’s size in kilobytes, number of columns, and row count. The summarized message is generated by the `message` function using D3’s `csvFormat`. The visualization appears as plain text in a `<pre>` element, updated dynamically once the data loads.

May 25, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a density plot of automobile horsepower over time, using a filled line mark with 10% opacity to reveal overlapping data patterns. The visualization is built with the Vega-Lite API, where the visualization specification is defined declaratively in `viz.js` using functions like `markLine` and `encode`, then rendered to SVG via the Vega view system. Data is loaded asynchronously from a CSV file containing auto-mpg records using d3.csv, with mouse interactions handled through Vega Tooltip. The chart dimensions dynamically adapt to the browser window, and the axis styling is customized through a shared configuration object.

May 24, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse a CSV file from a remote URL using D3.js v6, displaying basic file statistics in large text. It uses `d3.csv` to fetch the data asynchronously, then reports the computed size in kilobytes, column count, and row count from the parsed result. The code also includes commented-out alternatives using the Fetch API with `d3.csvParse` to show equivalent parsing methods. The data originates from a GitHub gist containing basic color information, and the output is rendered into a styled `<pre>` element.

May 24, 2021

Loading thumbnail…

Mouse follower

A yellow circle follows the mouse cursor across an SVG canvas. The interface tracks pointer movement and repositions the circle to match the cursor’s coordinates. Built with React (using `useState` and `useCallback`), the SVG reacts to `onMouseMove` events. D3.js version 5 provides the SVG rendering context, while React manages the state updates.

May 24, 2021

Loading thumbnail…

Fork of Smily face pt2

A grid of identical yellow smiley faces renders as SVG through React. Each face is composed of separate components for the head, eyes, nose, and mouth, with the mouth drawn using a d3.arc path. The code uses React and d3.v6, mapping over an array created by d3.range to generate repeated Face elements. The rendering relies on an SVG container that translates each face to the center, with randomized eye radii producing subtle variations across the grid.

May 23, 2021

Loading thumbnail…

Smily face pt1

A simple yellow smiley face is drawn with SVG inside a React app, centered on a 960 by 500 canvas. D3’s `arc` generator creates the mouth as a thick half-ring, while standard `circle` elements form the eyes and outline. The code uses React 17, D3 v6, and renders all shapes in a single transformed `<g>` group, with a black stroke on the face and filled eyes.

May 22, 2021

Loading thumbnail…

Cars report

This example demonstrates a minimal Hello World message rendered in large, styled text on a dark blue background. It uses plain DOM manipulation to set the text content of a `<pre>` element, while a second message is defined in an ES6 module. The page layout is controlled with CSS, importing the Ubuntu font from Google Fonts and setting a 12em font size for the body text.

Jul 7, 2019

Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in bright text against a dark blue background. It demonstrates the basic structure of a VizHub project, using an ES6 module to export the message string and D3’s `select` method to set the text content of a `div`. The page imports the Ubuntu font via CSS and uses D3 v5 from the CDN.

Jul 7, 2019