A

asowmyasri15@gmail.com

@asowmyasri·16 public vizzes

Loading thumbnail…

Network Graph for IoEd-Net

This example displays a small device network for IoED-Net, with nodes representing network components like sensors, cameras, and routers, and links showing communication lines between them. The layout uses D3’s force simulation, combining `forceLink` to connect nodes, `forceManyBody` for repulsion, and `forceCenter` to center the graph. Node colors follow `d3.schemeCategory10` by group, with labels and links rendered via SVG. The implementation loads D3 v7 from a CDN and uses the `simulation.on('tick')` callback to update positions.

Loading thumbnail…

TREE STRUCTURE of IoED-Net ICE-8

This visualization depicts the hierarchical network structure of the Internet of Education Things, rooted at a gateway IP address that branches into routers and connected devices. The tree layout is generated using D3.js's tree layout and hierarchy APIs, with vertical links drawn via `d3.linkVertical()`. While the main SVG renders a recursive fractal tree as a decorative element, the network diagram uses D3.js v7 with JSON data loaded from `treeData.json`. Nodes are represented as circles with text labels, and the visualization is built within a React framework.

Loading thumbnail…

Different shapes of tree structure for IoED-Net ICE-8

An animated scene combines a Buddha statue with a recursive, branching tree that overlays an IoT network hierarchy, all rendered in SVG. The tree uses the D3.js `d3.hierarchy` and `d3.linkVertical` APIs to draw nodes and links from `treeData.json`, with custom node shapes based on device type (gateway, router, sensor). Real-time cloud movement is driven by a React `useState` and `setInterval` effect, while the tree itself is generated by a `drawBranch` function that recursively calculates line coordinates.

Loading thumbnail…

Area chart for ICE-7

This example shows a D3.js area chart of normalized highest temperatures across countries, with axis labels and smooth area transitions. The visualization is rendered in SVG within a React framework, using `d3.area` and `scaleBand`/`scaleLinear` scales. Animated clouds drift across a sky gradient, while a recursive tree drawing and a lotus-position Buddha figure appear as decorative elements, created with React components. The chart itself is built with `d3.axisBottom` and `d3.axisLeft`, and animated via React state and `setInterval` for the cloud offsets.

Loading thumbnail…

LINE CHART for ICE-7

This line chart displays normalized highest temperature values for 19 countries, with each point connected in the given order along a categorical x-axis. The chart uses D3 v6 scales and the d3.line generator to construct the path, rendering as an SVG with rotated x-axis labels and axis titles. The data is inlined as a JavaScript array within the HTML, and the visualization includes a steelblue line with a bold chart title.

Loading thumbnail…

PIE chart for ICE-7

A pie chart displays product category counts from a static dataset, with each slice colored by category and a legend listing all sixteen items. The chart uses D3.js v6 to generate SVG paths via `d3.pie()` and `d3.arc()`, with a categorical color scale from `d3.schemeCategory10`. Built in React, the page also includes an animated sky with drifting clouds, a recursive branching tree, and a seated Buddha figure, all rendered as SVG elements with smooth motion.

Loading thumbnail…

Reusable Scatter Plot ICE-7

This interactive scatter plot visualizes the distribution of various products across different days of the week using a dropdown selector to switch between Monday and Sunday. Built with D3.js v7 and React, it displays data points as circles positioned along a categorical x-axis and a linear y-axis, with tooltips revealing exact product values on hover. The visualization loads CSV data from a GitHub Gist and animates transitions between days using D3's transition methods, while the SVG chart is accompanied by a decorative scene featuring a Buddha, tree, and moving clouds.

Loading thumbnail…

ICE-6-SCATTER PLOT.

This scatter plot visualizes product sales by comparing Monday sales against Tuesday sales for individual products. The visualization is built with React and D3.js, rendering as an SVG with animated clouds and a meditative Buddha scene in the background. Using d3.csv, it loads data from a GitHub Gist and employs d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft to construct axes. Interactive tooltips provide product details on hover, while click events toggle point selection, changing the fill color to orangered. The chart uses a white background with a subtle shadow.

Loading thumbnail…

ICE-6-BarGraph.

This example visualizes Tuesday’s product distribution quantities as a bar chart, with each bar colored light sky blue and turning orange on hover. Selecting a bar reveals a tooltip displaying the product name and its quantity. The chart is built with React components and D3.js v7, using `scaleBand` and `scaleLinear` for axes, and `d3.csv` to load the dataset. Animated SVG elements, including drifting clouds, a recursive fractal tree, and a Buddha figure, are rendered as a decorative background behind the data visualization.

Loading thumbnail…

LOADING AND PARSING OF CSV DATA WITH D3.js

This gallery example demonstrates loading and parsing CSV data from a public GitHub Gist using D3.js, displaying the file size, row count, and column count as text on a webpage. The visualization shows the data metrics dynamically, with the D3.js library handling both the fetch and parsing operations through `d3.csv`. The presentation includes a decorative Buddha illustration with a tree and animated sky scene, all rendered as React components with SVG elements. CSS animations shift the page’s background color, while the data metrics update instantly upon loading.

Loading thumbnail…

Fork of Nature scene with rocket in the sky.

This interactive scene depicts a natural landscape with a Buddha statue, a recursive tree, drifting clouds, and a rocket in the sky. It uses D3.js v6 with React components to render SVG elements. The `Sky` component animates cloud positions using `useState` and `setInterval`, while the `Tree` component draws branches recursively with `drawBranch`. A moving butterfly and birds are shown in the JavaScript file, alongside a rocket with polygon wings and fire, all rendered through D3's `select` and `append` methods.

Loading thumbnail…

Nature scene with rocket in the sky.

This scene depicts a serene outdoor landscape with a Buddha figure, a recursive branching tree, and a rocket in the sky. Using React with D3.js v6, the visualization renders SVG elements including a gradient sky, animated drifting clouds, and a gradient ground. The code constructs the tree through recursive SVG line generation and animates cloud positions using React state updates. Birds, a flower, butterfly, and sun are composed from basic SVG shapes such as circles, polygons, and path curves.

Loading thumbnail…

Rocket launch by ICE4

A D3.js-powered rocket launch simulation lifts a rocket from a grassy ground into a star-filled night sky. The animated scene transitions the background from day to night, generates flickering flames and drifting smoke, and spawns white stars as the rocket ascends. Built with React components and SVG, it uses d3 transitions for smooth motion and recursive functions to draw a fractal tree and a decorative Buddha figure.

Loading thumbnail…

Rocket launch by ICE4

This example animates a rocket launch from a detailed scene that includes a Buddha statue, a procedurally generated tree, and a grassy ground against a blue sky. As the rocket ascends via a D3 transition, the background fades from day to night while stars appear and animated smoke puffs and flames emit from the craft. The React-based project renders SVG elements using D3 v6, with clouds drifting via a timed state update and the recursive tree built through custom drawing logic.

Loading thumbnail…

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

This example uses D3.js to construct an animated smiley face from basic SVG shapes—a yellow circle for the head, separate circles for the eyes, rectangles for eyebrows, and a curved arc for the mouth. The eyes and mouth are static, while the eyebrows perform a looping transition that moves them up and down over two seconds each way. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, and uses `d3.arc` to generate the mouth’s path, with `transition().duration()` controlling the animation.

Loading thumbnail…

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

This example uses D3.js to construct an animated smiley face from basic SVG shapes—a yellow circle for the head, separate circles for the eyes, rectangles for eyebrows, and a curved arc for the mouth. The eyes and mouth are static, while the eyebrows perform a looping transition that moves them up and down over two seconds each way. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, and uses `d3.arc` to generate the mouth’s path, with `transition().duration()` controlling the animation.