rajkumarboddapati2

@rajkumarboddapati2·13 public vizzes

DV_ICE 8 Family Tree

This interactive family tree visualization displays a genealogical hierarchy based on the Bodapati family data, showing three generations of descendants from a single ancestor. The tree layout uses collapsible nodes, where clicking a node toggles the visibility of its children. Built with D3.js version 3.5, the visualization employs the `d3.layout.tree` for hierarchical positioning and `d3.svg.diagonal` for the curved links between nodes. SVG elements render the nodes and text, with CSS styling for colors and fonts, while animated transitions (750ms duration) smoothly move nodes between expanded and collapsed states.

Apr 13, 2023

Loading thumbnail…

DV_ICE-8 Social_Network_graph

This example visualizes a small social network as a force-directed graph, showing nine people (nodes) and their connections (links) with varying thickness based on link weight. It uses the D3.js v4 library with the older `d3.layout.force` API to position nodes and handle drag interactions. The SVG renders blue circles with labels, and link widths are scaled using `Math.sqrt(d.weight)`. Data comes from a JSON file containing node names, group assignments, and weighted links, with forces like gravity, charge, and distance controlling the layout.

Apr 13, 2023

Loading thumbnail…

DV_ICE8

This example displays a choropleth-style world map rendered with the Natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath. The visualization shows land masses filled in blue, a pale sphere background, graticule lines, and black interior borders between countries, all drawn as SVG paths. The code loads GeoJSON and TopoJSON data from the world-atlas package via d3.json and topojson.feature/mesh, with React managing the component state and rendering. A Google Fonts Poppins stylesheet complements the map’s simple color scheme.

Apr 13, 2023

Loading thumbnail…

DV_ICE8 USA Country Map

This interactive SVG map displays all 50 US states as pink regions with white borders, using a hover effect that changes the fill color to orange. Built with React and D3 v5, it applies the `geoAlbersUsaTerritories` projection via `d3.geoPath` to render geographic features from a TopoJSON dataset sourced from `us-atlas`. The data pipeline uses TopoJSON’s `feature` and `mesh` functions to generate land and interior boundaries, which are then drawn as SVG paths within a 960×600 viewport.

Apr 13, 2023

Loading thumbnail…

ICE7_Area_Chart

This area chart visualizes Apple’s revenue over a 20-year period using a smoothed curve and filled gradient. The chart employs d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.line, and d3.area with curveBasis to draw the path. Data is parsed from a CSV file via d3.csv and timeParse, then sliced to show a subset. The SVG renders axes with gridlines, while CSS styles the line, area fill, and labels.

Mar 26, 2023

Loading thumbnail…

ICE 7 Line Chart

This line chart displays Apple’s revenue over twenty years, plotting millions of dollars against time. The code loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and slices the dataset to a specific range. It uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to render the SVG visualization, with grid lines and a stylized orange stroke.

Mar 26, 2023

Loading thumbnail…

ICE_7_PieChart

This visualization displays the influence scores of the top 10 Instagram celebrities as a pie chart, with each slice representing a channel and its corresponding influence score. The chart uses D3 v5’s `pie` and `arc` generators to compute and draw the segments, while `scaleOrdinal` assigns a color palette to the celebrities. Data is loaded asynchronously from a CSV file via `getData.js` using D3’s `csv` method. A legend on the right shows each celebrity’s name and formatted score using `format('.4~g')`.

Mar 26, 2023

Loading thumbnail…

ICE_7 Iris Scatter Plot

This interactive scatter plot explores the Iris dataset, showing how sepal and petal measurements relate across three flower species, which are distinguished by distinct symbol shapes. The visualization cycles through feature pairings every three seconds, automatically updating the axes to reveal different dimensional relationships. Built as a D3 class, it generates an SVG with scales, axes, and symbol-based marks, while a legend maps each species to its corresponding shape using d3.symbol.

Mar 26, 2023

Loading thumbnail…

DV_ICE6Penguin Data set scatter Plot

This visualization displays a scatter plot of penguin data, showing flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). The code loads a CSV file from a GitHub gist and uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to parse the data and render SVG circles. Axis labels include bill length and depth, though only flipper length and body mass are used for positioning. The chart is built with React and renders to SVG in a full-window viewport, with custom font styling for axis text and a title.

Mar 9, 2023

Loading thumbnail…

DV_ICE6

This visualization presents a horizontal bar chart of population data for the top ten countries from a CSV file, sourced from a Gist. The title indicates the data is segregated by country, with population values drawn from the 2018 column. The chart uses D3.js v5 to fetch and parse the data, scale the axes, and render the bars as SVG rectangles, while React manages the component state and rendering.

Mar 9, 2023

Loading thumbnail…

ICE5

This example displays metadata about a car evolution dataset covering 1945–2020, presented as text over a background image of a car. It shows the file size in kilobytes, row count, and column count of the loaded CSV data. The visualization uses D3 v7’s `d3.csv` to fetch and parse the external dataset, then `d3.csvFormat` to calculate its size. Styling is handled with CSS, including background positioning and text alignment. The page is built with plain HTML and JavaScript, without a React framework despite the metadata listing one.

Mar 3, 2023

Loading thumbnail…

Fork of Fun Face

A fork of a playful face visualization renders a large cartoon smiley using React and D3. The SVG drawing centers on a full-screen face with detailed eyes, irises, pupils, eyebrows, hair, nose, and mouth. Each facial feature is positioned relative to the window dimensions using computed offsets and radius constants. The code defines the mouth via `d3.arc()` with specific start and end angles, while other shapes like circles and polygons are created directly with JSX elements, demonstrating a hybrid approach to SVG composition.

Feb 25, 2023

Loading thumbnail…

Fork of Fork of Fork of Danny Phantom Face

This example renders a cartoon face inspired by Danny Phantom using React and D3 v6, with all graphics drawn as SVG elements. The face is composed of separate components including eyes, irises, pupils, eyebrows, hair, a nose, mouth, and ears, each positioned using calculated offsets and D3’s `arc()` generator for the mouth. The code defines geometric properties like radii, stroke widths, and point arrays for polygons, then translates the entire group to the center of the viewport. It uses React’s `ReactDOM.render` to mount the SVG, with dimensions matching the window size.

Feb 25, 2023