U

uguggila@gitam.in

@umeshchandra2·16 public vizzes

Loading thumbnail…

ICE 8 TASK 3 NETWORK GRAPH

This network graph visualizes airline flight connections between seven global cities, with nodes colored by regional group and links showing direct routes. Built with D3 v7, it uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes via a physics-based layout. The SVG rendering dynamically updates node positions and link coordinates on each simulation tick, while `d3.drag()` enables interactive node repositioning. City labels follow each node’s current position, and the force-directed algorithm automatically spaces connected airports.

Loading thumbnail…

ICE 8 TASK 2.1 TREE

This visualization shows the hierarchical structure of a university, breaking down three colleges into nine departments and twenty-seven courses. It uses a vertical tree layout rendered as SVG through D3.js v7's `d3.tree()` and `d3.linkVertical()` APIs. Nodes are color-coded by depth, transitioning from red root to blue colleges, green departments, and yellow leaf courses. The static dataset is defined as a JavaScript object, with labels positioned above parent nodes and below leaves to improve readability.

Loading thumbnail…

ICE 8 TASK 1.1

This visualization shows a static world map using a Natural Earth projection, with country boundaries drawn as light gray SVG paths against a blue ocean sphere. It uses D3 v7 and topojson-client to load and convert the world-atlas TopoJSON dataset at 110m resolution. The map renders each country via `d3.geoPath` and adds a tooltip title showing the country name from the TopoJSON properties.

Loading thumbnail…

ICE 8 TASK 1.1

This choropleth map uses a Natural Earth projection to visualize population data for 20 countries, with darker blue shades representing higher values. The visualization loads world geometries from the world-atlas TopoJSON dataset via `d3.json` and merges CSV population data using a lookup dictionary. Countries are rendered as SVG paths using `d3.geoPath`, with missing data shown in light gray. A sequential blue color scale (`d3.scaleSequential`) and gradient legend communicate the population range, while a tooltip displays exact values on hover.

Loading thumbnail…

ICE 8 TASK 1

This choropleth map visualizes the top five largest countries by area, shading Russia, Canada, China, the USA, and Brazil in varying intensities of green against a light blue globe background. The color scale is drawn from a sequential Greens interpolator, mapping area values from 8 to 17 million square kilometers, while all other nations remain gray. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render the sphere and country outlines from the world-atlas TopoJSON dataset, with a legend showing the area-to-color gradient.

Loading thumbnail…

ICE 7 AREA chart by umesh

This area chart visualizes the relationship between solar radiation and elevation for global mountain climate data. The chart uses a blue filled area with a monotone curve to connect data points, which are also marked by individual dots that display tooltips with mountain names and values. Built with D3 v7, the visualization loads CSV data from a Gist URL, uses linear scales for both axes, and includes gridlines, axis labels, and a title. The code leverages D3's `scaleLinear`, `axisBottom`, `axisLeft`, `extent`, and `area` APIs to render the SVG output.

Loading thumbnail…

ice 7 line chart by umesh

This line chart visualizes solar radiation against elevation for global mountain climate data. The blue line and circular markers show the relationship between two continuous variables, sorted by elevation to create a smooth monotone curve using `d3.curveMonotoneX`. The chart uses D3 v7 with `d3.csv` loading, `d3.scaleLinear` for both axes, and `d3.axisBottom`/`d3.axisLeft` for labeled axes with gridlines. Hover tooltips appear through SVG `<title>` elements, displaying each mountain's name, elevation, and radiation value. The data comes from a remote CSV file containing Global Mountain Climate measurements.

Loading thumbnail…

ice 7 piechart by umesh

This pie chart visualizes the distribution of YouTube subscriber counts by country, aggregating data from a CSV file of top creators. The chart uses D3.js v7 with SVG rendering, employing `d3.pie()` and `d3.arc()` to generate slices, `d3.rollup()` and `d3.sum()` for data aggregation, and a `d3.scaleOrdinal()` with `d3.schemeCategory10` for color encoding. Each slice displays the country name and subscriber total, with a legend positioned to the right.

Loading thumbnail…

ice 7 reusable scatter plot

This reusable scatter plot shows the relationship between elevation and average temperature for mountain peaks, with points colored by continent and hover tooltips revealing additional rainfall data. Built with D3 v7, the visualization uses a custom `scatterPlot()` function with getter/setter methods that allow the chart's width, height, and other properties to be configured externally. Axes, gridlines, and a color legend are generated using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal`, while circles are positioned with `d3.scaleLinear` scales. The SVG rendering includes an interactive `<title>` element for each point showing mountain details.

Loading thumbnail…

reusable scatter plot ice 7

This reusable scatter plot compares Horsepower against Top Speed for 150 car models, with color encoding distinguishing Economy, Luxury, and Sports brand categories. The visualization is built using D3 v7’s selection, scaleLinear, scaleOrdinal, and axis APIs, rendering SVG circles with tooltips and gridlines. Data is loaded as CSV from a GitHub gist and parsed with d3.csv. The chart is implemented as a configurable closure-based function, allowing callers to set accessors for x, y, color, and axis labels via method chaining.

Loading thumbnail…

reusable scatter plot by umesh

This reusable scatter plot visualizes the relationship between horsepower and top speed for 150 cars, with points colored by brand category (economy, luxury, or sports). Hovering over a point reveals a tooltip with the category and axis values. Built with D3 v7, the chart uses a custom `scatterPlot()` function that accepts configurable accessors for x, y, and color values, along with axis labels. The SVG output includes gridlines, ordinal color scaling, and data loaded from a CSV via `d3.csv`, demonstrating a modular visualization pattern.

Loading thumbnail…

ICE 6 BAR + LINE

This example shows a combined bar and line chart of average car sales versus fuel efficiency by year from 2015 to 2024. Blue bars represent average sales in thousands on the left axis, while an orange line with dots tracks average MPG on the right axis. The visualization uses d3.csv to load data, d3.rollups for yearly aggregation, and scales including d3.scaleBand and d3.scaleLinear. It renders via an SVG combo chart with d3.axisBottom, d3.axisLeft, and d3.axisRight, and draws the line with d3.line and curveMonotoneX, refreshing data from a GitHub gist.

Loading thumbnail…

ICE 6 SCATTERPLOT

This scatter plot visualizes the relationship between horsepower and acceleration for 150 cars, with each point colored by car type (compact, sports, or SUV). The visualization uses the D3.js library, specifically employing `d3.scaleLinear` for the x and y axes and `d3.scaleOrdinal` for categorical color mapping, rendering as an SVG with a legend. Data is loaded from an external CSV file containing car performance metrics. The plot clearly shows the trade-off between engine power and acceleration time, with sports cars generally exhibiting higher horsepower and faster acceleration.

Loading thumbnail…

ICE-6 BARCHART

This bar chart visualizes sales figures for 100 products, with each bar’s height mapped to the product’s sales units. The visualization uses D3 v7 to load a CSV file from a GitHub gist, then renders an SVG with steel-blue bars that turn orange on hover. A band scale positions categorical products along the x-axis, while a linear scale maps sales values to the y-axis. The chart includes axis labels, a rotated x-axis to accommodate product names, and a title, with horizontal grid lines for readability.

Loading thumbnail…

ICE 5 OTT PLATFORMS

This chart visualizes the top 10 OTT platforms by average daily viewing minutes, using a horizontal bar chart sorted in descending order. The code loads CSV data via `d3.csv` with `d3.autoType`, then applies `d3.scaleBand` and `d3.scaleLinear` to position bars and axes within an SVG container. The chart is rendered with D3 v7, featuring styled dark-mode CSS variables and rotated x-axis labels for readability.

Loading thumbnail…

ICE 5 OTT PLATFORMS VISUALIZATION

This visualization displays average daily viewing minutes for ten OTT platforms using a bar chart rendered as SVG with D3 v7. The chart sorts platforms by viewing time and includes summary statistics calculated with d3.sum, d3.mean, d3.max, and d3.min. Data loads from a CSV file hosted on GitHub Gist, which d3.csv parses using d3.autoType. The bar chart uses d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, with axes generated by d3.axisBottom and d3.axisLeft. Interactive elements include a link to the raw CSV dataset.