V

venigallajaanu@gmail.com

@venigallajanakiramaiah·17 public vizzes

Loading thumbnail…

network representation of data

This interactive D3.js network graph maps IoT device types to their associated attack vectors, using a force-directed layout to position nodes. Nodes represent either devices (orange) or attack types (teal), with links showing connections like a Camera linked to Phishing and Brute Force. The visualization is built with `d3.forceSimulation` and its `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` components, rendered as an SVG with draggable circles and labels. Data is hardcoded in the script, and the color-coding distinguishes device nodes from attack nodes.

Loading thumbnail…

visualization of data in tree format

This tree visualization maps the structure of the IoEd-Net network, showing root, protocol (TCP and UDP), and IP address nodes as colored circles and rectangles. It uses D3.js v7's hierarchy and tree layout functions with linkHorizontal to position nodes and draw connecting paths, with link colors distinguishing the TCP and UDP branches. The SVG rendering applies node colors by depth and includes hover effects for interactivity, with data hard-coded in the JavaScript source.

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a hierarchical network tree mapping IoEd-Net connections, branching from TCP and UDP protocols down to specific local and remote IP addresses. It renders an SVG that visualizes the network topology using a static, hardcoded hierarchical data structure. The layout is computed with `d3.hierarchy` and `d3.tree()`, with curved links drawn via `d3.linkHorizontal()` and nodes as colored circles—red for the root, orange for protocols, and steelblue for IPs—accompanied by text labels.

Loading thumbnail…

SCATTER PLOT IN ICE_6

This interactive scatter plot visualizes the relationship between maths and science marks from a CSV dataset, with two sequentially displayed SVG charts that alternate between circle and triangle/square symbols. The visualization shows student performance across two subjects, coloring points based on which subject score is higher. Built with D3 v7, the example uses `d3.scaleLinear` for axes, `d3.symbol()` with `d3.symbolTriangle` and `d3.symbolSquare` for custom point shapes, and `d3.csv()` for data loading. Both charts are initially hidden and displayed in sequence, each sharing identical axes, labels, and a legend indicating the comparison between maths and science scores.

Loading thumbnail…

pie chart

This pie chart visualizes the total marks for six school subjects (telugu, hindi, english, maths, science, and social) aggregated from a comma-separated values dataset. It uses D3.js v7 to load the external CSV, compute sums with `d3.sum`, and generate the chart with `d3.pie` and `d3.arc`. Subjects are colored using `d3.scaleOrdinal` with `d3.schemeCategory10`, with labels placed via `arc.centroid` and an accompanying legend showing each subject and its total. The rendering uses SVG.

Loading thumbnail…

area chart

This area chart displays the total marks of the top 10 students from a CSV dataset, with student names on the x-axis and marks on the y-axis. It uses D3.js v7 with SVG rendering, employing `d3.scalePoint` and `d3.scaleLinear` for axes, and `d3.area()` to generate the shaded region. The chart includes labeled axes, rotated student name labels, orange circles marking each data point, and a title, with the area filled in light steel blue and outlined in steel blue.

Loading thumbnail…

line chart IN ICE_6

This example shows a line chart of the total marks for the top 10 students from a CSV dataset, with each student’s name on the x-axis and their mark on the y-axis. The code uses D3.js v7 to load the data via `d3.csv`, create the SVG chart with `d3.scalePoint` and `d3.scaleLinear`, and draw the line path with `d3.line()`. Individual data points are marked with orange circles, and axes are added using `d3.axisBottom` and `d3.axisLeft`, alongside rotated labels and a title.

Loading thumbnail…

Scatterplot_for_ice5

A scatterplot compares Maths and Science marks for individual students, with each circle colored steelblue when Maths exceeds Science and orange when Science is greater than or equal to Maths. Built with D3 v6 and rendered as SVG, the chart uses `d3.csv` to load the dataset, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` for ticks. Axes labels, a title, and a two-color legend clarify the comparison, while hover effects on the circles are not implemented.

Loading thumbnail…

bargraph of ice_5 data

This example visualizes student performance by comparing subject-specific marks against total marks. It displays two scatter plots side by side: one for Maths versus total marks and another for English versus total marks. Using D3.js v6 with SVG rendering, the code defines a reusable `scatterPlot()` function that configures scales, axes, and circle marks. Data is loaded from a CSV file via `d3.csv` from a GitHub gist, with the x-axis key configurable between different subjects. The reusable function pattern allows both charts to share identical styling and features.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through four attributes of Fisher’s iris dataset—petal width, sepal width, petal length, and sepal length—on the x-axis against sepal length on the y-axis. Built with D3 v6 and a reusable `scatterPlot` module, it renders SVG circles scaled by `d3.scaleLinear` with `d3.axisLeft` and `d3.axisBottom`. Every two seconds, `setInterval` updates the x-value accessor and re-calls the plot, smoothly shifting the point positions and axes.

Loading thumbnail…

bargraph of ice_5 data

This bar chart displays average marks for several subjects, calculated from a CSV dataset of student scores. Each bar represents a subject, with height encoding the mean value, shown via steelblue rectangles that turn orange on hover. Built with D3.js v6, it uses `d3.csv`, `d3.mean`, `d3.scaleBand`, `d3.scaleLinear`, and axis generators to render an SVG with rotated category labels, titled “Average Marks in Each Subject.”

Loading thumbnail…

Fork of Fork of HTML Starter

A bar chart displays average marks per subject, computed from a CSV dataset of student scores. The visualization uses D3.js v6 to load the data, calculate averages with `d3.mean`, and render SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with labels and a title. Bars turn orange on hover through CSS, and the chart includes rotated x-axis tick labels and clear axis annotations.

Loading thumbnail…

truck for kids

Built with D3.js v7, this example draws a cartoon truck as an SVG composition of rectangles and circles, including a red body, blue cabin, white window, yellow backlight, and two black wheels. Clicking the truck triggers a two-second `transition` that translates the entire group horizontally across the canvas, while the wheels rotate 720 degrees via `transition.attrTween` and `d3.interpolateString`. The wheels spin independently during the movement, and repeated clicks restart the animation, making the truck advance slowly across the gray-bordered SVG stage. It demonstrates reusable transition chaining on grouped SVG elements.

Loading thumbnail…

Fork of ICE4-DORAEMON

This visualization renders a cheerful, animated Doraemon character using D3.js, drawing the face, eyes, nose, mouth, body, hands, and legs with basic SVG shapes like circles, ellipses, and paths. The character is centered on a solid orange background, with simple white text reading "HEY DORAEMON!!!" positioned below. The code employs D3’s `transition` API to create continuous motion, making the head bounce up and down, the text pulse vertically, and the eyes blink at random intervals, all driven by chained `.transition()` and `.duration()` calls. The visualization dynamically resizes to the full browser window.

Loading thumbnail…

meditation

A meditating figure rendered in deep blue-to-purple gradient tones, centered on an orange robe, pink lotus base, and serene facial expression. Built with React and SVG, the visualization uses simple geometric primitives—paths, circles, and gradient definitions—to construct the head, hands, and lotus posture. The code defines a `SVGCanvas` component that returns a 1000×1000 inline SVG, with `linearGradient` for the background and static path data for all shapes, creating a symmetrical, icon-like illustration with no interactive behavior.

Loading thumbnail…

Fork of New template

This example shows an interactive truck built from SVG shapes: a red body, blue cabin, white window, yellow headlight, and two black wheels. Clicking the truck triggers a two-second animation that translates it to the right, and the wheels rotate 720 degrees around their centers. The code uses D3.js v7 to select the SVG container, append shape elements, and animate the truck’s movement and wheel spinning with a transition and `attrTween`.

Loading thumbnail…

ice4

A clickable SVG truck demonstrates D3.js event handling and transitions. The truck consists of rectangles, circles, and a group element, with wheels that spin using `transition.attrTween` and `d3.interpolateString` when clicked. The entire vehicle moves via a `transition` on its `transform` attribute, while the body, cabin, windows, headlight, and wheels are drawn with basic SVG shapes and static fill colors.