P

PallaviManupati

@PallaviManupati·19 public vizzes

Loading thumbnail…

DV Fork for geo for world

This example renders a world map using a natural Earth projection in D3 v5. It loads TopoJSON country boundaries from a GitHub gist and converts them to GeoJSON features with the `topojson.feature` API. The visualization displays a blue sphere as the globe backdrop and yellow country shapes with black strokes, drawn via `d3.geoPath` and `d3.geoNaturalEarth1`. The map is presented as static SVG paths, with styling applied through CSS classes.

Loading thumbnail…

ICE8 - Family Tree

This interactive family tree visualization displays a hierarchical genealogy chart rooted at Sammaiah, with branches extending to children and grandchildren. The tree uses color-coded nodes by generation type and animated expanding/collapsing interactions. Built with D3.js v3, it implements a custom `d3.layout.tree()` for positioning, with SVG rendering for nodes and links. The visualization includes tooltips, zoom and drag behavior, and transition animations. Node data comes from a JSON file, with CSS styling handling visual properties like node appearance, link strokes, and hover states.

Loading thumbnail…

ICE-8 USA Map

This example displays a choropleth-style map of the United States with state boundaries and a blue spherical background. The visualization uses `d3.geoAlbers` and `d3.geoPath` to project and render geographic features from a TopoJSON dataset loaded via `d3.json` from the us-atlas repository. State interiors are drawn as red mesh lines using `topojson.mesh`, while the land mass appears in light green. The React component `CountryMap` constructs the SVG paths, with the map rendered at 1800 by 550 pixels.

Loading thumbnail…

ICE-8 Continents of World

This visualization displays the continents of the world as a force-directed network graph, with blue circular nodes representing each continent and blue lines showing connections between them. Node labels appear next to each circle. The example uses D3 v4, specifically `d3.forceSimulation` with forces for link, charge, and centering to position the nodes. Data is loaded as JSON from a GitHub gist containing node and link information, and the visualization renders using SVG elements within a React-based HTML page.

Loading thumbnail…

DV Family tree ICE_8

This example shows an interactive family tree visualization rendered as an SVG, with nodes labeled by family member IDs and colored according to data attributes. The tree layout uses D3 v5’s `tree()` and `hierarchy()` functions, with horizontal links drawn via `linkHorizontal()` based on the loaded JSON data. Users can pan and zoom using D3’s `zoom()` behavior, while text size varies by node depth. The visualization is built with React and renders directly into the DOM, with custom Playfair Display and Calibri fonts applied.

Loading thumbnail…

DV Reusable Scatter section 1

This scatter plot uses D3 version 6 to visualize the Iris dataset, loaded from a GitHub CSV. It displays four quantitative variables—petal length and width on the axes, with sepal dimensions controlling ellipse dimensions—while color encodes species. The visualization cycles through different axis combinations every 1.7 seconds via `setInterval`, with `scaleLinear`, `axisLeft`, `axisBottom`, and `scatterPlot` functions handling scales and axes. Agent-rendered SVG circles transition between dimensions, with title text styled using the Share Tech font.

Loading thumbnail…

Fork for country and budget

This is a D3.js v5 pie chart built with SVG, visualizing country budgets for 2012. The chart uses `d3.pie` to compute arc segments and `d3.arc` to generate the path geometry, with each slice colored using `d3.scaleOrdinal`. The visualization includes a legend showing each country name and its budget value in thousands, with the data loaded from a CSV file using `d3.csv`. The code also uses `d3.select` to target the SVG element and `d3.format` for tick labels.

Loading thumbnail…

Smartphone users from 2010-2021

This interactive data visualization shows the growth of global smartphone users from 2010 to 2021 using a smooth area chart. The visualization combines a purple line with a sky-blue filled area beneath it to emphasize the upward trend over time. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, `line` and `area` generators with `curveBasis` for the smoothed paths, and `axisBottom` and `axisLeft` for labeled ticks. Data is loaded from a CSV hosted on GitHub, using `csv` and `timeParse` to process the year values.

Loading thumbnail…

Fork of line chart section 3

This chart displays the number of smartphone users from 2010 to 2021 as a single blue line, with red tick labels and green gridlines. It loads CSV data from a GitHub gist and uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render the SVG graphic. The data is parsed with d3.timeParse for the year and numeric conversion for user counts, with margins and axis labels formatted via CSS.

Loading thumbnail…

DV Reusable Scatter Plot

A reusable scatter plot shows the Iris Dataset with animated cycling between four measurement columns every two seconds. D3.js v6 libraries power the visualization: `scaleLinear` and `extent` compute axes, while `axisLeft` and `axisBottom` render tick marks. The animation updates the x-axis mapping via `setInterval`, and the SVG rendering uses a custom `scatterPlot` function with chaining methods for configuration. The plot displays sepal and petal dimensions as circles with 5-pixel radius.

Loading thumbnail…

Creating scatter DV

This example uses a D3.js v6 scatter plot to visualize the Iris Dataset, mapping petal length and petal width onto the x- and y-axes. It colors each point by species (setosa, versicolor, virginica) and uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft to render them. The SVG is sized to the window, and circles are drawn with a 4-pixel radius, showing sepal measurements as extra attributes.

Loading thumbnail…

creating scatter plot ice-6

This scatter plot visualizes the Iris dataset, mapping petal length and width to x and y axes while coloring each point by species (setosa, versicolor, or virginica). The code also extracts sepal measurements as additional data properties. Built with D3 v6, it loads the CSV via `d3.csv`, uses `scaleLinear` and `extent` for axes, and renders circles in an SVG using `join`. Axes are added with `axisLeft` and `axisBottom`.

Loading thumbnail…

Ice-6 DV marks and channels

A horizontal bar chart ranks the ten universities with the highest 2015 admission counts, using grey bars whose lengths are proportional to the admission numbers. The chart is built with React and D3 v5, using `d3.csv` to load the data from a GitHub Gist, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. The SVG output includes axis ticks and labels, rendered via React components mapping over the scale domains.

Loading thumbnail…

DATA VISUAL

This example visualizes the shape of CSS Named Colors data by displaying file statistics: size in kilobytes, row count, and column count. The code loads a CSV file using `d3.csv` and formats the parsed data with `d3.csvFormat` to compute these metrics. The resulting message appears in a styled `<pre>` element with a pink background. An embedded SVG image of a data visualization is also displayed on the page. The implementation uses D3 v5 and HTML/CSS for layout and styling.

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js, displaying the file size, row count, and column count in a styled HTML page. The page includes a custom SVG illustration and fetches a remote CSV file from a GitHub gist via the `d3.csv` method. The code counts the data length, formats the raw CSV text to estimate its size in kilobytes, and inserts the results into a `<pre>` element using standard DOM manipulation. The visualization is built with React and rendered as SVG, with CSS styling applied to the message container and heading.

Loading thumbnail…

Fork of Data set: Loading and Parsing CSV Data with D3.js

A visualization demonstrates how to load and parse CSV data with D3.js, displaying the resulting dataset's size, row count, and column count in a styled HTML page. The example uses the `d3.csv` API to fetch data from a remote GitHub gist URL and processes it with `d3.csvFormat` to calculate the data size in kilobytes. The page includes custom CSS styling for headings and message text, alongside an embedded SVG image (City.svg) displayed below the data summary.

Loading thumbnail…

face

A smiley face rendered in SVG slowly raises and lowers its blue eyebrows. The animation is created with D3.js v5 transitions, which adjust the vertical transform of an eyebrow group over two one-second durations. The static face parts—pink head, green eyes, and a mouth arc—are built using D3's `select`, `append`, and `arc` APIs on the SVG canvas.

Loading thumbnail…

blank face

This visualization depicts a simple smiling face composed of SVG circles, featuring a large green head with a blue outline and two black eyes. Rendered using React and D3 v7, the graphic is constructed through JSX elements with hardcoded numeric values for positioning and sizing. The code demonstrates basic SVG shape creation within a React component, using JSX curly brace syntax to pass JavaScript values for circle coordinates, radii, and stroke properties, all displayed against a clean, margin-free page.

Loading thumbnail…

crying

This example displays a crying face, built with React and rendered as an SVG. It uses D3’s `arc()` generator to create the mouth path and circle elements for the face, eyes, and outline. The `d3.arc()` API defines the mouth’s inner and outer radii and angular range. React’s JSX syntax positions all shapes within a single translated group element.