tknaik

@tknaik·7 public vizzes

Rendering Data with data

A circular sunburst chart renders all named CSS colors as a single pie, with each slice’s fill matching the color it represents. The visualization loads a CSV of color names and hex values via `d3.csv`, then uses `d3.pie` and `d3.arc` to compute the slice geometry. Each path’s fill is set directly from the row’s ‘RGB hex value’ field, while React’s `useState` and `useEffect` manage the asynchronous data loading and component rendering as an SVG.

Oct 22, 2021

Loading thumbnail…

vega lite

This visualization shows the relationship between miles per gallon, horsepower, and country of origin for a set of automobiles. Each circle represents a car, with position encoding mpg and horsepower, while color distinguishes the origin and size reflects horsepower again. Built using the vega-lite-api library, the chart is rendered with Vega-Lite and Vega, pulling data from the UCI Auto MPG dataset via D3’s `csv` loader. The view auto-fits to the window and includes interactive tooltips through vega-tooltip.

Oct 22, 2021

Loading thumbnail…

vega lite

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. The code uses D3.js v5 to load CSV data, apply linear scales with `scaleLinear`, and render SVG circles with red, semi-transparent fills. It constructs axes with `axisBottom` and `axisLeft`, including grid lines and custom positioning for labels like "Horsepower" and "Weight." The layout applies explicit margins and a title above the chart.

Oct 22, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower for cars, with point color indicating region of origin and point size representing vehicle weight. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered to SVG via Vega and Vega-Lite libraries. Data comes from the UCI Auto MPG dataset, loaded asynchronously with d3.csv. The code customizes axis styling through a config object and adds interactive tooltips displaying car names through the Vega Tooltip handler.

Oct 22, 2021

Loading thumbnail…

Interaction with react

A circle follows the mouse cursor within an SVG canvas, demonstrating interactive state updates in React. The app tracks mouse movement via the `onMouseMove` event handler on the `<svg>` element and updates the circle’s `cx` and `cy` attributes using React’s `useState` hook. The visualization combines React 17 with D3 v7 for rendering, using a simple SVG `<circle>` element with a fixed radius. The code explicitly manages the circle’s position in React state rather than using D3’s data-binding, highlighting the interaction between React’s declarative model and SVG.

Oct 22, 2021

Loading thumbnail…

smiley face

A smiley face rendered as a yellow circle with black stroke, two solid black eyes, and an arc-shaped mouth. The SVG is built with React components, using D3’s `arc()` generator to construct the mouth path. Dimensions and positions are derived from constants, with the face centered in a 960 by 500 viewport. D3 v7 and React 17 are loaded via UMD scripts, and the visualization uses declarative JSX to define circles and the path element.

Oct 22, 2021

Loading thumbnail…

basic

This example shows a static smiley face rendered as a yellow circle with black outline, two eyes, and an open mouth, centered in an SVG canvas. The face is built using React components that create SVG elements, with the mouth generated via the `d3.arc()` API to define an annular sector. Circles are positioned using explicit coordinates and transforms, while the stroke width and radii are stored as constants. The visualization uses React 17 and D3 v7, with the shape drawn entirely through SVG markup.

Oct 22, 2021