Skip to main content
Log in
S

swapnadabburi@my.unt.edu

@Swapnadabburi·15 public vizzes

Loading thumbnail…

Question 2

A stacked area chart displays traffic dataset values across months, with six colored categories representing different factors. The visualization uses d3.csv to load the data, d3.stack to compute the stacked series, and d3.area with d3.scaleBand and d3.scaleLinear for positioning. SVG paths render each area with an ordinal color scale, while the x-axis labels rotate for readability. A custom HTML legend with colored circles identifies each category.

Nov 8, 2024
Loading thumbnail…

Question 1

This interactive pie chart displays the average value of multiple factors for a selected continent, sourced from a CSV dataset. A dropdown menu filters the data by continent, and the chart updates arcs, value labels, and a color-coded legend. Built with D3 v7, it uses `d3.csv`, `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.mean` to compute and render the visualization as SVG.

Nov 8, 2024
Loading thumbnail…

Activtiy-6-q3

This scatter plot visualizes product details, with each point representing a product’s width and length, colored by category (smart devices, home furnishings, or kitchen appliances). The chart uses D3 v7’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, position marks, and render axes in an SVG. Product dimensions are parsed from a GitHub-hosted CSV file, and points are drawn as circles with a fixed radius, while axis labels are styled green.

Oct 24, 2024
Loading thumbnail…

Activity-6-Tutorial3.2

This example demonstrates a scatter plot of the Iris dataset, encoding sepal length on the x-axis, petal length on the y-axis, and species using different symbol shapes. The plot includes axes with labels and a custom shape legend that maps species names to symbol fills. It loads data from a remote CSV file using `fetch` and `d3.csvParse`, and builds the visualization with D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, `axisLeft`, `axisBottom`, and `symbol`. The chart resizes to the window and renders SVG elements created via the `join` pattern.

Oct 24, 2024
Loading thumbnail…

Activtiy-6--tutorial-3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample. Points are colored by species: skyblue for setosa, lightgreen for versicolor, and orange for virginica. The visualization uses D3 v6, loading data from a remote CSV and rendering circles to an SVG canvas. It employs D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to create the axes, while the data is parsed on load to extract numeric values for the plot.

Oct 24, 2024
Loading thumbnail…

Activity-6-q1.2

This bar chart displays the populations of 20 countries in 2010, ranked along a vertical categorical axis with horizontal bars. The visualization uses D3 version 5 within a React framework, rendering to SVG via React components. Data is loaded from a remote CSV using d3.csv, with population values scaled by 1000. Axes are generated using d3.scaleBand and d3.scaleLinear, while d3.format applies SI-prefix tick labels that convert billions to B. Each bar includes a native SVG title tooltip showing the formatted population value.

Oct 24, 2024
Loading thumbnail…

Activity-6-q1.1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars ordered by country name. The visualization is built with React and D3 v5, employing `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Data is loaded from a CSV file via `d3.csv`, with population values parsed as numbers. SVG rectangles render the bars, while custom `AxisBottom` and `AxisLeft` components create the axes, and text labels are formatted using `d3.format`.

Oct 24, 2024
Loading thumbnail…

Activity-6q4

This interactive bubble chart displays sales information for a group of employees, plotting revenue on the x-axis against profit on the y-axis, with bubble size encoding product quantity and color representing individual employees. Built with D3 v7, the visualization renders as an SVG with smooth transitions and tooltips that reveal employee names on hover. It includes a legend for bubble size and color, using `d3.scaleLinear` for axes and bubble scaling, `d3.scaleOrdinal` for color assignment, and `d3.interpolateTurbo` for the color palette.

Oct 24, 2024
Loading thumbnail…

Activtiy-6-tutorial-4

This bubble chart visualization explores the correlation between average horsepower, torque, and highway MPG across 31 car makes. The size of each bubble encodes the highway MPG value, while color distinguishes the car brand. The chart is built with D3 v7, rendering as an SVG with interactive tooltips that display the car make on hover. A legend on the right explains the bubble size scale, and the data is loaded from a local CSV file.

Oct 24, 2024
Loading thumbnail…

Activtiy-6-q2.3

This example visualizes sales distribution across product categories, breaking down each category's total sales into five segments based on rating scores (from "less than 5" to "greater than 8.5"). The chart uses stacked horizontal bars, with each product category represented as a bar segmented by colored sections corresponding to rating ranges. The visualization is built using D3 v7, loading data from a local CSV file, and employs `d3.stack()` to compute stacked bar positions, `d3.scaleBand()` for categorical y-axis positioning, and `d3.axisLeft` and `d3.axisBottom` for axes. Interactive tooltips appear on hover, displaying the specific rating segment and its sales value.

Oct 24, 2024
Loading thumbnail…

Activtiy-6-tutorial-2

A stacked bar chart displays the percentage of IMDb ratings within five genres (Documentary, Drama, Comedy, Romance, Animation, Action). The horizontal bars show the proportion of ratings across levels from "below 5.0" to "above 8.5," with hovering revealing precise percentages via tooltips. The visualization uses d3.stack, d3.scaleBand, d3.scaleLinear, and d3.axisBottom, rendering SVG elements. Data is loaded from a CSV file, and colors are assigned via d3.scaleOrdinal.

Oct 24, 2024
Loading thumbnail…

Activity6-Tutorial

This example shows a horizontal bar chart of 2020 population figures for 30 countries, with bars colored light green and a blue axis. It uses React with D3 v5 scales—`scaleBand` for the categorical country axis and `scaleLinear` for the population axis—to render SVG rectangles via the `Marks` component. Axis labels are generated with custom `AxisBottom` and `AxisLeft` components, and population values are formatted using D3’s `format('.2s')` to display abbreviations like "B" for billions. Data is loaded asynchronously from a CSV file via `d3.csv`.

Oct 24, 2024
Loading thumbnail…

Activity-5-Question3

This visualization displays an abstract, multi-layered arrangement of SVG polygons and imported flower imagery. React code generates a grid of rotated, semi-transparent triangles with randomized colors and positions, while overlaid SVG paths trace a decorative line pattern. The backdrop is a photographic flower image from an external URL, duplicated as an SVG `<image>` element. The project uses React and ReactDOM to render the dynamic SVG composition, leveraging JavaScript's `Math.random()` for generative elements and the `<polygon>`, `<path>`, and `<g>` SVG APIs for structure and transformation.

Oct 19, 2024
Loading thumbnail…

Activtiy-5-Question-1

This example presents a simple webpage that embeds a vector graphic created in Figma. The page, built with HTML and styled using CSS, displays a static SVG image of a chart or diagram, loaded directly from a GitHub repository. The JavaScript and React framework are mentioned in the project metadata, but the visible behavior is a straightforward image embedding within a styled document, featuring a green header and a fixed footer.

Oct 19, 2024
Loading thumbnail…

5 Buddha

Five translucent Buddha silhouettes overlap across a black background, each drawn as an SVG path from a shared outline. A grid of randomly placed colored circles is rendered behind them, with positions and fills generated via nested `Array.map` calls and `Math.random()`. The React component creates the SVG scene, while imported `ReactDOM` mounts it to the page. The paths are manually defined in the code, and the circle layer uses no external data source.

Oct 11, 2024