Abhinav-Mullapudi

@Abhinav-Mullapudi·15 public vizzes

ICE-8 Animal Tree

This interactive visualization presents a hierarchical classification of animals as a branching tree. Built with D3.js v3, it uses an SVG-based layout with collapsible nodes, colored rectangles, and directional links to illustrate relationships between categories like vertebrates and non-vertebrates. The tree reads from a JSON data file and supports zoom and drag navigation via `d3.behavior.zoom`. Node colors correspond to taxonomic levels, while tooltips and click interactions reveal additional details about each group.

Mar 30, 2023

Loading thumbnail…

ICE-8 Social Network

This visualization displays a social network graph representing the relationships among nine individuals, with nodes connected by weighted links. The code uses d3.layout.force (the v3-style force layout) to position nodes, with link thickness based on the square root of each connection's weight. Circles and text labels are rendered as SVG elements, and users can drag nodes to rearrange the layout. A yellow tooltip appears on hover to show each person's name, while the force simulation continuously updates node and link positions.

Mar 29, 2023

Loading thumbnail…

ICE8 Task 1 "Country Map"

This visualization displays a map of the United States, using a light green fill for land areas and red lines to highlight state boundaries. Built with React and D3 v5, it leverages the `geoAlbersUsaTerritories` projection and the `geoPath` method to render geographic features. TopoJSON’s `feature` and `mesh` functions process the US Atlas states topology data, producing the land shapes and interior borders shown in the SVG output.

Mar 29, 2023

Loading thumbnail…

World Map( Task 1 )

This example displays a world map using a natural Earth projection, rendering countries as SVG paths with light green fills and red strokes against a sky-blue sphere. It loads geographic data from the World Atlas TopoJSON dataset and parses it with `topojson.feature`. The visualization uses `d3.geoPath` with `d3.geoNaturalEarth1` for projection, and data joins drive the creation of each country path. The dark gray background and hidden overflow frame the centered map.

Mar 29, 2023

Loading thumbnail…

ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris flower dataset, encoding sepal length against petal width while distinguishing species by symbol shape and color—diamonds for virginica, pluses for versicolor, and dots for setosa. Built as a reusable D3 chart following Mike Bostock’s pattern, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbol` for markers, and `d3.axisLeft`/`d3.axisBottom`. An animation cycles the x-axis through all four numeric variables every 10 seconds via `setInterval`.

Mar 13, 2023

Loading thumbnail…

ICE-7 Area_Graph

This interactive area chart displays the number of car registrations in Austin over fiscal years. The visualization uses a layer of area, circle, and rule marks to show the trend, with mouseover interactions that highlight the nearest data point and display its value. Built with Vega-Lite API and D3.js, it loads CSV data from a remote URL and renders to an SVG canvas.

Mar 13, 2023

Loading thumbnail…

ICE-7 Line_Graph

This line graph charts car registrations in Austin over time, using fiscal year on the x-axis and number of cars on the y-axis. It layers a line, circles, and interactive hover selectors using vega-lite-api, with a mouseover rule and text labels showing exact values. The visualization loads CSV data via d3.csv, configures axes and styling through a custom Vega-Lite config, and renders with the Vega view and vega-tooltip for enhanced interactivity.

Mar 12, 2023

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart displays Austin car registrations by fiscal year from 2013–2021. The visualization uses d3.pie and d3.arc to generate SVG segments, with d3.scaleOrdinal assigning colors and d3.csv loaded from a GitHub Gist. Mouseover events reveal tooltips, while a legend lists each year. The chart includes ten color-coded slices, with data aggregated from the CSV’s CARS column and rendered as static, non-animated SVG paths.

Mar 12, 2023

Loading thumbnail…

ICE-7(1)

This animated scatter plot cycles through the four Iris flower measurements, displaying them on the x-axis one at a time. The visualization uses a color-coded marker system to distinguish between the three species of Iris flowers within the dataset. The animation is driven by a `setInterval` function that updates the scatter plot's x-axis data every two seconds. The plot is rendered using SVG and built with the D3.js library, leveraging its modules for data parsing, linear scaling, and axes creation. The Iris dataset is loaded from a remote URL in CSV format.

Mar 12, 2023

Loading thumbnail…

Scatter Plot for Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and bill length for three penguin species, with each species color-coded. The code loads CSV data via d3.csv, scales the x and y axes with d3.scaleLinear, and renders colored circles as SVG marks. Axis labels and a title are added using D3's axisBottom and axisLeft functions. The visualization is built with D3 v5 and React, rendered as SVG in a full-window layout.

Mar 9, 2023

Loading thumbnail…

ICE-6

This interactive bar chart displays the top 12 bowlers with the most wickets in a calendar year, using a horizontal layout with labeled axes. The visualization loads data from a CSV file via `d3.csv` and renders the chart as an SVG. React manages the component state and lifecycle, while D3's `scaleBand` and `scaleLinear` position the bars and ticks. The code explicitly draws gridlines, axis labels, and rectangles for each data point, with the title "Most Wickets by a Player in a calender Year" displayed above the chart.

Mar 9, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the basic cost of Netflix in 15 different countries using a horizontal bar chart rendered as SVG. The application uses React to manage state and render the chart, while D3 v5 handles data loading via `d3.csv`, scaling with `d3.scaleBand` and `d3.scaleLinear`, and margin calculations. The data is fetched from a GitHub-hosted CSV file, and the bars are drawn as `<rect>` elements positioned and sized using the D3 scales.

Mar 6, 2023

Loading thumbnail…

ICE5

This example displays information about bowlers who took the most wickets in a calendar year, providing metadata about the dataset through a text message on the page. It uses D3.js v7 to load a CSV file from a GitHub Gist via `d3.csv`, computes the data size in kilobytes, row count, and column count using `d3.csvFormat`, and renders the results as plain text in a `<pre>` element. The page also features a background SVG image applied through CSS.

Mar 2, 2023

Loading thumbnail…

WINK

WINK renders a single stylized face constructed from layered SVG primitives. The face contains a radially gradient-filled background circle, two offset eyes (one circular, one elliptical), an arched mouth, and a set of drawn teeth lines. The React application uses D3's `arc` API within the `Mouth` and `Teeth` components to define path geometries, while the `FaceContainer` sets up the SVG canvas and gradient definitions. All positional parameters—like eye offset, mouth radius, and tooth spacing—are explicitly configured in the main `index.js` file.

Feb 23, 2023

Loading thumbnail…

smile.js!

A smiley face with animated eyebrows demonstrates basic DOM manipulation and SVG rendering in D3.js v5. The visualization constructs a red circle with a blue stroke, two eyes, rectangular eyebrows, and an arc-based mouth using D3 selection and shape-generating functions. The eyebrows move up and down via chained `transition` calls over five-second durations, showcasing D3's ability to animate SVG attributes. The code directly selects the SVG element, appends groups, and applies transforms to position facial features.

Feb 23, 2023