Sai Kaushik Ganji

@G-Kaushik·12 public vizzes

ICE 8 D3 Tree (Sai Kaushik Ganji)

This tree visualization displays the architecture of a household cleaning robot as a hierarchical diagram. It shows four main subsystems—Perception, Navigation, Actuation, and UX—branching into individual components like the RGB Camera, SLAM, Drive Motors, and Mobile App. Using D3 v7, the code applies `d3.hierarchy` and `d3.tree` with a custom `nodeSize` and `linkVertical` to render the layout as SVG. Nodes are drawn as colored rectangles, circles, or diamonds, with labels positioned below each shape.

Nov 8, 2025

Loading thumbnail…

ICE 8 D3 Network (Sai Kaushik Ganji)

This example visualizes a smart-home cleaning robot’s connectivity network as an interactive force-directed graph. Eight labeled nodes (Robot, Wi-Fi Router, Cloud API, etc.) are linked by edges representing data flow, local map writes, docking, and firmware updates. The layout is computed with d3.forceSimulation, using d3.forceLink for edge distances, d3.forceManyBody for repulsion, and a drag handler that fixes node positions during interaction. The scene is rendered as SVG lines and circles, with tick updates translating node positions and updating link coordinates. The source is a static array of node and link objects defined inline in the HTML.

Nov 7, 2025

Loading thumbnail…

ICE 8 Making Map (Sai Kaushik Ganji)

A choropleth world map shows countries with high-follower social-media figures, using darker blue shades for greater counts of mega-influencers. D3.js v7 loads `followers_by_country.csv` via `d3.csv`, joins it to TopoJSON country boundaries from `world-atlas` using `d3.json` and `topojson.feature`, and projects them with `d3.geoEqualEarth` and `d3.geoPath`. A sequential color scale from `d3.interpolateBlues` encodes values, while hover interactions display a styled tooltip. Countries without data appear gray.

Nov 7, 2025

Loading thumbnail…

ICE 7 Area Chart (Sai Kaushik Ganji)

An area chart maps vehicle horsepower against fuel efficiency, using a filled line plot to reveal a general downward trend where higher-power vehicles tend to be less efficient, with a notable exception for electric models. The D3.js v7 visualization loads data from a CSV file, sorts it, and uses SVG rendering with `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for gridlines, and custom tooltip logic for interactivity. The chart includes labeled axes, a responsive layout, and hover effects to display precise data points.

Oct 25, 2025

Loading thumbnail…

ICE 7 Line Chart (Sai Kaushik Ganji)

This line chart visualizes the relationship between horsepower and fuel efficiency across 24 vehicle models, with fuel efficiency plotted on the y-axis and horsepower on the x-axis using linear scales. The visualization includes interactive hover tooltips that display details for individual data points. Built with D3 v7, the code uses d3.csv() with d3.autoType to parse the vehicles.csv data, d3.scaleLinear() for both axes, and d3.axisBottom()/d3.axisLeft() to render the grid lines and axis ticks. The SVG rendering approach includes a fixed-position tooltip element that responds to mouse events.

Oct 25, 2025

Loading thumbnail…

ICE 7 Pie Chart (Sai Kaushik Ganji)

This pie chart visualizes the distribution of vehicle models across market segments, using data from a 24-row CSV file. The chart is rendered as an SVG with D3 v7, slicing the circle by segment counts and encoding each segment with a distinct color from the `d3.schemeSet2` ordinal scale. The code uses `d3.csv` and `d3.autoType` to load and parse the data, then `d3.rollups` to aggregate counts by segment. Hovering reveals a tooltip, and a legend lists each segment with its total.

Oct 25, 2025

Loading thumbnail…

ICE 7 Reusable Scatter Plot (Sai Kaushik Ganji)

A reusable D3 scatter plot displays the relationship between Horsepower and Fuel Efficiency, with points colored and shaped by vehicle segment. The chart reads from the local `vehicles.csv` file using `d3.csv` and `d3.autoType`. It builds an SVG using `d3.select`, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` to map categories to colors from `d3.schemeSet2` and symbol types from `d3.symbolCircle`, `d3.symbolSquare`, `d3.symbolTriangle`, and `d3.symbolDiamond`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and data points are rendered via `d3.symbol` with a size of 100, including a legend listing each segment.

Oct 24, 2025

Loading thumbnail…

ICE 7 Reusable scatter plot (Sai Kaushik Ganji)

This interactive scatter plot shows car sales data, displaying price in thousands of USD against horsepower for individual vehicles, with point size reflecting engine size and color/shape encoding vehicle type. The visualization uses D3.js v7’s `d3.csv` to load and parse the Car_sales dataset, and employs `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` to map numeric and categorical variables. Marks are generated using `d3.symbol()` with varying symbol shapes, including circles, crosses, and triangles, demonstrating a reusable charting function that separates configuration from rendering.

Oct 23, 2025

Loading thumbnail…

ICE6 - Sai Kaushik Ganji

This visualization presents a horizontal bar chart ranking the top 12 products by total units sold from the retail sales dataset. The bar chart aggregates six months of data using d3.rollups and d3.sum to calculate product totals, sorting them in descending order. Bars are rendered as SVG rectangles with a linear gradient fill, and animated updates respond to user interaction. D3 v7 handles data loading via d3.csv, while a custom tooltip displays exact values on hover, enhancing the comparative analysis of product performance.

Oct 14, 2025

Loading thumbnail…

ICE 6 Scatter Plot (Sai Kaushik Ganji)

This scatter plot visualizes the relationship between horsepower and price for various car models, using the Car_sales.csv dataset. Each point represents a vehicle, with circle size encoding sales volume and color distinguishing vehicle type. The visualization uses D3.js v7 to generate an SVG, implementing linear scales for positioning, a d3.forceCollision layout for point separation, and interactive tooltips that display detailed car information on hover. Grid lines and axis labels provide spatial context for comparing data points.

Oct 14, 2025

Loading thumbnail…

ICE5 - Sai Kaushik Ganji

This visualization presents a perfume dataset with 128 rows and 6 columns, displaying a full data preview table alongside a decorative perfume bottle image. The page loads the CSV file from a GitHub gist using d3.csv and dynamically builds a scrollable HTML table with sticky headers and row hover effects. The code uses D3 v7 for data loading and DOM manipulation, while CSS handles the table styling, gradient background, and hover animations on the bottle illustration.

Oct 3, 2025

Loading thumbnail…

ICE -5 Sai Kaushik Ganji

This example presents a static "Hello HTML!" message centered on a blank canvas, styled with large typography. The visualization relies on a minimal setup using HTML and CSS, where the `styles.css` file defines a font size of 12em and text alignment. The JavaScript file `index.js` only logs "hello world" to the console, with no interactive or dynamic data rendering. It serves as a foundational HTML starter template, demonstrating basic page structure and styling without external libraries or data sources.

Oct 3, 2025