G

Gorantla Sravani

@Gorantlas99·18 public vizzes

Loading thumbnail…

ice 8 Task 1

This example shows a global choropleth map of average annual temperatures by country, with selected nations colored from blue (cold) to red (hot) and unlisted countries in gray. It uses d3.json to load TopoJSON world boundaries via topojson.feature, then d3.geoPath with a geoNaturalEarth1 projection to render SVG paths. A d3.scaleSequential with d3.interpolateRdYlBu encodes temperature values, while a linear-gradient legend and browser tooltip titles provide context from a hardcoded dataset.

Loading thumbnail…

ICE 8 Task1

The visualization displays average annual temperatures by country on a world map, with a blue-to-red sequential color scale representing cold to hot climates. Unmapped countries appear gray. The map uses D3 v7 and TopoJSON to render geographic features via `d3.geoPath` with a natural Earth projection. A hardcoded dataset supplies temperature values for twelve countries, while hover tooltips reveal exact temperatures. The SVG includes a gradient legend with an axis, showing the temperature scale from -10°C to 30°C.

Loading thumbnail…

ICE 8 Task 2B

This example shows a force-directed network of seven major cities connected by flight routes, rendered as an SVG with colored nodes and labeled text. It uses D3’s `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes dynamically, while links are drawn as lines and nodes as circles. Interactive dragging is enabled via D3’s `drag` behavior, allowing users to move cities and observe the simulation react. The node colors come from `d3.schemeSet2`, and all elements update on each simulation tick.

Loading thumbnail…

(ICE-8) Task 2A

This example shows a three-level tree of programming languages, with root, category, and leaf nodes distinguished by red rounded rectangles, orange circles, and green triangles. Using the D3 v7 library, it builds the hierarchy via `d3.hierarchy` and positions nodes with the `d3.tree` layout, drawing curved links with `d3.linkVertical`. Node labels are placed with an offset, and the SVG is rendered at a fixed 900×550 size, with data hardcoded in the script.

Loading thumbnail…

ice7_task3

A dark-themed SVG area chart displays the average revenue of a single sports club type—Soccer—by its founding year, using data from a CSV file loaded via `d3.csv` and aggregated with `d3.rollups`. The chart renders a smooth monotone area fill and an overlaid line via `d3.area` and `d3.line`, with axes and labels produced by `d3.axisBottom` and `d3.axisLeft`, while hover tooltips appear on interactive points.

Loading thumbnail…

ice7_task2_2

A dark-themed SVG line chart displays the average revenue of various sports teams by their founding year. The visualization uses D3 v7 to aggregate data from a CSV file, calculating the mean revenue for each sport per year. Lines are drawn using `d3.line`, with color encoding from `d3.schemeTableau10`. Interactive tooltips appear on hover over data points, showing sport name, year, and average revenue. A legend identifies each sport, rendered within the 800x500 SVG canvas.

Loading thumbnail…

Ice7_task2_1

This pie chart visualizes the revenue share of professional sports clubs, grouped by sport, using data from a CSV file loaded via `d3.csv`. Each slice represents the total revenue in USD millions for a sport, with labels showing the sport name and percentage of total revenue, while a legend displays each sport’s combined earnings. The chart is rendered as an SVG using D3 v7, with `d3.pie` and `d3.arc` generators to compute and draw the slices, and `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding. Data aggregation is performed using `d3.rollup` and `d3.sum`.

Loading thumbnail…

ice7task1

This dark-themed scatter plot compares club revenue against the number of championships won, using color to distinguish sports and bubble size to indicate the club's founding year—older clubs appear as larger circles. The visualization is built with D3.js (v7) and rendered as SVG, loading CSV data via `d3.csv` and `autoType`. It employs `d3.scaleLinear` for axes, `d3.scaleOrdinal` with the Tableau10 scheme for categorical colors, and a reversed `d3.scaleSqrt` for radii. Hovering reveals a tooltip positioned via `d3.pointer`.

Loading thumbnail…

Multi Series Chart - ICE6

This multi-series chart compares the total streams and monthly listeners for the top 20 Spotify artists. Green bars represent total streams in billions on the left axis, while a blue line and circles show monthly listeners in millions on the right axis. Built with React and D3 v5, the visualization loads CSV data and uses `scaleBand`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` to render the SVG. Artist labels are rotated for readability.

Loading thumbnail…

Scatterplot for ICE-6

This interactive scatter plot shows the relationship between monthly listeners and total streams for Spotify’s top artists, with each circle representing an artist. Hovering reveals the artist name and exact values through SVG `<title>` tooltips. The React app loads CSV data via `d3.csv` and renders the visualization using D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The chart uses conditional filtering to exclude missing values and applies Spotify’s green color for all points, with axis styling customized through a Vega-Lite config file.

Loading thumbnail…

Barchart for ICE-6

This visualization displays the top Spotify artists ranked by total streams in billions, using a horizontal bar chart that supports scrolling through a long dataset. React manages the component state and rendering, while D3 v5’s `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` construct the axes and bars as SVG elements. The y-axis stays fixed while the bar area scrolls independently, with the `csv` loader pulling data from a remote gist. Each bar is colored Spotify green, and the x-axis labels include a “B” suffix to denote billions.

Loading thumbnail…

Fork of Refactored Bar Chart

This example shows a horizontal bar chart of the top 10 countries by population in 2020, loading data from a CSV file and rendering it as SVG in a React app. The chart uses React function components for modular pieces: `Marks` renders rectangles using a band scale for countries and a linear scale for population, while `AxisBottom` and `AxisLeft` generate tick marks and labels. The code leverages D3 v5 utilities like `scaleBand`, `scaleLinear`, `max`, and `csv`, with React hooks (`useState`, `useEffect`) managing data fetching via the custom `useData` hook.

Loading thumbnail…

Fork of HTML Starter

This dashboard presents three dark-themed D3 v7 charts visualizing monthly sales and profit data embedded as CSV strings. A bar chart highlights peak sales with an annotated circle on a square root scale, while a scatter plot maps sales against profit using ordinal color encoding for each month. A multi-series chart combines bars for sales and a monotone line with circles for profit, using dual axes. All charts use SVG rendering with grid lines and rotated axis labels.

Loading thumbnail…

ICE5 Spotify Artists Data Overview

This visualization presents an interactive overview of Spotify's top artists dataset, showing the relationship between monthly listeners and total streams across multiple chart types. The main bar chart displays the top 15 artists by monthly listener count, while a second grouped bar chart compares average listeners and streams by genre. A scatter plot visualizes the Iris dataset for comparison. Built with D3.js v7, the visualizations use SVG rendering with d3.scaleBand, d3.scaleLinear, and d3.csv for data loading, featuring tooltips and axis labels for enhanced readability.

Loading thumbnail…

Ice-6

This visualization presents a bar chart showing the number of Spotify artists per country from the `SpotifyTopArtists.csv` dataset. It displays the ranked distribution of artists across nations, with country names on the x-axis and artist counts on the y-axis. The chart is built using D3.js v7, with the SVG-based rendering. Data is loaded asynchronously via `d3.csv()`, aggregated with `d3.rollups()`, and mapped to visual elements using `d3.scaleBand()` for the categorical axis and `d3.scaleLinear()` for the count axis.

Loading thumbnail…

ICE5 Spotify Artists Data Overview

This visualization presents an overview of Spotify artists using a force-directed layout, where each node represents an artist and connections between them reveal relational patterns. The view fills the entire browser window, with data rendered inside a rounded rectangular frame that adapts to the available viewport dimensions. The implementation leverages D3's force simulation through `d3.forceSimulation` to position nodes, with the SVG canvas dynamically sized based on `document.body.clientWidth` and `document.body.clientHeight`. The code initializes a D3 selection on an SVG element and applies styling through CSS to create a fullscreen, fixed-position display.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates loading a sports statistics CSV file and presenting its contents through a clean web interface. It displays key file metrics—file size, row count, and column count—in a summary card, alongside a preview table showing the first eight rows of the dataset. The code uses the D3.js library (v7) to fetch and parse the data via `d3.csvParse`, while the table is dynamically constructed using D3's `select` and `append` APIs. The static JavaScript files `index.js` and `styles.css` are included but not utilized in the runtime logic.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal HTML starter template. It displays the text “Hello HTML!” centered on the page with large, 12em font styling controlled by CSS. The page structure is defined in index.html, which links to styles.css and loads index.js as a module. The JavaScript file keeps its behavior to a single console.log statement, while the visual appearance relies entirely on the CSS class selector rather than any data-driven visualization or external library.