S

Sravanthi Silla

@SravanthiSilla·17 public vizzes

Loading thumbnail…

11540639-ICE8-Network Graph

This example shows a force-directed network graph of eight people connected by weighted links, with node labels displayed in bold cursive text. The visualization uses D3 v4’s `d3.layout.force` (with configurable gravity, distance, and charge) to position nodes and links, and renders the result as SVG via `d3.json` loading of external data. Each node is drawn as a circle with a fixed radius, while link thickness is scaled by the `weight` property from the JSON data. Users can click and drag nodes, as the simulation updates positions on each tick event.

Loading thumbnail…

11540639-World Map-ICE 8

This example displays a world map rendered as an SVG, with countries filled in pink against a green background and an aqua spherical outline. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while TopoJSON’s `feature` extracts country boundaries from a remote Worldmap.json dataset. The map is static, with no interaction or animation, and styling is applied via an external stylesheet.

Loading thumbnail…

11540639-ICE 8 Family Tree

A D3.js family tree visualization renders hierarchical data with animated transitions, showing twelve individuals connected by parent-child links in an SVG layout. The tree uses `d3.stratify` to convert the flat data structure into a hierarchy, then `d3.tree` to compute positions. Circles represent family members, colored by generation depth via a switch-case function, with labels appearing progressively. Connections animate through `transition` methods, drawing crimson paths between nodes over 1300 milliseconds.

Loading thumbnail…

United States of America Country Map

This interactive map of the United States displays state boundaries and landmasses, rendered as SVG paths with a coral fill and indigo stroke. It uses D3’s `geoAlbersUsaTerritories` projection and `geoPath` to convert TopoJSON feature and mesh data into geographic paths. React manages the component lifecycle, fetching the source JSON from a GitHub gist via `json` and `topojson`'s `feature` and `mesh` functions. The visualization updates dynamically, showing a loading message until data is available.

Loading thumbnail…

11540639 ICE 8-Country Map

This choropleth map displays U.S. states rendered as sky-blue land masses with green internal borders, using an Albers USA projection that includes territories. The visualization loads geographic data from a TopoJSON URL and processes it with `topojson.feature` and `topojson.mesh`, then draws the paths using `d3.geoPath`. Built with React, the app fetches data asynchronously in a custom `useData` hook and conditionally renders the SVG after loading completes, leveraging d3.v5 for geographic calculations.

Loading thumbnail…

ICE - 8 Making Maps (Country Map) Maanas Katta

This example shows a single country, Russia, rendered as a light green map on a medium blue background. It uses a TopoJSON world map dataset loaded via `d3.json`, with the `topojson.feature` API to extract country geometries. The map is drawn with `d3.geoPath` and the `d3.geoAlbersUsa` projection, though the projection is applied to world data. Only the feature matching the name "Russia" is selected and appended as an SVG path, using a static stroke and fill defined in CSS.

Loading thumbnail…

ICE7-11540639-Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length, petal width, sepal length, and sepal width, with each species color-coded (setosa as orangered, versicolor as green, and virginica as navy). The visualization uses D3.js (v6.7.0) with a reusable scatter plot component, loading data via `csv()`, and rendering SVG circles with animated transitions. Every two seconds, the plot cycles through different axis columns using `setInterval()` and reassigns the x-axis value, causing the scatter plot to dynamically update its layout while the y-axis remains fixed to sepal length.

Loading thumbnail…

11540639-ICE-7 Line Chart

This line chart shows the number of Walmart stores in the US over the last ten years, with years on the x-axis and store counts on the y-axis. The visualization is rendered as an SVG using D3 v5, employing `scaleTime` for the temporal axis, `scaleLinear` for the count axis, and `line` to generate the path. The chart includes labeled axes, grid lines, and a bold orange line, with data parsed from a CSV file using `csv` and `timeParse`. The styling uses custom CSS for tick labels, axis text, and the line’s appearance.

Loading thumbnail…

11540639-ICE7-Area Chart

This area chart displays the number of Walmart stores in the US from 2011 to 2021. A smooth curve, generated using the `area()` and `curveBasis` functions, fills the space beneath the line, which uses `line()`, with a deeppink color. The chart is built with D3 v5, rendering to SVG, and loads its data from a CSV file hosted in a GitHub gist by SravanthiSilla.

Loading thumbnail…

ICE7-11540639-Pie Chart

This pie chart visualizes the distribution of students across departments at UNT in 2021, using a colorful segmented ring with a side legend listing each department and its corresponding student count. It loads data from a CSV file via `d3.csv`, processes it with `d3.pie`, and renders arcs using `d3.arc` into an SVG. Color mapping uses `d3.scaleOrdinal`, and value formatting applies `d3.format`. The visualization includes a titled header and styled legends, all built with D3 v5.

Loading thumbnail…

ICE 6 11540639 - D3 Scatter Plot

This D3.js scatter plot visualizes the Iris Dataset, mapping sepal length on the y-axis against petal length on the x-axis. Each of the 150 flowers is drawn as a circle, with its fill color indicating species: green for setosa, orangered for versicolor, and purple for virginica. The code uses d3.csv to load the data, d3.scaleLinear and d3.extent to compute scales, and d3.axisLeft and d3.axisBottom to render axes with styled ticks. The SVG is sized to the browser window, and labels are added for both axes.

Loading thumbnail…

ICE 6-15540639 Rendering Marks and Channels with React, D3

This example visualizes the number of international students enrolled in UNT departments in 2016 using a horizontal bar chart rendered as SVG. The React component loads CSV data via `csv` and uses D3 scales (`scaleBand`, `scaleLinear`) to map department names to bar positions and student counts to bar widths. Custom tick marks and gridlines are drawn with D3 array methods, while React handles the SVG element creation through JSX. Styling uses pink background, green bars, and purple text labels.

Loading thumbnail…

ICE-5 Data Visualization-11540639

This example demonstrates loading and parsing a CSV dataset with D3.js, displaying a summary of the UNT International Student Information file, including size, row count, and column count, alongside a static SVG image. The code uses `d3.csv` to fetch the data from a GitHub gist and `d3.csvFormat` to calculate the dataset size in kilobytes. Styling is applied via embedded CSS, with the results rendered in a styled `pre` element and an image sourced from a GitHub repository. The page is built with plain HTML and JavaScript, using D3 v7.

Loading thumbnail…

Cat smiley

This example renders a cat-themed smiley face as a static SVG graphic using React and D3 v7. It shows a large pink circle with purple stroke for the head, red eyes with black pupils, colored whisker lines, and a black mouth constructed from D3’s `arc()` generator. Additional D3 arcs create the white eye highlights and purple ears, positioned via SVG `transform` rotations and translations. All shapes are drawn declaratively in JSX, with hardcoded coordinates and D3’s `arc` helper used for the curved paths.

Loading thumbnail…

cat smiley

A cat-inspired smiley face rendered as an SVG via React and D3 v7. The visualization displays a large sky-blue circular head with purple stroke, featuring pink eyes with brown pupils, purple ears, colored whiskers, and an arc-based mouth. D3’s `arc` generator constructs the mouth, eye highlights, and ears, while React manages the SVG elements. The code uses fixed pixel dimensions (850×455) and positions elements mathematically around a central point.

Loading thumbnail…

Cat smiley

This example draws a cat-themed smiley face in SVG, using a sky-blue circle as the head, pink eyes with brown pupils, purple ears built from arcs, and a purple curved mouth. It is built with React and D3 v7, leveraging D3’s `arc` generator to construct the mouth, eye highlights, and ear shapes. The code positions elements via SVG transforms and translations, and renders the face at a fixed 850×455 viewport.

Loading thumbnail…

Cat smiley

This example draws a cat-themed smiley face in SVG, using a sky-blue circle as the head, pink eyes with brown pupils, purple ears built from arcs, and a purple curved mouth. It is built with React and D3 v7, leveraging D3’s `arc` generator to construct the mouth, eye highlights, and ear shapes. The code positions elements via SVG transforms and translations, and renders the face at a fixed 850×455 viewport.