Sreekar Reddy

@SreekarReddyA·14 public vizzes

Fork of Stylized Bar Chart

This fork of the stylized bar chart displays the relationship between sepal length and sepal width for the Iris dataset, plotting each flower as a circular mark. The visualization uses D3 v5 scaleLinear functions to map the data coordinates onto a 960x500 SVG canvas, with React 16 components handling the rendering of the axes and marks. The chart includes formatted ticks along the bottom axis and a custom tooltip format that abbreviates large numbers using D3's format function. Data comes from the iris CSV loaded asynchronously via D3's csv utility.

May 16, 2021

Loading thumbnail…

Fork of Refactored Bar Chart

A horizontal bar chart uses React and D3 v5 to display the top 10 most populous countries, ranking them by their 2020 population figures from the United Nations World Population Prospects dataset. The visualization renders with SVG, where d3.scaleBand maps countries to vertical positions and d3.scaleLinear scales population values to bar widths. The AxisBottom and AxisLeft components generate tick marks and labels, while the Marks component draws the rectangular bars without any axis titles or gridlines, keeping the chart intentionally minimal.

May 15, 2021

Loading thumbnail…

Refactored bar chart

This example presents a horizontal bar chart of the ten most populous countries, with no axes. It uses React and D3 v5's `scaleBand` and `scaleLinear` to position bars, while manually rendering tick marks and labels for both axes. Data comes from the United Nations World Population Prospects 2019 CSV, filtered to the top ten entries via `d3.csv`. The SVG output is generated entirely through React components, with loading state handled by a custom `useData` hook.

May 15, 2021

Loading thumbnail…

Fork of Axes with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, using data from the United Nations World Population Prospects 2019. The chart displays axes rendered as SVG elements, with a linear scale for population values and a band scale for country labels. The code leverages React hooks (useState, useEffect, useCallback) to fetch and manage the CSV data, while using d3.csv, d3.scaleBand, and d3.scaleLinear for data processing and scaling. The visualization is rendered entirely through React components, producing SVG rects, lines, and text elements.

May 15, 2021

Loading thumbnail…

Fork of Rendering data with react

This example renders a horizontal bar chart of the top 10 countries by 2020 population from a UN dataset. The chart uses Unicode text as a loading message before the data arrives. The implementation employs D3 v5 utilities like `csv`, `scaleBand`, `scaleLinear`, and `max` to load and scale the data, while the React `useState` and `useEffect` hooks manage the asynchronous data fetching and SVG rendering. The code also includes an unused `pieArc` defined with D3's `arc` function.

May 15, 2021

Loading thumbnail…

Fork of Rendering data with react

This example visualizes the top 10 countries by projected 2020 population from a UN dataset, using horizontal bars rendered as SVG rectangles. The React component loads the CSV with `d3.csv`, stores the parsed data in state via the `useState` and `useEffect` hooks, and maps it to a bar chart. Positioning and sizing rely on `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with the chart width fixed at 960 pixels. The code also imports unused D3 arc and pie functions, while the `message.js` file defines a utility for summarizing data size.

May 15, 2021

Loading thumbnail…

Rendering data with react

A bar chart displays the top 10 countries by 2020 population, loaded from a UN dataset via `d3.csv`. React's `useState` and `useEffect` manage the asynchronous data fetching, while `d3.scaleBand` positions bars on the y-axis and `d3.scaleLinear` maps population values to widths. The SVG rectangles render through React components, with `d3.max` setting the x-domain.

May 13, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example shows a React component that loads a CSV file of CSS named colors using D3’s `csv` utility, then displays a summary message about the dataset. The data resides in React state via the `useState` hook, with `useEffect` triggering the asynchronous fetch on mount. The rendered output shows file size in kilobytes, row count, and column count, computed using `d3.csvFormat` and array properties. While loading, the component displays the text “Loading...”, and the final message is rendered inside a `<pre>` element styled with a large font size.

May 11, 2021

Loading thumbnail…

Fetch API

This example displays the size and structure of the CSS Named Colors dataset after fetching and parsing a remote CSV file. It reports the formatted data size in kilobytes, the total number of rows, and the number of columns in a plain text container. The code uses the Fetch API to retrieve the file and leverages D3.js version 6’s `d3.csv` method for loading and parsing, alongside `d3.csvFormat` to measure the data’s byte length. The visualization is implemented as a React component.

May 10, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face is drawn as a yellow circle with black outline and two eyes, rendered as SVG elements within a React component. The visualization tracks the mouse position across the screen, dynamically updating the location of a separate red circle that follows the cursor using React state and event handling. The code uses React hooks like `useState` and `useCallback`, along with inline event handlers, to manage the interactive behavior. The rendering is done with D3 v6 and React in an SVG container that fills the entire window.

May 10, 2021

Loading thumbnail…

Fork of Smiley Face Part III

Eighteen identical smiley faces, repeated in a grid, are rendered using React components and D3’s `arc` generator for the mouth. Each face draws a yellow background circle with a black stroke, two offset eyes, and an arc-based smile, all assembled via `FaceContainer` that applies a center translation. The visualization demonstrates component reuse with fixed props, using React-DOM for rendering into an SVG, while D3 v5 provides the `range` helper for the grid and trigonometrically computed arc paths.

May 9, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A cartoon face is drawn using SVG circles and an arc path. The face has a yellow circular head with a black outline, two black eyes positioned with vertical offsets, and a smile formed by a thick arc. The visualization is built with React, utilizing the D3.js `arc` API to generate the mouth path. The SVG canvas is 960 by 500 pixels, and all facial features are positioned relative to the center of the canvas.

May 8, 2021

Loading thumbnail…

Smiley Face Part 1

This example shows the first step in building a smiley face: a yellow circle with two black eye circles, rendered as static SVG shapes. The code uses plain SVG elements—`circle` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—inside an HTML document. No JavaScript libraries or data sources are involved; the visualization is purely declarative markup, with the face centered on a 960×500 canvas. The rendering approach relies on direct SVG presentation, leaving the mouth for a later part.

May 8, 2021

Loading thumbnail…

Let's make a face with D3.js!

This example draws a bright yellow cartoon face using SVG shapes, with two eyes, a mouth, and animated eyebrows. The face is centered within an SVG canvas using D3 selections and transformation attributes. Eyebrows animate up and down using chained `transition().duration()` calls. The code utilizes `d3.select`, `d3.arc` for the mouth path, and D3’s transition system to create the motion. The rendering approach is purely declarative SVG construction in a React-free environment, with styles defined in a separate CSS file.

Dec 4, 2020