cheruvatheryvishnu@gmail.com

@Vishnu-VCheruvathery·10 public vizzes

Axes with React D3

This example displays a horizontal bar chart of the ten most populous countries from a UN population dataset, with axes rendered using React and D3.js. The code loads CSV data via `d3.csv`, scales it with `scaleBand` and `scaleLinear`, and draws SVG elements. Axes are manually constructed from tick values using React components, with grid lines and labels generated from `xScale.ticks()` and `yScale.domain()`.

Jan 5, 2024

Loading thumbnail…

Margin Convention

This example demonstrates the margin convention in D3 by rendering a bar chart of UN population data for 2019. The chart displays the top 10 countries by population using SVG rectangles, with a margin object defining spacing around the plot area. React manages the component state, fetching data via d3.csv and scaling with d3.scaleBand and d3.scaleLinear. The inner dimensions are calculated by subtracting margins from the full width and height, and the chart group is translated accordingly to position the bars correctly within the SVG.

Jan 5, 2024

Loading thumbnail…

Pathetic Bar Chart

This example shows a bar chart of the top 10 countries by 2020 population, with bars extending horizontally from a shared left edge. The chart initially displays a loading message, then renders the data using React and D3’s `scaleBand` and `scaleLinear` to map country names to y-positions and population values to bar widths. Data is loaded asynchronously from a CSV file using `d3.csv`, and the visualization is drawn as SVG rectangles within a fixed-size viewport.

Jan 5, 2024

Loading thumbnail…

Rendering Data with React

This example shows a bar chart of the top 10 countries by 2020 population, rendered as SVG rectangles using React. The code loads UN population data from a CSV file via d3.csv, then uses d3.scaleBand and d3.scaleLinear to map country names and population values to screen coordinates. React state management with useEffect and useState handles the asynchronous data loading and updates the visualization when data arrives. The chart is built entirely with React components and D3 scales, demonstrating a hybrid approach where React manages the DOM and D3 handles data processing and scaling.

Jan 4, 2024

Loading thumbnail…

Fork of Smiley Face Part II

A React application renders a horizontal visualization of CSS named colors, where each of the 148 rows displays a color’s hex value as a colored strip. The code loads color data from a CSV file using `d3.csv` and manages state with React’s `useState` and `useEffect` hooks. Each row is a React `<div>` element styled with the color’s background, creating a full-width stacked bar chart. The example demonstrates integrating D3 for data loading with React for declarative SVG and DOM rendering.

Jan 4, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a bar chart of population by country, colored by religion, using the Vega-Lite API. The visualization sorts countries by descending population and includes tooltips for each bar’s population value. It loads CSV data from a GitHub gist via `d3.csv` and renders the chart as an SVG using Vega-Lite’s `markBar` encoding, with custom axis and label styling from a shared config. The code registers Vega-Lite and Vega-Tooltip handlers to enable interactive tooltips.

Jan 4, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, displaying the file size, row count, and column count. It uses D3 v5’s `d3.csv` method to fetch and parse the CSS Named Colors dataset asynchronously. The code also includes commented-out alternatives using the Fetch API and `d3.csvParse`, illustrating different approaches for handling CSV text. Results appear in a large pre-formatted text element.

Jan 3, 2024

Loading thumbnail…

Smily Face Part 1

This example renders a smiling face using React and D3 v7, drawing a yellow background circle, two eyes, and a mouth arc onto an SVG canvas. The face is centered at 960×500 pixels, with components defined as reusable functions (`BackgroundCircle`, `Eyes`) and the mouth generated via `d3.arc()`. The code sets explicit dimensions for eye offset, eye radius, and mouth width, then applies a transform to position everything around the center point. The visualization demonstrates a simple, programmatic composition of geometric shapes without external data.

Jan 3, 2024

Loading thumbnail…

Fork of Smiley Face Part VI

This React and D3 visualization renders a single, randomly generated smiley face. The example demonstrates a compositional approach to building SVG graphics, where the face is constructed from separate React components for the background circle, eyes, and mouth. The `Face` component assembles these parts, applying randomized values for stroke width, eye placement, eye radius, and mouth dimensions. The mouth uses D3's `arc` API to create a path, while the face is positioned within an SVG container using a transform. The view is generated from a single render of the `App` component.

Jan 3, 2024

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a yellow smiley face rendered as an SVG graphic, composed of a circular background, two eyes, and a curved mouth. It demonstrates modular React component organization by splitting the face into separate files for the background circle, eyes, and mouth, using ES6 modules and React fragments. The code leverages D3’s `arc` generator to compute the mouth path, while React renders the SVG elements with fixed dimensions and coordinates. The visualization is purely illustrative, with no external data source, and serves to showcase component reuse and composition in a React-D3 integration.

Jan 3, 2024