S

SharanyaSriram

@SharanyaSriram·18 public vizzes

Loading thumbnail…

Sharanya ICE8-Networks

A force-directed network diagram displays 13 named nodes connected by weighted links. Each node is a colored circle with a label, and link thickness scales with the square root of the connection weight. The D3 v2 `d3.layout.force()` API positions the nodes in a simulated physical layout, with `charge` and `distance` parameters controlling repulsion and target spacing. As the simulation ticks, the SVG elements update their coordinates via the `force.on("tick")` callback. Node colors come from the `graph.json` file, which lists people and their pairwise connections.

Loading thumbnail…

Sharanya-ICe8- FamilyTree

This example presents an interactive, collapsible tree diagram illustrating a hierarchical classification of animals, from a root "Animals" node down through dietary categories (Herbivores, Omnivores, Carnivores) to specific species. It uses D3.js version 3.5 with the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the layout and draw curved links, while SVG circles and text nodes render the data. Clicking a node triggers a transition to expand or collapse its children, with colors for strokes and fills defined by `type` and `level` properties in the hardcoded JSON data.

Loading thumbnail…

Sharanya Sriram

This example visualizes the states of India, coloring each one with a categorical color scale and labeling it with its name. It loads TopoJSON data from a remote source, converts it to GeoJSON using `topojson.feature`, and renders the state boundaries as SVG paths via `d3.geoPath` with a `geoMercator` projection. The color assignment uses `d3.scaleOrdinal` and `schemeCategory10`, while state names are placed at path centroids. A black stroke outlines each state, with text labels sized at 8 pixels.

Loading thumbnail…

Sharanya ICE - 8: World Map

This visualization displays a world map using a Natural Earth projection, with countries rendered as green SVG paths and the ocean filled in light blue. The code uses d3.geoNaturalEarth1 and d3.geoPath to project and draw the geographic features, while topojson’s feature method extracts country boundaries from the world-atlas dataset hosted on jsDelivr. A sphere path represents the globe’s outline, and each country’s border is stroked with subtle opacity for clarity.

Loading thumbnail…

ICE8-Fork of World map

This example visualizes a world map using D3 v5 and TopoJSON, plotting circles for geographic locations. It loads world country boundaries from the World Atlas TopoJSON dataset and renders them with a natural Earth projection via `d3.geoPath`. The code queries a SPARQL endpoint for photo locations with latitude and longitude, appends circles to the SVG, and includes an incomplete attempt at using SVG patterns for image fills. A blue sphere background and purple countries define the map’s styling.

Loading thumbnail…

SharanyaFork of ICE-7: Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, encoding sepal and petal measurements along the x and y axes while using distinct colors and D3 symbol shapes to differentiate the three iris species. Built as a reusable chart function, it cycles the x-axis variable through all four measurement columns every second. The visualization uses D3 v6 scales, axes, and symbol generators to render the SVG marks, with a legend displaying species colors.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width against sepal length and encoding species with distinct D3 symbols. The visualization uses a reusable `scatterPlot` function that leverages `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, `d3.axisBottom`, and `d3.symbol` to render SVG paths. The dataset is loaded as CSV via `d3.csv` and parsed into numeric values. Axis tick labels are styled at 24px, with the plot filling the entire browser window.

Loading thumbnail…

Sharanya ICE 7 Area Chart

This area chart visualizes Dodgecoin prices from 2008 to 2021, using a blue-filled region beneath a black line to emphasize the trend in cost over time. The chart is rendered as an SVG using D3.js v5, with time-scaled x-axis and linear-scaled y-axis. Data is loaded from a CSV file via a raw GitHub gist. The code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with `curveBasis` to generate smooth, curved paths for the data series.

Loading thumbnail…

Sharanya ICE 7: Line Chart

This line chart visualizes DodgeCoin prices from 2008 to 2021, plotting cost against year on a time-scaled x-axis and a linear y-axis. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while the `line` generator creates the blue path. Data is loaded via `csv` from a Gist URL, with costs parsed as numbers and years converted to date objects. The SVG output includes bold axis labels, tick marks, and a blue title.

Loading thumbnail…

SharanyaSriram ICE - 7 Pie Chart

This pie chart visualizes the monthly price of HBOMAX subscriptions across different countries. A legend pairs each country with its corresponding cost in US dollars. The chart is built with D3 v5, using the `pie` and `arc` generators to create SVG paths and place text labels at each section's centroid. Data is loaded asynchronously from a CSV file via `d3.csv`, with colors assigned through `scaleOrdinal` and numeric values formatted with `d3.format`.

Loading thumbnail…

Sharanya ICE 7:Reusable D3 Scatter Plot

This example shows a reusable D3 scatter plot of the Iris dataset, displaying the relationship between sepal length and petal width, with points colored by species. The x-axis automatically cycles through four numeric columns every 1.5 seconds, updating the axis label and circle positions via animation. Built with D3 v6, it uses `d3.csv` to load data, `scaleLinear` and `scaleOrdinal` for scales, and `axisBottom`/`axisLeft` for axes. The SVG rendering includes a legend and custom labels, all driven by a modular `scatterPlot` function with fluent setters.

Loading thumbnail…

ICE6_SharanyaSriram Scatterplot

This scatterplot visualizes penguin data, showing flipper length on the x-axis and body mass on the y-axis, with each point colored by species (red, blue, or black). The code uses D3 v5 with SVG rendering in a React framework, loading CSV data via `d3.csv`, scaling axes with `scaleLinear` and `extent`, and drawing circles with `selectAll` and `join`. Axis labels and a title are added using SVG text elements, with tick styling via CSS.

Loading thumbnail…

Fork of SharanyaSriram

This chart shows the number of weeks each of the top 15 tennis players has played, ranked vertically with horizontal green bars. It uses React for component state and rendering, while D3 v5 handles CSV data loading and scales (`d3.csv`, `scaleBand`, `scaleLinear`). The SVG output includes custom gridlines and axis labels drawn manually via React elements, with a fixed 960×500 viewport. Data originates from a remote CSV file listing player names and weeks.

Loading thumbnail…

SharanyaSriram

A horizontal bar chart shows the number of weeks each of the top 15 tennis players competed, sorted by name. The visualization loads player data from a CSV file using `d3.csv`, then renders green SVG rectangles scaled with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axes drawn manually and tick labels positioned via React components and D3’s selection utilities.

Loading thumbnail…

SharanyaSriram-ICE6

This scatter plot displays the relationship between flipper length and body mass for penguins, colored by species (Adelie, Gentoo, and Chinstrap). The visualization loads a CSV dataset from a GitHub gist and renders circles as SVG marks using D3 v5, with `scaleLinear` for x–y axes and `axisLeft`/`axisBottom` for tick marks. Each circle’s fill is determined by a switch function mapping species to colors, while the circle’s `rx` and `ry` attributes are set from culmen measurements, though the radius remains fixed. Axis labels and a title are added as static SVG text elements.

Loading thumbnail…

Sharanya Sriram 11597311-Ice5

This visualization displays organizational data from a linked CSV file, showing dataset size in kilobytes, row count, and column count after loading. The graphic uses a basketball-reference.com-sourced background image, with D3.js (v7.3.0) handling CSV retrieval and formatting via `d3.csv` and `d3.csvFormat`. The SVG canvas remains unfilled, with information presented as text messages centered over the custom background.

Loading thumbnail…

Sharanya_11597311

This interactive smiley face visualization uses React to render a cartoon-like face composed of layered SVG shapes, including circles for the eyes, an arc-based mouth, and elliptical ears. The face is drawn using D3’s `arc()` generator for the mouth and eye/ear paths, while custom line elements create subtle facial details. The rendering relies on React 17, D3 v7, and SVG transforms to position each component around a central coordinate system. The design demonstrates how D3 geometry helpers can be combined with React’s declarative JSX markup to construct a playful, static illustration without external data.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders an emoji-like smiling face with eyes, eyebrows, and an open mouth using React and SVG. The face is drawn with circles, lines, and a path computed by d3’s `arc` generator, all positioned within a transformed group. Dimensions like eye offset, radius, and mouth width are stored as constants, and the full viewport is filled with the SVG using inline styles. The code demonstrates combining React’s component model with D3’s shape utilities for static, declarative visualization.