Skip to main content
Log in
S

Sai Bhavana Akkineni

@Sai-Bhavana-Akkineni·15 public vizzes

Loading thumbnail…

ICE8_Network

This example visualizes a small social network of six people grouped into three clusters, with links weighted by connection strength. A force-directed layout positions the nodes, and users can drag them to rearrange the structure. The visualization is built with D3 v4, using `d3.layout.force` for simulation, SVG circles for nodes, and lines for links whose stroke width scales with the square root of each edge weight. Node labels appear beside each circle, and the layout updates continuously during the simulation.

Jul 10, 2022
Loading thumbnail…

ICE8_FamilyTree

This example shows a hierarchical student data tree with nodes for a Student, Course, Name, Course variants, Grades, and First/Last Name, each color-coded by generation depth. It uses d3.stratify to structure the flat data array, d3.tree to compute node positions, and SVG circles and text to render the nodes. The code animates the links with a transition that moves each path from its source to target position over 1.5 seconds, while node circles also transition their radius.

Jul 10, 2022
Loading thumbnail…

ICE8_CountryMap

This visualization displays a choropleth map of Australian electoral regions, with each state filled by a categorical color scale and labeled with its name at the centroid. It uses d3.geoMercator projection and d3.geoPath to render the TopoJSON topology data, while d3.scaleOrdinal with schemeCategory10 assigns colors based on the Elect_div property. The SVG is populated by appending path elements for each feature, with tooltips added via appended title elements.

Jul 10, 2022
Loading thumbnail…

ICE8_SBA

This visualization displays a world map using a Natural Earth projection, with countries rendered as green polygons and the sphere filled with deep sky blue to represent oceans. The d3 library’s `geoPath` and `geoNaturalEarth1` projection are employed to transform geographic data, and `topojson` is used to extract country features from a JSON file hosted on a CDN. The map is drawn as SVG paths, with landmasses outlined in black for clarity.

Jul 9, 2022
Loading thumbnail…

Bonus1.2ICE_SBA

This example shows the top 10 US states ranked by population, displayed as a multi-series 3D bar chart where each state has three bars for total, male, and female population. The visualization uses the d3-x3d library, which integrates D3.js with X3DOM to render interactive 3D scenes in the browser. Data is loaded from a CSV file via `d3.csv`, with values parsed and divided by 1000 for readability. The chart is generated using the `d3.x3d.chart.barChartMultiSeries()` API and attached to the DOM through a standard D3 selection. The background uses a light antique white color.

Jul 7, 2022
Loading thumbnail…

BonusICE_SBA

This example shows a 3D scatter plot of body mass index data, plotting Height, Weight, and Body Fat percentage as x, y, and z coordinates, with each marker rendered as a pink cross. It uses Plotly’s `scatter3d` trace type via `Plotly.newPlot` to render the interactive chart inside a `div`. The data is loaded from a CSV file using D3’s `d3.csv` and parsed with a custom `unpack` function to extract attribute columns. Axis titles are styled with custom fonts and colors, and the layout includes minimal margins.

Jul 7, 2022
Loading thumbnail…

ICE7_Linechart

This example visualizes Amazon’s stock price history from 2009 to 2022 using a line chart. The SVG chart plots yearly prices on a time-based x-axis and a linear y-axis, with gridlines and labeled axes. The code uses D3 v5 modules including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`, loading CSV data via `d3.csv` and parsing dates with `d3.timeParse`. The line path is styled with a dark green stroke, and the axes use custom tick formatting and colors.

Jul 3, 2022
Loading thumbnail…

ICE7_Reusablescatterplot

This interactive scatterplot displays course data by plotting marks, time, and course number against each other. Built with D3.js 6.7.0, the visualization uses a reusable scatter plot module with linear scales and axis helpers. Every five seconds, the x-axis switches between the three data columns, animating the circles to reflect the new mapping. The SVG rendering adapts to the browser window size, with data loaded from a remote CSV file.

Jul 3, 2022
Loading thumbnail…

ICE7_Areachart

This area chart compares cell phone prices from 2005 to 2017, using a smooth curve to show cost trends over time. The visualization uses React with D3 v5, rendering an SVG with an area fill and an overlaid line. It employs `scaleTime` for the month-based x-axis, `scaleLinear` for the cost y-axis, and `area` and `line` generators with `curveBasis` for smoothing. Data is loaded from a CSV file hosted in a GitHub gist, with date parsing applied via `d3.timeParse`.

Jul 3, 2022
Loading thumbnail…

ICE7_Piechart

A pie chart displays the top ten countries with the largest Netflix libraries, using a categorical color scale and an interactive legend with values. The chart uses D3 v5's `pie`, `arc`, and `scaleOrdinal` APIs to generate SVG paths, with mouseover logging data to the console. Data is loaded from a CSV file via `d3.csv` and sorted before rendering.

Jul 2, 2022
Loading thumbnail…

ICE6

This visualization shows the top 10 most populous US states as horizontal bars, with population values on the x-axis and state names on the y-axis. It uses React with hooks to manage state and D3’s `csv` to load data from a GitHub Gist. The bars and axes are rendered as SVG elements, with scales from `scaleBand` and `scaleLinear` positioning the rectangles, while custom tick marks and labels are drawn manually rather than using D3’s axis components.

Jun 26, 2022
Loading thumbnail…

ICE6_SBA

This scatter plot visualizes the Iris dataset, mapping petal length and width to point positions while encoding sepal dimensions through the `rx` and `ry` attributes and species through fill colors. Implemented with vanilla HTML and D3 v6, it uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks. Points render as SVG circles with a custom switch statement assigning gray, orange-red, or lime to setosa, virginica, and versicolor species.

Jun 26, 2022
Loading thumbnail…

ICE6_SaiBhavanaAkkineni

This visualization displays the top 11 sports by fame in 2018, using a horizontal bar chart rendered as SVG. The React app loads data from a CSV via `d3.csv`, then uses `d3.scaleBand` for the categorical sports axis and `d3.scaleLinear` for the numerical value axis. Each sport is represented by an orange rectangle, with gridlines and tick labels generated from the scales. The chart is built with React hooks (`useState`, `useEffect`) and D3 v5.

Jun 25, 2022
Loading thumbnail…

ICE5-SaiBhavanaAkkineni

This example loads a remote CSV dataset using d3.csv and displays a text summary in a styled pre element. The summary reports the dataset size in kilobytes, row count, and column count, using d3.csvFormat to calculate byte length. The visualization also includes a hand-crafted SVG scene depicting a mountain landscape with trees, stars, and a cabin, rendered directly in the markup. The page uses D3 v7 for data loading and formatting within a plain HTML/JavaScript setup.

Jun 23, 2022
Loading thumbnail…

SaiBhavanaAkkineni.js

This example renders a stylized face as a static SVG composition, with features such as a lavender circle head, black nose, eyes, rectangular eyebrows, and an arc-based mouth. The only animation is a repeated vertical movement of the eyebrows, implemented with chained `transition.duration` calls in D3 v5. The code uses `d3.select`, `d3.arc`, and SVG elements like `circle`, `rect`, and `path`, all positioned with manual coordinates and grouped via `g` elements. No external data is loaded; the visualization is purely geometric and interactive only in its timed eyebrow motion.

Jun 18, 2022