Skip to main content
Log in
N

Narottam Medhora

@narottam-medhora·22 public vizzes

Loading thumbnail…

Fork of Coronavirus Deaths by Country over Time (with Voronoi Hover)

This chart tracks global Coronavirus deaths over time for each country, using a logarithmic y-axis to show cumulative counts. A Voronoi overlay computed with `d3.Delaunay` enables hover detection on any data point, highlighting the selected country's line and displaying a tooltip with the country name, death count, and date. Data comes from the Johns Hopkins COVID-19 time series, rendered as an SVG with React and d3.v5.

Nov 8, 2022
Loading thumbnail…

Fork of D3 Starter

This example demonstrates basic SVG rendering and interactive dragging in D3 v7. It uses `d3.select` to append an SVG canvas and randomly positions 20 circles across a 960×500 coordinate space. The circles are rendered with `data` joins and the `join("circle")` method. Drag behavior is implemented with `d3.drag()`, which handles the `start`, `drag`, and `end` events to update circle positions via `event.x` and `event.y`. The code imports helpers such as `range`, `select`, and `drag` from the D3 module.

Jul 25, 2022
Loading thumbnail…

Fork of React Starter

This example renders a radial area chart in an SVG using React and D3 v7. It visualizes temperature or similar data over time, with the area’s inner and outer radii scaled by two values (`minmin` and `maxmax`) per date. The chart uses `d3.areaRadial()`, `d3.lineRadial()`, `d3.scaleTime()`, and `d3.scaleLinear()` to map dates to angles and values to radii. It listens to window resize events, recalculating the chart’s dimensions and re-rendering it to remain responsive within its container.

Jul 25, 2022
Loading thumbnail…

Rendering Data with React & D3

This visualization renders a dataset of CSS named colors as a radial burst, with each color displayed as a thin horizontal stripe. The React component begins with a loading state, then fetches the CSV data using D3’s `csv` utility and maps each row to a styled `div`. The background color of each stripe is set from the `RGB hex value` column, while the layout simply stacks rows vertically rather than creating a true radial arrangement. The example demonstrates combining D3’s data-loading APIs with React’s declarative rendering to transform tabular color data into a visual composition.

Jul 25, 2022
Loading thumbnail…

React Radio Buttons

This example demonstrates a simple React user interface where two radio buttons, labeled Size and Count, toggle a selection. The interface uses React’s `useState` hook to track the currently chosen value, which is logged to the console on change. The `Radio` component receives an `onSelectedValueChange` callback prop, invoked with the selected `event.target.value` upon input change. Built with React 16.13.1 and rendered via `ReactDOM`, it showcases controlled component state management without any external data or visualization libraries.

May 20, 2022
Loading thumbnail…

Fork of React Starter

This example shows a minimal React interface with two radio buttons for choosing between “Size” and “Count” factors, though no visible data or chart is rendered. The code imports `React` and `useState`, but the state hook is used outside a component, and a static `App` component returns only the fieldset. It uses React 16.13.1 and ReactDOM to mount the app into the `#root` element, and logs “bacon” to the console.

May 18, 2022
Loading thumbnail…

Stylized Refactored Bar Chart

This bar chart displays the top ten countries by population from a 2019 UN World Population dataset, using horizontal bars ranked from largest to smallest. The visualization is rendered in SVG through React components, with D3’s scaleBand and scaleLinear handling the axes and data mapping. Axes are drawn by separate React components, and D3’s csv parser loads the data. Axis labels use D3’s format function to abbreviate values (e.g., billions), while tooltips appear on hover via SVG title elements.

May 4, 2022
Loading thumbnail…

Interaction with React

This example shows a simple smiley face rendered as an SVG using React, with the face positioned based on the browser window’s dimensions. The code uses React and ReactDOM to mount a component that draws a single circle, while commented-out markup hints at a fuller face with eyes and a mouth. The rendering approach is declarative JSX with computed coordinates from `window.innerWidth` and `window.innerHeight`, and the interaction is limited to static SVG output without event handling.

Apr 6, 2022
Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart displaying the top 10 regions by population for 2020, using a dataset loaded from a CSV file via D3’s `csv` utility. React components, including `AxisBottom`, `AxisLeft`, and `Marks`, render the SVG axes and rectangles. The chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, with React’s `useState` and `useEffect` managing asynchronous data loading. The visualization demonstrates a modular, refactored approach to building interactive charts with D3 scales and React rendering.

Apr 6, 2022
Loading thumbnail…

Margins and Axes

A horizontal bar chart displays the top ten regions by 2020 population from a United Nations World Population dataset. The visualization draws SVG rectangles with lengths scaled by population and includes custom axes with tick labels. D3’s `csv`, `scaleBand`, and `scaleLinear` utilities handle data loading and scaling, while React manages the component state and SVG rendering within a configured margin group.

Mar 21, 2022
Loading thumbnail…

Making a Bar Chart with React & D3

This example shows a horizontal bar chart of the top 10 most populous regions and countries for 2020, rendered as SVG elements. The React component uses the `useState` and `useEffect` hooks to load data from a CSV file via D3’s `csv` utility, then maps that data to `<rect>` elements. D3’s `scaleBand` and `scaleLinear` position the bars vertically and size their widths, while `max` determines the domain for the linear scale.

Mar 21, 2022
Loading thumbnail…

Rendering Data with React & D3 (using Arcs)

This example visualizes CSS named colors as a radial burst of arcs arranged in a pie chart, with each arc filled using its corresponding color’s hex value from a CSV file loaded via D3’s `csv` utility. React manages the component state and renders the SVG paths, while D3’s `pie` and `arc` functions compute the angular layout and arc geometry. The data loads asynchronously with `useEffect` and `useState`, and the visualization updates once the CSV is fetched.

Mar 21, 2022
Loading thumbnail…

Interaction with React

An interactive SVG circle follows the mouse cursor across a 960 by 500 canvas, updating its position in real time. Built with React, the component uses the `useState` hook to track mouse coordinates and a `useCallback` event handler for the `onMouseMove` SVG attribute. The circle’s center point and radius are explicitly set within the rendered SVG, demonstrating state-driven updates without a separate data source.

Mar 21, 2022
Loading thumbnail…

Loading data

This example demonstrates how to load a CSV file from a remote URL and print its contents to the browser console. It uses the native `fetch` API and async/await syntax to retrieve the text from the specified GitHub-hosted CSV file, then logs it via `console.log`. The code shows the simplest pattern for handling asynchronous data loading in plain JavaScript without any external libraries or frameworks.

Mar 21, 2022
Loading thumbnail…

Smiley Face Part VI (Compartmentalized)

A grid of nine identical smiley faces, each rendered as a yellow circle with black stroke, eyes, and an arc-shaped mouth, fills the viewport. The example demonstrates modular React component composition for SVG, where separate files define the face's background, eyes, mouth, and container. The `Mouth` component uses D3's `arc` API to generate a path, while `range` from D3 creates the array for the repeated faces, all rendered through React's `ReactDOM.render` into a single SVG container.

Mar 21, 2022
Loading thumbnail…

Smiley Face Part VI

This example displays a yellow smiley face rendered as an SVG in React, with a circular background, two eyes, and an arc-based mouth. The code uses React components (`BackgroundCircle`, `Eyes`, `Mouth`) and ES6 destructuring for props, while the mouth is drawn with the `d3.arc()` API, which sets inner and outer radii and start/end angles. The face is centered by applying a translate transformation to a grouping element, and the layout is hardcoded with fixed dimensions and offsets.

Mar 21, 2022
Loading thumbnail…

Smiley Face Part IV

This example displays a yellow smiley face with black-outlined circles for the background, eyes, and a curved mouth, centered on a 960 by 500 SVG canvas. Built with React components, the visualization uses D3’s `arc` API to generate the mouth path, while ES6 destructuring passes the radius and stroke width props to the background circle. The face is positioned using SVG’s `transform` translation with a fixed center point, and the code renders via ReactDOM into the `#root` div.

Mar 21, 2022
Loading thumbnail…

Smiley Face Part III

This example renders a classic smiley face as a static SVG graphic using React and D3’s arc generator. The code defines a yellow circle with a black stroke for the head, two black eye circles, and a curved mouth path created by `d3.arc()` with inner and outer radii and fixed start/end angles. Geometry is computed from hard-coded width, height, and offset constants, and the entire drawing is positioned via a centered `<g>` transform. The visualization demonstrates composing basic D3 shape generators within a React component to produce a simple, annotated illustration.

Mar 21, 2022
Loading thumbnail…

Fork of React Starter

A yellow circle with black outline centered in an SVG viewport displays two smaller black circles as eyes. The React component renders the graphic using hardcoded dimensions and coordinates, with the main circle’s radius derived from the viewport height and stroke width. The code uses React and ReactDOM to mount the component into the DOM, with the SVG elements defined directly in JSX. All shapes are static, with no interaction or data input.

Mar 21, 2022
Loading thumbnail…

Creating a smiley face (with React)

This example renders a smiley face as a static SVG graphic using React and ReactDOM. The code defines constants for dimensions, eye offsets, and radius, then composes three `<circle>` elements—one large yellow face with a black stroke, and two smaller black circles for eyes—within an SVG canvas. It uses React's JSX syntax to declare the SVG markup and ReactDOM's `render` method to inject the component into the page's `root` element. The face is drawn from computed center coordinates, with no interactive or animated behavior.

Oct 11, 2021
Loading thumbnail…

Creating a smiley face

This example shows a simple smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The head is drawn with a black stroke and a fill of yellow, while the eyes use only a black fill. The code uses plain SVG elements rendered directly in HTML, with CSS styling applied to remove page margins and hide overflow. The face is centered using explicit x and y coordinates (cx and cy) and sized with radius attributes, with no interactive or animated behavior.

Oct 10, 2021
Loading thumbnail…

Data Visualization 2020

This example renders the text “klj” in enormous type, centered on a plain white background, with the page title “Data Visualization 2020.” It uses raw HTML and CSS for styling and a small JavaScript snippet that logs a message to the browser console. The code does not include any data or visualization libraries, relying only on vanilla browser APIs. The styling is minimal, and the visual output is purely typographic.

Oct 10, 2021