Archit Bhargava

@justaprogrammer321·8 public vizzes

Scatter plot

A scatter plot displays the relationship between sepal length and sepal width for iris flowers, with each circle representing a data point. The visualization uses React for component structure and D3.js scales, ticks, and formatting to map the CSV data to SVG circles. The chart includes labeled axes for both quantitative variables, with a custom tick format replacing 'G' with 'B' for billions. The code loads data from a remote CSV using d3.csv and renders all marks as fixed-radius circles within a 1060x500 SVG canvas.

Feb 14, 2024

Loading thumbnail…

Fork of React starter

A horizontal bar chart ranks the ten most populous countries using a dataset of country populations. Built with React and D3 v7, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with SVG `<rect>` elements as marks. Axes are rendered manually via `scaleX.ticks()` and formatted with `format('0.2s')` to display billions. The chart loads CSV data asynchronously and includes an x-axis label, maintaining a clean, minimal design with styled grid lines and text.

Feb 7, 2024

Loading thumbnail…

React starter

This React starter displays a colorful pie chart made from CSV color data, with each slice rendered as an SVG path using the `d3.arc` generator. The component loads data via `d3.csv` from a remote gist, stores it in React state with hooks, and maps each row to a slice with equal angular spans. The visualization is rendered using React’s `createRoot` and React DOM, combining D3’s geometry utilities with React’s declarative component structure.

Feb 3, 2024

Loading thumbnail…

Fork of React starter

A fork of the React starter template renders a smiling face in SVG using React components for the background, eyes, and mouth. The yellow circle background and black eyes are drawn with SVG `circle` elements, while the mouth is generated with d3’s `arc` generator. The code positions these elements relative to a centered translation, demonstrating how to combine React’s declarative component structure with D3’s geometry utilities. The example uses d3.v7 and React 18, rendering static vector graphics without interactivity or data binding.

Jan 25, 2024

Loading thumbnail…

Fork of React starter

A smiling face rendered in SVG uses a yellow circle for the head, two black circles for eyes, and a D3-generated arc for the mouth. The React application positions the facial features within a group, translating them to the canvas center. The eyes are drawn with offset coordinates, while the mouth is created using a D3 arc generator with specified inner and outer radii and angular range. The composition is built with React components and D3 v7, using a simple black-and-yellow color scheme.

Jan 25, 2024

Loading thumbnail…

React starter

This example shows a yellow smiley face rendered as SVG, centered within a 960 by 500 viewport. It draws a yellow background circle with a thick black stroke, two black eyes positioned with horizontal and vertical offsets, and a mouth created using D3’s `arc()` generator to produce an SVG path. The project is built with React 18, uses JSX components for the face parts, and relies on D3 version 7.8.5 for the arc geometry. The application sets up a React root and renders the components into an HTML page.

Jan 25, 2024

Loading thumbnail…

Smilie

This example shows a static smiley face composed of basic SVG shapes: a yellow circle for the face and two smaller black circles for the eyes. The page renders a hidden commented-out SVG block, while the active code simply loads the React library and logs the `React` object to the browser console. The implementation uses React 18 and relies on vanilla SVG elements with CSS to reset the page margins and hide overflow.

Jan 25, 2024

Loading thumbnail…

React starter

This example displays a large, centered "Hello React!" message on a plain webpage. It demonstrates a minimal React 18.2.0 setup, loading the core `react` and `react-dom` libraries via an unpacked CDN. The `index.js` file defines a simple `App` component that renders a div with the message, and then uses `createRoot` from `react-dom` to mount that component into the `#root` element of the HTML page. The code shows the basic pattern of rendering a React component into the DOM.

Jan 25, 2024