Sai Shishir Koppula

@shishirreddyyk·15 public vizzes

Shish's Ice 8- Network Graph

This visualization shows the friendship network of six Stranger Things characters, with green nodes for main characters and a red node for the villain Vecna. A force-directed graph built with d3.forceSimulation, d3.forceLink, and d3.forceManyBody positions the nodes, while SVG circles and text labels render the data. The graph supports interactive dragging through d3.drag, and a color scale maps team membership to node fills.

Nov 10, 2025

Loading thumbnail…

Shish's Ice 8- Marvel Family Tree

This visualization presents a four-generation family tree for the Stark family, with nodes colored by generation depth from blue to red. The graphic uses a vertical, top-down layout to show the hierarchical relationships between Eddard Stark and his descendants. Built with D3 v7, the code leverages the `d3.tree()` layout algorithm applied to hierarchical data via `d3.hierarchy()`, and renders edges using `d3.linkVertical()`. The SVG output uses circles for nodes and text labels for names, drawn through the `join()` operator.

Nov 10, 2025

Loading thumbnail…

Shish's Ice 8- Making Maps

This interactive world map visualizes synthetic 2025 population and GDP per capita data for major countries using a Natural Earth projection. Users click toggle buttons to switch between two sequential color scales, with D3 transitions animating the country fill colors over 900 milliseconds. The visualization loads TopoJSON world-atlas data via d3.json, renders paths with d3.geoPath, and displays graticules, a legend, and hover tooltips through D3 event handlers. Countries without data appear gray, while the legend gradient updates only for the population metric.

Nov 10, 2025

Loading thumbnail…

Shish's Ice 8- Map

This choropleth maps sample population figures by country, joining an inline CSV to a world atlas via matching country names. The visualization uses D3 v7’s `geoNaturalEarth1` projection, `geoPath`, and `scaleSequential` with an YlGnBu interpolator, rendering graticules and country polygons as SVG paths. Tooltips appear on hover, and a TopoJSON (countries-110m.json) data source supplies the geometry.

Nov 10, 2025

Loading thumbnail…

Fork of shish's ice7- areachart

This area chart displays the top 10 countries by their share of the world population in 2025, using a smooth monotone curve and orange point markers. The visualization loads data from a CSV file via `d3.csv`, sorts it by the `World_Share` column, and renders an SVG area chart with `d3.area` and `d3.scalePoint` for the categorical country axis. Axis labels and rotated country names are added using `d3.axisBottom` and `d3.axisLeft`, with light blue fill and steel blue stroke styling.

Oct 28, 2025

Loading thumbnail…

shish's ice7- linechart

A line chart displays the top 10 countries by world population share for 2025, with each country plotted along the x-axis and its percentage of the global population on the y-axis. The chart highlights the dominant positions of India and China, which together account for roughly 35% of the world's population. Built with D3 v7, the visualization loads CSV data, sorts entries by World_Share, and renders an SVG path using d3.line, with orange circles marking each data point and rotated axis labels for readability.

Oct 28, 2025

Loading thumbnail…

shish's ice7-piechart

This pie chart displays the top 10 countries by world population share in 2025, with each slice labeled by country name and accompanied by a color-coded legend. Built with d3.v7 and rendered as SVG, it loads data from a CSV file, sorts by the World_Share column, and uses `d3.pie()` to generate the arcs. Slice colors come from `d3.scaleOrdinal()` with the `d3.schemeCategory10` palette, while `d3.arc()` defines the pie geometry. The visualization includes stroke outlines and text labels positioned at arc centroids, with a legend appended to the right of the chart.

Oct 28, 2025

Loading thumbnail…

shish's ice7-reusable scatter plot

This scatter plot visualizes projected 2025 world population data, showing each country’s total population against its urban population percentage, with circle size encoding each nation’s share of the global population. Built with D3 v7, it renders as an SVG with linear scales for both axes and a square-root scale for radius. Interactive tooltips appear on mouseover, displaying the country name, population, urban percentage, and world share. The chart loads data from a CSV file and uses D3’s `d3.csv`, `d3.scaleLinear`, and `d3.scaleSqrt` APIs.

Oct 28, 2025

Loading thumbnail…

Shish's ICE7- Reusable scatter plot

This scatter plot visualizes world population data for 2025, comparing each country’s population against its median age. Using D3.js v7, the code loads a CSV file, parses numeric values, and renders circles scaled with `d3.scaleLinear` for both axes. The SVG visualization includes axis labels, hover effects that change circle color, and tooltips via appended `title` elements. Data comes from a GitHub-hosted CSV source, and rendering uses standard D3 SVG primitives with margins and transitions.

Oct 28, 2025

Loading thumbnail…

shish's multiseries line and combined chart

This example presents two linked visualizations of a sleep health dataset: a multi-series line chart and a combined chart. The line chart plots Age against Sleep Duration, Stress Level, and Daily Steps using d3.line with d3.scaleLinear axes, while colored dots and tooltips show exact values. The combined chart reuses the same scales and color encoding to display the data differently. The code loads data via d3.csv, applies SVG rendering, and includes interactive mouseover events with tooltip transitions.

Oct 20, 2025

Loading thumbnail…

shish's scatterplot- ice6

This scatterplot visualizes the relationship between sleep duration and stress level, with each point representing a participant. The x-axis shows sleep duration in hours, while the y-axis tracks stress levels. Semi-transparent steelblue circles, each with a radius of five pixels, reveal the distribution and density of data points. Built with D3 v7, the visualization uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The data comes from a sleep health dataset loaded via `d3.csv`, and the chart is rendered as SVG within a styled HTML page.

Oct 20, 2025

Loading thumbnail…

Shish's barchart- ice6

This bar chart shows the average sleep duration for various occupations, with each bar colored distinctly using D3’s `schemeTableau10`. The data is read from a CSV file via `d3.csv`, grouped by occupation with `d3.group`, and aggregated with `d3.mean`. The visualization is built using D3 v7’s SVG rendering, with a band scale (`d3.scaleBand`) for categories and a linear scale for the y-axis. Axis labels are rotated for readability, and the chart is rendered inside a styled HTML container.

Oct 20, 2025

Loading thumbnail…

Shish's Barchart- ICE6

This bar chart displays the top 10 most populous countries in 2025, using a horizontal axis for country names and a vertical axis for population counts. The bars are colored by continent using a Tableau10 color scheme. Built with D3 v7, the visualization loads CSV data, sorts it, and slices the top ten entries. It renders as an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Oct 20, 2025

Loading thumbnail…

Shish's Scatterplot- ICE6

This scatter plot shows the relationship between battery capacity (mAh) and price ($) for smartphone models from a 2024 dataset. Each point represents a smartphone model, and hovering reveals details. The visualization uses d3.csv to load data, d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and SVG rendering with D3 v7. A custom tooltip displays information on hover, and the axes are labeled as required.

Oct 20, 2025

Loading thumbnail…

Smartphone Specs Visualization

This example displays a table of 2024 smartphone specifications, including brand, model, battery capacity, and price for ten devices. The page uses D3.js version 7 to bind the hard-coded dataset to an HTML table, dynamically creating the header row and cells via `d3.select`, `selectAll`, `data`, and `enter` chains. A clean, styled layout with alternating row colors and a blue header bar is generated entirely through D3’s data-join methods.

Oct 6, 2025