kmohithkumar7@gmail.com

@kilarimohith·14 public vizzes

ice8_task2

A dark-themed visualization gallery presents two interactive D3 v7 diagrams: a hierarchical tree of programming languages and a force-directed network of authors and papers. The tree uses `d3.hierarchy` and `d3.tree` to arrange nodes by depth, with shapes varying by level and colors by layer, while hover highlights links. The network uses `d3.forceSimulation` with link, charge, and center forces, representing authors as circles and papers as squares, with drag repositioning and tooltips. Both render as SVG with original data.

Nov 3, 2025

Loading thumbnail…

ice8

A world choropleth colors countries by adult literacy rate from a local CSV, joined to country names in the world-atlas TopoJSON topology. The map uses D3's `d3.geoNaturalEarth1` projection with `d3.geoPath` for rendering, and a tooltip appears on hover. Interactive zoom and reset controls use `d3.zoom` with event transforms. Countries are stroked in dark blue and highlighted on hover, with a clickable legend and fit-to-screen button.

Nov 3, 2025

Loading thumbnail…

ice8_task1

This interactive map shows world countries on an orthographic globe projection, where users can drag to rotate the sphere and click on a country to switch between the orthographic, Mercator, and Albers USA projections. The visualization uses D3's geo-projection modules—`d3.geoOrthographic`, `d3.geoMercator`, and `d3.geoAlbersUsa`—along with `d3.geoPath` to render country boundaries, graticules, and a sphere outline. Country names and geometries come from the world-atlas TopoJSON and TSV datasets. Zoom and pan are implemented via custom drag and zoom interactions, with smooth animated transitions on projection changes.

Nov 2, 2025

Loading thumbnail…

Fork of Fork of Fork of Blank Slate with Hot Reloading

This choropleth map visualizes the number of universities per U.S. state using a sequential orange color scale. The visualization loads US TopoJSON from us-atlas and a CSV dataset, joining state names to university counts. D3’s `geoAlbersUsa` projection and `d3.geoPath` render state boundaries, while a tooltip displays exact values on hover. Missing data states appear gray.

Nov 2, 2025

Loading thumbnail…

ice7_task3

An area chart displays the average car price per year, drawn as a smooth steel-blue filled region with an overlaid line and dots for readability. It uses D3 v7 with SVG rendering, grouping a CSV dataset of cars by `Year` and computing the mean `Price` via `d3.rollups`. Scales (`d3.scaleLinear`), axes (`d3.axisBottom`, `d3.axisLeft`), and generators (`d3.area` with `d3.curveMonotoneX`) structure the visualization, with axes labeled for year and average price in USD.

Oct 26, 2025

Loading thumbnail…

ice7_task2_2

This line chart visualizes the average car price per year, using data from a CSV file loaded via `d3.csv`. The code groups the data by year using `d3.rollups` and computes the mean price, then renders a monotone-curved line via `d3.line` with `d3.curveMonotoneX`. Orange dots mark each year’s average, with hover tooltips. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the SVG chart includes labeled axes for year and average price in USD.

Oct 26, 2025

Loading thumbnail…

ice7_task2_1

This example shows the distribution of car brands in a dataset as a pie chart, with each slice labeled by brand name and its percentage of the total. The visualization loads data from a remote CSV file using `d3.csv` with `d3.autoType`, then aggregates counts per brand via `d3.rollups`. It computes slice geometry with `d3.pie` and renders the arcs using `d3.arc`, applying a categorical color scale with `d3.scaleOrdinal` and `d3.schemeTableau10`. A manual legend lists the brands, using SVG groups and rectangles.

Oct 26, 2025

Loading thumbnail…

ice7_task1

A reusable scatter plot displays car price versus miles per gallon, with each dot representing a vehicle and colored via a random Tableau10 palette entry. The chart is built as a configurable JavaScript function using D3 v7, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes and SVG circles for data points. Data loads from a remote CSV file via `d3.csv` with `d3.autoType`, and tooltips show car model and brand on hover. The visualization highlights the relationship between vehicle cost and fuel efficiency across the Cars dataset.

Oct 26, 2025

Loading thumbnail…

Multi-Series Chart by Mohith

This multi-series line chart displays Walmart's monthly Sales, Profit, and CustomerTraffic data from a CSV file, plotting each metric as a colored line over the months. The visualization uses hard-coded keys and colors to distinguish series, with all lines sharing a common linear y-scale. Built with D3 v7, the code loads the data via `d3.csv`, creates scales using `d3.scaleBand` and `d3.scaleLinear`, and renders the lines with `d3.line`. It also includes axes via `d3.axisBottom` and `d3.axisLeft`, plus a manual legend of colored rectangles and text labels.

Oct 20, 2025

Loading thumbnail…

Scatter Plot by Mohith

This scatter plot displays the relationship between a car's fuel efficiency (MPG) and its price, with each point colored by brand according to a Tableau10 ordinal scale. The visualization uses D3.js v7's `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for ticks, while gridlines are generated via a custom `tickSize` call. Data from the CSV file is loaded using `d3.csv` with `d3.autoType`, and interactive tooltips are added through SVG `circle` elements with appended `title` text. A legend and title are drawn directly onto the SVG.

Oct 20, 2025

Loading thumbnail…

Bar Graph by Mohith

This example visualizes programming languages by their year of creation, with bars colored to distinguish high-level from low-level languages and a legend annotating the categories. The chart uses D3 v7 APIs including `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to map data, while `d3.axisBottom` and `d3.axisLeft` render axes with dashed gridlines. Data is loaded from a CSV file via `d3.csv` with `d3.autoType`, and the SVG includes a centered title, rotated x-axis labels, and an author attribution.

Oct 20, 2025

Loading thumbnail…

pl_dataset

This visualization compares sepal dimensions across iris species using a scatter plot rendered with D3.js v7 and SVG. The chart maps sepal length to the x-axis, sepal width to the y-axis, and color-codes points by species using a BBC-inspired purple palette. An interactive legend with hover fading highlights specific species, while the chart title, subtitle, and source reference Fisher’s Iris dataset. The data loads via `d3.csv` from a remote gist, with axes and labels generated using `d3.axisBottom` and `d3.axisLeft`.

Oct 5, 2025

Loading thumbnail…

pl_dataset

This visualization plots programming language data as a scatter plot, with points colored by species type and a legend that dims non-hovered groups. It uses d3.csv to load the dataset, then renders axes, labels, and circles with d3.scaleLinear and d3.scaleOrdinal scales. The chart includes hover interactivity via mouseenter events on legend items, and SVG output is generated through d3's select and join pattern with a ResizeObserver for responsive sizing.

Oct 5, 2025

Loading thumbnail…

pl_dataset

This visualization compares sepal length and width across Iris species using a scatter plot, with each species differentiated by color and an interactive legend that highlights points on hover. It renders vector graphics via a configurable pipeline, utilizing d3’s `csv`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` functions. The data comes from Fisher’s Iris dataset, loaded dynamically from a gist URL. Styling follows a BBC color theme, with points, axes, and labels configured through a separate theme object.

Oct 5, 2025