S

SatyaVineeth

@SatyaVineeth·17 public vizzes

Loading thumbnail…

ICE8 - Family Tree

This interactive family tree visualizes three generations of a family, with the root "Rao" branching into three children and their respective descendants. Built with D3.js version 3, it uses the `d3.layout.tree` hierarchy layout and `d3.svg.diagonal` for curved links, rendering nodes as circles with labels in an SVG. Users can click any node (except the root) to collapse or expand its children, with smooth 750ms transitions (`duration`) animating the nodes and links to their new positions. The data is defined inline as a JSON array, and the layout normalizes horizontal spacing by depth.

Loading thumbnail…

ICE8 - Social Network

This example visualizes a social network as an interactive node-link diagram, showing friendships between ten people with each person represented as a labeled circle. The layout is computed using d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter, rendering as SVG. Data comes from a local JSON file. Links are drawn as blue lines with arrowheads, nodes are draggable via d3.drag, and hovering highlights nodes with a thicker stroke.

Loading thumbnail…

ICE8-Tree

A hierarchical tree visualization displays a student data structure with parent-child relationships, including courses, names, and grades. Each generation is color-coded by depth level. The D3.js code uses the `d3.stratify()` utility to organize the data hierarchy and `d3.tree()` to compute node positions. Paths animate via chained `.transition().duration()` calls, while circles and text labels are rendered as SVG elements with staggered entrance animations.

Loading thumbnail…

ICE8 - Country Map

This visualization displays an interactive SVG map of Australian electoral regions, with each state shaded according to a categorical color scale based on its electoral division. The code uses D3 v5 functions including `geoMercator` for projection, `geoPath` for generating SVG paths from TopoJSON data, and `scaleOrdinal` with `schemeCategory10` for color encoding. State names are rendered at path centroids and hover tooltips appear via appended `title` elements. The map updates dynamically through a React-based bundle, loading geographic boundaries from a local TopoJSON file.

Loading thumbnail…

ICE8 - Satya Vineeth Kusumanchi

This visualization displays a world map using the Natural Earth projection, with blue fill for oceans and green fill for landmasses. Country borders are outlined in black strokes. The code loads geographic data from the world-atlas TopoJSON dataset and converts it to SVG paths using `d3.geoPath` and `topojson.feature`. Countries are rendered as individual paths, with the sphere background drawn separately to represent water.

Loading thumbnail…

Bonus ICE - 3D Bar Chart

This 3D bar chart displays employee counts at nine major companies, grouping them by the country of origin: the United States, Germany, and Japan. The visualization uses Highcharts with the Highcharts 3D extension, enabling an isometric view through configurable alpha, beta, and depth settings. The chart employs a column series with stacking and grouping disabled, using groupZPadding and depth parameters to create a single row of three-dimensional bars across the category axis.

Loading thumbnail…

ICE7 - Reusable Scatter Plot

This example presents a reusable scatter plot that animates through four different x-axis variables (pH, volatile acidity, chlorides, and fixed acidity) from a wine dataset, while the y-axis remains fixed on acidity. The visualization maps wine types (red and white) to distinct colors and shapes, with an animated legend updating every two seconds. Built with D3 v6, it uses a custom `scatterPlot` API that implements the `scaleLinear`, `axisLeft`, and `axisBottom` functions for scalable chart construction. Data is loaded via `d3.csv` from a remote URL, and all rendering occurs in SVG with continuous animation.

Loading thumbnail…

ICE 7 - Area Chart

The visualization is an area chart showing the rate change of Cardano cryptocurrency over time, with a smooth, curved fill emphasizing the trend. The D3.js code (v5) loads CSV data from a GitHub gist, parses timestamps and numeric values, and renders the chart as an SVG. It uses `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` for the filled path, and `axisLeft`/`axisBottom` for labeled, gridded axes.

Loading thumbnail…

ICE 7 - Line Chart

This line chart shows the rate change of Caradano over time, with timestamps on the x-axis and the Caradano rate on the y-axis. The line is rendered in red using a smooth curve, and both axes include gridlines and labels. The code uses D3 v5 APIs such as `d3.csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis`. Data comes from a remote CSV file, and the SVG is drawn via a bundled script.

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart displays the top five countries in the ICC World Test Championship, showing each country’s win percentage as a colored slice with the percentage labeled directly on each segment. A legend on the right pairs each country with its corresponding value and color. The visualization uses D3 v5’s `pie` and `arc` generators to compute and render the SVG paths, with `scaleOrdinal` assigning the five section colors. Data is loaded asynchronously from a CSV file via `d3.csv`, and text formatting uses D3’s `format` function.

Loading thumbnail…

ICE 6: Bar Chart Styling

This visualization displays the length of each game played from a CSV dataset, using a horizontal bar chart where each bar represents a game. The chart is built with React and D3 v5, employing scales from `d3.scaleBand` and `d3.scaleLinear` to map game numbers and lengths to screen coordinates. SVG rectangles are rendered for the bars, while custom tick marks and labels are generated manually using D3’s `scaleLinear.ticks()` and the band scale domain. Data is loaded asynchronously via `d3.csv`, and the chart is styled with green gridlines and blue text.

Loading thumbnail…

ICE-6 Scatter Plot Graph

This D3.js scatter plot visualizes the Iris flower dataset, mapping petal length and width for each sample. Points are colored by species—setosa in orange, versicolor in green, and virginica in pink—revealing distinct clusters. The SVG chart uses `d3.scaleLinear` for axes and `d3.extent` for domain scaling, with `d3.axisBottom` and `d3.axisLeft` rendering the tick labels. The code fetches data from a remote CSV via `d3.csv` and sets the point radius to 4.8 pixels with explicit width and height from the window size.

Loading thumbnail…

ICE 5 - Satya Vineeth Kusumanchi

This example displays metadata about a CSV dataset containing the total length of games, including the number of rows, columns, and file size in kilobytes. It uses D3 v7’s `d3.csv` to fetch the data from a GitHub Gist and `d3.csvFormat` to calculate the data size. The page also renders two static SVG triangles over a light gray background using inline SVG markup. A simple CSS style, applied to a `<pre>` element, centers the text and sets a grey background. The visualization is built with React and outputs to SVG within an HTML page.

Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered "Hello HTML!" message on a plain white background. The message is styled using a CSS class that sets the font size to 13em and aligns the text in the middle of the page. The static HTML page uses no external libraries or JavaScript, relying solely on the CSS `font-size` and `text-align` properties to create its simple visual layout.

Loading thumbnail…

Satya Vineeth

A smiling face rendered as a yellow SVG circle with black stroke, featuring detailed eyes, eyebrows, ears, and a mouth built from D3 arc paths and React-generated shapes. The visualization uses React 17 for component structure and D3 v7’s `arc` generator to define the mouth, eye arcs, and ear paths, with additional circles and lines for facial features. Data is hardcoded in the component, and the SVG is centered within an 850×455 viewport, all rendered to the DOM via ReactDOM.

Loading thumbnail…

Satya vineeth.js

A yellow face with black-outlined eyes, animated eyebrows, and a curved mouth is drawn using SVG shapes in D3 v5. The code selects an SVG element and uses D3's `arc` generator to create the mouth path, while transitions animate the eyebrow group vertically over two seconds. The visualization is built within a React framework, rendering circles and rectangles for facial features with a fixed 960×450 viewport.

Loading thumbnail…

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

A smiling face is drawn with D3.js v5, featuring a yellow circle, two eyes, animated eyebrows that repeatedly move up and down, and a mouth shaped using an arc path. The SVG is centered using a translation, and the eyebrows animate via chained `transition().duration` calls that toggle their vertical offset. The code imports `select` and `arc` from D3, reads the SVG dimensions from attributes, and builds the face from primitive shapes. The example is rendered as a static SVG with animation triggered on load, using a React-friendly structure.