sushmitha bungatavula

ICE-8country map 1b Sushmitha B

This choropleth map shows the annual number of visitors in millions for each Brazilian state, with a light-to-dark red color scale indicating intensity and a tooltip revealing exact values on hover. The visualization loads Brazil’s GeoJSON boundaries and a CSV dataset, then draws the states as SVG paths using a `d3.geoMercator` projection fitted to the map size. It uses `d3.scaleLinear` for the color encoding and `d3.geoPath` for rendering, with a fixed legend at the bottom summarizing the range of visitor counts.

ICE-8 Sushmitha B country map 1b

This choropleth map visualizes international tourist arrivals across Spain’s autonomous communities, using a red sequential color scale where darker shades indicate higher arrival counts. Hovering over a region updates a tooltip with the exact number of arrivals. The visualization joins TopoJSON geography from the @geo-maps/es-admin1-topo package with inline CSV data, then projects the shapes using d3.geoPath and d3.geoMercator. Regions with no matching data appear in light gray, and the code logs unmatched region names to the console for debugging.

ICE-8 Sushmitha B

This choropleth map visualizes international tourist arrivals worldwide, showing the latest available year’s values per country through a red sequential color scale. It employs D3.js v7 with a GeoNaturalEarth1 projection and TopoJSON world geometry, joining tourism data from Our World in Data via ISO-3 country codes. Hovering reveals a tooltip with country name and arrival count. The visualization uses d3.geoPath for rendering, d3.scaleSequential for color mapping, and a graticule layer for geographic context.

ICE-8 2B Network SushmithaB

This example shows a three-layer conceptual network of the Mahabharata, connecting clans, characters, and key events. It uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while `d3.drag` enables interactive movement. Nodes and links are rendered as SVG circles and lines, colored by a `scaleOrdinal` mapping levels to distinct hues. Labels appear beneath each node, and the layout updates dynamically on each simulation tick.

ICE-8 Sushmitha B 2A Tree

This interactive tree diagram visualizes the hierarchy of Netflix’s top four original shows organized by country. Root, country, show, and character nodes are represented with distinct geometric shapes and colors. The visualization uses the D3.js v7 library, loading CSV data from a GitHub gist. It employs the `d3.stratify`, `d3.tree`, and `d3.linkVertical` APIs to compute and render the layered layout as an SVG, with node styling and labels applied via D3’s selection and join methods.

Fork of ICE-8 Sushmitha B

Fork of Map

This choropleth map visualizes estimated annual film production counts for Indian states, using a Mercator projection centered on the country. Each state’s fill color derives from a sequential orange-red color scale, with white strokes separating boundaries. The visualization uses `d3.geoPath` and `d3.geoMercator` for geographic rendering, `topojson-client` to parse the TopoJSON source, and `d3.scaleSequential` for color mapping. Interactive tooltips reveal the state name and its film count on hover, using D3’s event listeners and HTML styling.

Fork of ice-7 sushmithab line chart

This line chart visualization displays IPL team points across seasons, with each team represented by a colored line and interactive data points. D3.js (v7) loads CSV data from a GitHub gist via `d3.csv`, processes it with `d3.group` to nest records by team, and renders the chart using SVG elements. The visualization includes axis labels, a legend, and tooltips on mouseover, built with D3 scales (`scaleLinear`, `scaleOrdinal`), axes, and the `line` generator. Circle markers use event handlers for hover interactions, while animations appear through D3 transitions on tooltip opacity changes.

ice-7 sushmithab pie chart

This pie chart visualizes the distribution of total points accumulated by IPL teams from 2015 to 2024, aggregated from a CSV dataset. Each slice represents a team’s share of the overall points, with percentage labels displayed directly on the chart and a legend listing each team’s total points and percentage. The visualization uses D3.js v7, employing the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to generate the circular layout and color scheme. The chart is rendered as an SVG and includes a legend, with data loaded via `d3.csv`.

ice-7 sushmithab scatterplot

This interactive scatter plot visualizes IPL team performance from 2015 to 2024, showing the relationship between year and points scored for each team. Each point is color-coded and shape-coded by team, with hover tooltips revealing detailed statistics. The visualization uses D3.js v7 with SVG rendering, employing d3.scaleLinear for axes, d3.scaleOrdinal for color and shape encoding, and d3.symbol for varied point markers. Data is loaded from a remote CSV file containing team performance records. The chart includes custom team colors, a legend, and smooth hover interactions.

Fork of Fork of ice-7 sushmithab area chart

This area chart visualizes IPL team performance by plotting points scored against year, with each team represented as a filled area using custom colors. The chart groups data by team using `d3.group` and renders areas with `d3.area`, while tooltips on hover reveal team, year, and points. It leverages D3 v7 scales (`scaleLinear`, `scaleOrdinal`), axes, and a legend, loading CSV data from a gist. The visualization includes SVG rendering and interactive tooltip transitions, with animation implied through hover interactions.

ICE 6 SUSHMITHA B ScatterPlot

This interactive scatter plot visualizes the average points per race for Formula 1 drivers in the 2023 season, with each driver's team distinguished by color. Built with React and D3 v7, the visualization processes a CSV dataset from a GitHub gist to compute average driver scores while simultaneously displaying a team legend with custom color mappings. The SVG rendering uses D3's `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `csv` for data loading.

ICE-6 Sushmitha.B

This bar chart visualizes the total F1 championship points earned by each driver during the 2023 season. The horizontal bars are colored by team, with the data aggregated from a CSV file containing individual race results. Built with React and D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for the axes, and renders the chart as an SVG. Each bar includes a tooltip via a `<title>` element and displays its value as a label.

ice 6 sushmithab multi seriesplot

This multi-series chart visualizes Formula 1 2023 driver performance by combining bar and line representations for average points and average finishing position. Driver data is aggregated from a CSV dataset, with each driver’s total points and positions averaged across races, then sorted by average points. The visualization uses D3’s `scaleBand` for the categorical x-axis and two `scaleLinear` scales for the dual y-axes, with bars rendered as SVG rectangles and the position trend drawn using D3’s `line` generator. The code is built with React, using D3’s `csv` parser for data loading and SVG for rendering.

Fork of ICE-6 Hasini Scatterplot

This scatter plot displays the highest individual score for each player, with points colored by Hogwarts house. The visualization uses a band scale for player names on the x-axis and a linear scale for scores on the y-axis. Built with React and D3 v7, the code employs `scaleBand`, `scaleLinear`, and `csv` to fetch and process remote data, rendering circles as SVG marks with rotated labels for readability.

ICE-6 SUSHMITHA.B

This bar chart displays the total points accumulated by each Formula 1 driver during the 2023 season, with bars colored by team and labeled with their final scores. The React application uses D3.js utilities, including `csv`, `scaleBand`, and `scaleLinear`, to fetch and aggregate the data from a remote CSV file before rendering the chart as SVG. It provides interactive hover tooltips via `title` elements, showing the driver’s team and points.

ICE-5 Sushmitha B

This example presents a static overview of Formula 1 race data. It displays a header with summary statistics, a table of the first five records from a remote CSV file, and a legend of F1 team cars as colored SVG circles. Using D3 v7, the visualization fetches and parses the data with `d3.csvParse`, then populates the table dynamically. The fixed SVG symbol legend defines team colors and names, while the dark theme and styling are handled by external CSS.