srinivasaraosankula

@srinivasaraosankula·19 public vizzes

ICE - 8: Family_Tree_Srinivas

This example shows a family tree of named characters, with circular nodes connected by animated straight-line links. The layout is computed using `d3.stratify()` to build a hierarchy from parent-child data and `d3.tree()` to position nodes. The SVG rendering uses `d3.select`, and node circles and text are appended with transitions that animate their appearance. Links are drawn as path elements that animate from the source to the target position. The data is a static array of ten entries, and the visualization uses d3 v6 with a light blue background and orange nodes.

Mar 30, 2023

Loading thumbnail…

ICE 8 - Family_Tree_Srinivas

This example visualizes a family tree using D3.js v5 within a React framework. It shows hierarchical relationships among named individuals, with nodes colored by depth level: red for the root, blue for the first generation, and green for deeper descendants. The code uses `d3.stratify` to convert flat parent-child data into a hierarchy and `d3.tree` to compute node positions. Links are drawn as cubic bezier curves, and the SVG output includes labeled text for each family member.

Mar 30, 2023

Loading thumbnail…

Animal_And_Plant_Species_Tree_Srinivas

A hierarchical tree visualization displays the taxonomic relationships between animal and plant species, with the root node "Animals&Plants" branching into animals and plants, then further into subgroups like mammals, birds, trees, and flowers. Nodes are rendered as colored SVG circles, with orange for the root, lightgreen for the first generation, and lightblue for deeper levels, each labeled with its species name. The code builds the tree using `d3.hierarchy` and `d3.tree` layouts, then draws curved links with `d3.linkHorizontal` and positions nodes via SVG transform attributes.

Mar 30, 2023

Loading thumbnail…

Task1:ICE-8 world map

This visualization shows a world map with countries rendered in orange against a blue sphere, using a natural Earth projection. The code loads geographic data from a remote TopoJSON source and converts it to GeoJSON features. It uses D3 v5’s `geoPath` and `geoNaturalEarth1` projection to draw the map, while the TopoJSON client’s `feature` API extracts country boundaries. The SVG output includes a background sphere path and individual country paths, styled with CSS fills and strokes.

Mar 29, 2023

Loading thumbnail…

Task_2: ICE 8 - US Country Map

This example shows a map of U.S. states, rendered as orange filled paths with gray outlines against a light blue ocean background. It uses the D3 v4 library with the `d3.geoPath` projection (`d3.geoAlbersUsa`) to draw the state boundaries, and loads TopoJSON data from the `us-atlas` package via `topojson-client`. The states are appended as SVG paths within a single `<svg>` element, with the map centered using explicit translation and scale parameters.

Mar 27, 2023

Loading thumbnail…

Internet Users World Map of 2015

This interactive world map visualizes internet usage per 100 people across countries in 2015, using a green sequential color scale to represent percentage ranges from 0–20% to 80–100%, with gray for missing data. Hovering over a country reveals a tooltip with its exact usage percentage, and users can zoom and pan the map. The visualization is built with D3.js, using `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom`, with data from the Kaggle Internet Users Dataset.

Mar 27, 2023

Loading thumbnail…

ICE-7 Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, showing how flower measurements relate to species. A custom reusable chart function, inspired by Mike Bostock's Towards Reusable Charts pattern, uses d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.scaleOrdinal with d3.symbols to render different shapes for each species. Every 15 seconds, the x-axis automatically switches between petal_width, sepal_width, petal_length, and sepal_length, animating the data points as the axis updates. The SVG is rendered full-screen using D3 v6.

Mar 13, 2023

Loading thumbnail…

REUSABLE SCATTER PLOT

This reusable scatter plot visualizes the Iris dataset, with each point represented by a distinct symbol corresponding to flower species. Built using D3 v6, it employs reusable chart patterns with accessor functions for configuration. The plot animates by cycling through different x-axis attributes like petal width and sepal length every 15 seconds. Using SVG rendering, it applies d3.scaleLinear for axes, d3.scaleOrdinal for symbols, and d3.symbol to generate mark paths, dynamically updating through re-calling the chart function.

Mar 13, 2023

Loading thumbnail…

ICE-7 Area Chart-Srinivas

This area chart displays the profits of a software company from 2009 to 2021, with a smooth curved line and filled region beneath it. The visualization uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and generate scales via `scaleTime` and `scaleLinear`. The line and area shapes are created with `d3.line` and `d3.area` using `curveBasis`, while axes are rendered with `axisBottom` and `axisLeft`. The SVG rendering includes custom styling for orange labels, blue tick text, and a light green fill for the area.

Mar 12, 2023

Loading thumbnail…

ICE-7 Line chart-Srinivas

This line chart displays the number of runs Sachin Tendulkar scored each year, using a blue line plotted over an SVG canvas. The x-axis represents years, scaled with d3.scaleTime, while the y-axis shows runs, scaled with d3.scaleLinear. Data is loaded asynchronously from a CSV file using d3.csv. Axes are generated with d3.axisBottom and d3.axisLeft, and the line path is constructed with d3.line. The chart includes labeled axes and grid lines rendered via tick marks.

Mar 11, 2023

Loading thumbnail…

ICE - 7 Pie Chart Srinivas

This D3.js pie chart visualizes deaths in 2020 caused by air pollution, aggregated by country. The SVG canvas renders each country’s death count as a colored slice with a value label, while a legend pairs each color with its country and corresponding figure. The visualization uses the `d3.pie` layout, `d3.arc` for generating sector paths, and `d3.scaleOrdinal` to assign colors. Data is loaded asynchronously from a CSV file via the `d3.csv` loader, and formatting is handled with `d3.format`.

Mar 11, 2023

Loading thumbnail…

Fork of Scatter Plots

An interactive scatter plot of the Iris dataset lets users choose which of the four flower measurements—sepal length, sepal width, petal length, or petal width—appears on each axis via dropdown menus built with React. Points are colored by species using a fixed color scale, with d3.axisBottom and d3.axisLeft rendering grid lines and tick labels. The visualization uses d3.scaleLinear for positioning, d3.extent for domain calculation, and SVG circles for rendering, with data loaded from a CSV source.

Mar 11, 2023

Loading thumbnail…

ICE-6:TAsk-2_Penguin Data set scatter Plot-srinivas

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length to the x-axis and body mass to the y-axis. Each of the 333 data points is colored by penguin species (Adelie, Gentoo, or Chinstrap) using red, orange, or blue markers. The code uses D3 v5 methods `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load the data, scale the coordinates, and render axes with SVG circles. Two additional text labels annotate the axes while a title labels the chart.

Mar 6, 2023

Loading thumbnail…

ICE-6:Marks and Channels-Srinivas

This visualization displays the number of engine cylinders for different car origins, using a horizontal bar chart where each bar represents a region and its length encodes the cylinder count. The chart is rendered as an SVG within a React application, with D3.js v5 handling data loading, scaling, and axis generation through `scaleBand`, `scaleLinear`, and `max`. The data is fetched from a CSV file via `d3.csv`, and the bars are drawn as `rect` elements with a fixed lightblue fill.

Mar 6, 2023

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religious breakdown of the 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Each bar represents a country’s total population, segmented by religion, with hover tooltips showing exact values. The chart employs D3 v3 with `d3.layout.stack` for stacking, `d3.scale.ordinal` for country bands, and `d3.legend.color` for the interactive legend. Hovering over legend entries highlights matching religion segments while fading others, using layered SVG groups to separate background and foreground bars.

Mar 6, 2023

Loading thumbnail…

ICE5_SDV_Srinivas

This visualization displays information about cars and their engine specifications. It presents a summary of the dataset, reporting the total number of rows and columns found within a linked CSV file. The page features a background image and prominently displays the data summary, along with a hyperlink for users to access the full raw data. The implementation uses d3.v7 to fetch and parse the CSV file from a remote URL, utilizing the `d3.csv` API to load the data and then updating the HTML content with text summary statistics.

Feb 27, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiling face built with D3.js animates its eyebrows in a looping motion. The SVG face is assembled from simple shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. D3 selections and the `arc()` generator position these elements, while chained `transition().duration()` calls alternately shift the eyebrow group up and down. The example demonstrates fundamental DOM manipulation and transitions using D3 v5.

Feb 21, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face is rendered in SVG using D3.js, with circular eyes and an arc-based mouth. A group containing rectangular eyebrows animates vertically via chained `transition()` calls, moving up and then back down over two two-second intervals. The code uses D3 selections and the `arc` generator from `d3-shape`, with dimensions driven by the SVG's width and height attributes. This example demonstrates fundamental DOM manipulation and animation with D3 v5.

Feb 20, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiley face built with D3.js displays animated eyebrows that shift upward and downward in a looping two-second transition. The code selects an SVG element and constructs the face using D3 selections, appending circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `d3.arc` API for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group's transform offset. The example uses D3 v5 with SVG rendering and demonstrates basic DOM manipulation and animation for static, predefined geometry without external data.

Feb 20, 2023