S

Subhash

@subhash-alapati·17 public vizzes

Loading thumbnail…

Fork of ICE-8_Q3_SUBHASH

This network visualization maps relationships between movie characters, with each character represented as a node and connections as links. Node color and shape encode role: blue stars for heroes, red triangles for villains, green circles for sidekicks, and orange squares for mentors. The animation relies on d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute layout, while d3.symbol applies the shape types. Labels are positioned manually, and the d3.drag interaction lets users reposition nodes. The dataset is hardcoded in the script, with force simulation ticks updating SVG line and path positions.

Loading thumbnail…

ICE-8_Q3_SUBHASH

This network visualizes relationships between six movie characters, using color and shape to encode each character’s role (Hero, Villain, Sidekick, Mentor). The layout is computed by D3’s `forceSimulation`, combining `forceLink` for edges, `forceManyBody` for repulsion, and `forceCenter` for anchoring. Nodes are rendered as SVG paths with distinct D3 symbols (`symbolStar`, `symbolTriangle`, `symbolCircle`, `symbolSquare`), and lines represent character connections. The simulation updates node and link positions dynamically, and supports interactive dragging.

Loading thumbnail…

ICE-8_Q2_SUBHASH

A vertical D3.js tree presents a four-level classification of plants, from a root node through major groups (Angiosperms, Gymnosperms, Ferns, Mosses) to families and genera. Node color encodes the plant group, while shape distinguishes hierarchy: circles for root, diamonds for groups, squares for families, and triangles for examples. Hovering reveals tooltips bound to the DOM event. The SVG renders data from flat rows using `d3.stratify`, with a legend and self-tests included in the static layout.

Loading thumbnail…

ICE-8_Q1_SUBHASH

This visualization pairs a Natural Earth world basemap with a choropleth of U.S. agricultural exports from 2011. The world map uses `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON data from world-atlas@2 to render country boundaries and graticules. The U.S. map employs `d3.geoAlbersUsa` to show state-level export values, with an interactive tooltip for additional detail. Both maps are drawn as SVG elements using D3 v7.

Loading thumbnail…

subhash-areachart

This area chart visualizes YouTube channel analytics, plotting watch time in hours across weekly data points. The visualization combines a filled area path with a steelblue outline line to emphasize trends in the time-series data. Built with D3 v7, the reusable `areaChart` component uses `scaleLinear` for both axes, `d3Area` and `d3Line` for path generation, and `axisBottom`/`axisLeft` for tick rendering. Data is loaded from a CSV hosted on GitHub Gist and parsed with `csvParse`. The chart renders responsively to the full window size using SVG.

Loading thumbnail…

subhash-linechart

This line chart visualizes weekly YouTube channel analytics, specifically tracking watch time in hours across 52 weeks. The chart uses D3 v7 scaleLinear, line, axisBottom, and axisLeft APIs to render the time-series data. Raw CSV data is fetched from a GitHub gist, parsed, and normalized before being bound to a steelblue line path. The SVG output includes labeled axes for weeks and watch time, with the x-axis formatted to display week numbers.

Loading thumbnail…

subhash_PieChart-1

This interactive donut chart visualizes YouTube channel analytics, showing the distribution of a selected metric (Views, Likes, Comments, Watch Time, or Subscribers) across the top N weeks, with remaining weeks aggregated into an "Other" slice. Users adjust the metric and slice count via dropdown and number input controls. The visualization uses D3’s `pie`, `arc`, `scaleOrdinal` with `schemeTableau10`, and `csvParse` to load and process data from a GitHub-hosted CSV file, rendering slices, leader lines, labels, and a legend as SVG.

Loading thumbnail…

subahsh_PieChart

This pie chart visualizes YouTube channel analytics, categorizing weeks by watch time into low, medium, and high buckets based on data-driven quantiles. It uses D3.js version 6.7.0, loading CSV data and employing the reusable `pieChart()` function with configurable dimensions, inner radius for a donut style, and a legend. The chart displays labels and a legend title, rendering the distribution of weekly watch time hours through an SVG.

Loading thumbnail…

piechart-subhash

This example visualizes YouTube channel analytics as an animated, reusable pie chart that cycles through five metrics—Views, Likes, Comments, Watch Time, and Subscribers Gained—every two seconds. Built with D3 v6, it uses `d3.pie` and `d3.arc` to generate slices, `scaleOrdinal` with `schemeTableau10` for colors, and includes labeled leader lines plus a legend. The chart reads data from a CSV gist, parsing numeric fields, and renders as SVG with a `setInterval` driving the metric rotation.

Loading thumbnail…

PIECHART-SUBHASH

This D3.js donut chart example, PIECHART-SUBHASH, displays device share percentages (e.g., mobile, desktop, tablet) as colored slices with rounded corners and padding. It shows percentage labels outside the donut, connected by leader lines, alongside a legend on the right. The code builds a reusable pie chart component using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with a Tableau10 palette, rendering to SVG via the D3 `.join()` pattern. The chart uses hardcoded demo data and supports configurable inner radius, corner radius, and label formatting.

Loading thumbnail…

Fork of PIECHART-SUBHASH

This fork of “PIECHART-SUBHASH” demonstrates a reusable D3 donut chart component built with the `d3` `pie` function for arc generation and `scaleOrdinal` with `schemeTableau10` for categorical colors. It renders five device-share categories (mobile, desktop, tablet, TV, other) as slices with corner radii, percentage labels, and leader lines, while a large right margin accommodates a legend titled “Device Share.” The SVG chart is configured via a fluent API with setter methods for margins, inner radius, padding angle, and label formatting.

Loading thumbnail…

SCATTER PLO SUBHASH

A reusable scatter plot built with D3.js visualizes YouTube channel analytics, mapping metrics like views, likes, and watch time onto x and y axes. An animated loop rotates the x-axis dimension every two seconds, letting users explore correlations across five variables. The SVG renders circles positioned via `d3.scaleLinear` and `d3.extent`, with axes from `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV gist, normalized, and parsed with `d3.csvParse` and `d3.text`.

Loading thumbnail…

Fork of HTML Starter-ic6

This scatter plot visualizes YouTube channel analytics, mapping total views on the x-axis against watch time in hours on the y-axis. Each circle represents a week of data, with hover interactions revealing a tooltip containing additional metrics like likes, comments, and subscriber gains. The visualization uses d3.scaleLinear for axes and d3.axisBottom/axisLeft for tick marks, while circles animate into place via d3.transition. Data is loaded from a remote CSV file using d3.csv, and the SVG rendering incorporates a dark theme with responsive sizing.

Loading thumbnail…

ICE5_SUBHASH

This example visualizes YouTube channel analytics across weekly data, combining bar charts for total views with an overlaid line graph for watch time in hours, using dual y-axes to compare the metrics. The SVG chart is rendered with D3 v7, and bars animate their height upward via a transition, while the line draws itself using stroke-dasharray and the curveMonotoneX interpolator. Tooltips provide detailed per-week values, and the dataset is loaded from a remote CSV file.

Loading thumbnail…

Fork of ICE5_SUBHASH

This scatter plot visualizes YouTube channel analytics, showing the relationship between total views and watch time in hours across multiple weeks. Built with D3.js v7, it converts CSV data into a clean SVG chart with animated bubbles that grow into place. Hover interactions reveal a detailed tooltip containing weekly metrics like likes and subscriber gains. The visualization uses D3's scale functions for axis mapping, autoType for parsing, and transition methods to animate the dots.

Loading thumbnail…

Fork of BARCHART-SUBHASH

This animated bar chart displays YouTube Channel Analytics, tracking weekly views alongside likes, comments, watch time, and subscriber gains. Built with D3 v7, it fetches CSV data from a GitHub Gist and renders an SVG with red rounded bars that grow from the baseline. The chart uses `d3.scaleBand` and `d3.scaleLinear` for axes, `transition` to animate bar heights, and a custom tooltip on mouse events, all styled with hover effects on a dark theme.

Loading thumbnail…

BARCHART-SUBHASH

This example displays a minimal static web page containing the text “Hello HTML!” centered on a white background at a very large font size. The rendering relies on a simple HTML structure with an external stylesheet, while a separate JavaScript file only logs “hello world” to the console and does not influence the visual output. The code uses standard CSS properties for typography and layout, with no charting libraries or data processing involved. The presentation is purely typographic and non-interactive.