P

Prasanth

@VemulaDowtyasriprasanth·28 public vizzes

Loading thumbnail…

India ICE - 8 - Map

This example renders a choropleth map of India’s administrative regions, with each state filled by a categorical color and labeled with its name. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` generator to draw the SVG paths from TopoJSON data. State boundaries are stroked in white, and each polygon includes a tooltip via `title` elements. Colors come from `scaleOrdinal` with `schemeCategory10`, while labels are positioned using `pathGenerator.centroid`. The code loads the India dataset from a GitHub gist and shifts off a duplicate feature before rendering.

Loading thumbnail…

Prasanth ICE - 8 - SOCIAL NETWORK

This visualization uses a force-directed layout to display a social network of 11 named individuals, grouped into five clusters by the thickness of their connecting links. The graph is rendered as an SVG using the D3.js v4 and v2 libraries, with the d3.layout.force API managing node attraction, repulsion, and gravity. Node position updates occur on each simulation tick, while circles and text labels are drawn using the SVG `circle` and `text` elements, styled with custom CSS and loaded from the `graph.json` data source.

Loading thumbnail…

Second Question ICE 8 : Family Tree

This example shows a family tree of the Maurya dynasty, using a node-link diagram where each person is a labeled circle and relationships are connecting paths. The visualization animates the expansion of the tree as nodes appear at a parent's previous position and transition to their final layout. Built with D3.js (v3.5.17), it uses the `d3.layout.tree` API for tree layout, `d3.svg.diagonal` for link generation, and SVG transitions for the animation. Node fill colors encode different generations, with text labels placed beside each circle.

Loading thumbnail…

Prasanth ICE - 8 - Map

This map visualization displays the administrative regions of India, with each state filled using a categorical color scale and labeled with its name. The geographic data is loaded as a TopoJSON file from a GitHub gist, and the map is rendered using D3 v5’s `geoPath` with a `geoMercator` projection. The code builds SVG paths from the TopoJSON features using `topojson.feature`, applies colors via `scaleOrdinal` and `schemeCategory10`, and places text labels at each state’s centroid. The visualization highlights how D3’s geo and selection APIs combine to create a choropleth-style administrative map.

Loading thumbnail…

Prasanth ICE - 8 - World Map

This interactive world map displays countries in green over a blue sphere, with countries highlighting red on hover. Built with React and D3 v5, the visualization uses `d3.geoEquirectangular` projection and `d3.geoPath` to render geographic boundaries. GeoJSON data is fetched from a GitHub gist and processed through TopoJSON's `feature` function. Styling via CSS classes controls sphere fill, country colors, and hover effects.

Loading thumbnail…

Reusable D3 Scatter Plot ICE 7

This interactive scatter plot visualizes the Iris flower dataset, encoding petal width, sepal length, sepal width, and petal length across the x and y axes. The code uses D3 v6 with a reusable `scatterPlot` module, employing `scaleLinear` for axes, `scaleOrdinal` for symbols, and `symbolGenerator` for markers. An animated `setInterval` cycles through different column pairs every second, while colors distinguish species. The SVG rendering includes axes via `axisLeft` and `axisBottom`, with a legend and title overlaid on screen.

Loading thumbnail…

Bonus ICE using ICE6 Prasanth Solution

This example shows the monthly cost of basic Amazon services across twelve countries using a horizontal bar chart. The visualization uses React hooks (useState, useEffect) to fetch and parse the CSV data with d3.csv, then renders SVG rectangles scaled by d3.scaleLinear and d3.scaleBand. Axis ticks and gridlines are generated manually using d3.ticks, with red dashed lines marking each cost value. The chart displays country names on the y-axis and dollar amounts on the x-axis.

Loading thumbnail…

Line Chart ICE-7

This line chart visualizes global video game sales over time, highlighting the upward trend in sales across the years. It plots the year on the x-axis against global sales in millions on the y-axis, using D3 version 5's `scaleTime`, `scaleLinear`, `line`, and `axisBottom`/`axisLeft` APIs. The SVG rendering includes grid lines, axis labels, and a styled path, with data sourced from a CSV file hosted on GitHub. The line is emphasized with a distinct color and stroke width, while the chart’s margins and tick formatting are customized for readability.

Loading thumbnail…

Area Chart ICE 7

This visualization displays global video game sales over time as an area chart, emphasizing the upward trend in yearly sales figures. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` generators to render the SVG plot. Data is loaded via `d3.csv` from a GitHub gist, with the first 14,000 rows sliced for display. The area fill is semi-transparent pink, complemented by a thin line path, and both axes include labeled ticks with gridlines.

Loading thumbnail…

Pie chart ICE 7 Prasanth

A pie chart displays the scores of ten games from a CSV dataset, with each slice colored and labeled via a legend. The visualization uses D3 v5 methods including `d3.pie` and `d3.arc` to generate the segments, while `d3.scaleOrdinal` assigns colors to game names. Data is loaded asynchronously with `d3.csv` from a GitHub Gist, and the chart is rendered as an SVG with white text and legend values showing formatted score ticks.

Loading thumbnail…

trail 2

This visualization displays the review scores of 19 video games as a horizontal bar chart. The chart uses React with hooks like useState and useEffect to load and manage data, while D3 v5 handles the scales and SVG rendering. Data is fetched as CSV from a GitHub gist, with scores parsed as numbers and filtered via slice. The x-axis uses d3.scaleLinear, the y-axis uses d3.scaleBand, and grid lines are drawn from xScale ticks.

Loading thumbnail…

Penguin Dataset Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length against body mass, with each point colored by penguin species. Additional culmen measurements are encoded in the circle radii, though the visual distinction is subtle. The visualization is built with D3 v5 and rendered as SVG, using `d3.csv` to load the data, `d3.scaleLinear` with `d3.extent` for axis scaling, and custom margin calculations for the layout. The axes are labeled with cursive font styling, and the chart includes a title centered above the plot.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes video game review scores for a subset of games using a horizontal bar chart. The chart maps game names to the y-axis with a band scale and scores to the x-axis with a linear scale, rendering red gridlines and score labels. Built with React hooks and D3 v5, it loads CSV data from a GitHub gist, slices it to twenty entries, and renders SVG rectangles via React components. The code directly uses d3.csv, d3.scaleBand, d3.scaleLinear, and d3.max for data processing and scaling.

Loading thumbnail…

Entertainment Options in Different States

This bar chart displays the scores of entertainment options (games) across different states, with game names on the y-axis and their corresponding scores on the x-axis. The visualization uses a subset of the data (rows 190–208) from a CSV file fetched via d3.csv, and renders horizontally aligned rectangles using SVG within a React component. The chart is built with d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numerical x-axis, and custom tick marks drawn as red lines.

Loading thumbnail…

Prasanth changes

This visualization displays film scores across 20 titles, using horizontal bars ranked by game name. It shows data from a CSV file, filtering rows 190-208, with the y-axis ordered by game and the x-axis scaled to the maximum score. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes while rendering SVG rectangles for each bar, with red gridlines and tick labels generated via `xScale.ticks()`.

Loading thumbnail…

Film Sales Data of Different Countries

This visualization displays a horizontal bar chart comparing the monthly starter costs for film sales across twelve different countries. The chart uses D3 scales to map country names to the y-axis and cost values to the x-axis, with red gridlines and simple SVG rectangles representing each data point. Data is loaded from a CSV file using D3’s `csv` function, and the chart is rendered within a React component using `scaleBand`, `scaleLinear`, and `max` from D3 v5. The visualization provides a clear, unadorned comparison of regional cost differences.

Loading thumbnail…

Final ICE6 submission

This example displays film sales data across countries in a horizontal bar chart, comparing monthly starter costs per zone. The visualization uses React with D3 v5 methods including `scaleBand`, `scaleLinear`, and `csv` to load and process data from a GitHub gist. Rendered as SVG, the chart shows red gridlines and labeled axes, with bars representing values for each category. The code imports `useState`, `useEffect`, and `useCallback` to manage asynchronous data loading and state within a functional React component.

Loading thumbnail…

My ICE6 Data

A horizontal bar chart displays the monthly starter cost across twelve zones, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is filtered to the first twelve records, rendered as SVG rectangles with gridlines and tick labels generated by `xScale.ticks()` and manual axis positioning.

Loading thumbnail…

Title

This visualization shows the monthly cost of starter plans across twelve different zones, displayed as horizontal bars on an SVG chart. The chart uses D3.js scales for both the x-axis (linear scale for cost values) and y-axis (band scale for zone categories). Data is loaded from a CSV file using D3’s `csv` function, with the value field parsed as a number. React manages the component state and rendering, while D3 handles the axis ticks, grid lines, and bar rectangles.

Loading thumbnail…

Hello Htm

This example renders a full-page message reading “Hello HTML!” using pure HTML and CSS, with a class-based style rule that centers the text and sets its font size to 13em. The page contains no JavaScript logic or data loading, relying solely on a static `<div>` element styled by the `<style>` block. It demonstrates a minimal, standalone implementation of CSS layout and typography without external libraries or frameworks, serving as a bare-bones starting point for browser-based visualizations.

Loading thumbnail…

ICE6 Prasanth Solution

This visualization displays the cost per month of basic Amazon services across twelve countries, using horizontal bars ranked by country name. The bar chart leverages React for component state management and D3 v5 for data loading and scales, specifically utilizing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is fetched via `d3.csv` from a GitHub Gist and rendered as SVG rectangles within a React component. The chart also includes custom tick marks and axis labels generated through manual iteration over scale domains.

Loading thumbnail…

VideoTutorialPArt2

This gallery example shows a yellow smiley face drawn on an SVG canvas that fills the entire browser window. The face consists of a large yellow circle with a black outline, two smaller black circles for eyes, and a curved mouth. Built with React and rendered as SVG, the code uses ReactDOM to render the graphic, calculating circle positions relative to the window’s center. The example derives from a video tutorial, with the source code defining geometric properties like radii, offsets, and stroke widths to construct the face.

Loading thumbnail…

Entertainment Options in Different States

This example shows the cost of entertainment options in twelve U.S. states using a horizontal bar chart rendered as SVG with React. The chart displays state names on the y-axis and numerical cost values on the x-axis, with red tick lines and labeled axes. The code loads CSV data via D3’s `d3.csv` method, slices the first twelve records, and uses `d3.scaleBand` and `d3.scaleLinear` to map states and costs to pixel positions. React manages the data state and renders the SVG elements, including bars and axis ticks, within a single D3-powered component.

Loading thumbnail…

FinalVizICE5prasanth

This example displays a full-page message reading “Hello HTML!” at a very large font size, centered on the screen. It is a minimal demonstration of basic HTML structure combined with CSS styling and JavaScript inclusion, built using the React framework. The code defines a single `<div>` element with a CSS class that sets the font-size to 13em and text-align to center, while the page itself relies on no external libraries or data sources. It serves as a starting point for exploring how React integrates with plain HTML and CSS in a visualization context.

Loading thumbnail…

Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization presents a dense, abstract composition of overlapping Buddha images, rendered as colored polygons within a React and SVG framework. The code utilizes nested array maps to generate hundreds of semi-transparent, randomly colored triangles, creating a chaotic, layered effect. The primary Buddha figure is drawn with a complex SVG path, transformed and positioned via the `g` element’s `transform` attribute. React and ReactDOM manage the SVG output, while the `Math.random()` function drives the geometric and color variability. The result is a visually rich, generative artwork blending structured iconography with procedural randomness.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A grid of small overlapping circles is randomly scattered across a dark background, layered beneath a detailed orange line drawing of a seated Buddha. The circles, generated with React and rendered as SVG, use nested `map` loops to place multiple points with randomized coordinates and semi-transparent RGB colors. The Buddha path is drawn using an SVG `path` element with a thick stroke, creating a high-contrast visual layering of abstract geometry and figurative art.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A black background hosts hundreds of small, randomly positioned and colored circles, generated by nested array maps in React, alongside a single large, overlapping Buddha silhouette drawn as an SVG path. The path uses React’s JSX syntax with a transform for scaling and positioning, while the circles apply fill and opacity via JavaScript’s `Math.random()`. This React application renders all graphics as SVG elements within a fixed 960 by 1000 viewport.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A black canvas displays a dense cluster of overlapping Buddha silhouettes rendered as semi-transparent, multicolored circles. The circles are positioned randomly using the `Math.random` function within nested `A.map` iterations, with RGB fill values also randomly generated. The Buddha path is drawn using SVG `<path>` elements, while React manages the component structure and rendering of the visualization.