A

amiteshwarr

@amiteshwarr·16 public vizzes

Loading thumbnail…

Menus with React

This example demonstrates a basic React menu interface for selecting a pet. It uses React and ReactDOM to render a label and a dropdown select element with options like Dog, Cat, and Spider. The page is styled with large fonts in the HTML, and the overall structure is built with JavaScript’s `React.createElement` and `ReactDOM.render`. The rendering is SVG-based, though the visible output is the interactive menu, with no additional data or dynamic behavior implemented.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a simple “Hello React” message. It uses React 16.9.0 and ReactDOM to mount a functional component into a root `<div>` element. The page is styled with CSS that removes margins and hides overflow, though the accompanying SVG markup for a smiley face (with yellow circle, eyes, and stroke) is present only as a commented-out template. The code imports React and ReactDOM directly and calls `ReactDOM.render` to display the component, serving as a basic starter for embedding visualizations within a React framework.

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays a stylized bar chart of the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. The chart employs a clean, minimalist design with a Poppins font and a muted teal color for the bars. Built with React and D3 v5, it uses `scaleLinear` for both axes and SVG rendering. Interactive tooltips reveal exact population values via `title` elements, while the axes are formatted using D3's `format` API to abbreviate large numbers.

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a simple bar chart with no axes or labels. The bars are rendered as SVG rectangles using React, with heights determined by a d3.scaleBand and widths by a d3.scaleLinear. Data comes from the United Nations World Population Prospects 2019 dataset, loaded via d3.csv. The code uses React hooks like useEffect and useState to fetch and store the data, then maps each country to a colored rectangle in the SVG.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019, with horizontal bars sorted by country. Built with React and D3 v5, it uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the population x-axis, and d3.format to abbreviate large numbers with a custom tick formatter that converts 'G' to 'B'. The chart renders as SVG, with each bar displaying a native tooltip via an SVG `<title>` element, styled with the Poppins font and a teal color scheme.

Loading thumbnail…

Refactored Bar Chart

This example presents the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis, sourced from the United Nations World Population Prospects 2019. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to position bars and axes, while SVG `<rect>` elements render the marks. The code separates concerns into reusable components for the bottom axis, left axis, and marks, and loads data asynchronously via D3’s `csv` parser.

Loading thumbnail…

Margin Convention

This example shows the top 10 most populous countries as a horizontal bar chart with gridlines but no axes or labels. React manages the interface, while D3 v5's `csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. The chart renders as SVG, with country names on the y-axis and population values on the x-axis, using margins to position the inner plot area. Data comes from the United Nations World Population Prospects 2019 dataset.

Loading thumbnail…

Fork of Curran's Stylized Line Chart

A line chart plots temperature over time from the Data Canvas Sense Your City Dataset, rendered as an SVG via React. The visualization uses d3’s `scaleTime` and `scaleLinear` for axes, a `line` mark with `curveNatural` for the smooth path, and custom axis components for ticks and labels. Styling uses the Poppins font and muted gray and teal colors.

Loading thumbnail…

Fork of React Starter

This example shows a minimal React application that renders the text “Hello React!” centered on the page in extremely large type. The app uses React 16.13.1 and ReactDOM to create a functional component that returns a styled `<div>` element. The rendering approach relies on `ReactDOM.render()` to mount the component into the `#root` element defined in the HTML file, with CSS controlling the message’s font size and alignment. No external data or interaction is present; it is purely a static display.

Loading thumbnail…

Fork of Rendering Data with React

This example demonstrates how to render a dataset of CSS named colors as a half-donut chart using React and D3 v7. The visualization loads CSV data from a GitHub gist, displaying each color as a pie arc path filled with its corresponding RGB hex value. The code uses React hooks (useState, useEffect) to fetch and store the data, d3.csv for parsing, and d3.arc for generating the path geometry, with all output rendered as SVG elements within a React component.

Loading thumbnail…

Rendering Data with React

This example demonstrates how React and D3 can work together to render data, displaying named CSS colors as horizontal color bars. The application loads a CSV dataset of CSS color names and their hexadecimal RGB values, then renders each color as a full-width bar whose height is computed dynamically. The code uses React hooks like `useState` and `useEffect` to fetch data with D3’s `csv` function, while a separate `Message` component summarizes the dataset size using `d3.csvFormat`. The visualization updates automatically once the asynchronous data loading completes.

Loading thumbnail…

Loading Data with D3 and React

This example demonstrates how to load and summarize a CSV dataset within a React application using D3. It displays a text message showing the file size in kilobytes, the number of rows, and the number of columns from a gist-hosted CSV of CSS named colors. The code uses React hooks (`useState`, `useEffect`) to trigger `d3.csv` loading, and a custom `Message` function that formats data statistics using `d3.csvFormat`. The visualization renders the summary in a large `<pre>` element while data loads.

Loading thumbnail…

Loading and Parsing CSV Files using D3

This example demonstrates how to load and parse a CSV file using D3, displaying the file’s size in kilobytes, row count, and column count. The code uses `d3.csv` to fetch a remote CSV of CSS named colors and returns an array of objects, then calculates metrics via `d3.csvFormat` and the resulting data’s properties. A commented alternative shows fetching the raw text with `fetch` and `response.text`, followed by `d3.csvParse`. The output appears in a large-font `<pre>` element.

Loading thumbnail…

Loading data in React

This example demonstrates how to load and display CSV data within a React application using D3. It fetches a remote dataset of named CSS colors via `d3.csv` and stores the parsed result in React state with the `useState` hook. The rendered output simply shows the raw data object as a text string, while the code includes commented-out logic for calculating file size, row count, and column count from `d3.csvFormat`. The visualization uses D3 v7 and React 16, with a minimalist interface where the data message is displayed at a large font size.

Loading thumbnail…

Smiley Part 1

A grid of twenty-four smiley faces fills the screen, each face generated with random variations in stroke width, eye position, and eye radius. The visualization uses React components to compose each face from separate background, eyes, and mouth elements, with the mouth drawn via a d3 arc path. Rendering occurs as an SVG, with faces positioned using a translated group element from the FaceContainer, and randomization applied through JavaScript’s Math.random on each render.

Loading thumbnail…

Fork of Hello HTML

This example renders a minimal SVG graphic inside an HTML page. The code uses an empty `<svg>` element within standard HTML markup, with no JavaScript or external libraries. It demonstrates the simplest possible setup for including SVG content in a web page, making it a foundational starting point for data visualization projects. The page includes a title and an empty SVG container, showing the basic structure required before adding visual elements.