A

anushaanumula

@anushaanumula·23 public vizzes

Loading thumbnail…

ICE8 - Interactive Tree Graph

This interactive tree graph displays an animal hierarchy, from a root "Animals" node branching into Herbivores, Omnivores, and Carnivores, with further subcategories like Lions and Tigers. Clicking any node collapses or expands its children, animating the reorganization with smooth transitions. Built with the React framework and rendered using SVG, the visualization leverages D3.js version 3.5 APIs like `d3.layout.tree` for positioning, `d3.svg.diagonal` for link paths, and node transitions via the `.transition().duration()` method. Circles and text labels are styled through CSS classes, with alternating fill colors indicating expandable nodes.

Loading thumbnail…

ICE-8 Tree with d3.js

This example presents an animal taxonomy as a tidy tree diagram rendered in SVG. The code uses `d3.stratify()` to convert the parent-child data into a hierarchy and `d3.tree()` to compute node positions. Circular nodes are color-coded by depth using a custom `marker` function, with curved links drawn as cubic Bézier paths between connected nodes. Labels appear to the right of each circle, and the visualization is built with d3.v5 within a React application.

Loading thumbnail…

ICE 8 Map - China

This interactive map displays China’s administrative provinces as colored paths, rendered using a `d3.geoMercator` projection on an SVG canvas. Users can zoom and pan the map via `d3.zoom`, which transforms the grouped geometry. The visualization loads GeoJSON data from a GitHub gist, applies `d3.geoPath` to convert features into SVG paths, and colors each province with a categorical `d3.scaleOrdinal` scheme. The code leverages TopoJSON’s `feature` API to extract polygon geometries before styling them with CSS rules for fill and stroke.

Loading thumbnail…

ICE-8 World Map

This example displays an ICE-8 world map, rendering countries as blue filled shapes with white outlines against a light blue spherical backdrop. It uses a Mercator projection via d3.geoMercator and draws the geographic paths with d3.geoPath. The SVG output is generated through React, with country boundaries parsed from a TopoJSON file using the topojson feature function. The visualization loads geographic data from a GitHub gist and styles the map using CSS, with the sphere and country paths colored separately for contrast.

Loading thumbnail…

ICE-8 Network Map

This visualization displays a social network map of named individuals, rendered as an interactive force-directed graph. Nodes represent people, while weighted links indicate connections between them. The graph is implemented using the D3.js library, specifically utilizing the older `d3.layout.force` API for the physics simulation and SVG for rendering. Data is loaded asynchronously via `d3.json` from a local file, with each node styled as a white circle with a black stroke and labeled with the person's name. The force-directed layout applies gravity, distance, and charge parameters to position nodes, and the entire visualization is embedded within a React framework.

Loading thumbnail…

Untitled

This example shows a force-directed network graph with circular nodes and connecting lines, rendered as an SVG. The visualization loads JSON data from a GitHub gist, positions nodes using a physics simulation, and displays the resulting layout. The code uses d3.forceSimulation, d3.forceLink, d3.forceManyBody, and d3.forceCenter to compute node positions, then updates the SVG circle and line elements during each simulation step.

Loading thumbnail…

3D Bar Chart using D3.js

This example shows a 3D bar chart visualizing PS4 sales across global regions, with each bar representing a game and segments for North America, Europe, Japan, and the rest of the world. It uses the d3-x3d library to render the chart as X3D scenes within a React page, combining d3.csv for data loading and standard D3 scales for layout. The chart holder initially loads random data, then replaces it with the parsed CSV data from a GitHub gist, displaying the multi-series bars in an interactive 3D space.

Loading thumbnail…

Bonus ICE - 3D Bar chart

This example presents a 3D bar chart visualizing PS4 game sales across five titles, broken down by region and global totals. Each game appears as a set of depth-enhanced, stacked columns along the x-axis, with sales values mapped to the y-axis. The chart uses the Highcharts library with its highcharts-3d module, configuring options3d for rotation and depth, and defines series for North America, Europe, Japan, Rest of the World, and Global sales. The x-axis categories list the game titles, while the y-axis and z-axis are labeled for total sales.

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes the relationship between length, breadth, and the resulting area and volume for squares and rectangles. Two sets of markers are rendered: red circles for area and green diamonds for volume, each positioned in three-dimensional space based on the CSV data. The example uses Plotly’s `Plotly.newPlot` method to create the `scatter3d` traces, with data loaded via D3’s `d3.csv` function. Axis titles and marker styling are configured through the layout object.

Loading thumbnail…

3D Bar Chart - PS4 Sales

This example visualizes PS4 sales as an animated 3D bar chart, where each bar represents a data point and drops with a shadow effect to emphasize depth. The chart uses D3 v2 with an ordinal x-axis, a linear y-axis, and SVG rendering, applying a drop-shadow filter via `feGaussianBlur` and `feOffset`. Data transformations and bar construction are managed through custom functions, with jQuery handling the initial plot trigger. The axis tick labels are dynamically mapped to captions for clarity, and the rendering relies on D3's `d3.svg.axis` and `d3.scale.ordinal`.

Loading thumbnail…

Untitled

A grid of colored 3D cubes displays varying heights, with each cube's height labeled numerically on its top face. Users can click an "update" button to refresh the data, which generates new random height values for each cube. The visualization supports interactive rotation by dragging the mouse, allowing the entire cube arrangement to be viewed from different angles. The code uses the d3-3d library to project cube vertices, computing visible faces and sorting them for proper depth rendering, while handling mouse drag events to update the rotation angles and re-render the SVG paths and text labels accordingly.

Loading thumbnail…

Inetractive pie chart-ice7

This interactive pie chart visualizes global PS4 game sales, highlighting top titles like Grand Theft Auto V and Call of Duty: Black Ops 3. It uses the Google Charts loader to load the corechart package and renders the data via a PieChart instance. The static dataset is embedded directly in the code as an array, and the chart is drawn into a designated div with a title and fixed dimensions.

Loading thumbnail…

Pie Chart

This pie chart visualizes global sales figures for PS4 games, with each slice labeled with its corresponding sales value in thousands and accompanied by a legend listing game titles. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate and color the SVG segments, while data is loaded asynchronously from a CSV file using `d3.csv`. Text labels and legend entries are positioned via arc centroid calculations and manual translation transforms.

Loading thumbnail…

Area chart

This example visualizes PS4 sales from 2015 to 2022 using an area chart, highlighting the yearly sales trend with a filled region beneath the curve. Built with React and D3 v5, the code leverages `select` for SVG manipulation, `scaleTime` and `scaleLinear` for axes, and `axisBottom`/`axisLeft` for tick generation. The area is created via `area()` with a `curveBasis` smoothing. Data is loaded from a GitHub CSV using `csv`, with sales values parsed as numbers and years as dates, rendered entirely as SVG.

Loading thumbnail…

Line Chart for PS4 Global Sales

This line chart visualizes global PS4 sales per year from a CSV dataset. The x-axis maps time using `scaleTime`, while the y-axis uses `scaleLinear` for sales figures. The `line` generator creates the green path, with axes rendered via `axisBottom` and `axisLeft`. Titles and axis labels are added through SVG `text` elements. Data loading and processing use D3’s `csv` method, and the visualization is rendered entirely in SVG. The chart highlights yearly sales trends, with gridlines indicated by tick marks extending across the plot area.

Loading thumbnail…

Google Chart Example

This example displays a scatter plot of daily household survey data from KwaZulu-Natal from 2008 to 2014, with years on the x-axis and daily values on the y-axis. It uses Google's visualization API to render the chart, loading data from a CSV file via jQuery and the jquery.csv plugin. The code defines chart options for titles and axis ranges, then draws the scatter plot into a designated div element.

Loading thumbnail…

temp

This animated scatter plot visualizes PS4 sales data across global regions, cycling through Rest of World, Japan, Europe, and Global sales on the x-axis with Rest of World on the y-axis. Colored circles (red for Japan, green for Europe, blue for Global) represent game titles, while a legend and dynamic axis labels update via setInterval. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.axisBottom/axisLeft for scales and axes, and SVG rendering with animated transitions between variables.

Loading thumbnail…

Ice7-Reusable D3 Scatter Plot

This reusable scatter plot, built with D3.js, visualizes PS4 video game sales data, showing the relationship between sales figures in different regions (Global, North America, Europe) and the year of release. The plot updates its x-axis and data points every two seconds, cycling through these different sales metrics for the same y-axis. Constructed using D3’s modular components like `scaleLinear`, `axisLeft`, and `axisBottom`, the chart is designed to be idempotent and reusable. It renders as an SVG with an animation driven by `setInterval`, and uses the `csv` function to load data from a remote URL.

Loading thumbnail…

ICE7- Scatter plot

This interactive scatter plot visualizes global sales data for PlayStation 4 games, with each circle representing a game positioned by release year and worldwide sales. The visualization uses vega-lite-api to build the chart and d3.csv to load data from a Gist-hosted CSV file derived from the UCI Machine Learning Repository’s Auto MPG dataset. Publishers are distinguished by color, and hovering reveals the game title via vega-tooltip. The chart encodes quantitative fields for year and global sales, with a custom color encoding for the categorical publisher field.

Loading thumbnail…

Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species. It uses d3.csv to load the data, d3.scaleLinear for the axes, and d3.axisLeft and d3.axisBottom to render the scales. The SVG circles are drawn with d3.selectAll and .join, and the visualization fills the browser window using window.innerWidth and window.innerHeight.

Loading thumbnail…

ICE-6 Anusha Anumula

This example shows the top 20 PS4 games ranked by North American sales using a horizontal bar chart, with bars representing European sales percentages. The visualization uses React for component structure and D3 v5 for data loading and scales, specifically `csv` for parsing the dataset and `scaleBand` and `scaleLinear` for positioning. SVG rectangles render the bars, with grid lines and tick labels generated manually from the linear scale. Data comes from a CSV hosted on GitHub gists, and the visualization updates reactively once the data loads.

Loading thumbnail…

ICE-5 The Shapes of Data

This example displays metadata about a Texas house rentals dataset, including its size in kilobytes, row count, and column count. It reads the data from a CSV file hosted on GitHub using D3 v7's `d3.csv` method, then calculates and presents the file size with `d3.csvFormat`. The page presents this information in a styled HTML document alongside a static SVG illustration of a house and a link to the raw dataset.

Loading thumbnail…

Anusha Anumula

A smiley face drawn with SVG shapes sits centered in a browser viewport. The code renders a yellow circular head with grey and black eyes, eyebrows, ears, and a grey mouth using React and D3’s `arc` generator for the curved paths. The visualization uses D3 v7 geometry functions for the mouth and ear arcs, while circles and ellipses are created as direct SVG elements. The static illustration demonstrates combining React components with D3-generated path data.