P

PavaniMangugari

@PavaniMangugari·27 public vizzes

Loading thumbnail…

Mexico map

This choropleth-style map displays the regions of Mexico, with each state rendered as a closed path. The visualization uses a Mercator projection, centered on the country’s coordinates, and draws a graticule overlay in a contrasting color. The map is built with D3 v6's `geoMercator` and `geoPath` functions within a React component. State boundaries originate from ArcGIS data, which is converted to GeoJSON via mapshaper and then loaded through D3's `json` method in the `getMexico.js` file.

Loading thumbnail…

Network Chart

This network chart visualizes connections between named individuals using a force-directed layout. Nodes are rendered as pink circles with violet text labels, while orange links between them have stroke widths proportional to the link weight data from the local `graphFile.json`. The visualization uses the older `d3.layout.force` API (from d3 v4) with gravity, charge, and distance parameters to position the graph, and supports interactive dragging of nodes. The SVG is drawn dynamically, with each node’s position updated on every tick event.

Loading thumbnail…

Family Tree

This interactive family tree visualization displays hierarchical relationships among family members using a collapsible tree layout. The D3.js v3 library constructs the diagram as SVG elements, with nodes represented as colored rectangles that branch from a root ancestor. The tree loads its structure from a JSON data file, and users can click individual nodes to expand or collapse their branches. The visualization includes zoom and pan capabilities through D3's behavior API, while a custom tooltip system displays additional information on hover.

Loading thumbnail…

country map

This example displays a map of the United States with state boundaries, rendered as SVG paths using D3’s `geoAlbers` projection and `geoPath`. It shows land areas in blue, a graticule sphere in purple, and state interiors highlighted with yellow strokes. The map loads US Atlas TopoJSON data from jsdelivr, processes it with `topojson.feature` and `topojson.mesh`, and is built within a React component using the `geoGraticule` API to draw the graticule lines.

Loading thumbnail…

World Map

This example shows a world map with countries rendered as light blue polygons outlined in yellow, which highlight pink on hover. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, applying the `geoEquirectangular` projection and `geoPath` generator to draw the sphere and country boundaries as SVG paths. Country hover effects are styled via CSS.

Loading thumbnail…

Pavani_ICE

This example shows a 3D scatter plot of fruit data, plotting vitamins, calcium, and fruit type along the x, y, and z axes. It includes two traces: one with tiny blue marker lines and another with larger green circles outlined in orange, both set to 80% opacity. The visualization is built using Plotly.js, specifically the `Plotly.newPlot` method and the `scatter3d` trace type, while data is loaded from a CSV file using D3.js’s `d3.csv` function.

Loading thumbnail…

3D Scatter Plot

This interactive 3D scatter plot visualizes nutrient data for fruits, plotting Vitamins, Calcium, and Protein along the x, y, and z axes. It loads a CSV from a GitHub gist using D3’s `d3.csv` function, then passes the parsed rows to Plotly’s `Plotly.newPlot` method. The visualization uses a `scatter3d` trace with blue circular markers and green outlines, styled with custom axis titles and colors. The chart is embedded in an HTML page with a heading and is rendered inside a designated `div` element.

Loading thumbnail…

Bonus ICE 3D Bar Chart

This 3D bar chart visualizes the number of awards won by Tollywood actors from 2017 to 2022, with each actor represented as a cluster of six bars corresponding to yearly totals. The visualization is built using the d3-x3d library, which bridges D3.js v5 and X3DOM for in-browser 3D rendering. Data is loaded from a CSV file via `d3.csv`, then parsed and passed to the `barChartMultiSeries` component, which generates the interactive 3D scene displayed in a 700-pixel-wide container.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between weight loss and number of days across genders, with an animated axis cycling through three data dimensions every two seconds. Built with D3.js v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `circle` elements update via data joins. The chart sources CSV data from a GitHub gist and animates through Gender, Weightloss, and Numberofdays columns using `setInterval`. SVG rendering with CSS styling provides a clean, interactive presentation.

Loading thumbnail…

Fork of Pie_chart_Us_states_density

This visualization shows the top 10 US states ranked by population density, displayed as a color-coded pie chart with a corresponding legend listing each state and its density in thousands. The chart is rendered as an SVG using D3.js v5, with slices generated by `d3.pie()` and `d3.arc()`, and colors assigned via `d3.scaleOrdinal()`. Data is loaded asynchronously from a CSV file, and density values are formatted with `d3.format`.

Loading thumbnail…

Area Chart Facebook Users

This area chart visualizes Facebook’s annual user growth from 2008 to 2017, emphasizing the rising trend through a filled curve beneath a black line. Built with D3 v5, it uses `scaleLinear`, `scaleTime`, `line`, `area`, and `curveBasis` to generate smooth SVG paths, while `axisBottom` and `axisLeft` render labeled axes. Data is loaded via `csv` from a GitHub gist, with both the line and area paths appended to an SVG group. The chart highlights the dataset’s upward trajectory through the combination of stroke and fill styling.

Loading thumbnail…

Fork of Line Chart for Facebook Users

This line chart displays Facebook’s annual user counts from 2008 to 2017. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` functions to map the data. The SVG renders a single blue stroke path, with styled tick labels and axis titles, while the data is loaded from CSV files via `d3.csv` and parsed to a Date object for the time axis.

Loading thumbnail…

Fork of Line Chart for Facebook Users

This line chart displays Facebook’s annual user counts from 2008 to 2017. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` functions to map the data. The SVG renders a single blue stroke path, with styled tick labels and axis titles, while the data is loaded from CSV files via `d3.csv` and parsed to a Date object for the time axis.

Loading thumbnail…

Line Chart for Facebook Users

This line chart shows the annual number of Facebook users from 2008 to 2017. The visualization uses D3 v5 to load CSV data from a GitHub gist. The code employs `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` for tick marks. A `d3.line` generator creates the path, which is rendered as an SVG element with a custom stroke style.

Loading thumbnail…

Pie Chart US State Density

A pie chart displays the top 10 US states by population density, with each slice colored and sized proportionally to its density value in thousands. The visualization includes a legend with state names and formatted density labels. Data is loaded asynchronously from a CSV file via `d3.csv`, then processed and rendered using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. The SVG is generated with d3 v5 and uses `d3.format` for tick label formatting, with all visual elements drawn as SVG paths and rectangles.

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot visualizes the Iris Dataset, showing relationships between sepal and petal measurements across four variables. The code uses d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map data points to SVG circles. A setInterval cycles the x-axis through different dataset columns every two seconds, animating the scatter plot’s configuration. The chart is built as a reusable function following the "Towards Reusable Charts" pattern, with configurable width, height, margins, radius, and accessor functions.

Loading thumbnail…

Scatter Plot for Iris Data

This scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal measurements. Points are colored by species, with setosa in green, versicolor in purple, and virginica in red. The visualization uses D3's scaleLinear for axes, extent for domain calculation, and axisLeft/axisBottom for chart rendering. The code loads CSV data, parses numeric fields, and renders circles with SVG. The plot demonstrates how D3's selection joins and margin calculations work to create a functional scatter plot.

Loading thumbnail…

Bar Graph

This horizontal bar chart displays student enrollment counts for nine university courses, ranging from 20 to 85 students. Green rectangles represent enrollment figures on a linear scale, with subject names labeled along the y-axis. The visualization is drawn as an SVG using D3 v7, employing scaleLinear for the x-axis, scaleBand for categorizing the y-axis, and axisLeft/axisBottom for generating tick marks. Data loads from a CSV file containing course names and enrollment numbers, with the subject labels rotated vertically on the left.

Loading thumbnail…

Ice

This example displays a fixed, decorative SVG illustration of a snowman-like figure composed of basic shapes, overlaid on a pastel background with a yellow star. Below the graphic, a message reports the size and structure of a dataset loaded from a remote CSV URL of 48 countries’ capitals. The code uses the D3.js v7 library’s `d3.csv` method to fetch and parse the data, and `d3.csvFormat` to calculate its size, updating a `<pre>` element with row and column counts.

Loading thumbnail…

Ice

This example displays a static SVG illustration of a map-like shape alongside a table of U.S. state population data. The visualization loads a CSV file from a GitHub gist using `d3.csv` and reports the dataset’s size, row count, and column count in a text element. All rendering occurs in SVG within a React framework, with minimal styling applied via CSS.

Loading thumbnail…

Ice-5 Pavani Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing a CSV dataset of population figures for 51 U.S. states using D3.js v7. The page displays the data title prominently and prepares an SVG canvas for potential visualization, though no data-driven chart is rendered. The code uses the D3 library’s CSV parsing capabilities via a script tag from unpkg, alongside custom CSS styling for text elements. The approach is a minimal HTML document that integrates D3 for data ingestion, with a static SVG placeholder indicating the intended rendering space.

Loading thumbnail…

Face

A smiley face rendered with React and D3 displays a yellow circle with black-outlined features, including eyes, eyebrows, and a mouth, all centered on a 960 by 500 SVG canvas. The code uses D3’s `arc()` generator to create the curved mouth, lips, and eyebrows, while React manages the component structure and DOM updates. Static positioning values for offsets and radii define the facial geometry, and the SVG is drawn directly via React elements without external data.

Loading thumbnail…

Make a face - Pavani Mangungari

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face out of SVG shapes. The code builds a face from basic elements: a large orange circle for the head, two eyes, eyebrows drawn with D3’s `arc()` function, a nose, and a mouth. Using D3’s `select` and `append` APIs, each feature is positioned relative to a central group, with the eyebrows placed atop the eyes to showcase how SVG paths can be crafted with parametric arc geometry. The rendering is pure SVG, with styling managed through a separate stylesheet.

Loading thumbnail…

Pavani

A smiley face drawn with orange fill and black stroke animates its rectangular eyebrows upward and back down in a looping two-second transition. Built with D3.js v5, the code uses `select`, `arc`, and chained `transition()` calls to shift the eyebrow group’s transform. The face is composed of SVG circles, a path mouth created with the arc generator, and rects for eyebrows, all centered in a 960×500 viewport.

Loading thumbnail…

Pavani

This visualization shows a smiley face drawn with basic D3.js shapes, featuring animated eyebrows that move up and down in a looping transition. The code uses D3 v5 to manipulate SVG elements directly, creating a yellow circle for the face, two smaller circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrow animation chains two `transition().duration(2000)` calls to move them up and then back down, demonstrating fundamental DOM manipulation and SVG rendering with D3.

Loading thumbnail…

Pavani

This visualization shows a stylized smiley face built with SVG shapes in React, using a large yellow circle as the head, two eyes with green pupils and purple irises, and a curved mouth formed by a D3 arc path. The face is centered on a 960×500 canvas, with black stroke outlines defining each element. The code uses React 17 for component rendering, D3 v7’s `arc` function for the mouth geometry, and hardcoded coordinates for the eyes, eyebrows, and decorative lines that suggest hair or accessories.

Loading thumbnail…

Pavani M

A yellow smiley face with black outlines, eyes, and eyebrows is drawn in SVG, and its rectangular eyebrows animate upward and back down over two seconds each way. The example demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending a centered group, and building the face with circles and rectangles. The eyebrows’ motion uses chained `transition` calls to tween the group’s `transform` attribute, while the mouth is created with the `d3.arc` path generator.