G

gayuvurukuti@gmail.com

@gayatrisirisha·25 public vizzes

Loading thumbnail…

Tree - Project 16

This interactive tree visualization displays the hierarchical relationships derived from a diabetes dataset, with color-coded nodes representing different attribute types such as Glucose, Insulin, BP, Age, and Outcome. Built with D3 v3, the visualization uses a collapsible tree layout with SVG rendering and animated transitions. Users can click nodes to expand or collapse branches, while tooltips provide additional context about each node. The tree employs `d3.layout.tree` to compute positions, with custom collision detection to prevent overlapping nodes based on the data structure loaded from a JSON file.

Loading thumbnail…

Line Chart - Project 16

This line chart shows the relationship between BMI and average blood pressure for diabetes patients, with each line representing a distinct district and colored using an ordinal scale. The visualization uses d3.line with curveBasis for smooth path rendering, d3.scaleLinear for both axes, and d3.nest to group data by district. A custom colorLegend component displays the district categories, while axis labels and a title provide context. Data comes from a CSV file hosted on GitHub, and the chart is rendered as SVG using d3.v5.

Loading thumbnail…

3D Scatter Plot - project 16

This 3D scatter plot visualizes a diabetes dataset, plotting glucose, BMI, and insulin values on the x, y, and z axes respectively. The marker colors distinguish between the two outcome classes, with a custom colorscale mapping outcome values to distinct hues. Data is loaded via `d3.csv` from a GitHub gist, and the plot is rendered using the Plotly.js library within a designated div. The scene includes customized axis titles and background colors, with black-outlined markers sized at 12 pixels for clear point identification.

Loading thumbnail…

Tree - Project 16

This visualization presents a hierarchical tree layout of glucose-related health data, with nodes color-coded by type (type1 through type4) and linked by directed, labeled connections using D3’s `d3.layout.tree` and SVG. The tree animates node transitions via `transition.attrTween`, supports zooming and panning through `d3.behavior.zoom`, and includes tooltips and drop shadows, all rendered from a JSON data source.

Loading thumbnail…

Tree - Project 16

This interactive tree diagram displays hierarchical project data, with each node represented as a colored box and links showing synchronicity between nodes via arrows and labels. The visualization uses D3.js v3 layout methods like `d3.layout.tree` to position nodes, with the SVG rendered and animated through transitions. Node colors correspond to types (type1–type4), and the entire tree can be zoomed and dragged. Data comes from a JSON file containing nested node objects with names, links, and versions.

Loading thumbnail…

Scatter Plot - Project 16

This scatter plot visualizes a diabetes dataset, mapping glucose levels on the x-axis against BMI on the y-axis, with each point colored by outcome (red for positive, green for negative). It also encodes insulin and blood pressure values into the `rx` and `ry` attributes of the circles, creating elliptical markers. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes. Data is loaded asynchronously via `d3.csv` from a GitHub gist URL, with a custom row parser converting numeric fields.

Loading thumbnail…

ICE-7 Pie Chart

A pie chart visualizes the distribution of total COVID-19 cases across the top twelve U.S. states, sorted from highest to lowest. Each slice’s size and color correspond to a state’s case count, with an interactive tooltip logging the value on mouseover. The chart uses D3’s `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` APIs to generate SVG paths and a legend. Data is loaded asynchronously from a CSV file via D3’s `csv` function, then rendered with custom SVG elements for state labels and case totals.

Loading thumbnail…

ICE-6 Scatter Plot

This D3.js scatter plot visualizes an insurance dataset, mapping BMI to charges for individual patients. Points are colored red for smokers and green for non-smokers, using a custom `scaleLinear` mapping for the axes. The visualization employs `csv` for data loading, `select` and `join` for SVG circle rendering, and `axisLeft`/`axisBottom` for labeled axes, with all text styled in cursive. The plot includes age and children values as `rx` and `ry` attributes on the circles, though these do not affect the visual output.

Loading thumbnail…

Tree Chart ICE-8

A collapsible family tree chart displays hierarchical relationships among named individuals using D3.js layout and SVG rendering. Clicking nodes toggles child branches, with animated transitions updating node positions and link paths. The code constructs a tree layout with `d3.layout.tree`, draws links as red diagonal paths, and styles nodes with cyan circles and green borders. The dataset is a hardcoded JSON family tree, rendered on a yellow background with 750-millisecond duration animations.

Loading thumbnail…

Japan Map

This visualization displays a map of Japan using D3.js, with each prefecture rendered as a green path. The map uses a Mercator projection with zoom and pan interaction enabled via D3’s `zoom` behavior. TopoJSON data is loaded and converted to GeoJSON using the `feature` API, then paths are drawn with `d3.geoPath`. The code leverages `d3.json` for data loading, `scaleOrdinal` and `schemeCategory10` for potential color scaling, and the `d3-geo-projection` library for projection support. The SVG output is styled with CSS.

Loading thumbnail…

Social Network Graph- ICE8

This example shows a social network graph of people connected by friendship links. Each person appears as a brown circle with a name label, and directional lines with arrow markers indicate the relationship between individuals. The graph is built with D3.js, using `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Users can drag nodes to rearrange the layout, and hovering highlights a node with a thicker white stroke. The data comes from a JSON file with node and link arrays, and the visualization renders to SVG.

Loading thumbnail…

World Map - ICE8

This example presents a world map using the Natural Earth projection, rendered as an SVG with D3.js. Countries are drawn as paths using `d3.geoPath` and a `geoNaturalEarth1` projection, with a distinct sphere path representing the globe. The map is interactive, allowing users to zoom and pan via the `d3.zoom` API. Geographic data is loaded from a remote JSON file containing TopoJSON, which is converted to GeoJSON features using the `topojson` library. The visualization employs a brown background and a dark green sphere fill, with countries styled in a light beige.

Loading thumbnail…

Diabetes-Team 16

This visualization presents a static infographic on the causes, prevention, and treatment of diabetes, combining text and graphics in a single scrolling layout. The page is built with an HTML structure and styled through an external CSS file, while the main content is rendered as an SVG element that displays a large embedded PNG image via an SVG pattern. The code uses d3.v7 from a CDN, though no dynamic data or interactive features are present. The visualization relies on the SVG `<pattern>` and `<image>` APIs to display the pre-designed graphic.

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes penguin measurements from a CSV dataset, mapping culmen length, flipper length, and body mass onto the x, y, and z axes. Each point represents an individual penguin, with color indicating its species: Adelie, Chinstrap, or Gentoo. The visualization is built using Plotly’s `scatter3d` trace type, with data loaded and processed via D3’s `csv` function. The plot is rendered in a webgl context, featuring colored markers with black outlines and customizable axis backgrounds.

Loading thumbnail…

Bonus ICE - 3D Bar chart

A 3D bar chart displays Covid-19 case data for seven U.S. states, showing total cases, deaths, recoveries, and population as stacked, grouped columns. Using the Highcharts library with its highcharts-3d.js extension, the chart applies a 3D perspective through the options3d settings, with each series (Total Cases, Total Deaths, Total Recovery, Population) rendered as separate colored bars. The x-axis lists state names, the y-axis measures total cases, and the z-axis is labeled "Observations(Covid)." The dataset appears to be sourced from state-level Covid-19 statistics, rendered with depth and rotation for visual comparison.

Loading thumbnail…

Bonus ICE-3D Bar Chart using D3.js

This example visualizes car manufacturer sales data for the first six months using a 3D bar chart. The multi-series bar chart displays each manufacturer’s monthly values, rendered in an X3DOM scene through the d3-x3d library. The visualization loads CSV data from a GitHub gist, parses it into a dataset with month-value pairs, and passes it to a barChartMultiSeries component. The chart is created using d3.x3d.chart.barChartMultiSeries(), with data attached to the chart holder via the D3.js v5 selection API.

Loading thumbnail…

Bonus ICE - 3D Bar chart

This 3D bar chart visualizes download counts for seven applications across six different sources, using the Highcharts library with its Highcharts-3D add-on. The chart groups bars by app category along the x-axis, with each source displayed as a separate stacked series, and applies a 3D perspective through the `options3d` settings. Data is embedded directly in the JavaScript code, with each series representing a specific app store, such as App Store, Playstore, and OneStore.

Loading thumbnail…

ICE7_Linechart

This example visualizes earthquake statistics from 2002 to 2020, plotting estimated deaths against year in a smooth line chart rendered with SVG. The chart uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the path, while `csv` loads the remote earthquake dataset. Death estimates and years are parsed as numbers, and axes are styled with tick lines and labels for clarity.

Loading thumbnail…

ICE7_Areachart

This area chart visualizes estimated earthquake deaths from 2002 to 2020, with the x-axis representing years and the y-axis showing the number of deaths. The chart is rendered as an SVG using D3 v5, employing the `d3.area` generator with a `curveBasis` to create a smooth, curved path filled in orange. The data is loaded from a CSV file via a Gist URL, and scales are created using `d3.scaleLinear`, with axes generated by `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

ICE-7 Reusable Scatterplot

This interactive scatterplot visualizes the classic Iris dataset, plotting sepal and petal measurements as colored circles. The chart cycles through different attribute pairings every two seconds, allowing comparison of species clusters across dimensions. Built with React and D3.js, it uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and SVG circles with animated transitions. The code demonstrates a reusable chart component that dynamically updates via `setInterval`, with data loaded from a GitHub Gist.

Loading thumbnail…

ICE-6 Bar Chart

This D3.js bar chart visualizes COVID-19 case totals for fifteen U.S. states, sourced from a CSV file fetched via `d3.csv`. The horizontal bars, rendered as SVG rectangles, are scaled with `d3.scaleBand` and `d3.scaleLinear` based on the maximum case count. The chart includes gridlines and axis tick labels generated through custom mapping functions, and is built within a React component using `useState` and `useEffect` hooks, with styling applied via inline attributes.

Loading thumbnail…

ICE5 Excercise

This example embeds a static SVG image of a data visualization directly into an HTML page, with D3 v7 loaded but not used for any dynamic rendering. The page displays the image via an SVG `<pattern>` referencing an embedded base64-encoded PNG, accompanied by a styled `<pre>` block titled "Data Visualization." The rendered content appears to be a pre-generated chart, though the code shows no data processing or interactive behavior. The visualization is presented as a fixed graphic within a Vue-powered page, demonstrating SVG embedding rather than D3-based chart construction.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense field of small, randomly colored purple circles overlaps a large hand-drawn SVG path of a Buddha figure on a purple background. The circles are generated by nested React map loops, while the Buddha silhouette is rendered using a complex SVG path. The visualization uses React and renders both the circles and the path as SVG elements, creating a layered, abstract composition.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization shows a dense field of hundreds of randomly colored, rotated polygons, overlaid with a large, ornate SVG path that depicts a Buddha figure. The code uses React to render the SVG canvas, and JavaScript’s `Math.random()` to generate both the spatial distribution and the fill colors of the polygons, which are drawn as `<polygon>` elements. The Buddha image itself is a complex, single `<path>` element with a detailed `d` attribute, positioned and scaled via a `transform` group.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense, colorful SVG visualization depicts multiple overlapping Buddha-like geometric forms composed of thousands of small diamond polygons. The shapes are generated by nested array mappings that calculate random coordinates and fill colors, while each polygon is rotated 45 degrees. The primary figure is a detailed SVG path of a Buddha, scaled and translated over the chaotic polygon background. Built with React, the visualization uses ReactDOM to render the SVG elements, with body styling set to a black background and hidden overflow.