Anitha Shivaramaiah

@anithashivaramaiah·23 public vizzes

AnithaShivaramaiah(11537410)(Topojson)

A map of Argentina displays its administrative departments, colored in purple with hover highlighting, projected using a transverse Mercator projection. The visualization uses d3.geoPath with a geoTransverseMercator projection and topojson.feature to render geographic boundaries from a remote GeoJSON dataset. Zoom interaction is enabled via d3.zoom, applying transforms to an SVG group. Tooltips show each department and province name using appended title elements, with styling handled through CSS classes.

Apr 13, 2023

Loading thumbnail…

AnithaShivaramaiah(11537410) Network chart

This example shows a network chart of eight named nodes (e.g., Alexa, Kathie, Gorgia) connected by weighted links, with node size and link thickness reflecting connection strength. The visualization uses the D3.js v4 force layout (`d3.layout.force`) to position nodes and edges, rendering them as SVG circles and lines. Data is loaded from a local `graph.json` file, and nodes are draggable via the force drag behavior. The chart is built using React, with styling defined in CSS for the SVG elements.

Apr 13, 2023

Loading thumbnail…

AnithaShivaramaiah(11537410)Tree Chart, ICE-8

This interactive tree chart displays the relationships among the Gowda siblings and their dog breeds, with each node representing a family member or canine companion. Built with React and the D3.js library (version 3.5.17), the visualization uses an SVG layout with animated transitions triggered by clicking nodes to expand or collapse branches. The code employs d3.layout.tree and d3.svg.diagonal to position nodes and draw curved links, while CSS styles define the pink background, blue strokes, and cyan node circles. The chart animates node movements over 750 milliseconds, updating positions smoothly as the hierarchy expands and contracts.

Apr 13, 2023

Loading thumbnail…

Anitha_Shivaramaiah (11537410) World_Map_ICE_8

This visualization displays a world map using the Natural Earth projection, with landmasses filled in teal and country borders outlined in blue. The sphere background appears yellow, while graticules and interiors are drawn as blue lines. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render geographic features, with topojson’s feature and mesh functions extracting land and country boundary data from the World Atlas dataset. React manages the SVG rendering, and CSS styles define the distinct color scheme.

Apr 13, 2023

Loading thumbnail…

Anitha Shivaramaiah(11537410) - Interactive bar chart

This interactive bar chart displays simulated sales data for makeup products across seven categories and six brand-location combinations, using a 3D column layout with depth and rotation. The chart, built with Highcharts and the Highcharts 3D module via jQuery, groups bars by product on the x-axis and stacks series by region, showing comparative performance across Nyka, Loreal, and Maybelline stores in different countries. The visualization uses alpha and beta angles for the 3D perspective, with a z-axis labeled “Region” to contextualize the spatial arrangement.

Apr 6, 2023

Loading thumbnail…

AnithaShivaramaiah(11537410) 3D Scatter plot using D3.js

This example visualizes monthly expense data across two sets of three months using a 3D scatter plot. It displays two series of markers: one mapping April, August, and December expenses, and another mapping January, February, and March expenses, each with distinct colors, sizes, and opacity. The visualization is rendered using Plotly's `scatter3d` trace type via the `Plotly.newPlot` API, while the data is loaded and parsed with D3.js's `d3.csv` function from a GitHub Gist. Interactive 3D axes with customized background colors, grid lines, and titles represent the different expense categories.

Apr 6, 2023

Loading thumbnail…

3D Scatter Plot

This 3D Scatter Plot visualizes product sales data, plotting relationships between brand, lipstick, and area code in one trace, and area code, brand, and foundation in another. The code uses D3’s `d3.csv` to load the dataset from a GitHub gist, then builds two `scatter3d` traces via Plotly’s JavaScript API, populating a `newPlot` inside the `myDiv` element.

Apr 5, 2023

Loading thumbnail…

Fork of Bonus ICE Scatter plot using D3.js

This visualization displays agricultural data from a CSV file as two interactive 3D scatter plots. The first plot maps crop production across districts, while the second shows crop year, season, and area. Using Plotly’s JavaScript API (`Plotly.newPlot`), the code creates `scatter3d` traces with marker styling for size, opacity, and color. D3.js (`d3.csv`) fetches and parses the remote data, which is then transformed into trace objects via the `unpack` function. The chart renders inside a dedicated HTML `div`, demonstrating integration of D3 for data loading and Plotly for 3D visualization.

Apr 5, 2023

Loading thumbnail…

AnithaShivaramaiah (11537410) 3D Bar Chart with D3.js

This example shows monthly expenses from January through December for multiple expense categories as a 3D multi-series bar chart. The chart renders in an X3DOM scene, driven by the d3-x3d library alongside d3-3d, with D3 v5 loading CSV data from a GitHub gist. The code uses `d3.csv` to parse the data, `d3.select` to attach the chart to a div, and the `d3.x3d.chart.barChartMultiSeries()` component to generate the 3D visualization. Axes and scales are not explicitly customized, relying on the chart component’s defaults.

Apr 5, 2023

Loading thumbnail…

Anitha Shivaramaiah (11537410) ICE-7, Area chart

This area chart displays earnings data from 2012 to 2023, using a pink filled area with a dark blue line to emphasize trends over time. The visualization loads CSV data via `d3.csv`, parses dates with `scaleTime`, and maps costs using `scaleLinear`. It renders axes with `axisLeft` and `axisBottom`, applies `curveBasis` smoothing to both the `line` and `area` generators, and includes gridlines via tick sizing. The SVG output uses custom CSS classes for styling and labeled axes.

Mar 30, 2023

Loading thumbnail…

Anitha Shivaramaiah (11537410) - ICE 7, Pie Chart

This pie chart visualizes monthly expenses by sorting the data by amount and displaying the top ten cost categories as colored slices with a legend listing each expense name and its dollar value. The chart is rendered as an SVG using D3 version 5, loading CSV data from a GitHub gist and leveraging `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for layout, shape generation, and color mapping. Mouseover events log the expense amount to the console.

Mar 30, 2023

Loading thumbnail…

Anitha Shivaramaiah (11537410) - Line chart

This line chart displays earnings data from 2012 to 2023, plotting yearly cost values as a red path against a time-based x-axis and linear y-axis. The visualization loads CSV data from a GitHub gist, parses it with `d3.csv`, and renders using SVG inside a React framework. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the line is constructed via `d3.line` and scales using `d3.scaleTime` and `d3.scaleLinear`.

Mar 30, 2023

Loading thumbnail…

AnithaShivaramaih(11537410) - ICE-7 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, exploring relationships between measurements of petals and sepals. Species (setosa, versicolor, virginica) are color-coded, and a dynamic x-axis cycles through four measurement types via interval-based animation. Built with React and D3 v6, the visualization uses the `select`, `csv`, `scaleLinear`, and `axisLeft` APIs to render SVG elements, including circles, legends, and labels. The axis titles update alongside the changing data dimension, providing a compact view of species characteristics across multiple dimensions.

Mar 29, 2023

Loading thumbnail…

AnithaShivaramaih(11537410) - ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, displaying the relationship between petal length and petal width for three species of iris flowers. Each flower is represented as a colored dot, with yellow, pink, and purple distinguishing Iris-setosa, Iris-virginica, and Iris-versicolor respectively. The plot uses D3 v6's scaleLinear function to map the data coordinates to screen space, with axes generated by axisLeft and axisBottom. The visualization also includes additional encoded attributes, as the circles have rx and ry values set from sepal measurements, though these do not affect the standard circle rendering. Data is loaded from a remote CSV file using D3's csv function, and SVG elements are rendered directly to the browser window.

Mar 29, 2023

Loading thumbnail…

Anitha Shivaramiah (11537410) ICE6

This bar chart displays the total crime rates in Ukraine for each year, sorted in descending order. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map years and crime totals to SVG rectangles. Data is loaded from a CSV via `d3.csv`, with axes rendered using `axisLeft` and `axisBottom` equivalents manually drawn through tick elements, and all marks styled with light blue fills.

Mar 24, 2023

Loading thumbnail…

Anitha Shivaramaiah 11537410 (ICE-5): The Shapes of Data

This visualization displays a review of makeup products, presenting the information through a static SVG banner with a custom background image. The page uses D3 v5 and CSS to structure the HTML document, featuring a large title and a link to the dataset. The core rendering relies on inline SVG elements, including a patterned rectangle that embeds a base64-encoded image, demonstrating how raw SVG and data URIs can be combined to create a visually rich composition within a React framework.

Mar 9, 2023

Loading thumbnail…

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

A dense, overlapping field of randomly generated, semi-transparent polygons forms the background, all layered atop a single, large, orange Buddha outline path. The visualization appears as a chaotic, colorful abstract composition where the sacred figure emerges from a storm of geometric noise. Rendered as SVG, it uses React to map over an array and generate many rotated, randomly colored polygon elements, while the Buddha itself is a predefined SVG path. The effect is created by directly embedding D3 and React in the HTML, with the Buddha’s path data sourced from the code.

Mar 2, 2023

Loading thumbnail…

Fork of Buddha Mask

A Buddha mask rendered from hundreds of randomly placed SVG lines and circles, colored with a radial gradient and a cyan drop shadow. The visualization applies a clipPath to constrain the generative mark placement to the mask silhouette. Built with React components and D3.js, it constructs the mask path from a hardcoded SVG path string and uses d3.line for line generation within a 960 by 500 coordinate space.

Mar 2, 2023

Loading thumbnail…

Fork of Buddha in colors

A dense cluster of small, semi-transparent circles is scattered across a black background, each circle colored with a random RGB value. The circles are generated by nesting three arrays of numbers and using Math.random to position them, creating an abstract, chaotic field. Overlaid on this is a single large, smooth SVG path depicting a Buddha figure, rendered in a single color with a thick stroke. The visualization uses React to manage the SVG elements and JavaScript's Math.random for procedural generation, with data derived from hardcoded coordinates.

Mar 2, 2023

Loading thumbnail…

Fork of Fork of Buddha Mask

This example renders a Buddha-mask silhouette filled with hundreds of randomly positioned, colored lines and circles, creating an abstract, textured composition. A React component generates the shapes using nested array maps, while D3’s line generator and gradient definitions are defined but not directly applied to the final output. The SVG applies a `clipPath` to confine the geometric noise to the mask’s path, and a radial gradient adds a golden hue over the dark green linear-gradient background.

Mar 2, 2023

Loading thumbnail…

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

A colorful SVG composition overlays a dense scatter of semi-transparent circles with a large, intricate Buddha path rendered in bold strokes. The circles are generated using nested array maps with random positions and RGB fill values, while the Buddha shape comes from a hardcoded SVG path. Built with React and rendered as SVG, the sketch produces an abstract, multi-layered visual where the geometric randomness contrasts with the structured religious iconography.

Mar 1, 2023

Loading thumbnail…

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

This visualization displays overlapping, randomly positioned and colored diamond shapes layered over a detailed Buddha silhouette path. The React application renders SVG polygons using nested `Array.map` calls, with each polygon’s coordinates and fill color generated via `Math.random()`. A separate SVG `<path>` element draws the Buddha figure using hardcoded coordinates, while CSS sets a black background with hidden overflow.

Mar 1, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face composed of SVG circles and an arc-shaped mouth, centered on a blank canvas with a black outline. The face is built using React components, with D3’s `arc` generator defining the mouth path based on start and end angles. Coordinates for the eyes and mouth are derived from fixed offsets and radius values, while the face’s overall size adapts to the viewport height. The code uses `ReactDOM.render` to mount the SVG element into the page, leveraging both React 16 and D3 v5 for layout and rendering.

Mar 1, 2023