saisathwikaguntupalli@gmail.com

Tree Graph ICE 8

This tree visualization displays the hierarchical structure of vehicle data, progressing from vehicle make down through model, fuel type, and transmission. The D3.js (v7) chart uses a tidy tree layout, with nodes colored according to their depth level—root in gray, makes in red, models in teal, fuel types in light green, and transmissions in yellow. The code builds the hierarchy from a CSV file using `d3.group`, constructs a tree structure, and renders it with `d3.hierarchy` and `d3.tree`, including the `d3.linkVertical` edge path generator.

Nov 1, 2025

Tree Graph ICE 8

This tree visualization displays the hierarchical structure of vehicle data, progressing from vehicle make down through model, fuel type, and transmission. The D3.js (v7) chart uses a tidy tree layout, with nodes colored according to their depth level—root in gray, makes in red, models in teal, fuel types in light green, and transmissions in yellow. The code builds the hierarchy from a CSV file using `d3.group`, constructs a tree structure, and renders it with `d3.hierarchy` and `d3.tree`, including the `d3.linkVertical` edge path generator.

Nov 1, 2025

Network Graph ICE 8

This network graph visualizes vehicle data from a CSV file, organizing vehicles into a hierarchical structure by Make, Model, Fuel Type, and Transmission. It uses d3.forceSimulation to position nodes in a dynamic layout, with circles colored by depth level and labeled accordingly. The graph is rendered as SVG using d3.v7, with links connecting parent and child nodes to show the relationships between vehicle attributes.

Oct 28, 2025

Vehicles Area chart

This area chart shows the average vehicle price by year, with a green shaded region rising and falling across the time series. The visualization uses D3.js to load CSV data from a GitHub gist, aggregate prices per year with `d3.rollup`, and render the area using `d3.area()` with a monotone curve. Axes, gridlines, and labels are created via D3’s axis APIs, while the SVG output is styled with CSS for a clean presentation.

vehicles Line Chart

This line chart shows the average price of vehicles across different years, highlighting overall price trends over time. The visualization uses a blue monotone curve with circular markers for each year's data point, and hovering over a point reveals the exact year and average price in a tooltip. Built with D3.js (v7.8.5), it loads CSV data from a GitHub gist, groups and aggregates entries by year using `d3.rollup` and `d3.mean`, and renders the result as an SVG with axes using `d3.axisBottom` and `d3.axisLeft`. Grid lines and formatted y-axis labels (in thousands) help contextualize the price values.

Fork of vehicles Line Chart

A line chart displays the relationship between diamond carat weight and depth percentage, using every fifth data point from the diamonds dataset loaded via d3.csv. The chart plots depth on the y-axis against carat weight on the x-axis, with a single blue trend line rendered as an SVG path using d3.line. Fixed y-axis scale from 50 to 80 percent depth, grid lines via d3.axisLeft with tickSize, and labeled axes clarify the data. The visualization relies on d3.scaleLinear for both axes and d3.axisBottom for the x-axis.

Fork of Vehicles pie chart

This fork of the classic Vehicles pie chart visualizes the distribution of vehicle makes in a dataset loaded from a GitHub Gist. The chart displays each make as a colored slice with a percentage label, alongside a legend showing the make name and its count. Built with D3.js v6, the code uses `d3.rollup` to aggregate counts, `d3.pie` to compute arc angles, and `d3.arc` to generate SVG paths. Slices are colored via a categorical scale and respond to mouse hovers.

Fork of vehicles Scatter Plot

A jittered strip plot shows the distribution of vehicle prices for each drive type (FWD, RWD, AWD), with semi-transparent dots colored by category. Hovering reveals tooltips with year, make, model, price, and fuel type. The visualization uses d3.csv to load data from a GitHub gist and renders circles via SVG, with d3.scaleBand and d3.scaleLinear for axes and d3.axisLeft/axisBottom for grid lines and ticks.

ICE 7 Scatter Plot

This D3.js scatter plot shows the relationship between car engine size and fuel efficiency, with each circle representing a car model and positioned by engine displacement (liters) and miles per gallon. A categorical color scale maps each car model to a unique vivid color, and the visualization includes hover tooltips for detailed values. The code uses d3.csv to load data, d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for rendering, and D3 selections with enter/append for creating SVG circles, set against a gradient background within a styled card layout.

ICE 7 Scatter Plot

This scatter plot visualizes the relationship between car engine size and fuel efficiency for 15 car models, using a color-coded circle for each model. D3.v7 loads and parses the CSV, then uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` to assign vivid colors per car model. The SVG rendering includes labeled axes, axis labels generated via `d3.axisBottom` and `d3.axisLeft`, and hover tooltips that display model details.

Fork of ICE 7 Resuable scatter plot Ar

This scatter plot visualizes the relationship between engine size and fuel efficiency for 15 car models, showing a general trend of lower MPG as engine displacement increases. Each data point is a filled circle colored uniquely per car model from a custom palette. The D3.js v7 code loads data from a CSV file, maps engine size (x-axis) and MPG (y-axis) to linear scales, and renders axes, labels, and hover tooltips via `d3.axisBottom`, `d3.axisLeft`, and `.on('mouseover')`. The chart is drawn in SVG within a styled HTML container.

ICE 5

This example presents a plain HTML table and summary statistics for a vehicles dataset loaded from a remote CSV file. The page displays the approximate size of the data in kilobytes, the number of rows, and the number of columns, followed by the full dataset in a styled table. It uses D3.js v7’s `d3.csv` to fetch and parse the data, then builds the table and summary text with string templates and D3’s selection API. The styling relies on standard CSS for the container, table, and hover states.