Balaji Dasari

@web-designer-developer·13 public vizzes

A_8_Part3

A force-directed author–paper network shows how five authors connect to three papers through shared authorship. The visualization uses d3.forceSimulation with link, charge, and center forces to position nodes, while SVG circles and lines render the graph. Node color distinguishes authors from papers, and stroke width encodes link weight. Hovering reveals tooltips, and d3.drag enables interactive repositioning of nodes.

Nov 2, 2025

Loading thumbnail…

A_8_part2

This visualization shows a hierarchical tree of programming languages, organized by paradigm and family, with each node’s color indicating its depth in the hierarchy. Built with D3 v6, it uses `d3.stratify` to convert CSV data into a hierarchy, `d3.tree` to compute the layout, and `d3.linkHorizontal` to draw curved links. Nodes are rendered as SVG circles with labels, positioned via the tree layout’s x and y coordinates, and colored using a `d3.scaleOrdinal` with a per-depth color range.

Nov 2, 2025

Loading thumbnail…

Fork of HTML Starter

This choropleth map visualizes world population data from a CSV file, displaying countries in a sequential blue color scale based on their population size. It renders an SVG with D3 v6, using `d3.geoNaturalEarth1` and `d3.geoPath` to draw country boundaries from TopoJSON world-atlas data. Interactive tooltips appear on mousemove, showing country names and population values, while a gradient legend indicates the color scale up to 1.5 billion people.

Nov 2, 2025

Loading thumbnail…

A_8_PartB

This choropleth map visualizes population counts for a selection of twenty countries, shaded according to each nation’s total inhabitants. Built with D3.js v6 and the topojson-client library, the SVG map renders geographic boundaries using d3.geoPath. Country values from the external CSV are joined to the topology, and a continuous color scale encodes population magnitude. Hovering over a country triggers a tooltip displaying the nation’s name and its precise population figure. The map uses a white background, subtle stroke outlines, and a clean, centered layout for straightforward comparison.

Nov 2, 2025

Loading thumbnail…

assignment_8

This interactive world map displays country boundaries and allows users to hover over each country to see its ISO numeric ID in a tooltip and click to zoom in on it. The visualization uses D3.js v7 with the `d3.geoNaturalEarth1` projection and `d3.geoPath` to render the map, loading TopoJSON data from the world-atlas CDN and converting it to GeoJSON features with the `topojson-client` library. A graticule grid is overlaid, and animated zoom transitions are handled with the `transition` method. The map supports a reset button to restore the initial zoom level.

Nov 2, 2025

Loading thumbnail…

ice7_task3

This dark-themed area chart visualizes the average monthly listeners of top Spotify artists grouped by their debut year. The chart uses a blue gradient-filled area with a lighter line overlay, and interactive data points display exact values via a tooltip on hover. Built with D3 v7, it loads CSV data, aggregates it with `d3.rollup` and `d3.mean`, and renders the visualization using SVG paths generated by `d3.area` and `d3.line`.

Oct 25, 2025

Loading thumbnail…

ice7task2_2

This interactive line chart visualizes the average monthly Spotify listeners of top artists grouped by their debut year, using data from a CSV file. The D3.js v7 visualization renders an SVG with a monotone X-curved line, axillary scales, and labeled axes on a dark-themed interface. Hovering over each plotted point reveals a tooltip with the specific year and average listener count. Smooth animation is not present, but the chart leverages D3's scaling, axis, and selection APIs for static exploration.

Oct 25, 2025

Loading thumbnail…

ice7_task2_1

A dark-themed pie chart shows the distribution of total monthly Spotify listeners across music genres, with each slice sized by summed listener counts from the SpotifyTopArtists.csv dataset. D3 v7 loads the CSV with `d3.csv`, aggregates genres using `d3.rollup` and `d3.sum`, and renders the chart with `d3.pie` and `d3.arc` generators. Slice labels display genre names and percentages via `tspan` elements, while a side legend built with D3 DOM joins shows each genre's total listeners in millions.

Oct 25, 2025

Loading thumbnail…

ice7_task1

A dark-themed scatter plot visualizes Spotify’s top artists, comparing monthly listeners against total streams, with bubble size encoding career length and color distinguishing musical genres. Built with D3 v7, the visualization uses d3.csv to load remote data, d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeTableau10 for genre colors, and d3.scaleSqrt for bubble radii. SVG rendering includes gridlines, axis labels, and a title. An HTML tooltip appears on hover, displaying artist details such as country and debut year, with data sourced from a public GitHub CSV.

Oct 25, 2025

Loading thumbnail…

Multi-series chart - ICE6

This example shows the top 20 sports clubs by revenue, combining purple bars for revenue (USD Millions) on a left y-axis with an orange line and points for championships won on a right y-axis. Club names run along the rotated bottom x-axis. The visualization uses React with D3 v5’s `scaleBand`, `scaleLinear`, `line`, and axis functions for SVG rendering. Data is loaded from a CSV via `csv`, filtered to remove missing values, and sorted by revenue before display.

Oct 20, 2025

Loading thumbnail…

Scatterplot - ICE6

This scatterplot shows the relationship between the annual revenue (in USD millions) and the number of championships won for top sports clubs. Each red circle represents a club, with a tooltip revealing the club name and exact values. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and loads its data from a remote CSV file. The SVG rendering is centered on the page with clear axis labels and a title.

Oct 20, 2025

Loading thumbnail…

Bar - Chart for ICE6

A horizontal bar chart ranks the top sports clubs by revenue in millions of US dollars, using data from a CSV file. Built with React and D3 v5, it sorts clubs descending by revenue via `d3.csv` and `scaleBand`/`scaleLinear`, rendering SVG rectangles. The chart features a fixed, scrollable bar area with a sticky y-axis label, synced scrolling through React state and the `onScroll` event, plus D3 axes (`axisLeft`, `axisBottom`) with gridlines.

Oct 20, 2025

Loading thumbnail…

ICE5 Sports Clubs Data Preview

This D3.js example demonstrates CSV data loading and parsing by fetching a remote sports club dataset. It displays a summary card showing file size, row count, and column count, followed by a preview table of the first ten rows. The visualization uses `d3.csvParse` to parse the fetched text, `d3.select` for DOM manipulation, and SVG for rendering a summary badge. The source data comes from a GitHub gist containing TopSportsClub.csv.

Oct 6, 2025