Shashi42

@Shashi42·12 public vizzes

ICE-8.4 - Social Network - 11545863

This example visualizes a social network of individuals connected by friendship links, with nodes colored by group membership and labeled with names. The network uses a force-directed layout via `d3.forceSimulation`, applying `forceLink` for edges, `forceManyBody` for repulsion, `forceCollide` to prevent overlap, and `forceCenter` for centering. Nodes are rendered as SVG circles with labels and are draggable via `d3.drag`, while links appear as lines with arrow markers. Data comes from a JSON file containing node groups and link relationships.

Apr 11, 2023

Loading thumbnail…

ICE-8.3 Family Tree - 11545863

A stylized family tree depicts a genealogy for the Targaryen lineage, using a hierarchical tree layout. The visualization renders an SVG composed of colored circular nodes and connecting curved paths, with each node’s radius and stroke color encoding values from the data. Built with React and D3.js v5, the code uses `d3.tree()` and `d3.hierarchy()` to compute the layout while iterating through descendant nodes to draw links and circles, with styling applied via inline attributes and a linked stylesheet.

Apr 11, 2023

Loading thumbnail…

ICE-8.2 - Europe Countries

This visualization displays a map of European countries rendered as filled SVG paths with black borders against a light blue background. It uses a Mercator projection centered on Europe, with D3’s `d3.geoPath` generator to convert GeoJSON features into drawable paths. The country polygons load from a remote GeoJSON URL via `d3.json`, while `d3.select` constructs the SVG container. Each path is styled with a consistent yellow fill (`#ffe084`) and stroke, creating a clean, uniform choropleth-like base map without additional data encoding.

Apr 11, 2023

Loading thumbnail…

ICE-8.1 - World Map - 11545863

This example displays a world map using natural Earth projection, with countries filled in yellow and a light blue ocean outline. The map is rendered as SVG paths using D3's `geoNaturalEarth1` and `geoPath` APIs, with graticule lines and country borders shown in black. Hovering over a country reveals a tooltip with the country name. The geographic data comes from the VisionsCarto World Atlas TopoJSON dataset, loaded via the `topojson-client` library.

Apr 10, 2023

Loading thumbnail…

ICE-7.4 Area Chart

This area chart visualizes sales cost trends from 2000 to 2013, with a line overlay and a light green filled region beneath it. It uses D3 v5 with d3.scaleTime and d3.scaleLinear for axes, d3.area and d3.line generators with curveBasis smoothing, and renders as an SVG via React. Data loads from a CSV hosted on a GitHub Gist, and axes include formatted tick labels and gridlines.

Mar 26, 2023

Loading thumbnail…

ICE-7.3 Line Chart

This line chart visualizes sales costs from 2000 to 2013, with year on the x-axis and sales cost on the y-axis. The SVG rendering uses D3 v5 scales, including `scaleTime` and `scaleLinear`, along with `axisBottom` and `axisLeft` for axes. A green line, generated via the `line` function, connects the data points. The chart’s title and axis labels are added as text elements, and the data is loaded from a CSV file using D3’s `csv` function.

Mar 26, 2023

Loading thumbnail…

ICE-7.2 Pie Chart

This pie chart displays the average annual income of different professions. The data is loaded from a CSV file via a Gist URL and visualized using D3 v5’s `pie` and `arc` functions to generate SVG path segments. Each slice is colored with a categorical scale (`scaleOrdinal` and `schemeCategory10`), and a legend lists each profession alongside its corresponding color swatch and formatted income value, with the title indicating the comparison of average incomes.

Mar 26, 2023

Loading thumbnail…

ICE-7.1 - Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris Dataset, cycling through four different x-axis columns every two seconds while keeping sepal_length on the y-axis. Implemented with D3 v6, it uses a custom `scatterPlot` function with getter-setter methods, `scaleLinear` for axes, `scaleOrdinal` for species-based symbols and colors, and SVG paths with animation. The code loads CSV data via `d3.csv`, renders with `d3.axisLeft` and `d3.axisBottom`, and relies on `setInterval` to animate the visual transitions.

Mar 26, 2023

Loading thumbnail…

ICE6.2: Scatter Plot for Penguin Dataset by Body Mass vs Flipper Length

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between body mass and flipper length with each point colored by species (Adelie, Chinstrap, or Gentoo). The D3.js v6 code loads CSV data from a GitHub gist, uses `scaleLinear` and `extent` to map the quantitative variables to screen coordinates, and renders circles via SVG. Additional metadata encodes culmen length and depth as point radii, though the `rx` and `ry` attributes do not alter circle shapes as they are not used with the `rect` element.

Mar 12, 2023

Loading thumbnail…

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

This visualization shows the spending scores of customers across different professions using horizontal light-blue bars. It loads CSV data from a GitHub gist via `d3.csv` and renders the first 55 records as an SVG chart. The code combines React hooks (`useState`, `useEffect`) with D3 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Axes are manually constructed using D3 tick values, while bars are drawn as SVG `<rect>` elements positioned and sized by the scales.

Mar 12, 2023

Loading thumbnail…

ICE5 - Shashidhar Kalapatapu - 11545863

This visualization displays metadata from an Instagram Top Users Dataset, including the file size in kilobytes, number of rows, and number of columns. The page, styled with a background image of the Instagram logo, loads the dataset asynchronously from a CSV URL using D3.js v7. The code calls `d3.csv()` to fetch and parse the data, then uses `d3.csvFormat()` to calculate the dataset size. Results are written to the DOM via `textContent` on a `<pre>` element, with hyperlinks providing access to the raw dataset.

Mar 1, 2023

Loading thumbnail…

Face - Shashidhar Kalapatapu - 11545863

A stylized human face rendered as an SVG drawing using D3.js. The face features a circular head, eyes with pupils, eyebrows, a mouth with teeth lines, ears, hair as a polygon, and a nose as a polyline. Eyebrows animate vertically over four seconds using chained `transition().duration()`. The visualization is built with D3's `select`, `arc`, and SVG shape methods, using hardcoded coordinates for each facial element.

Feb 25, 2023