S

SravyaAnnadi

@SravyaAnnadi·36 public vizzes

Loading thumbnail…

Scientific Data Visualisaation Nettwork graph

This example shows a force-directed network graph of countries, with nodes representing nations and links indicating connections between them. The visualization uses the D3.js v4 library, specifically the `d3.layout.force` API, to simulate physical forces that position the nodes and links within an SVG canvas. Node labels display country names, and link stroke widths reflect the numeric `weight` values from the JSON data file, with thicker lines for stronger connections. The graph loads data from `graphFile.json` and supports interactive dragging of nodes via `force.drag`.

Loading thumbnail…

Social Network Graph --> ICE-8

This example visualizes a small social network as an interactive node-link diagram. The graph shows ten people and the friendship connections between them, with arrowheads indicating link direction. The layout is computed using D3’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter`. Nodes are rendered as large cyan circles with text labels, and users can drag them via `d3.drag`. Data is loaded from a local JSON file, and the SVG is rendered with scaling and marker definitions from D3 v6.

Loading thumbnail…

usa Tree

This visualization shows a hierarchical tree of U.S. states and cities, with the USA at the root, three states (Florida, Texas, Virginia) as children, and their major cities as leaves. The code uses `d3.stratify()` to convert flat parent-child data into a hierarchy and `d3.tree()` to compute node positions. Circles represent each node, colored by depth via a `setGeneration` function, with animated SVG path links that transition from source to target positions and text labels displayed in yellow.

Loading thumbnail…

Fork of Family Tree

This example visualizes the hierarchy of blood group types using a tree layout, with nodes representing groups like A, B, AB, and O, and their positive or negative variants. The visualization uses SVG circles and text labels, which animate into position via D3 transitions, while links between parent and child nodes also animate. The code applies d3.stratify() to convert flat data into a hierarchy and d3.tree() to compute node coordinates, with circle fill colors indicating generation depth. Rendered with D3 v6, the animation highlights the structure of blood group inheritance.

Loading thumbnail…

Family Tree

This interactive family tree visualization displays hierarchical relationships using an expandable node-link diagram. The tree structure is defined in a JSON file with nodes representing family members and links depicting connections. Using D3.js v3, the visualization renders nodes as colored rectangles with descriptive labels, while animated transitions and zooming capabilities enhance navigation. Each node can be clicked to reveal or hide its children, and the layout automatically adjusts to accommodate the expanded structure. The tree is built using the `d3.layout.tree` algorithm, with SVG for rendering and CSS classes for styling node states like selected links and tooltips.

Loading thumbnail…

Fork of Fork of ICE - 8 Family Tree Maanas Katta

A family tree diagram renders hierarchical relationships among ten characters, with each node displayed as a large light-green circle labeled with the character's name. The visualization uses D3 v6's `stratify` to convert parent–child link data into a tree hierarchy, which `d3.tree()` then lays out. SVG paths connect nodes with animated line drawing, transitioning from a zero-length segment to their final position over one second, while circles fade in via a separate transition. Text labels are styled with bold black fill within each circle. The tree is rendered on a black background using SVG and CSS transitions.

Loading thumbnail…

Fork of ICE - 8 Family Tree Maanas Katta

This visualization presents a branching family tree that animates its connections on a black background with lime-green strokes and light-green circular nodes. The tree data contains a hierarchy of named characters like Brim, KayO, and Yoru, with each node displaying its label in bold black text. The visualization uses d3.v6, specifically the `d3.stratify` utility to build the tree from parent-child links, then applies SVG paths with animated transitions over 1000 milliseconds to draw the connecting lines between nodes.

Loading thumbnail…

World Map ICE 8

This example shows a world map rendered with a natural Earth projection, using a pink fill for landmasses and a dark blue sphere with cyan graticules. The map is built with React and D3, using `d3.geoNaturalEarth1` and `d3.geoPath` to project and draw geographic features. TopoJSON features are sourced from the `world-atlas` package, and interior borders are computed via its `mesh` function. The visualization displays both land features and internal country boundaries as SVG paths.

Loading thumbnail…

Sweden map

This example visualizes the counties of Sweden as a choropleth map, using a red fill for each county and yellow lines to highlight interior borders. The map is rendered as an SVG using React, with geographic data from a remote TopoJSON file. The code employs `topojson.feature` and `topojson.mesh` to extract county boundaries and interior edges, and `d3.geoPath` with the Mercator projection to project the geometries. The projection is fitted to the map's extent using `fitExtent`.

Loading thumbnail…

Scientific Data Visualisation Bonus ICE- 3D Scatter Plot

This example visualizes visitor counts across three museums—Avila Adobe, Firehouse, and Chinese American—as a 3D scatter plot. Each point represents a data row, with the marker’s position determined by the three numeric attributes. The visualization uses Plotly’s `scatter3d` trace type, rendered via `Plotly.newPlot` into a designated div. Data is loaded from a CSV file using `d3.csv`, with the `unpack` helper extracting each column into arrays for the x, y, and z coordinates. Axes are labeled with distinct colors and customized margins are applied.

Loading thumbnail…

Fork of BONUS 1: 3D Scatter Plot

This example displays a 3D scatter plot of body mass index data, showing the relationship between Height, Weight, and Body Fat as individual points. The visualization uses Plotly’s `scatter3d` trace type to render pink markers within a rotatable three-dimensional scene, with red axis titles for each variable. The data is loaded from a CSV file using D3’s `d3.csv`, and the plot is generated with `Plotly.newPlot` inside a dedicated HTML div. The layout minimizes margins and customizes axis label styling through Plotly’s scene configuration.

Loading thumbnail…

3D Bar Plotting

This example shows an interactive 3D bar chart comparing profits for multiple motels across the years 2017–2021. The visualization uses the `d3.x3d.chart.barChartMultiSeries` API to render bars as three-dimensional objects within an X3DOM scene. Data is loaded asynchronously from a CSV file using `d3.csv` and parsed into a hierarchical format with each motel containing five yearly values. Users can rotate and explore the plot, which includes animated transitions as the dataset loads.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example presents a 3D bar chart comparing the profits of six U.S. motels across several months (2017 through June). The visualization uses x3dom for rendering the three-dimensional scene within the browser. The code constructs the chart using the `d3.x3d.chart.barChartMultiSeries` API, which integrates D3.js v5 with the X3D standard, and loads the data from a remote CSV file. The dataset is parsed with `d3.csv` and bound to the chart holder element to update the display.

Loading thumbnail…

Scientific Data Visualisation 3D Bar Plot

This example presents a 3D bar chart comparing the yearly profits of the top five motels in the USA across four years (2017–2020). The visualization loads CSV data from a GitHub gist, parses it into a multi-series format, and renders it using the d3-3d library alongside X3DOM for WebGL-based 3D output within a React context. The chart is built with D3 v5 utilities like `csv`, `select`, and `scaleLinear`, and the bars are generated via the custom `d3.x3d.chart.barChartMultiSeries` component, offering an interactive perspective on the profit trends.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example shows a 3D multi-series bar chart of car manufacturer sales data for the first six months of the year. The visualization uses the d3-x3d library to render the bars in an X3D scene, with d3.csv loading the data from a GitHub Gist and d3.scaleLinear for mapping values. The chart is created using d3.x3d.chart.barChartMultiSeries, which groups bars by manufacturer across months, and the x3dom library handles the interactive 3D rendering in the browser.

Loading thumbnail…

Scientific Data Visualisation 3D Bar Plot

This 3D bar plot visualizes scientific data as a grid of colored cubes, with each cube’s height representing a negative value from a uniform random distribution. The visualization supports interactive rotation via drag gestures on the SVG canvas, using the d3-3d library to project 3D coordinates and manage cube faces, while d3.drag handles user input. The code also includes a separate index.js file that uses Plotly to render a 3D scatter plot from a CSV dataset hosted on GitHub.

Loading thumbnail…

Fork of bonus ice

This example visualizes country population data with a bar chart that uses an isometric 3D cube rendering style, generated from a CSV file loaded via `d3.csv`. The chart displays horizontal bars scaled by `d3.scaleLinear` and positioned with `d3.scaleBand`, while the 3D effect is created using the `d3-3d` library to draw cubes with height proportional to population values. The rendering includes interactive drag rotation, implemented with D3 drag events, and per-cube color mapping via `d3.scaleOrdinal`.

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes museum visitor data across four exhibits, cycling which museum is plotted on the x-axis every three seconds. Each dot represents a year (2014–2016) colored pink, green, or black, with its position determined by attendance at different Los Angeles museums. The visualization uses a reusable D3 scatterPlot module built with scaleLinear scales, axisBottom, and axisLeft to render axes and circles. Data is loaded via d3.csv from a GitHub-hosted CSV file, with setInterval triggering redraws that swap the x-axis column among AmericaTropical, Firehouse, ChineseAmerican, and AvilaAdobe.

Loading thumbnail…

Area Graph ICE 7

This area graph visualizes Android phone user data over time, using a smooth curve to show the trend. The visualization is rendered as an SVG using D3 v6, with the area filled in pink below the line. It loads data from a Gist CSV, parses the years and user counts, and displays them on scales for time and linear values. The code uses D3's `area`, `curveBasis`, `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct the chart, with margins, axis labels, and a title.

Loading thumbnail…

Scientific Data Visualisation ICE7 Part 3

This visualization displays the electronic sales trends in Nepal from 2013 to 2022 using a line chart. The chart shows sales figures over time, with a red line plotted against a time-based x-axis and a linear y-axis for sales amounts. Built with D3 v5, the code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.line` to construct the visualization. The data is loaded from a CSV file using `d3.csv`, with dates parsed via `d3.timeParse` and rendered as an SVG.

Loading thumbnail…

Scientific Data Visualisation

A pie chart displays the top 10 U.S. states by heart stroke deaths in 2022, with each slice labeled with the death count in thousands and a corresponding color-coded legend listing state names and values. The visualization uses D3.js v5, fetching CSV data from a GitHub gist via `d3.csv` and rendering with SVG. It applies `d3.pie` for data segmentation, `d3.arc` to generate slice paths, and `scaleOrdinal` for color mapping. Text labels and legend elements are positioned manually using D3 selections and transforms.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization displays the top 10 countries by deaths from air pollution in 2020, using a pie chart with color-coded segments and accompanying legends. The chart renders death counts in thousands on each slice and lists each country with its corresponding value in a legend panel. The code fetches CSV data via d3.csv, then uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the SVG paths and text labels. Legend elements are manually appended with SVG rect and text elements, with axis formatting handled through d3.format.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization displays the top 10 countries by deaths from air pollution in 2020, using a pie chart with color-coded segments and accompanying legends. The chart renders death counts in thousands on each slice and lists each country with its corresponding value in a legend panel. The code fetches CSV data via d3.csv, then uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the SVG paths and text labels. Legend elements are manually appended with SVG rect and text elements, with axis formatting handled through d3.format.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This chart displays the top 10 countries by deaths from air pollution in 2020 using a pie chart rendered as SVG. D3’s `pie` layout and `arc` generator create the segments, while `scaleOrdinal` maps country names to a custom color array. Each slice is labeled with its death count formatted in thousands, and a legend pairs color swatches with country names and values. The data is fetched as CSV from a GitHub gist via D3’s `csv` loader, with text styling applied through CSS classes.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

Animated scatter plot of Los Angeles museum attendance data, cycling through four different x-axis variables (Avila Adobe, Firehouse, Chinese American, and America Tropical) while mapping years to colored points. The visualization uses D3 v6 with a reusable `scatterPlot` module, SVG rendering, and `setInterval` to progressively swap the x-axis values. It includes a custom legend with year labels, axis labels, and a title, drawing from CSV data loaded via `d3.csv`.

Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements with points colored by species (green for setosa, indigo for versicolor, red for virginica). The visualization cycles through different column pairings every two seconds, animating the axes and point positions across four variable combinations. Built with D3 v6, the example uses a reusable scatterPlot module that employs scaleLinear, extent, axisLeft, and axisBottom to render the SVG chart, with circles encoded with both x/y positions and rx/ry attributes for elliptical shapes.

Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This visualization is an animated scatter plot of the Iris flower dataset, colored by species (setosa, versicolor, and virginica). It cycles through different combinations of sepal and petal measurements every two seconds, allowing viewers to see how the data clusters shift across various dimensions. Built with D3.js (version 6.7.0), the plot uses a reusable `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, and `axisBottom` for scaling and axes. The SVG circles are rendered with inline styling, using a `setInterval` loop to update the x-axis mapping and redraw the plot.

Loading thumbnail…

ICE-6 Part 2 Scatter plot for iris dataset

This scatter plot visualizes the Iris dataset, mapping petal length and width as x and y coordinates. Each point is colored by species: setosa as pink, virginica as yellow, and versicolor as green. The D3 v6 code loads CSV data with `d3.csv`, scales axes with `scaleLinear`, and renders circles via an SVG `join` operation. Axis labels are positioned using calculated margins, with rotated text for the y-axis.

Loading thumbnail…

Scientific Data Visualization ICE-6 Working with react and d3.js

This visualization displays the cumulative Monkey Pox cases for the top 20 countries, using a horizontal bar chart rendered as an SVG. The chart employs React’s `useState` and `useEffect` hooks to asynchronously fetch CSV data via `d3.csv`, then maps each country’s population count to bar widths using `d3.scaleBand` and `d3.scaleLinear` for the y- and x-axes. Gridlines and ticks are generated with `d3.scaleLinear.ticks`, and all visual elements are constructed through React DOM creation. The bars are styled pink via CSS, with blue axis labels and red gridlines.

Loading thumbnail…

Scientific Data Visualisation Assignment Rendering Marks and Channels with React & D3

This bar chart displays the gross earnings of twelve movies, with movie titles on the y-axis and their corresponding dollar values on the x-axis. The visualization uses React to manage state and render SVG elements, while D3 v5 handles data loading via `d3.csv`, scales with `scaleBand` and `scaleLinear`, and generates axis ticks. The data is fetched from a remote CSV URL, and the chart draws blue rectangles for each movie's gross value.

Loading thumbnail…

Data Visualization

This example visualizes the structure of a Netflix credits dataset, displaying a summary of its size in kilobytes, row count, and column count using D3.js. The visualization shows two simple humanoid stick figures, one on the left and one on the right, alongside text describing the dataset’s attributes, such as person ID, character names, and roles. The code loads data from a CSV file using `d3.csv`, formats the data with `d3.csvFormat`, and renders the result in an HTML `<pre>` element. The figures are drawn using raw SVG shapes within a React-based D3 v7 environment.

Loading thumbnail…

Scientific Data Visualization ICE5

This example displays a simple house illustration, with a pink roof, a gray door and window, over a summary of a loaded dataset. The page combines an inline SVG graphic with a text output that reports the dataset’s size in kilobytes, row count, and column count. The code uses D3.js version 7 to fetch a CSV file from a GitHub gist, parse it with `d3.csv`, and compute the formatted length via `d3.csvFormat`. The visualization is built with React, rendering the SVG and the JavaScript-generated message.

Loading thumbnail…

Scientific Data Visualization ICE5

This example displays metadata about a dataset loaded from a CSV file, showing its size, row count, and column count. The page uses d3.csv to fetch and parse the data, then d3.csvFormat to calculate the file size in kilobytes. A static SVG illustration depicts a geometric mountain scene with a flag and building. The visualization combines a simple React-free HTML document with inline CSS styling and D3.js v7 for data loading and summary generation.

Loading thumbnail…

Fork of HTML Starter

This example displays a centered message, “Hello HTML!”, rendered in large, bold text using a custom CSS style. The page consists solely of a static HTML document with a single `div` element, styled with the `font-size` and `text-align` properties. It demonstrates the fundamental structure of an HTML page combined with embedded CSS for presentation, requiring no interaction or data processing. The visualization serves as a minimal starting point for building more complex projects, without employing JavaScript frameworks or data APIs.

Loading thumbnail…

Fork of Fork of Cat smiley

This example renders a stylized cat smiley face using React, D3.js v7, and SVG. It shows a yellow circular face with purple ears, orange eyes with pupils, and a purple mouth, all composed of geometric primitives and arcs. The code builds the mouth and ears with `d3.arc`, while eyes and eyebrows use circles, ellipses, and lines, with transforms rotating and positioning each part. The entire drawing is centered via a single SVG group and rendered declaratively through React components.

Loading thumbnail…

Fork of Cat smiley

This example presents a decorative cat-themed smiley face rendered as a scalable SVG graphic. The visualization composes a pink face with purple stroke, styled eyes with eyeballs, and a black smile, all centered within an 850x455 pixel viewport. Built with React and D3 v7, the code leverages D3’s `arc()` API to generate mouth, eye, and ear paths with specific inner/outer radii and angle ranges. Additional geometric elements like ellipses, lines, and circles are positioned via SVG primitives, with colors and stroke widths applied directly.