HARSHA BUDDANA

@hbuddana·14 public vizzes

ICE 8-3 Tree

This interactive tree diagram visualizes a three-level biological classification of animals, from the root “Animals” down to specific classes like Mammals and Insects. Built with D3.js (version 3.5) using `d3.layout.tree` and `d3.svg.diagonal`, it renders nodes as SVG circles with text labels and animated curved links. Each node’s fill color corresponds to its hierarchical level, while the stroke color remains uniformly grey, helping distinguish taxonomic depth at a glance.

Mar 30, 2023

Loading thumbnail…

ICE 8-3 Tree

This visualization displays a hierarchical tree of cricket formats, branching from the root "Cricket" into ODI, Test, and League categories, with subcategories like Mens ODI, Day Test, and IPL. Built with React and D3.js, it renders an animated, collapsible tree diagram using SVG. The code employs `d3.layout.tree()`, `d3.svg.diagonal()`, and CSS transitions to smoothly expand and collapse nodes on click, with text labels and colored circles indicating node states. The data is hardcoded in a JavaScript array.

Mar 25, 2023

Loading thumbnail…

Fork of Social Network graph

This network graph visualizes social connections among nine people, with node colors and link weights indicating group membership and relationship strength. The interactive visualization uses D3.js v4’s force-directed layout API (`d3.layout.force()`) to position nodes, applying gravity, distance, and charge parameters. Node and link data come from a local `graph.json` file, rendered as SVG elements. Users can click and drag nodes using `force.drag`, with positions updated on each tick of the simulation.

Mar 25, 2023

Loading thumbnail…

Country map

This example displays a map of the United States with state boundaries drawn as lines and land areas filled in a light tan color. It uses React hooks to load TopoJSON data from the us-atlas package and converts it into GeoJSON with the topojson feature and mesh functions. The map is rendered as SVG paths using d3.geoPath with the geoAlbersUsaTerritories projection, which includes U.S. territories. State interiors appear in teal strokes, while the graticule is defined but not rendered.

Mar 25, 2023

Loading thumbnail…

World Map

A world map renders country landmasses as light green polygons with black outlines on a white background. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas package. The `topojson.feature` method extracts country boundaries from the dataset, and each polygon is appended to the SVG via a data join. A separate path for the globe’s outer sphere is drawn using a manually defined GeoJSON-like object.

Mar 25, 2023

Loading thumbnail…

ICE-7-1

A D3.js scatter plot visualizes the Iris dataset, plotting petal width against sepal length. Three species of iris are distinguished using different SVG symbols via a d3.scaleOrdinal and d3.symbol generator. The chart uses d3.axisLeft and d3.axisBottom for axes, with data loaded from a CSV URL and parsed into numeric values. The visualization fills the browser window and is rendered with SVG.

Mar 13, 2023

Loading thumbnail…

Scatter Plot with Different Markers for Different Groups

This scatter plot displays the Iris dataset by plotting PetalLengthCm against PetalWidthCm, with each species (setosa, versicolor, and virginica) rendered using a distinct SVG symbol—circle, star, and diamond respectively—via d3.symbol types. The visualization uses D3 v6 to load CSV data, apply linear scales for axes, and generate the SVG scatter plot. While the primary axes map petal dimensions, the code also reads sepal measurements into the mark data, though it does not use them for positioning. The plot fills the full browser window with a responsive SVG canvas.

Mar 13, 2023

Loading thumbnail…

ICE-7 Area

This area chart visualizes electronic sales in INR from 2009 to 2022, with the x-axis representing time and the y-axis showing sales amounts. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for scaling, `area` with `curveBasis` for the filled path, and `axisBottom` and `axisLeft` for labeled axes. Data is loaded from a CSV via `csv`, with years parsed as dates and sales converted to numbers. The SVG rendering includes a green filled area, red title, and styled tick labels.

Mar 13, 2023

Loading thumbnail…

ICE-7 Line Chart

This line chart shows electronic sales in India from 2009 to 2022, with the year on the x-axis and sales figures on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map the data, while d3.axisBottom and d3.axisLeft render the labeled axes with gridlines. A d3.line generator creates the indigo path, and D3’s csv function loads the dataset from a GitHub gist. The SVG is rendered inside a React component with CSS styling for fonts and colors.

Mar 12, 2023

Loading thumbnail…

ICE-7-2 PIE CHART

This pie chart visualizes COVID-19 death statistics across seven U.S. states, with each slice labeled by state name and value. The chart uses D3.js v4’s `d3.pie` and `d3.arc` to generate SVG paths, with categorical colors via `d3.scaleOrdinal`. Hovering over a slice reduces the opacity of other slices and displays a tooltip showing the state and its corresponding death count. The visualization includes an interactive legend and is rendered entirely in SVG, with styling applied through CSS classes.

Mar 12, 2023

Loading thumbnail…

ICE-6-2

This scatter plot visualizes penguin measurements, mapping flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or other). The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a GitHub gist, scale the axes, and render SVG circles with variable radii. Additional bill measurements are stored as data attributes but not visualized. The chart includes labeled axes and a title, with margins set around the full window dimensions.

Mar 7, 2023

Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

Mar 7, 2023

Loading thumbnail…

ICE5

This visualization displays the average cost of undergraduate education by state in the USA, presenting dataset metadata such as file size, row count, and column count. Built with D3 v7, it loads a CSV file via `d3.csv` and uses `d3.csvFormat` to calculate metadata, then updates the page’s text content through the DOM. The design incorporates a custom light pink background with a university-themed SVG image, while the code is written as a plain HTML and CSS page with no React components despite the framework tag.

Feb 27, 2023

Loading thumbnail…

Micky

This example renders a static SVG smiley face named Micky using React and D3.js. The face includes a head, eyes, nose, mouth, and ears, constructed with SVG primitives like circles, ellipses, and D3 arc generators. The code demonstrates DOM manipulation through React components while leveraging D3’s `arc()` API to define the mouth, nose, and ear shapes, with transformations applied to position them. The image is drawn at a fixed 900×500 canvas size, using a simple color palette and stroke widths, with no interactive or animated behavior.

Feb 20, 2023