shanmukhadatta4040@gmail.com

ice _test

ICE-8_Social_network_graph

ice _test

ice-8_TreeStructure

This visualization displays the hierarchical structure of a Netflix catalog, using a tree diagram to show how titles are organized by genre (such as Dramas and Comedies) and then by format (Movie or TV Show) before listing individual titles like *Sankofa* and *The Starling*. The data, provided as a flat array of child-parent pairs, is transformed into a nested tree structure using JavaScript. The visualization is built with D3 v5, utilizing `d3.tree()`, `d3.hierarchy()`, and the library’s SVG rendering capabilities to draw curved links and color-coded nodes (yellow for genres, blue for types, green for titles).

ICE-7_shanmukha_BarGraph

This bar chart displays the budget allocation percentages across different categories, with each segment colored and accompanied by a legend for identification. The visualization is built using D3.js v5, employing the pie and arc generators to create the pie chart, scaleOrdinal with schemeCategory10 for color mapping, and SVG elements for rendering. The legend includes truncated category names and percentage values, with mouseover interactions logging the category to the console. Data is loaded from a CSV file, and the chart is titled "Budget Allocation Chart."

ICE-7_Shanmukha

This example presents a reusable D3.js scatter plot that visualizes the classic Iris dataset through a dynamic slideshow-like animation. The visualization cycles between two subsets of the data every five seconds, displaying Age on the x-axis, Fare on the y-axis, and using color to encode the Sex attribute. Built with the reusable chart pattern, the code defines a configurable `scatterPlot` function supporting custom margins, radius, and accessor functions, and uses SVG rendering with smooth transitions. The plot alternates between two halves of the dataset, offering an animated comparison of the same variables across different data slices. Axes are labeled, and a categorical color scale distinguishes the two sexes, making the chart clear and engaging.

ICE-7_Shnanmukha_LineChart

This line chart shows the total US crime rate from 1960 to 2014, with the year on the x-axis and the total crime rate on the y-axis. It uses d3.scaleTime and d3.scaleLinear for the axes, d3.line with curveBasis for the smoothed line, and d3.axisLeft and d3.axisBottom for the ticks. Data is loaded via d3.csv from a remote CSV file and rendered as an SVG with a steelblue path.

ICE-7_Shanmukha_Area_Chart

This area chart displays the total crime rate in the United States from 1960 to 2014. The visualization uses a smoothed line to show the trend over time, with the area beneath the curve filled in steel blue. The chart is rendered as an SVG using D3.js v6, employing the `area`, `curveBasis`, `scaleTime`, and `scaleLinear` APIs. The data is loaded from a CSV file hosted on GitHub, with the year parsed as a date object for the time-based x-axis.

ICE-7_shanmukha_reusablescatterplot

This example presents a reusable scatter plot that visualizes the Telco Customer Churn dataset, toggling between two views every five seconds. It plots tenure against monthly charges in one view and against total charges in the other, using D3.js v6 with SVG and animation. The code defines a reusable `scatterPlot` function with configurable accessors for data, dimensions, and margins, then uses `setInterval` to swap between the two plot instances.

ICE-6_Shanmukha

This scatter plot visualizes patient data, showing the relationship between length of hospital stay and treatment cost. The D3.js v6 code loads CSV data from a remote URL, parses numeric fields, and renders circles positioned by linear scales for the x and y axes. The visualization includes labeled axes with custom formatting, using d3.axisLeft and d3.axisBottom for the treatment cost and length of stay scales. The SVG rendering approach positions each data point as a steelblue circle, with margins and dimensions optimized for display in a frame.

ICE-6_Shanmukha

This bar chart shows the distribution of employees across departments, with each bar representing a department's headcount. The visualization loads CSV data from a remote URL and processes it using D3's `csv` and `scaleBand`/`scaleLinear` to map department names to bar positions and employee counts to bar heights. React manages the component state and rendering lifecycle, while D3 handles the SVG coordinate system, axes, and tick formatting. The chart includes labeled x-axis categories, a y-axis with gridlines, and uses a fixed width/height with margins for clean spacing.

ICE 5_shanmukha

This example displays a celebratory confetti animation on a canvas element, triggered after a CSV dataset is loaded and summarized. The visualization first fetches the external CSV file using D3 v7, calculates the data size in kilobytes, and reports the row and column counts as text in the page. It then uses the JSConfetti library to fire a burst of confetti on the canvas. The page also includes a static image and a link to the raw dataset, while the code explicitly relies on `d3.csv` for data parsing and the `js-confetti` browser API for the animation effect.

ICE-5_Shanmukha

This visualization shows the geographic layout of the ICE-5G glacial isostatic adjustment model, rendering a map of ice sheet thickness and surface deformation. It uses D3’s `d3.geoPath` to draw the land and ice contours, while a color scale encodes elevation and ice thickness data. The code also employs `d3.forceSimulation` for label placement, positioning text annotations without overlap, and accesses raster data via Canvas `getImageData` to sample color values. The rendering approach combines vector shapes with canvas-based pixel manipulation for a detailed, interactive representation of the model’s output.

CAT D3.js!

This example uses D3.js to draw a cheerful cat face in an SVG canvas, centered via a translated group. The cat features a gray circular head, triangular ears with pink inner shapes, white eyes with black pupils, a pink nose, a curved smiling mouth, and curved whiskers. All elements are constructed using basic D3 DOM manipulation methods like `append` and `attr`, demonstrating how to build and style SVG shapes from scratch.

Nature Scene

A nature-themed SVG scene built with React and rendered directly to the browser window. The visualization shows a static landscape with a blue sky, yellow sun, green land, and a tree, alongside animals including two butterflies, a dog, and a cat, all composed from basic geometric primitives like circles, rectangles, and paths. The scene uses React components to declare the SVG elements, with JSX syntax processed by Babel, and positions objects dynamically based on window dimensions. The code relies on React's component model and SVG's coordinate system to create the illustration.

nature scene - D3.js

This example shows an animated SVG landscape featuring a bird, dog, and tree, with a sky that transitions through a full day-night cycle. It uses raw SVG elements created via the DOM API, including gradients for the sun and sky, and CSS animations to move celestial bodies. The scene is built entirely with JavaScript helper functions and SVG paths, with no external data sources or D3.js-specific functions.