B

bhavya.kanyadara@gmail.com

@KanyadaraBhavya·21 public vizzes

Loading thumbnail…

Activity_7_Tutorial

This interactive scatter plot visualizes the classic Iris dataset, showing the relationship between sepal and petal measurements for three flower species. As the animation cycles through different column pairs, the axes update to display each measurement combination, with points colored by species (skyblue, lightgreen, and orange). The visualization uses d3.csv to load data from GitHub, d3.scaleLinear and d3.extent to calculate scales, and d3.axisLeft and d3.axisBottom to render axes. SVG circles represent data points, while setInterval drives the rotating view, and the legend displays species labels with corresponding colored markers.

Loading thumbnail…

Activity_7 Q_2

This area chart visualizes monthly sales data across twelve months, with a smooth monotone curve filling the region beneath the line in steel blue. The SVG chart uses d3.scalePoint for the categorical month axis and d3.scaleLinear for the sales values. The d3.area generator with curveMonotoneX creates the filled path, while d3.axisBottom and d3.axisLeft render the labeled axes. The dataset is hardcoded in the script, and the visualization is rendered entirely with D3 v7 in an SVG container.

Loading thumbnail…

Activity_7 Q_1

This example shows a pie chart of five books and their average ratings, using a static dataset embedded in the code. The chart is rendered as an SVG using D3 v7, with pie slices generated by the `d3.pie` and `d3.arc` functions, colored via `d3.scaleOrdinal` and `d3.schemeCategory10`. Labels are placed at each slice’s centroid, and a legend with color swatches and rating values appears on the right. The SVG is styled with a white background and subtle shadow.

Loading thumbnail…

Activity_6 Q_3

This visualization displays the relationship between chocolate products and their geographic markets using a categorical scatter plot. Each blue circle marks a combination of a product category and a geography, with the chart using rotated axis labels to accommodate the many product names. The visualization is built with D3 v6, loading CSV data from a GitHub repository and rendering to SVG. It defines ordinal scales for both axes using `d3.scaleBand()`, then positions circles at the intersection of each product-geography pair.

Loading thumbnail…

Activity_6 Task-4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across 31 vehicle makes. Each circle’s position encodes horsepower and torque, while its radius represents highway MPG, and its color distinguishes the make. The visualization uses d3.csv for data loading, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, and a legend explains bubble sizes and color categories. The chart uses SVG rendering and is built with D3 v7.

Loading thumbnail…

Activity_6 Q_4

This bubble chart visualizes relationships between GDP per capita, life expectancy, and population across countries using the Gapminder dataset. Each circle represents a country, positioned on a logarithmic GDP axis and linear life-expectancy axis, with radius encoding population via `d3.scaleSqrt()` and color mapping continents through `d3.scaleOrdinal()` with `schemeTableau10`. Animated with D3 v7 `.transition()`, circles grow from radius zero to their final size over one second. The chart includes a legend for continents and axis labels, rendering as SVG.

Loading thumbnail…

Activity_6 Task-4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes. The x-axis maps horsepower, the y-axis displays torque, while the size and color of each bubble encode MPG and car manufacturer, respectively. Hovering reveals the car make. Built with D3.js (v7) in SVG, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` for encoding, with data from `bubblechart.csv`. A legend explains the bubble size and color mappings, and an interactive tooltip appears on mouseover.

Loading thumbnail…

Activity_6 Task-4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across 31 vehicle makes. Each circle’s position encodes horsepower and torque, while its radius represents highway MPG, and its color distinguishes the make. The visualization uses d3.csv for data loading, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, and a legend explains bubble sizes and color categories. The chart uses SVG rendering and is built with D3 v7.

Loading thumbnail…

Activity_6 Q_3

This scatter plot visualizes the relationship between city MPG and highway MPG across vehicle classes, with each point representing a car model and colored by its class. The chart uses D3 v6’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to map data coordinates and render the axes. Vehicle class determines the color through the `schemeCategory10` palette, while tooltips display the make, model, year, and class. The data is loaded via `d3.csv` from a GitHub repository, and the visualization is rendered as an SVG.

Loading thumbnail…

Activity_6 T_3.2

This static scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length for three flower species: setosa, versicolor, and virginica. Each species is distinguished by a unique geometric symbol—diamonds, squares, and triangles—along with a distinct color. The visualization is rendered as an SVG using the D3.js v7 library. It loads the CSV data from a GitHub repository, applies linear scales to map the measurements to pixel coordinates, and draws axes with `d3.axisBottom` and `d3.axisLeft`. A custom HTML/CSS legend identifies the species and their corresponding shapes and colors.

Loading thumbnail…

Activity_6 T_3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower and coloring points by species: setosa in blue, versicolor in purple, and virginica in orange. The SVG visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render circles. The code assigns petal measurements to the x- and y-axes while also reading sepal dimensions into the circle attributes, though the visual encoding focuses on the petal scatter with a red title and green axis labels.

Loading thumbnail…

Activity_6 Q_2

This stacked bar chart displays the proportional distribution of clothing items across five price ranges (below 1.0 to above 4.0). The visualization shows how each clothing category compares in relative percentage across the price brackets, with labels on segments wider than 40 pixels. The chart uses D3 v7 with `d3.stack()` and `d3.stackOffsetExpand` to create normalized 100% stacked bars, while `d3.scaleBand` and `d3.scaleLinear` handle positioning. Each bar segment includes a tooltip via SVG `<title>` elements, and the legend maps color-coded price ranges. The data originates from a static CSV file containing clothing categories and their associated price range values.

Loading thumbnail…

Activity_6 Q_2

This stacked bar chart displays the proportional distribution of clothing items across five price ranges (below 1.0 to above 4.0). The visualization shows how each clothing category compares in relative percentage across the price brackets, with labels on segments wider than 40 pixels. The chart uses D3 v7 with `d3.stack()` and `d3.stackOffsetExpand` to create normalized 100% stacked bars, while `d3.scaleBand` and `d3.scaleLinear` handle positioning. Each bar segment includes a tooltip via SVG `<title>` elements, and the legend maps color-coded price ranges. The data originates from a static CSV file containing clothing categories and their associated price range values.

Loading thumbnail…

Activity_6 Task_2

This visualization shows the distribution of game ratings across eight gaming platforms, using stacked horizontal bars to display the proportion of games in five rating categories from below 5.0 to above 8.5. Each platform row is divided into colored segments representing these rating bands, making it easy to compare rating profiles across PlayStation, Xbox, Nintendo, Steam, and other services. The chart is built with D3 v7, using d3.stack() and d3.scaleBand() to construct the stacked bar layout, with d3.scaleOrdinal() assigning colors to rating categories. Data comes from a CSV file loaded via d3.csv(), and the SVG rendering includes custom axes and a title.

Loading thumbnail…

Fork of Activity6 Q_1.2

This bar chart displays the population of up to twenty countries for 2010. The React application uses d3’s `scaleBand` and `scaleLinear` to map country names and population values to screen positions. SVG rectangles, defined in the `Marks` component, render each bar, with hovering revealing a tooltip formatted by d3’s `format` function. The chart’s axes are drawn from the custom `AxisBottom` and `AxisLeft` components, while data is loaded asynchronously from a CSV file using d3’s `csv` method.

Loading thumbnail…

Activity6 Q_1.2

This example displays a simple text message, "Hello VizHub!", centered on the page with large font styling. It demonstrates a minimal D3.js setup within the VizHub environment, using the `select()` API from D3 to target the HTML element and set its text content. The visualization relies on an external ES6 module to supply the message string, and the page structure is defined in `index.html`. The rendering approach is straightforward, using basic DOM manipulation rather than complex graphical output.

Loading thumbnail…

Fork of Activity_6 Q1.1

This bar chart shows the population of ten countries in the year 2000, with countries listed on the y-axis and population values on the x-axis. The code uses React components to render SVG elements, including custom AxisBottom and AxisLeft components for ticks and labels. It loads CSV data from a GitHub repository using d3.csv, then applies a linear scale for population and a band scale for countries. The bars are green rectangles with tooltips showing formatted population values, and the x-axis labels use d3-format to abbreviate large numbers.

Loading thumbnail…

Activity_6 Q1.1

This example displays a horizontal bar chart comparing the population of ten countries in the year 2000. Blue tick lines and green bars are rendered as SVG within a React component. The chart uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.csv` to load data from an external URL. Population values are formatted with `.2s` notation and converted from millions to billions using the `.replace('G', 'B')` method.

Loading thumbnail…

Fork of Activity6 Task_1

This bar chart displays the population of 20 countries in the year 2000, with countries listed on the y-axis and population values on the x-axis. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map data to SVG rectangles, while `d3.axisBottom` and `d3.axisLeft` generate the labeled axes. Population data is loaded from a remote CSV file via `d3.csv`, formatted with compact notation (e.g., "1.2B"), and rendered as light green bars using the SVG `rect` element.

Loading thumbnail…

Activity6 Task_1

This horizontal bar chart displays the population of 20 countries in the year 2000, ranked from largest at the top to smallest at the bottom. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population values. The code builds the chart modularly through separate components: `Marks.js` draws light green rectangles, while `AxisBottom.js` and `AxisLeft.js` generate the axes with custom tick formatting that converts millions to "B" notation. Data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csv`.

Loading thumbnail…

Activity6 Task_1

This bar chart displays the 2020 population estimates for the top 30 countries, sourced from a CSV file hosted on GitHub. The visualization uses a horizontal layout where each bar's length represents population values, with a custom tooltip showing the formatted figure. The chart is built with React, using D3 v5 functions like `scaleBand` and `scaleLinear` for coordinate mapping, and SVG `rect` elements for rendering. The axes are drawn with custom components, and the x-axis labels are formatted using D3's `format('.2s')` to abbreviate large numbers (e.g., 'B' for billions).