B

bodushivani2601@gmail.com

@bodushivani2601-jpg·26 public vizzes

Loading thumbnail…

tree Fork of Vanilla D3 Vibecoding Template

This example shows a hierarchical tree of food categories, from “Food” down through “Fruit” and “Vegetable” to specific items like “Orange” and “Carrot.” It loads data from a local CSV file and builds the hierarchy using `d3.stratify()`, then lays it out with `d3.tree()`. The SVG rendering draws curved links via `d3.linkHorizontal()` and positions colored node circles and labels according to the computed tree coordinates.

Loading thumbnail…

shivani map 2 Fork of Vanilla D3 Vibecoding Template

A U.S. state population choropleth map visualizes 2020 Census data using a log-scaled color gradient. The map renders states as SVG paths via `d3.geoPath` with an Albers USA projection, coloring each state through `d3.scaleLog` and the `d3.interpolateYlGnBu` interpolator. Hovering highlights state borders and shows a tooltip with the population value. The map also includes a gradient legend with log-spaced color stops. The code loads TopoJSON data from the us-atlas package and uses D3 v7.

Loading thumbnail…

shivani ice 8 Fork of Vanilla D3 Vibecoding Template

This D3.js (v7) world map uses a choropleth to show the most recent year of United Nations population data (from the `datasets/population` GitHub repository). Country colors are mapped to population using a log-scaled YlGnBu interpolator to handle data variance, and the SVG rendering applies a Natural Earth projection via `d3.geoNaturalEarth1`. The map includes graticule lines, hover tooltips with a `d3.select`-based title element, and a log-scale gradient and axis legend using `d3.axisBottom`.

Loading thumbnail…

network map Fork of Vanilla D3 Vibecoding Template

A force-directed network graph displays six people grouped into three clusters, with link thickness encoding connection weight and node color indicating group membership. The D3.js v7 visualization uses `d3.forceSimulation` with link, charge, center, and collision forces to position nodes, while draggable circles and hover tooltips reveal individual IDs and group numbers. Data loads from a local `graph.json` file, and a legend maps each group to its color in the SVG-rendered chart.

Loading thumbnail…

ice 8 Fork of React & D3 Vibecoding Starter

This interactive bar chart displays the frequency of letters from a CSV file, with bars that respond to clicks by highlighting the selected letter and dimming others. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and a React `useDimensions` hook with `ResizeObserver` to adapt to container size. The `.join` operator efficiently updates SVG rects, while CSS transitions animate fill and opacity changes on hover and selection.

Loading thumbnail…

incls 8 shivani Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes Fisher’s Iris dataset, comparing sepal length against sepal width with species distinguished by color. The D3 v7 code uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to render an SVG chart, loading data via `d3.csv`. Interactive legend hover highlighting fades non-selected species, while a separate world map using `d3.geoNaturalEarth1`, `d3.geoPath`, and TopoJSON is also included in the files.

Loading thumbnail…

Area chart ice 7 shivani

This area chart displays total YouTube views by channel rank for a curated set of top creators. The chart shows a clear decline in views from the highest-ranked channels, with a shaded blue area beneath a line plotted using `d3.area` and `d3.line` with `curveMonotoneX` smoothing. Data is loaded via `d3.csv()` from a static CSV file, with axes rendered using `d3.axisBottom` and `d3.axisLeft`. The visualization uses D3 v7 to map rank and view counts on linear scales.

Loading thumbnail…

ice 7 shivani line chart

This line chart visualizes the relationship between YouTube channel rank and total views from a dataset of top creators, showing views descending steeply from MrBeast to Eminem. The SVG rendering uses D3 v7’s `d3.csv` to load data, `scaleLinear` for both axes, and `d3.line()` with `curveMonotoneX` to draw the smoothed path, supplemented by circles marking each of the ten data points. Axes labels and formatted ticks, such as “~s” for abbreviated view counts, clarify the quantitative comparison.

Loading thumbnail…

ice 7 shivani piechart

This pie chart visualizes the distribution of YouTube subscribers by country for the top 10 most-subscribed channels, based on data from a CSV file listing creators, subscriber counts, and country. D3.js v7 is used with `d3.csv` to load and parse the data, `d3.rollup` to aggregate subscriber totals by country, and `d3.pie` with `d3.arc` to generate the pie slices. A categorical `d3.scaleOrdinal` with `d3.schemeCategory10` colors each country, and labels are positioned using `labelArc.centroid`. An SVG legend lists countries with formatted subscriber counts.

Loading thumbnail…

shivani ice7

This scatter plot visualizes the relationship between subscriber counts and total views for the top 10 YouTube channels, with circle size encoding channel rank and color distinguishing country of origin. It uses D3 v7's `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs, rendering as SVG with interactive hover tooltips. The chart also includes a custom legend built with D3 selections. Data is loaded from a local CSV file using `d3.csv`.

Loading thumbnail…

ice6barchartshivani

This visualization compares sepal dimensions across three Iris species using a D3.js scatter plot. It presents sepal length and sepal width for each flower, with points colored by species according to a supplied BBC color theme. The code utilizes `d3.csv` for data loading, `scaleLinear` and `scaleOrdinal` for scales, `axisBottom` and `axisLeft` for axes, and supports interactive point fading through a legend. Data comes from Fisher's Iris dataset.

Loading thumbnail…

ICE6-ComboChartShivani

This scatter plot visualizes the Iris dataset, comparing sepal length and sepal width across three species (setosa, versicolor, and virginica) using a BBC-style color palette. Each species is represented as a distinct colored circle, with the points colored via CSS classes defined in the stylesheet. The visualization uses D3 v7 to load CSV data, create linear scales with `d3.scaleLinear`, and render axes with `d3.axisBottom` and `d3.axisLeft`, while a custom `renderLegend` function provides interactive hover highlighting that fades non-hovered species to 20% opacity.

Loading thumbnail…

ICE6-ScatterPlotShivani

This scatter plot visualizes the Iris dataset, comparing sepal length and width across three species of iris flowers. The chart uses color-coded points to distinguish between setosa, versicolor, and virginica species, with an interactive legend that highlights points of a selected species when hovered. Built with D3 v7, the visualization employs scales such as `scaleLinear` and `scaleOrdinal` to position points and assign colors from a BBC-inspired palette. The data is loaded from a CSV file, and the rendering uses SVG elements with custom styling for axes, labels, and titles.

Loading thumbnail…

ice6barchart shivani

This interactive scatter plot visualizes Fisher's Iris dataset, comparing sepal length and width across three iris species (setosa, versicolor, virginica). The visualization uses D3 v7 to render SVG elements, with data loaded from a CSV file. Users can hover over legend items to highlight corresponding data points, which are dynamically reordered. The chart includes labeled axes, a title, subtitle, and source attribution, with BBC-inspired color styling applied via CSS classes.

Loading thumbnail…

ice6barchart shivani

This scatter plot visualizes the Iris dataset, comparing sepal length and width across three flower species with color-coded points. The chart includes hover interactivity through its legend, which highlights and fades points by species. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to render the SVG visualization, with data loaded from a CSV via `d3.csv`.

Loading thumbnail…

ice 6 shivani

This scatter plot compares sepal length and width across three iris species, with interactive legend highlighting that fades non-matching points. It uses d3.csv for data loading and d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, and d3.axisLeft for rendering. The visualization applies BBC-style color themes and responsive sizing via ResizeObserver. Data comes from Fisher's Iris dataset, styled with configurable point properties like radius, opacity, and stroke.

Loading thumbnail…

ICE6-BarChart

This scatter plot uses d3.v7 to visualize the Fisher's Iris dataset, depicting sepal length and width for three iris species. It leverages `d3.scaleLinear` for the axes and `d3.scaleOrdinal` for color mapping, with a legend. Points are SVG circles whose opacity fades when hovering over legend items. The styled chart includes a title, subtitle, and source attribution, using BBC Graphics color themes.

Loading thumbnail…

Shivani Fork of ICE5 Spotify Artists Data Overview

This example demonstrates a minimal data-loading preview for a CSV file from a GitHub gist, displaying the file size, row and column counts, and a table of the first ten rows. The code uses the D3 v7 library’s `d3.csvParse` and `d3.select` APIs, along with the native `fetch` function, to retrieve and parse the data before rendering an HTML table. The visualization emphasizes raw data inspection rather than graphical representation, serving as a practical tool for verifying dataset structure and integrity.

Loading thumbnail…

shivani Fork of ICE5

This bar chart visualizes clothing item counts by category from a dataset of 100 movie-related rows. Each category, such as Accessories, Traditional, and Top, displays an SVG icon, a text label, and a horizontal bar scaled by frequency. The visualization uses d3.csv to load data, d3.scaleLinear for proportional bar widths, and SVG elements with hover effects that change bar fill color. Summary statistics show total items and category names above the chart.

Loading thumbnail…

Shivani Fork of Sports dataset ICE-5 Assignment

This visualization displays sports data from a CSV file, presenting a data summary, a preview table of the first five rows, and a dynamic bar chart rendered as SVG. The code uses D3.js v7 to load and parse the CSV data via `d3.csv`, infer column types, and calculate statistics like mean, min, and max for numeric columns. It then dynamically generates bars representing the top five players by goals or points, using `d3.select` and `d3.scaleLinear` to scale the values. The SVG also includes decorative shapes and axes to create an abstract poster aesthetic.

Loading thumbnail…

Fork of Fork of Sports dataset ICE-5 Assignment

This visualization displays a sports dataset loaded from a remote CSV file, presenting a numerical summary, a table preview of the first five rows, and a dynamic bar chart rendered in SVG. Built with D3 v7, the code uses `d3.csv` to fetch data, `d3.scaleLinear` to map values for bar heights, and `d3.select` to update the chart. The example also includes decorative shapes and axes within the same SVG canvas, with styling handled by external CSS.

Loading thumbnail…

Fork of Sports dataset ICE-5 Assignment

This interactive data-exploration tool displays a sports dataset loaded from a CSV file hosted on GitHub Gist. The visualization presents a data summary with a column statistics table, a preview of the first five rows, and a dynamic bar chart rendered as SVG. The application uses D3 v7 to fetch the CSV data via `d3.csv`, infer numeric columns, and compute statistics like mean, min, and max. It draws the bars directly onto an SVG poster element, with player names and their corresponding goals or points values.

Loading thumbnail…

Fork of ICE-5 Local Cafes Visualization

This fork visualizes the Iris dataset, showing how sepal length and width vary across species. The scatter plot encodes species with distinct colors from the BBC theme, and includes an interactive legend that fades non-hovered points. It uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.csv` to load life from a GitHub gist.

Loading thumbnail…

ICE-5 Local Cafes Visualization

This visualization shows the Iris dataset, comparing sepal length and sepal width across three iris species using an interactive scatter plot. The chart uses D3.js v7 with SVG rendering, employing `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to map the measurements and display axes. Points are colored by species using BBC-themed colors from `theme.js`, with a legend that supports hover highlighting via `mouseenter` and `mouseleave` events, fading non-selected species. The dataset is loaded via `d3.csv` from a remote gist URL.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes the Iris dataset, comparing sepal length against sepal width across three flower species using a BBC-inspired color palette. The D3 v7 code loads CSV data via `d3.csv` and builds the chart with `scaleLinear`, `scaleOrdinal`, and axis components. Interactive legend filtering uses hover events to fade non-matching points, with the theme and layout configured through a separate config module.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three iris species. It uses D3.js with a declarative approach, leveraging D3’s `scale`, `axis`, and SVG selection APIs to draw axes, circles, and a hoverable legend. The chart is styled with a custom BBC-inspired color theme and loads data from a remote CSV, with interactivity that fades non-hovered species.