myselfganesh433@gmail.com

@GaneshBodeddula·8 public vizzes

Fork of HTML Starter

This circular packing chart visualizes Airbnb NYC listings, hierarchically nested by borough, neighborhood, and room type. The code uses d3.hierarchy, d3.pack, and d3.scaleOrdinal with d3.schemeSet3 to structure and color the data from AB_NYC_2019.csv. Interactive zooming via d3.transition and interpolateZoom allows navigation through the nested circles, while hover tooltips display the full path and listing count. Labels fade in and out during zoom transitions, and a legend identifies the three hierarchical levels.

Apr 9, 2025

Loading thumbnail…

Fork of Hello VizHub

This example displays a simple text message, "Hello VizHub!", styled with large, centered typography. It uses D3 version 6 to select the HTML element with the id `message` and set its text content via the `select` function. The text is defined in a separate ES6 module as an exported constant. Styling is applied through an external CSS file that centers the text and sets its font size.

Apr 8, 2025

Loading thumbnail…

Fork of D3 Starter

This example displays the text “Hello D3” at a very large font size in the center of the page. The visualization is a minimal starter template, using the `d3.select` method to target the body element and set its text content. It loads D3 version 6.7.0 from a bundled JavaScript file, with the rendering handled entirely by the browser’s DOM and CSS, rather than a canvas or SVG. The code does not include any data or interactive behavior, serving only as a basic entry point for D3 projects.

Apr 8, 2025

Loading thumbnail…

Fork of Hello VizHub

Apr 8, 2025

Loading thumbnail…

Iris - Area

This area chart displays sepal length measurements across 150 iris samples, with a filled teal region beneath a monotone curve and labeled axes. It loads a space-separated Iris dataset from a GitHub Gist via `d3.text`, then parses the raw text into data objects. The visualization uses `d3.area` with `d3.curveMonotoneX`, `d3.scaleLinear` for both axes, and `d3.axisBottom`/`d3.axisLeft` to render the SVG chart. The title and axis labels are added as SVG text elements, with styling applied through an external stylesheet.

Mar 27, 2025

Loading thumbnail…

IRIS

This pie chart displays the distribution of Iris species from a CSV dataset loaded from a GitHub gist. The chart uses a clean, white background with an elegant color palette of blue, orange, and green to distinguish the three species, and includes labels directly on the slices, a bold title, and a legend showing counts. Built with D3.js v7, it employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG slices, with `d3.rollups` aggregating the data.

Mar 27, 2025

Loading thumbnail…

IRIS

A pie chart visualizes the species distribution of the Iris dataset, showing each category as a slice with its own color and a corresponding legend. The code loads CSV data from a GitHub gist, groups it by species to count occurrences, and uses `d3.pie` and `d3.arc` to generate the SVG paths. Colors are assigned via `d3.scaleOrdinal` with a manual range, and `d3.select` manages the SVG elements while `d3.rollups` performs the aggregation.

Mar 27, 2025

Loading thumbnail…

Fork of Hello VizHub

This example displays a single, centered message using the D3.js library, reading its text from a separate ES6 module. It demonstrates how to combine D3 with modular JavaScript and external CSS styling. The page creates a div element and uses the `select` function from D3 to set its text content, while the `styles.css` file controls its large, centered typography. The project serves as a minimal template for integrating D3 v6 into a broader web application structure.

Mar 27, 2025