Baswa Sathvika Reddy

@sathvika07·13 public vizzes

ICE - 8 Tree

A family tree visualization uses D3.js and SVG to show an eight-generation hierarchy of named individuals. The tree is built with `d3.stratify` from flat parent-child data and laid out by `d3.tree`. Animated transitions expand the link paths and circle nodes, while node fill colors encode generation depth via a custom `setGeneration` function. Text labels identify each person.

Apr 4, 2022

Loading thumbnail…

ICE - 8 Tree 1

The visualization renders a family tree as a structured diagram, starting from a single great-grandparent and branching through generations down to individual children. It displays each person as a red-outlined circle with their name placed beside it, using straight lines to connect parents to their offspring. The tree uses `d3.stratify()` to organize the hierarchical data and `d3.tree()` to compute node positions. Animated transitions with `transition().duration()` reveal links, circles, and text labels sequentially, with text appearing progressively slower for deeper generations. The SVG output is built dynamically from a hardcoded dataset.

Apr 4, 2022

Loading thumbnail…

ICE - 8 Country Map

This example visualizes the eight counties of Sweden as a choropleth map, with each landmass filled in a light blue color and white internal borders delineating county boundaries. The map uses a Mercator projection fitted to the SVG canvas, with geographic paths generated via `d3.geoPath`. The data is loaded from a TopoJSON file using `d3.json`, then converted into GeoJSON features and a mesh with `topojson.feature` and `topojson.mesh`. The visualization is built with React and D3 v5, rendering all marks as SVG elements.

Apr 3, 2022

Loading thumbnail…

ICE - 8 Network Map

This interactive network map, titled "ICE - 8 Network Map," visualizes the relationships between eight individuals, where nodes are sized and colored by group and links show weighted connections. The force-directed layout, implemented with the legacy `d3.layout.force` API, applies gravity and charge to position nodes, while the SVG rendering uses circles for nodes, text labels for names, and lines for edges with stroke-width proportional to link weight. The graph loads its structure from `data.json` and allows users to click and drag nodes to explore the topology.

Apr 3, 2022

Loading thumbnail…

ICE - 8 World Map

This example displays a world map as a sphere with country boundaries, landmasses, graticules, and interior borders rendered in SVG. It uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to draw geographic features, with TopoJSON providing country and land data from World Atlas. React manages the component state, fetching the TopoJSON data asynchronously and passing it to a `Marks` component that applies CSS-styled paths.

Apr 1, 2022

Loading thumbnail…

ICE 7 - Pie Chart

This pie chart displays crime rates across ten U.S. states, with each slice labeled by state name and accompanied by a legend showing the corresponding count. Built with D3.js v3, the visualization uses `d3.layout.pie` to compute arc segments, `d3.svg.arc` for rendering the donut shape, and `d3.scale.category20` for slice colors. State names appear as text labels positioned via `arc.centroid`, while a separate legend group lists each state with its count. The chart is rendered as SVG, with styling applied through HTML elements.

Mar 27, 2022

Loading thumbnail…

ICE-7 Scatterplot

This animated scatterplot visualizes the Iris Dataset, plotting petal width against sepal length with points colored by species (setosa, versicolor, virginica) in red, teal, and blue. Using D3.js, the visualization cycles through different column pairings every two seconds—including sepal width, petal length, and sepal length—via setInterval, dynamically updating the axes and circles without user interaction. The SVG rendering uses d3.scaleLinear, axisLeft, and axisBottom to construct the coordinate system.

Mar 26, 2022

Loading thumbnail…

ICE 7 - Area Chart

The area chart displays daily average air temperature variations in Belgium for 2021, plotted as a smooth line over time. Built with D3 v6, the visualization uses an SVG rendering approach with a linear gradient for the line color and a red fill for the area beneath the curve. The code imports `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `curveBasis`, and `line` APIs to fetch and process the data, construct the axes with grid lines, and generate the smoothed path. The resulting chart includes labeled axes for months and temperature, with a title, all styled via a separate CSS file.

Mar 26, 2022

Loading thumbnail…

ICE 7 - Line Chart

This line chart displays daily average air temperatures in Belgium for 2021, using a red gradient line to trace temperature trends over time. The x-axis shows months with grid lines, while the y-axis labels temperature values. Built with D3 v6, it uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to generate a smooth path. The SVG renders axis ticks with a brown gradient fill, and the line’s color comes from a linearGradient defined in the SVG defs.

Mar 26, 2022

Loading thumbnail…

ICE 6

This interactive scatter plot visualizes the Iris Dataset, mapping petal length to the x-axis and sepal length to the y-axis for all samples. Built with D3 v6, it uses `d3.csv` to load data, `scaleLinear` with `extent` for domain scaling, and SVG circles rendered via `selectAll` and `join`. Axis labels are added as SVG text elements with rotation for the y-axis.

Mar 6, 2022

Loading thumbnail…

Assignment 6

A horizontal bar chart displays the top 15 movies by rank within a year, with movie titles labeled on the y-axis and rank values on the x-axis. Built with React and D3.js, the visualization loads data from a CSV file using `d3.csv`, scales axes with `d3.scaleBand` and `d3.scaleLinear`, and renders the ranking bars as SVG rectangles. Gridlines mark each tick value on the x-axis, while the axes are drawn manually without dedicated axis components.

Mar 6, 2022

Loading thumbnail…

Fork of Fork of HTML

This example displays a static SVG illustration of an architectural structure alongside computed metadata about a movie dataset. The page presents the data properties—file size in kilobytes, row count, and column count—in large text below the graphic, fetched asynchronously from a CSV file using `d3.csv`. The visualization combines hand-authored SVG shapes with D3 v5’s data-loading and formatting utilities (`d3.csvFormat`) within a React-based project, rendering the result as a plain HTML page with custom CSS styling.

Feb 23, 2022

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face is rendered as an SVG graphic using React for component structure and D3’s `arc` generator to create the mouth shape. The face consists of a yellow circle with a black stroke, two eye circles, and an arc path for the mouth, all centered via a D3 `arc` with specified inner and outer radii and angular angles. The code uses React’s `ReactDOM.render` to mount the SVG into the DOM, with hardcoded dimensions and offsets for the eyes and mouth. D3 v5 and React 16.9 are loaded from a CDN.

Feb 16, 2022