Skip to main content
Log in
N

nishanththouta16@gmail.com

@Nishanth160·17 public vizzes

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows a simple bar chart of letter frequencies from a CSV file, with interactive bars that highlight a selected letter. Built with React 19 and D3 v7, it uses a ResizeObserver to track container dimensions, d3.csv to load data, and d3.scaleBand/d3.scaleLinear for scales. Clicking a bar toggles its selection, dimming other bars via opacity and fill changes.

Oct 6, 2025
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A fork of the React & D3 v7 vibecoding starter shows a bar chart of the letter-to-count mapping in a CSV. It loads the data via D3's `csv`, renders bars, axes, and a title using React state and a `ResizeObserver` to size the SVG. Clicking a bar toggles its selection, highlighting it with a darker fill and dimming others.

Oct 6, 2025
Loading thumbnail…

Fork of Fork of graph

This graph visualization shows the relationships between streaming platforms and their original shows, with Netflix and Hulu as platform nodes connected to their respective series. The force-directed layout uses d3.forceSimulation with link, charge, and center forces to position nodes dynamically, while SVG lines and circles represent links and nodes, colored by group. The code binds node labels directly and updates positions on each simulation tick, creating an interactive-looking network diagram rendered entirely in SVG.

Apr 8, 2025
Loading thumbnail…

ICE 8 Tree Diagram

This example presents a hierarchical tree diagram of streaming platforms, genres, and titles using D3.js v7. It visualizes the parent-child relationships among Netflix, Hulu, and their respective categories and shows, with node colors representing depth levels. The code uses the `d3.stratify` and `d3.tree` APIs to structure and layout the data, and constructs curved links with `d3.linkHorizontal`. The SVG rendering applies a static layout with colored circles and labels, based on a hardcoded dataset of streaming services and their content.

Apr 8, 2025
Loading thumbnail…

Fork of tree

A tranquil scene shows a golden Buddha meditating beneath a recursively generated green tree on a grassy hill, with animated clouds drifting across a gradient sky. The tree is built with a recursive `drawBranch` function that computes branching paths using trigonometry, rendering SVG lines with varying stroke widths and colors. The clouds animate via React state and `requestAnimationFrame`, updating their horizontal offsets every 50 milliseconds. The visualization combines static SVG shapes for the Buddha and landscape with dynamic, scripted animation for the cloud movement.

Apr 8, 2025
Loading thumbnail…

Fork of D3 Pie chart

This pie chart displays the distribution of engine types—Petrol, Diesel, Electric, and Hybrid—within a dataset, with values expressed as percentages. It visualizes categorical proportions using a standard circular layout generated by the D3.js `d3.pie` and `d3.arc` APIs, rendered as SVG paths. Slices are filled with colors from the `d3.schemeCategory10` ordinal scale, and each slice is labeled directly on the chart. A legend, built with custom HTML elements, maps each color to its corresponding engine type and percentage value, using the same color assignment from `d3.scaleOrdinal`.

Apr 1, 2025
Loading thumbnail…

Fork of Line Chart

A simple line chart tracks six years of sales data, with a black polyline connecting points across evenly spaced, band-scaled year categories. The chart uses D3 v6 to build an SVG, applying `d3.scaleBand` and `d3.scaleLinear` to map coordinates and a `d3.line` generator to create the path. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while text labels appear for both variables, all with the dataset embedded directly in `index.html`.

Apr 1, 2025
Loading thumbnail…

Fork of Area Chart

This fork of an area chart displays yearly sales data from an embedded sample dataset using D3 v6. It renders a steelblue area path with an SVG canvas, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with an `d3.area` generator. The chart includes labeled axes and axis ticks via `d3.axisBottom` and `d3.axisLeft`, with margins defining the plot area.

Apr 1, 2025
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between model year and horsepower for a small set of cars, using steel-blue circles on a linear scale. Built as a reusable D3 chart function, it creates an SVG with axes labeled "Year" and "Horsepower", and the code employs `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to map data ranges. A dataset of five car entries, including years 2021–2023, is rendered with the chart function called on the document body, while a separate module offers a configurable version with setters for dimensions and margins.

Apr 1, 2025
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the Iris dataset, cycling through four flower measurements as the x-axis variable every two seconds. The animation reveals correlations between sepal and petal dimensions across the dataset's 150 samples. The SVG chart is generated using the `d3.select` API, `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` within a configurable chart function. Data is loaded from a remote CSV file using `d3.csv`, with numeric parsing applied to all measurement columns.

Apr 1, 2025
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a D3 scatter plot animates through the Iris dataset's four numeric columns, switching the x-axis attribute every two seconds. The visualization uses a reusable `scatterPlot()` function that draws SVG circles with `d3.select`, `d3.scaleLinear`, and `d3.axisBottom`. Data loads via `d3.csv` from a GitHub Gist, with coordinates mapped to petal and sepal measurements, while the y-axis remains fixed on sepal length.

Apr 1, 2025
Loading thumbnail…

Fork of D3 Starter

This example displays a scatter plot of automobile data, plotting engine horsepower against model year for a dataset of vehicles. The visualization uses an SVG rendering approach, with D3 version 3’s `scaleLinear` and `d3.extent` to map the year and horsepower values to pixel coordinates. Circles represent individual data points, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and the chart includes labeled axes for both variables. The code structures the plot within a reusable `scatterPlot` function, called with the dataset directly on the body element.

Apr 1, 2025
Loading thumbnail…

Fork of D3 Starter

This example renders the text "Hello D3" directly on the page. It uses the `select` method from the D3.js v7 library to target the `<body>` element and immediately sets its text content. The visualization serves as a minimal starting point, demonstrating how to import D3 and execute a basic DOM manipulation. The data is not external; the output is a single hardcoded string, with all styling and layout left at browser defaults.

Apr 1, 2025
Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between vehicle model year and horsepower. Each circle represents a car, with its x-position determined by the year and y-position by its horsepower rating. The visualization builds an SVG chart using D3.js v7, employing `d3.csv` to load the dataset, `d3.scaleLinear` for both axes, and `d3.extent` and `d3.max` to compute the data domains. Hovering over a dot changes its fill color to orange, while axes are rendered with `d3.axisLeft` and `d3.axisBottom`. Data comes from a car models dataset on GitHub.

Mar 26, 2025
Loading thumbnail…

Bar Chart

This bar chart displays the average horsepower of car models grouped by brand, with each brand represented as a vertical bar. It uses D3.js v7 to load a CSV dataset from a GitHub repository via `d3.csv`, aggregate values with `d3.rollup` and `d3.mean`, and render the visualization with `d3.scaleBand` and `d3.scaleLinear` scales. The chart includes rotated axis labels, hover effects that change bar color to orange, and explicit axis titles for Brand and Horsepower.

Mar 26, 2025
Loading thumbnail…

ICE6

A simple SVG face made of two unfilled eye circles placed inside a large yellow circular head with a black outline. The static composition demonstrates basic coordinate positioning and shape styling, using only inline SVG elements defined directly in the HTML. The circles are positioned via explicit `cx`, `cy`, and `r` attributes within an `<svg>` canvas of 960 by 500 pixels, with no interactivity or data-driven logic.

Mar 26, 2025
Loading thumbnail…

Solar System

This animated visualization displays the planets of the solar system with relative sizes to scale, positioned along dashed orbit paths with a glowing gradient background. The data comes from Wikipedia’s list of gravitationally rounded objects, and the animation uses D3’s `transition` and `easeLinear` to sequentially grow each circle and fade in its label. The code also applies SVG filters, such as `feGaussianBlur` for the glow effect, and custom styling for text shadows.

Feb 23, 2025