shyamraghav12@gmail.com

@shyam-raghav·10 public vizzes

ICE8_Network_Friends

This example visualizes a small friendship network where six nodes represent people and links represent their connections. The D3.js force simulation, using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, positions nodes dynamically. The SVG rendering shows circles for nodes and lines for links, with labels placed above each circle. The static hardcoded data (three-letter names like Alice and Bob) is drawn in an 800×500 viewBox, with positions updated on each simulation tick.

Apr 13, 2026

Loading thumbnail…

ICE8_Tree_Programming_Languages

This visualization displays the programming language ecosystem as a three-level tree, with a root node branching into Web, Systems, and Data Science categories, and then into specific languages and technologies. Categories are color-coded by depth: orange for the root, green for the middle tier, and blue for leaves, with all labels rendered directly on circular nodes. The code uses D3's `d3.stratify()` to build the hierarchy from a parent-child dataset, then applies a `d3.tree()` layout with a vertical link generator (`d3.linkVertical()`) to position nodes. SVG circles and text elements are appended via D3's `selectAll().join()` pattern, with each node's fill color determined by its `depth` value.

Apr 13, 2026

Loading thumbnail…

Fork of ICE8_US_States_Population

This example displays U.S. state population data as a choropleth map, with darker blue representing higher population. Ten states are mapped to population values, while all other states appear gray. The tooltip reveals the state name and population in millions upon mouseover. The map draws state boundaries as SVG paths using `d3.geoPath` with a `geoAlbersUsa` projection. Data is loaded from the `us-atlas` TopoJSON file, transformed with topojson-client, and colored through a sequential blue scale from `d3.scaleSequential`. Boundary strokes are added using `topojson.mesh`.

Apr 13, 2026

Loading thumbnail…

ICE8_US_States_Population

This choropleth map displays U.S. state populations, with darker blue fills indicating higher population values and gray for states without data. It uses D3 v7 with `d3.geoAlbersUsa` projection, `d3.geoPath` for rendering, and `topojson.feature` to parse the us-atlas states-10m TopoJSON source. A `d3.scaleSequential` with `d3.interpolateBlues` maps population values to colors, while mouseover events update an HTML tooltip showing state names and population in millions.

Apr 13, 2026

Loading thumbnail…

Fork of Fork of assignment 7 PieChart

This dashboard displays four coordinated D3 v7 charts from a 200-row CSV dataset: a scatter plot of units sold versus profit colored by region, a pie chart of revenue distribution across regions, a line chart of monthly revenue trends, and an area chart of cumulative monthly revenue. Each visualization uses SVG rendering with scales, axes, and color encoding via `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.pie`, `d3.arc`, and `d3.rollups` for aggregation. The interactive layout includes grid lines and legends within styled chart sections.

Mar 30, 2026

Loading thumbnail…

Fork of assignment 7 ScatterPlot

This D3.js v7 example presents a reusable scatter plot that visualizes the relationship between units sold and profit, with points colored by region. Each circle represents a data record from a 200-row CSV dataset. The visualization implements a configurable chart function with setters for data, dimensions, and axis mappings. It uses SVG rendering, d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeTableau10 for categorical colors, and d3.csv for data loading, alongside axis generators and grid lines.

Mar 30, 2026

Loading thumbnail…

ice7

This example shows a scatter plot of revenue versus profit from a CSV dataset of 200 rows. The plot is built with a reusable D3 module called `scatterPlot`, which uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map and render the axes. Circles are appended with `d3.selectAll` and `join`, using a fixed radius and a steelblue fill. The data is loaded asynchronously with `d3.csv` and parsed to remove currency symbols, while the SVG fills the entire browser window.

Mar 30, 2026

Loading thumbnail…

Ice7

This example presents a reusable scatter plot that visualizes the relationship between petal width and sepal length from a dataset loaded via `d3.csv`. The SVG visualization, rendered through a custom `scatterPlot` module, uses `scaleLinear` for axis scaling and `axisLeft`/`axisBottom` for tick marks. Data points are drawn as circles with configurable radius, and the plot adapts to the full browser window dimensions. The code leverages D3's `select` and `join` operations for efficient element creation.

Mar 30, 2026

Loading thumbnail…

assignment 6

This dashboard presents four coordinated D3.js charts—a bar chart, scatter plot, multi-series line chart, and combined bar-line chart—to explore a synthetic 200-row retail dataset containing revenue, cost, profit, and units sold by category and month. The SVG-based visualizations, styled with CSS and built using D3 v7 APIs like `d3.rollup` and `d3.scaleBand`, show aggregate revenue by category, record-level units versus profit, monthly trends for three quantitative variables, and a dual-axis comparison of revenue (bars) with profit (line), complete with interactive tooltips.

Mar 9, 2026

Loading thumbnail…

spotifytracksdataset

This visualization displays the distribution of tracks across artists in a Spotify Tracks Dataset, highlighting the top 10 artists by track count. It also provides summary statistics for the total number of rows, columns, and unique artists in the dataset. The bar chart is rendered using SVG, with bars colored in a consistent blue hue. The code leverages d3.csv to load the data, d3.rollups to aggregate track counts, and d3.scaleBand and d3.scaleLinear for axes, with axis labels rotated for readability.

Mar 2, 2026