Skip to main content
Log in
P

panyamsantosh09@gmail.com

@santoshkumar09·12 public vizzes

Loading thumbnail…

Fork of Network

This network visualization shows flight routes between major cities, with node shape distinguishing hubs as diamonds versus cities as circles and link width encoding weekly flight frequency. Node colors group cities by geographic region, and labels remain visible on every node. Built with D3.js v7, it uses d3.forceSimulation with forceLink, forceManyBody, forceCenter, and forceCollide to position the network dynamically. Users can drag nodes to reposition them. The SVG rendering includes a legend, and nodes display tooltips showing city name and type via SVG title elements. Data is custom-defined in the script.

Nov 3, 2025
Loading thumbnail…

Fork of Tree

This interactive visualization displays a collapsible tree of programming languages organized across four layers: root, paradigm, family, and language. Using D3 v7’s `d3.hierarchy` and `d3.tree` layouts, nodes render as distinct SVG symbols (star, triangle, square, circle) with colors varying by depth. Clicking nodes collapses or expands branches, with `transition` animations smoothly redrawing link paths and node positions. The initial view collapses nodes at depth ≥2, showing only paradigms and families until expanded.

Nov 3, 2025
Loading thumbnail…

ICE-8 map mapping

A world map uses a natural Earth projection to visualize population data by country, with a sequential grey color scale mapping each nation’s population value from a CSV file. Built with d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, the SVG renders countries as colored paths with tooltips showing names and counts, plus a gradient legend. The visualization highlights shared borders using topojson.mesh, and countries lacking data appear in a neutral gray.

Nov 3, 2025
Loading thumbnail…

ICE-7 area chart

This area chart shows the relationship between sugar content and average consumer ratings for breakfast cereals. A light blue fill and a blue line trace the mean rating across sugar levels, with data points marked by circles. Built with D3 v7, the visualization loads a CSV file, groups cereals by sugar content, and computes the average rating for each group. The code uses D3 utilities like `d3.csv`, `d3.autoType`, `d3.rollups`, and `d3.mean` to process the data, then renders the chart with `d3.area`, `d3.line`, and `d3.axisBottom`/`axisLeft` generators.

Oct 27, 2025
Loading thumbnail…

ICE-7 line chart

This line chart shows the relationship between sugar content and average customer rating for breakfast cereals, aggregating the raw cereal dataset by computing the mean rating for each sugar level. The visualization uses D3 v7’s `d3.csv` with `d3.autoType` to load and parse the data, then groups it with `d3.rollups` and `d3.mean` before applying `d3.scaleLinear` scales and a monotone cubic curve via `d3.curveMonotoneX`. The SVG output includes axis labels, a blue path with `d3.line`, and small circles with tooltips showing exact values.

Oct 27, 2025
Loading thumbnail…

ICE-7 Pie chart

This pie chart displays the total sugar content per cereal manufacturer from a remote CSV file. Each slice is labeled with the manufacturer’s name and its percentage of the overall total, while a legend on the right lists each manufacturer with its aggregated sugar sum. The visualization is built with D3 version 7, using `d3.csv` and `d3.autoType` to load and parse the data, `d3.rollups` to group and sum sugar values by manufacturer, and `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme to generate the chart. The SVG output includes slice paths with hover tooltips and positioned labels.

Oct 27, 2025
Loading thumbnail…

ICE-7 scatter plot

This scatter plot visualizes the relationship between sugars and calories for various cereals, with each dot colored by manufacturer and sized by protein content. Built with D3 v7, it uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for dot radius, and `d3.scaleOrdinal` with `d3.schemeTableau10` for categorical colors. A legend identifies manufacturers, and hover tooltips display cereal details. The chart is rendered as SVG in a reusable chart factory, with data loaded from a remote CSV file via `d3.select` and the `join` operator to create circle elements.

Oct 27, 2025
Loading thumbnail…

Fork of HTML Starter

This visualization demonstrates how marks and channels encode cereal data across three small multiples. It uses a scatterplot of sugars versus calories with manufacturer color, cereal type shape, and protein size, an area chart of average rating by sugar content, and bars of average sodium per shelf. The code loads cereal.csv with `d3.csv` and `d3.autoType`, then renders SVG charts using D3 v7 scales, axes, and shape generators.

Oct 27, 2025
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive bar chart displays letter counts loaded from a CSV file, with bars that respond to clicks by highlighting the selected letter and dimming others. Built with React and D3 v7, the visualization uses `scaleBand` and `scaleLinear` for positioning, while a `ResizeObserver` in `useDimensions` tracks container size changes. The chart renders as SVG with labeled axes, gridlines, and a title, all styled through CSS transitions that animate bar fill and opacity changes on selection.

Oct 20, 2025
Loading thumbnail…

Fork of HTML Starter

This visualization presents three coordinated views of a cereal dataset featuring 77 products. A bar chart displays average calories by manufacturer, a scatter plot examines the relationship between sugar content and consumer ratings with points colored by cereal type, and a multi-series chart combines average calories as bars with average rating as a line. The SVG charts are rendered using D3 v7, with axes, grids, and tooltips implemented through D3's SVG and event handling APIs. The code styles bars, lines, and dots using CSS custom properties.

Oct 20, 2025
Loading thumbnail…

Fork of HTML Starter

This interactive dashboard presents three linked D3.js v7 visualizations built from the classic cereal dataset of 77 products. It shows a bar chart of average calories by manufacturer, a scatter plot of sugar content versus consumer rating with hot/cold cereal color encoding, and a multi-series chart combining average calories as bars with average rating as a line across manufacturers. The code uses D3's `rollup`, `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs for data aggregation and chart construction, rendered as responsive SVGs with a dark theme, gridlines, tooltips, and a legend.

Oct 20, 2025
Loading thumbnail…

Fork of HTML Starter

This example loads a cereal dataset from a GitHub gist and displays a data summary with column details, unique counts, and sample values, plus a preview table of the first five rows. It also renders a quick SVG mini bar chart showing the number of non-empty cells per row. The page uses d3.csv to fetch and parse the data, then manipulates the DOM directly to build the summary, table, and SVG visual without additional frameworks.

Oct 6, 2025