Lainu Kuruvilla

@lainu·12 public vizzes

Refracted bar chart

This example visualizes the top 10 most populous countries as horizontal bars, using population data from the United Nations World Population Prospects 2019, loaded via d3.csv. It renders an SVG chart in React, positioning rectangles with d3.scaleBand for the y-axis countries and d3.scaleLinear for the x-axis population values. The code manually draws tick marks and labels using d3’s scale.ticks, while omitting axes entirely, creating a stripped-down, unfinished aesthetic. The chart updates reactively through React’s useState and useEffect hooks.

Jan 14, 2022

Loading thumbnail…

Axes with React and D3

This example shows the top 10 most populous countries as a horizontal bar chart, using D3 scales and React state to render axes and bars as SVG elements. The x-axis is generated manually from `d3.scaleLinear().ticks()`, while the y-axis uses a `d3.scaleBand` domain, with both axes and rectangles rendered via React components. Population data comes from a CSV file loaded through `d3.csv` and filtered with `.slice(0, 10)`. The chart lacks axis labels and gridlines, but displays tick marks and country names positioned with SVG transforms.

Jan 14, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This chart displays the top 10 most populous countries in 2020 as horizontal bars, sorted by population, without any axes or labels to indicate values. It uses React’s `useState` and `useEffect` hooks to fetch and process data from the United Nations World Population Prospects 2019 CSV file, then loads it with `d3.csv`. The SVG rendering maps each country’s population to a bar width using `d3.scaleLinear`, while `d3.scaleBand` positions the bars vertically. The visualization intentionally omits axes, making it a “pathetic” bar chart that prioritizes raw shape over quantitative precision.

Jan 13, 2022

Loading thumbnail…

Rendering of UN pop

This example renders a horizontal bar chart of the top ten countries by population, using data from the UN’s 2020 population estimates fetched via `d3.csv`. It shows each country’s population as a bar, with the chart built in React and D3 v7. The code computes scales with `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis, then draws SVG `<rect>` elements for each bar. Rendering is handled declaratively through React state and the `d3.csv` promise.

Jan 13, 2022

Loading thumbnail…

Fork of Rendering data using react and D3

A colorful pie chart displays CSS named colors as equal-sized slices, with each slice filled using its corresponding RGB hex value from a CSV dataset. The visualization uses React hooks like `useState` and `useEffect` to fetch and manage the data, while D3’s `pie()` and `arc()` functions compute the angular and radial geometry for the SVG paths. The chart is rendered as an SVG element with a centered group transformation, and the color mapping directly applies each data entry’s RGB value to its slice fill.

Jan 12, 2022

Loading thumbnail…

Fork of Smiley Face Part 1

A smiley face built entirely from basic SVG shapes, including a yellow face circle, two eyes with white pupils, and an open mouth rendered as a thick arc. The code also adds small curved eyebrows above each eye using d3.arc() with custom start and end angles. The visualization is generated in React, with SVG elements constructed manually and positioned relative to a central transform. D3 v7 provides the arc generator, while React 16.7 handles component rendering into the DOM, creating a static composition without interaction or animation.

Jan 12, 2022

Loading thumbnail…

Rendering data using react and D3

This example renders the CSS named colors dataset as a vertical sequence of colored strips, one per color, using React to manage state and update the DOM. It loads the CSV data with d3.csv and stores it in React state via the useEffect hook. Each strip’s background color is set from the “RGB hex value” field, with a fixed width of 960 pixels and a height of 4 pixels. The visualization demonstrates a simple, data-driven layout where React handles rendering and D3 handles data fetching.

Jan 12, 2022

Loading thumbnail…

loading CSV Data

This example demonstrates how to load a CSV file from a GitHub Gist using D3 v7. It displays the file size in kilobytes, the number of rows, and the number of columns in the dataset. The code uses `d3.csv` to fetch and parse the remote CSV file, then `d3.csvFormat` and `data.columns.length` to compute the metrics. The results are rendered as text in a large `<pre>` element. The data source is the CSS named colors dataset hosted as a raw Gist file.

Jan 12, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset, showing miles per gallon against horsepower across different origins. The visualization uses square marks with color encoding for origin and size for vehicle weight, while tooltips display model names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3.csv for data loading, then renders an SVG view with custom axis and label styling. The plot automatically fits the browser window and uses Vega Tooltip for interactive hover details.

Jan 10, 2022

Loading thumbnail…

loading csv data using react and D3

This example demonstrates loading an external CSV file using D3’s `csv` function within a React component. It fetches a dataset of CSS named colors from a GitHub gist and displays its properties as plain text: the formatted CSV size in kilobytes, the row count, and the column count. The React app uses `useEffect` and `useState` to asynchronously fetch and store the data, then renders the summary via a custom `message` function that calls `d3.csvFormat` to measure the data.

Jan 10, 2022

Loading thumbnail…

Mouse mover

A circle follows the mouse cursor as it moves across an SVG canvas. The React component tracks pointer coordinates via an SVG `onMouseMove` event handler, updating the circle’s `cx` and `cy` attributes through state. D3’s `arc` import is unused here; rendering relies on React’s `useState` and `useCallback` hooks with a plain `<circle>` element. The visualization demonstrates real-time event-driven SVG updates in a React-D3 hybrid setup.

Jan 9, 2022

Loading thumbnail…

Smiley Face Part 1

A grid of randomly sized smiley faces, each rendered as an SVG composed of a yellow circle, two eyes, and a mouth, demonstrates a modular React component architecture. The faces vary in stroke width, eye radius and offset, and mouth dimensions, generated using `d3.range` and `Math.random`. The mouth uses `d3.arc` to create a half-circle path. The project relies on React for component composition and D3 v7 for shape generation within SVG.

Jan 9, 2022