I

IndiraSiripurapu

@IndiraSiripurapu·16 public vizzes

Loading thumbnail…

ICE 8 : Family Tree

This interactive family tree visualization displays a hierarchical dataset of three generations, with each node color-coded per its position in the lineage. The code uses D3’s `d3.layout.tree` and `d3.svg.diagonal` to compute the layout and draw curved links, while SVG circles and text labels render each family member. Node positions animate via `transition` and `duration` settings, and the fill color for each circle is drawn directly from the `fill` property in the JSON data.

Loading thumbnail…

ICE - 8 - Map

This example visualizes the administrative regions of India as a choropleth map, with each state or territory filled by a distinct color and labeled with its name. It uses D3 v5’s `geoMercator` projection and `geoPath` to render TopoJSON boundaries loaded from a GitHub-hosted India dataset, after removing the first feature. The code applies D3’s `scaleOrdinal` with `schemeCategory10` for coloring, and positions each state label at the computed centroid of its path.

Loading thumbnail…

ICE - 8 - World Map

This example displays an interactive world map using an equirectangular projection, with countries rendered as SVG paths and a light blue sphere representing the globe. The map loads GeoJSON data from a hosted JSON file, processed through TopoJSON’s `feature` method, and draws each country with a green fill and black stroke. Hovering over a country highlights it in a warm peach color. The visualization uses D3 v5 APIs including `d3.geoEquirectangular`, `d3.geoPath`, and `d3.select`, with React as the underlying framework.

Loading thumbnail…

ICE 8 : Social Network

This example shows a small social network of 12 people grouped into five communities, with weighted links between them. It uses D3 v4’s `d3.layout.force` simulation to position nodes and links in an SVG canvas, with drag interaction enabled via `force.drag`. Node circles are styled with a yellow stroke and pink fill, while link thickness reflects the `weight` value from the `graph.json` data. The rendering is entirely SVG-based, with static node labels and a simple title header, as implemented in the provided `index.html`.

Loading thumbnail…

ICE-7: Area Chart

This area chart visualizes Apple’s revenue over a 20-year period, filtered to a subset of data points. The chart uses D3 v5 with `d3.area` and `d3.line` generators, both smoothed with `curveBasis`, to render the filled region and outline. Axes are created via `d3.axisLeft` and `d3.axisBottom`, with time-scaled x-values from `d3.scaleTime` and linear y-values from `d3.scaleLinear`. Data is loaded from a CSV file, parsed with `d3.timeParse`, and rendered as SVG elements within a styled HTML page.

Loading thumbnail…

ICE - 7 Line Chart

This line chart visualizes Apple's revenue over 20 years, highlighting fluctuations in millions. It uses D3 v5 to load CSV data, parse dates, and render an SVG with scales, axes, and grid lines. The code employs `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and a `line` generator, with data sliced from a GitHub-hosted dataset.

Loading thumbnail…

ICE - 7 Pie Chart

A pie chart displays the influence scores of top Instagram celebrities, with each slice sized by influence score and labeled with the celebrity’s channel name. The chart uses D3 v5’s `pie` and `arc` generators to compute slice angles and paths, rendered as SVG elements. Data is loaded asynchronously from a CSV file via `csv` in the `getData` module, with color mapping handled by `scaleOrdinal` and value formatting using D3’s `format`. A legend lists each celebrity with their corresponding influence score.

Loading thumbnail…

ICE - 7 - Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, encoding petal and sepal measurements as x and y positions, with species shown through distinct colors and symbol shapes. It demonstrates a modular D3 chart function that updates every five seconds, cycling the x-axis through different measurement columns using `setInterval`. The chart leverages D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `symbol`, and `symbols`, rendered as SVG paths with animated transitions between views.

Loading thumbnail…

Scatter Plot for Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length against body mass for three penguin species, each color-coded via a custom marker function. The visualization uses D3 v5 with an SVG rendering approach, leveraging `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The data is loaded asynchronously from a CSV URL and parsed with numeric conversions for quantitative attributes. Circle marks are positioned using scaled x and y values, with fill colors assigned by species. The chart includes rotated axis labels and a title, all styled with custom fonts and sizes.

Loading thumbnail…

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

This visualization displays the influence scores of Instagram celebrities as a horizontal bar chart, with each celebrity’s score encoded by bar length along a linear scale. Built with React and D3 v5, it uses React hooks (useState, useEffect) to fetch and parse CSV data via d3.csv, then renders SVG rectangles, axis ticks for the linear x-scale (d3.scaleLinear) and band y-scale (d3.scaleBand), with grid lines and labels drawn manually using React elements.

Loading thumbnail…

ICE5-Instagram

This example displays the metadata of a CSV dataset on Instagram celebrities and influencers, loaded from a gist URL. The page announces the dataset’s file size, row count, and column count in a styled message area. It uses D3 v7’s `d3.csv` to fetch and parse the data, then `d3.csvFormat` to compute the byte size. The background is a custom SVG image, and the layout relies on plain CSS for styling, with React not actively used despite the metadata.

Loading thumbnail…

SAMPLE FORK

This example displays metadata summary information about a credit card customer dataset, presenting the file size in kilobytes, row count, and column count prominently on a page featuring a credit card background image. The code uses D3.js version 7’s `d3.csv` to fetch the CSV file from a GitHub gist URL and `d3.csvFormat` to calculate its byte length. The page is styled with CSS, including a background SVG image and centralized headings, with the computed statistics rendered into a `<pre>` element via JavaScript DOM manipulation.

Loading thumbnail…

purple hair boi

This example renders a stylized front-facing portrait inspired by Danny Phantom using React and D3. It constructs the face with SVG shapes, including circles for eyes and irises, rectangles for eyebrows, and an arc path for the mouth. The hair is drawn as a polygon using manually specified coordinate points, while a polyline forms the nose. The visualization uses D3’s `arc` function for the mouth and relies on SVG primitives within a React component, positioned dynamically based on window dimensions.

Loading thumbnail…

Fork of CrazyGuy

This face visualization, titled "Fork of CrazyGuy," depicts a stylized character with eyes, eyebrows, nose, mouth, and hair. It uses React to render an SVG canvas. The face components are constructed using primitive SVG shapes like circles, rectangles, and polygons, while the mouth uses the `d3.arc` function to create an arc path. All elements are positioned relative to the center of the viewport, using computed offsets for each facial feature.

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiley face composed of SVG elements—a yellow circle, two eyes, and a curved mouth—centered on a 960×500 canvas. The visualization is built with React components split across separate files, using ES6 modules and React Fragments to group the eye elements. The mouth shape is generated with the d3.arc() API, which derives a path from specified inner and outer radii and start and end angles. All elements are positioned and scaled through React props, then rendered as SVG within the DOM.

Loading thumbnail…

Fork of Smiley Face Part V

A React application renders a yellow smiley face as an SVG, composed of a circular background, two eyes, and an arc-shaped mouth. The face is built from modular ES6 components, each defined in its own file, and uses a React Fragment to group the eye elements. The mouth is generated using the d3.arc() API with specified angles and radii. Geometry is positioned via SVG coordinate transformations, with all dimensions defined as constants in the main index.js file.