S

sravya7136@gmail.com

@sravya7136-sys·33 public vizzes

Loading thumbnail…

Fork of network

This conceptual food network shows hierarchical relationships between food categories, subcategories, and a root node, using a force-directed layout. The D3.js code employs `d3.forceSimulation` with link, many-body, and center forces to position nodes, while `d3.drag()` enables interactive node repositioning. Nodes and links are rendered as SVG elements whose positions update on each simulation tick. Colors distinguish node groups, and labels identify each food category. The visualization uses a hardcoded dataset of nine food-related nodes and eight links, presented in a static SVG canvas.

Loading thumbnail…

Fork of Tree

This radial tree visualization presents a four-level food hierarchy, from the root "Food" down to categories like Fruits and Vegetables, then subcategories, and finally individual items like Orange and Spinach. The D3.js v7 code uses `d3.select`, `svg.append`, and partition/treemap-style layout functions to position colored nodes and link strokes. The hierarchical JSON data is rendered as a dynamic tree, with node fill colors indicating depth level, from pink at the root to blue at the leaves.

Loading thumbnail…

Fork of network map

A compact food-and-category network uses D3 v7's `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position six colored nodes (three categories in pink, three foods in green) connected by five gray links. The force-directed layout runs on an SVG canvas, with draggable circles via `d3.drag` and text labels updated on each simulation tick. The data is a hardcoded set of nodes and links, illustrating simple relationships between items and their categories.

Loading thumbnail…

Fork of Network

A force-directed network visualizes the relationships among countries, movies, directors, and cast members for two sample films, "The Grand" and "Take Care." Using d3.forceSimulation with link, charge, and center forces, the SVG graph positions colored circles, each mapped to a category, with text labels and draggable nodes. The code builds nodes and links from a hardcoded JavaScript array, then updates positions on each simulation tick, while d3.drag enables interactive manual repositioning.

Loading thumbnail…

Fork of Tree Graph

This tree visualization displays a hierarchical food categorization system, starting with a root "Food" node that branches into categories, subcategories, and individual items. The chart uses distinct geometric shapes for each depth level: circles for categories, rectangles for subcategories, and polygons for items, with a red root node. Built with d3.v7, the code constructs a hierarchical structure using `d3.stratify()` and `d3.tree()` functions, then renders the tree with `d3.linkVertical()` for connections. Labels appear above or below nodes depending on whether they have children, with the entire SVG output styled to fill the viewport.

Loading thumbnail…

Fork of ICE-8

This example displays a movie family tree as a vertical hierarchy from countries to movies to directors to cast members. Using D3.js v7, the visualization encodes each entity type with distinct SVG shapes—rectangles for countries, circles for movie titles, triangles for directors, and diamonds for cast. The code constructs the hierarchy via `d3.stratify()` and renders it with `d3.tree()`, drawing curved links with `d3.linkVertical()`. Data consists of five hand-coded movies with their associated personnel.

Loading thumbnail…

Fork of world map

This fork of a world map visualizes the top 25 most spoken languages of 2024, shading each country according to a dominant language family. It presents a choropleth map with a legend and tooltips that appear on hover to show the country’s primary language and speaker count. D3.js v7 renders the map as an SVG, using `d3.select` to build the visualization and TopoJSON client for geographic data. The dataset is embedded in the code, mapping specific countries to their respective languages and speaker populations.

Loading thumbnail…

Fork of world map

This fork visualizes a world map using a light pink color scheme, displaying country boundaries and a graticule over a styled globe background. The rendering uses D3 v7 with the `d3.geoNaturalEarth1` projection and `d3.geoGraticule` for grid lines, while country shapes are loaded from a world-atlas TopoJSON file and converted using `topojson.feature`. The code leverages `d3.select`, `d3.json`, and the D3 `path` generator to draw the geographic data as SVG paths.

Loading thumbnail…

Fork of ICE-8 — USA States Map

A choropleth of the United States displays each state’s population from the 2020 census via a yellow-orange-red sequential color scale. The map renders with D3.js v7 and the TopoJSON library, using `d3.geoAlbersUsa` for the Albers projection and `d3.geoPath` for state boundaries. Hovering over a state reveals its population in a tooltip, while gray fills indicate missing FIPS codes from the `us-atlas` dataset.

Loading thumbnail…

Fork of ICE 8-Making Maps Using TOPOJSON hd

This visualization displays the ten most populous U.S. states in 2020 on a choropleth map, with all other states shown in a neutral gray. It loads U.S. state boundaries from a TopoJSON file and population data from a CSV, then uses `d3.geoAlbersUsa` with `d3.geoPath` to render the map as SVG. A sequential color scale using `d3.interpolateYlGnBu` encodes population values, and a linear gradient legend with `d3.axisBottom` communicates the color mapping. Hovering over a state reveals its population or a note that it is not in the top ten.

Loading thumbnail…

Fork of Assignment_8_Making maps

A choropleth map of India colors each state by its poverty rate, measured as the headcount ratio percentage, using a sequential yellow-to-red color scale with gray for missing data. The visualization loads Indian state boundaries from a TopoJSON file and joins them with poverty data from a CSV. The code uses d3.geoPath with a Mercator projection to draw the SVG paths, plus d3.scaleSequential and d3.axisBottom for a horizontal legend, with hover tooltips via SVG title elements.

Loading thumbnail…

Fork of map ice 8

This choropleth map shows poverty headcount ratios across Indian states, using a sequential YlGnBu color scale to encode percentages. Built with D3.js, it loads TopoJSON state boundaries and CSV poverty data, then renders them via a Mercator projection and `d3.geoPath`. Hovering reveals state names and exact poverty percentages in a tooltip, while a gradient legend with an axis provides context. States missing data appear gray. The code uses `d3.scaleSequential` for color mapping, `topojson.feature` for geometry conversion, and `d3.axisBottom` for the legend ticks.

Loading thumbnail…

Fork of Map

This map shows the most spoken language for a selection of countries, with each country colored according to its dominant language and popups revealing total and native speaker counts along with linguistic origin. Built with Leaflet for map rendering and D3.js for loading GeoJSON country boundaries and CSV speaker data, the visualization uses a custom hashing function to assign distinct HSL colors to each language. A legend lists the top ten languages from the data, and the color mapping reveals geographic language clusters across continents.

Loading thumbnail…

Fork of Map

This visualization combines a geographic map of India with a force-directed particle system. It uses D3.js (`d3.geoPath` and `d3.forceSimulation`) to render state boundaries and simulate particle movement, while Canvas `getImageData` samples pixel colors from the map to seed the particles with positional data. The particles originate from the map's interior and are drawn as a dynamic, flowing representation of the country's shape. The code loads GeoJSON topology data to define the map outlines and animates the particles over time.

Loading thumbnail…

Fork of Fork of area chart

This area chart shows film visitors per year in millions from 1990 to 2015, revealing a sharp decline in the early 1990s followed by a gradual recovery. The Chart.js library renders the visualization as an SVG or canvas line chart with a filled area beneath the curve, using smooth tension and hoverable data points. The code maps year data to the x-axis and visitor counts to the y-axis, with explicit axis labels and a legend.

Loading thumbnail…

Fork of Fork of Fork of line chart

This line chart shows average engagement per year from a social media misinformation dataset, revealing trends in user interaction over time. The D3.js visualization computes yearly averages from the CSV data using `d3.rollup` and `d3.mean`, then renders a smooth monotone curve with `d3.line` and `curveMonotoneX`. Points are added as circles, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The SVG rendering highlights the temporal pattern without showing individual data points.

Loading thumbnail…

Fork of pie

A pie chart displays museum visitor counts for seven sampled years between 1990 and 2017, with each slice labeled by year and colored distinctly. The chart.js library renders the visualization onto an HTML canvas element, using its `Chart` constructor with a pie-type configuration. Data is embedded directly in JavaScript as an array of objects, with visitors measured in millions; white borders and a right-positioned legend separate the slices.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot compares yearly theater and concert visitor numbers in millions, using data embedded from a culture.csv file to reveal a general decline in both over time. It renders on a Canvas element using the Chart.js library, mapping theater visitors to the x-axis and concert visitors to the y-axis. The chart includes point labels in its tooltip callbacks, which display the year alongside the corresponding values, and uses axes with explicit titles for clarity.

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between BMI and life expectancy across countries in 2021, with each circle representing a country. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the scales. Interactive hover effects trigger a tooltip that shows the country name, BMI, and life expectancy values. The chart is rendered as an SVG with animated transitions on circle hover, changing the fill color from steelblue to orange.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive visualization presents a reusable scatter plot comparing healthy lifestyle metrics from a 2021 dataset of 44 cities, including sunshine hours, pollution index, and life expectancy. Built with React and D3 v7, the chart renders as SVG and uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for gridlines. The reusable `reusableScatterPlot` function accepts configurable accessors for x and y values, labels, and tooltips, allowing multiple charts to be generated from the same dataset. A hover tooltip displays city-specific values for the selected variables.

Loading thumbnail…

Fork of ScatterPlot

This scatter plot visualizes the relationship between total bill amount and tip amount using data from the tips.csv dataset. Each circle represents one dining transaction, positioned along the x-axis for total bill and y-axis for tip. The visualization uses D3.js v7 with SVG rendering, employing d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.axisBottom/axisLeft for labeled axes. Circles are semi-transparent steelblue with a radius of 5 pixels, and axis labels are added via SVG text elements.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

A reusable D3.js scatter plot visualizes patient satisfaction scores against age, with points colored by hospital service type (surgery, emergency, ICU, or general medicine). The chart includes labeled axes for age and satisfaction score, plus a title. Built using D3 v3, the code loads patient CSV data, converts numeric fields, and calls a custom ScatterPlot function that accepts configurable accessors for x, y, and color values.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes the Iris dataset, comparing sepal length and sepal width across three iris species. The visualization uses a D3.js SVG rendering approach, with points colored by species using a BBC-inspired color palette. The chart includes interactive features such as a hoverable legend that dims non-matching points, and the code demonstrates the use of `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleOrdinal` for scaling, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is sourced from Fisher's Iris dataset.

Loading thumbnail…

Fork of Question 4: Multi-Series Chart (Bar + Line)

This fork of “Question 4” presents two SVG charts built with D3 v7. The first is a multi-series line chart with circular markers, displaying average sepal and petal measurements for three Iris species. The second is a combined bar-and-line chart that juxtaposes the same aggregated data, using the `d3.scalePoint` and `d3.scaleLinear` APIs for positioning. Gridlines, axes, legends, and a title are generated with D3’s `axisBottom` and `axisLeft` methods, while smooth lines use `d3.curveMonotoneX`. The data consists of precomputed averages from the Iris dataset.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This visualization is a bar chart displaying the frequency of letters (A through G) from a simple CSV data file. The chart shows each letter as a rounded bar, with a clean layout, axis labels, and gridlines. Built with React and D3.js v7, it uses D3's `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes. The bars change color and opacity upon click to highlight a selected letter, and the SVG rendering updates dynamically based on container dimensions.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes the Fisher Iris dataset, comparing sepal length against sepal width across three species. The chart uses custom D3.js code with `scaleLinear` for axes, `scaleOrdinal` for species colors, and `axisBottom` with `axisLeft` for ticks. The legend enables hover interactions that highlight one species while fading others. Data loads asynchronously from a CSV URL, with the visualization adapting to container resizing via `ResizeObserver`.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive bar chart visualizes how average study hours vary across self-reported stress levels, using Red as the bar color with darker and lighter opacities to indicate selected points. The React application loads a student lifestyle dataset with D3's `csv` method, groups data by stress level via `d3.group`, and computes averages with `d3.mean`. Bars are rendered as SVG rectangles with click handlers that toggle selection, while axes, gridlines, and titles are generated using `axisBottom` and `axisLeft`. A ResizeObserver tracks container dimensions to responsively update the chart.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This bar chart displays letter frequencies from a CSV dataset, with bars colored to highlight a selected letter. Built with React and D3, the visualization uses `scaleBand` and `scaleLinear` for axes, renders SVG elements via `join()`, and handles mouse clicks to toggle selection. A `ResizeObserver` in `useDimensions` tracks container size, while modular functions separate scales, axes, and bar rendering.

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This D3.js visualization loads a coffee sales CSV file and displays summary statistics about the dataset on a styled web page. It fetches the remote CSV using the Fetch API, parses it with `d3.csvParse`, and then calculates and displays the file size, row count, and column count in a dedicated summary box. The page also renders a static SVG circle graphic with D3 Data text, combining data loading and parsing with basic stat reporting.

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example demonstrates how to load and parse CSV data with D3.js, fetching a remote file using the Fetch API and `d3.csvParse`. It displays a live summary of the dataset, showing file size in kilobytes, row count, and column count on the page. The visualization includes a static SVG badge with an orange circle and text, while the page structure uses styled HTML panels. The code relies on D3 v7’s CSV parsing utilities and the browser’s native `fetch` method to retrieve the raw text from a GitHub Gist URL.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows an interactive bar chart of coffee sales data, displaying counts for different categories with clickable bars that highlight selections. Built with React hooks and D3.js, it uses `scaleBand` and `scaleLinear` for positioning, `axisBottom` and `axisLeft` for axes, and loads CSV data via `d3.csvParse` from a remote URL. A `ResizeObserver` tracks container dimensions to make the visualization responsive.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows an interactive bar chart of letter frequencies loaded from a CSV file. D3 v7 parses the data with `d3.csv`, while React manages the component state and a `ResizeObserver` tracks container dimensions. Clicking a bar toggles its highlight by updating React state, which re-renders the SVG with adjusted fill and opacity. Axes are created with `d3.axisBottom` and `d3.axisLeft`, and scales using `d3.scaleBand` and `d3.scaleLinear`.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A bar chart displays the count for each letter from A to G, with a title and labeled axes. The visualization uses D3 scales, axes, and bar rendering, with clickable bars that highlight the selected letter and dim others. React manages the application state, while D3 handles the SVG rendering. Data loads from a CSV file, and the chart responds to container resizing through a ResizeObserver.