Nanditha Reddy

Fork of Network graph

Network graph of Research connections

Globe

Tech gaints

Interactive Globe - 8

Family Tree

Fork of ICE-8 Family Tree

Fork of HTML Starter

Reusable Scatter plot

This reusable scatter plot visualizes car horsepower, miles per gallon, cylinder count, and displacement from a CSV dataset, animating through these columns every second. Built with D3 v6, it uses a custom `scatterPlot` function with `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to render SVG marks. Data points appear as distinct symbols and colors, with axes and labels updating dynamically via `setInterval` and the `svg.call(plot)` pattern.

Fork of ICE 7 Area Chart

This fork of the ICE 7 Area Chart displays miles per gallon (mpg) for various car models using a line chart with a smooth basis curve. The SVG visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map car models and mpg values, with axes labeled and styled via CSS. The line generator, `d3.line` with `curveBasis`, connects data points, while the dataset is loaded as CSV from a GitHub gist. The chart lacks a filled area, despite its title, focusing instead on the trend line.

Fork of ICE7 Line Chart

This line chart visualizes miles per gallon (mpg) for car models, with temperature data from San Francisco sourced via CSV. The chart uses D3 v5’s `scaleBand` and `scaleLinear` for axes, `line` with `curveBasis` for a smoothed path, and `axisBottom` and `axisLeft` for labeled ticks. Data is loaded with `csv` and rendered in SVG via `select`. The chart includes rotated x-axis labels, a title, and axis labels.

Fork of ICE-7 Pie Chart

This fork of the ICE-7 Pie Chart visualizes the horsepower of the top 12 car models from a CSV dataset. The chart uses a pie layout and arc generator to render slices in an SVG, with colors mapped by a categorical scale. Legends display each model name and its horsepower value (e.g., "230 hp") beside a matching color swatch. The code imports D3 v5 modules like `csv`, `pie`, `arc`, and `scaleOrdinal`, loads data from a GitHub gist URL, and sorts entries by horsepower before rendering.

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot that visualizes the Iris dataset, mapping sepal and petal measurements. The visualization dynamically alternates between two data columns, "hp" and "mpg," every second, updating the x-axis and points accordingly. Built with D3.js v6, the chart uses SVG elements and D3 scales, axes, and data joins to render the circles. The code demonstrates a modular pattern where a `scatterPlot` function encapsulates the chart logic, allowing for easy reconfiguration of dimensions, margins, and data accessors. Axes and labels are generated with D3's axis and text APIs, with transitions handled through `setInterval`.

Fork of Fork of HTML Starter

This example visualizes a scatter plot of gold-price data from a CSV file, animating between engine power and miles-per-gallon columns on a fixed axis. The visualization uses D3’s `csv` loader and a custom `scatterPlot` module, rendering SVG circles with a 5-pixel radius. A `setInterval` timer cycles the x-axis mapping every second, updating the chart via the plot function. The code demonstrates dynamic axis updates by re-invoking the plot with new accessors, while the y-value remains static, and the viewport dimensions are set to the window size.

Miles per Gallon vs Horsepower

This scatter plot visualizes the relationship between miles per gallon and horsepower for 32 car models, revealing a clear negative correlation. The visualization uses D3.js v7 with SVG rendering, scaling data from the mtcars dataset via a CSV file. The code employs `d3.csv` for data loading, `scaleLinear` for both axes, and `axisLeft` and `axisBottom` for ticks. Circles are positioned using the computed scales, with axis labels added to clarify the quantitative values shown.

Car models and there mpg range values

This example visualizes the fuel efficiency range (mpg) of various car models as a bar graph. It shows the distribution of miles per gallon across different vehicles, highlighting which models are more fuel-efficient. The visualization uses React to manage the component state and D3.js v5 for data parsing and scales, including `scaleBand` for the categorical x-axis and `scaleLinear` for the continuous y-axis. The data is loaded as CSV from a remote URL, and bars are rendered as SVG rectangles with steelblue fills, accompanied by axes with tick marks and rotated labels for readability.

Fork of HTML Starter

This example visualizes miles per gallon for various motorcycle models as a horizontal bar chart, sourced from the mtcars dataset. It shows the ranking of each model’s fuel efficiency. The code uses React for component rendering, D3 v5’s `scaleBand` and `scaleLinear` for scales, and `csv` to load the data. Bars are drawn as SVG `rect` elements, with axis ticks and grid lines generated using D3’s `ticks` method. The chart displays values up to the maximum mpg, with a light green page background.

Fork of Anv_ICE-6 Bar Graph

This example visualizes the distribution of motorcycle models across brands in India using a horizontal bar chart. The chart displays the count of models for each brand, with bars scaled proportionally to the data. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to position and size the bars. Data is loaded from a CSV file and processed by counting occurrences of each brand. The chart includes labeled axes for brand names and model counts, along with gridlines for readability, all rendered as SVG elements.

Fork of Impact of Covid-19 on Employment Bar Graph

This bar chart visualizes the impact of COVID-19 on employment by displaying the percentage of hours lost for a 40-hour workweek across 14 countries. The visualization uses a horizontal bar layout, with each bar’s length encoding the data value, making it easy to compare losses between nations. Built with React and D3 v5, the chart employs `scaleBand` for the categorical country axis and `scaleLinear` for the quantitative percentage axis. Data is loaded asynchronously from a CSV file using D3’s `csv` function, while SVG rectangles render the bars, with axis ticks and labels drawn manually.

Fork of Responsive Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, plotting petal length against sepal length. The code uses D3.js v6 to load the CSV data via `d3.csv` and render circles as SVG elements. It employs `d3.scaleLinear` to map the data domain to screen coordinates, with axes generated using `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window with responsive sizing. The visualization clearly shows the relationship between the two flower measurements, though it does not color-code by species, presenting the raw data points uniformly.

Flowers Forks D3!

This bar chart visualizes predicted population values across cities, with each city’s population represented by a yellow bar on a black axis. Built with D3 v5, it loads CSV data via `d3.csv`, scales the x-axis with `scaleBand` and the y-axis with `scaleLinear`, and renders axes using `axisLeft` and `axisBottom`. The chart uses an SVG container and applies a custom CSS class for bar styling, while the y-axis domain is set from zero to the maximum population value. Data is fetched from a remote GitHub gist URL.

Fork of Responsive Bar Chart

This example demonstrates a minimal React bar chart component that uses D3.js to render a single rectangular bar. The visualization shows a static SVG rectangle positioned at coordinates (50, 50) with a width and height of 50 pixels, filled with a steelblue color. The code initializes the chart by selecting the SVG element via `d3.select` and appending the rectangle through D3's declarative API. The rendering relies on React's `useEffect` hook to manage the D3 manipulation, while the SVG is defined directly in the JSX with an 800×400 viewport. The data source is hardcoded, and no scales or axes are implemented.

Fork of Chest pain type vs count Bar Chart

This grouped bar chart visualizes the distribution of chest pain types by gender, using data from the Heart Failure Prediction dataset. The visualization employs D3 v7 with React, encoding chest pain type on the x-axis and count on the y-axis, with gender represented through grouped bars colored steelblue for male and pink for female. The chart includes a light gray inner plot area, axis labels, a legend, and interactive tooltips that highlight bars orange with a yellow stroke on hover. Animated transitions enhance the user experience, while the legend and labeled axes make the comparison of gender distribution across different chest pain categories clear and accessible.

Learning how to load and parse the data with d3 today

This example demonstrates how to load and parse a CSV dataset using D3.js, displaying metadata about a collection of movies. It shows the raw data structure, including row and column counts, memory usage, and column names, alongside static SVG posters for three films with their titles and release dates. The visualization uses D3's `d3.csv` method to fetch the remote CSV file from a GitHub gist and then dynamically updates a `<pre>` element with computed statistics about the dataset. The page also incorporates inline SVG graphics and a purple/pink color scheme, with the CSS file defining typography and layout. The code highlights the parsing process without any interactive or animated elements.

Fork of Fork of HTML Starter

This example displays movie details for three films—Baahubali 2, The Godfather, and Jersey—in static SVG cards, each showing a title, a placeholder image, and a release date. It demonstrates how to load and summarize a CSV dataset using D3.js v7, fetching a remote file with `d3.csv` and computing basic statistics about the data’s rows, columns, and memory footprint, which are then printed in a `<pre>` block. The visualization pairs hand-coded SVG markup with a dynamic data-metadata readout, all styled with CSS on a purple background.

Fork of Circles with D3

This example displays three static movie posters for *Baahubali 2: The Conclusion*, *The Godfather*, and *Jersey*, each rendered inside its own SVG element with a dark background and white text. It shows how D3.js loads a CSV dataset containing 165 movie records, then presents the title and release date for each film in a minimal card layout. The visualization uses `d3.csv` to fetch the remote data and logs a summary of the dataset structure (rows, columns, memory usage) to the browser console. No interactive behavior or dynamic data binding occurs; the SVGs are hand-coded with fixed text and placeholder rectangles.

Fork of Flowers with D3

This visualization generates flowers positioned on stems above a light green background, with each flower’s height corresponding to a country’s score from a hardcoded array. The code uses the D3 library to build scales and axes (`d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`) and renders the stems as rectangles, petals as circles at computed angles, and decorative vases and leaves via SVG paths.

Fork of a Dog!!

A fork of the classic example, this visualization uses raw SVG (Scalable Vector Graphics) shapes defined directly in an HTML file to draw a simple, static dog face. The code constructs geometric primitives—circles for the head, eyes, pupils, and nose, and path elements for the ears and mouth—all hard-coded with specific coordinates and styling attributes like `fill` and `stroke`. No external data or libraries are involved; the minimal markup relies on default browser rendering of SVG elements within a fixed-width canvas.

Fork of Hello HTML

Five small black bird shapes fly horizontally across a sky-blue SVG background, bouncing back when they leave the viewport. The birds are rendered as simple path elements and animated with `setInterval`, updating their x-coordinates every 50 milliseconds. The code uses D3 v7's `select`, `range`, and data joins to create and reposition the paths, starting from randomized positions.

Fork of Flowers with D3

A fork of the D3.js v3 "Flowers" example, this visualization renders a bar chart where each bar is styled as a green stem topped with a five-petal flower. The flower colors and stem heights derive from an array of country scores. The code uses `d3` scales (`scaleBand`, `scaleLinear`), axes (`axisLeft`, `axisBottom`), and SVG primitives (`circle`, `path`, `rect`) to draw the scene. A brown vase path anchors the stems at the bottom.

Fork of Flowers with D3

This example displays a bar chart of three countries—Malta, Outer Space, and the Netherlands—as stylized flowers with green stems, colored petals, and brown vases, with each flower’s height corresponding to a score on a 0–100 scale. The visualization uses D3 v7’s `scaleBand` and `scaleLinear` for positioning, `axisLeft` and `axisBottom` for axes, and `select` to manage the SVG. Petals are drawn via a loop of `circle` elements positioned with trigonometry, while stems and vases are rendered with `rect` elements. Data is hardcoded in the `countries` array, and the background is set to lightgreen.

Fork of Hello HTML

This fork of the Hello HTML example presents a minimal, empty HTML page that serves as a blank canvas for visualization. The index.html file contains only the basic document structure with a title and an empty body, containing no JavaScript or external libraries. It does not use any data-visualization APIs or render any content. The example demonstrates the fundamental starting point for any web-based visualization, where all graphical elements would need to be added manually, relying on the browser’s native HTML parsing and rendering to display the page.

Fork of Fork of Flowers

A short, procedural scene renders a light blue canvas populated by three black birds. Each bird consists of two circles for the body and head, plus a path for a wing, positioned at random coordinates within the upper half of the display. The code uses d3.select, append, and attr to construct the SVG elements, and the main function exports a container-based draw function that calculates dimensions from the container's clientWidth and clientHeight.

Hey!!! Lets make a face with D3.js

A yellow circle face with animated eyebrows is rendered in SVG using D3. The example builds the face from basic shapes—circles for eyes and an arc for the mouth—positioned around a central group. Eyebrows animate via chained D3 transitions, moving up and down over two-second intervals. The code imports `select` and `arc` from D3 v7, loads the library from UNPKG, and demonstrates modular ES6 imports within a VizHub context.

Fork of Hello HTML

A simple natural scene rendered with p5.js depicts two cats, two dogs, three birds, four butterflies, two trees, and five flowers moving across a light-gray canvas. Animals drift in random directions using the p5.js `cos()` and `sin()` functions, wrapping around screen edges. Plants remain stationary, with trees drawn as brown rectangles and green triangles, while flowers use randomly colored ellipses via the `random()` method. Static elements are displayed before animated ones in the `draw()` loop.

Fork of Circles with D3

This example visualizes a simple animated ecosystem of birds and trees using the Svelte framework and D3.js. It shows three white birds with triangular beaks and brown trunks with green foliage, all moving across a light background. The rendering approach relies on custom `Bird` and `Tree` classes within `index.js`, updating positions each frame with cosine and sine trigonometry. D3 is included as a dependency, though the core animation logic uses Svelte's base ecosystem and Canvas drawing commands.

Fork of Flowers

A vibrant, chaotic field of oversized flower-shaped SVG paths fills the screen against a rainbow gradient background. Hundreds of these petal-like forms, each defined by a single complex `Path` element, are scattered randomly using `Math.random()` for both horizontal and vertical positioning. The React application generates 300 instances, coloring each with a dynamically computed `rgb` fill based on its index. A `feDropShadow` filter adds depth, while the paths are uniformly scaled and rotated, creating an abstract, generative floral landscape.