Skip to main content
Log in
S

sumithdugyala@my.unt.edu

@SumithD9·18 public vizzes

Loading thumbnail…

Activity 7.1 Q1

This pie chart visualizes annual car sales for different companies in the USA, sourced from a raw GitHub CSV dataset. Built with D3 v5, it renders an SVG with pie slices, percentage labels, and a color-coded legend. The code uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the chart geometry and colors, with d3.csv for data loading.

Nov 7, 2024
Loading thumbnail…

Activity 7 Q1

This pie chart visualizes monthly expenditures broken down by department, with each slice colored distinctly and labeled. A corresponding legend on the right displays the department names alongside their numeric expenditure values in dollars. The visualization uses d3.arc to generate pie segments and centroids for label placement, d3.scaleOrdinal to map categories to the color palette, and d3.csv to load the monthly_expenditure dataset from a remote URL.

Nov 5, 2024
Loading thumbnail…

Activity 7 Q2

This area chart visualizes the sales of Apple mobile devices from 2009 to 2019. The D3 v5 code creates a smooth, curved line and fills the area beneath it, with labeled axes and gridlines. The visualization loads data from a CSV file, which is parsed and formatted to extract the year and convert sales values to numbers. Using the `d3.area` and `d3.line` generators, the chart is rendered as an SVG, with time-based scaling for the x-axis and linear scaling for the y-axis.

Nov 5, 2024
Loading thumbnail…

Activity6 Question4

This bubble chart displays the relationship between healthcare spending and life expectancy across several countries from 1970 to 1974. Each bubble’s size and position reflect spending, while color distinguishes countries. The visualization uses D3 v7 to load CSV data, scale linear axes, and render SVG circles. Interactive tooltips appear on mouseover, showing country-specific values. A legend encodes spending levels and country colors, with all elements animated through D3’s data joins and transitions.

Oct 22, 2024
Loading thumbnail…

Activity6 Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle represents a make, positioned by its horsepower and torque values, with bubble size scaling to highway MPG and color distinguishing makes. Built with D3 v7, the SVG visualization includes interactive tooltips on hover and legends for both bubble size and color categories. Data comes from the bundled bubblechart.csv file, with linear scales mapping the three continuous variables.

Oct 22, 2024
Loading thumbnail…

Activity6 Question3

This scatterplot visualizes the Alerts dataset, plotting the number of bugs against days, with each point colored and shaped according to criticality. Critical priority points appear as red squares, Medium as green diamonds, High as blue circles, and others as black triangles. The visualization uses D3 v6 to load CSV data, apply linear scales for axes, and render SVG symbols via `d3.symbol` with distinct `symbolSquare`, `symbolDiamond`, `symbolCircle`, and `symbolTriangle` types. Axis labels are generated with `axisLeft` and `axisBottom`.

Oct 22, 2024
Loading thumbnail…

Activity6_taks3.1

A scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. The D3 v6 code loads CSV data via `d3.csv`, scales the values with `d3.scaleLinear`, and renders SVG circles with `d3.selectAll` and `join`. It uses `d3.axisLeft` and `d3.axisBottom` for labeled axes, while hardcoded text labels for both axes appear to be mislabeled, with the y-axis reading "Petal_Length" and the x-axis "sepal_Length". The visualization fills the browser window using `window.innerWidth` and `window.innerHeight`.

Oct 22, 2024
Loading thumbnail…

Activity6 Task3.2

This example demonstrates a scatter plot of the Iris dataset, visualizing sepal length against petal length with points colored and shaped by species. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` APIs to render axes and a shape legend. Data is loaded from a remote CSV via `csvParse` and rendered as SVG paths, with a custom legend showing the species categories. The visualization updates dynamically when the window size changes.

Oct 22, 2024
Loading thumbnail…

Activity_6 Question 2

This stacked bar chart displays student enrollment counts across four courses (Engineering, Business, Medical, Arts) for the years 2000, 2021, 2022, and 2023, using data from a local CSV file. The visualization, rendered as an SVG, uses D3 v7 APIs including `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` to create the horizontal bars. A custom tooltip, styled via CSS, reveals the specific category and sales value when hovering over a segment. The chart includes labeled axes and a legend positioned to the right.

Oct 22, 2024
Loading thumbnail…

Activity_6 Task1

This bar chart displays the 2020 populations of 30 countries, using a horizontal layout where each bar's length encodes the population value. The visualization is built with React and D3 version 5, utilizing `scaleBand` and `scaleLinear` for the axes, `csv` for data loading, and SVG `rect` elements for the marks. The chart includes an x-axis with a custom tick formatter that converts large numbers to a compact "B" (billions) suffix, and a left axis listing country names.

Oct 22, 2024
Loading thumbnail…

Activity_6 Task 2

This stacked bar chart shows how movie ratings are distributed across genres, with each bar segment representing the percentage of ratings within a specific range, from below 5.0 to above 8.5. Hovering over a segment reveals an exact percentage via a tooltip. The visualization uses d3.stack() to compute the stacked data and d3.scaleOrdinal for color mapping, rendering bars as SVG rectangles. The data is loaded from a CSV file and displayed with d3.axisBottom and d3.axisLeft for the axes.

Oct 22, 2024
Loading thumbnail…

Activity 6_Question 1.2

This bar chart displays the population of 20 countries in 2010, sorted along a categorical y-axis with a linear x-axis measured in billions. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data from a CSV file. SVG `<rect>` elements render the bars, with axes generated by custom `AxisBottom` and `AxisLeft` components. Tooltips reveal precise values via a `format` function replacing 'G' with 'B'. The chart is styled with a green mark fill and blue tick lines.

Oct 22, 2024
Loading thumbnail…

Activity 6_Question 1.1

This example shows a horizontal bar chart of the top ten countries by population in the year 2000, using an SVG rendered through React. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with formatted tick labels via `d3.format`. Country names are drawn as text labels on the left, while the bars include a native SVG `<title>` tooltip showing the exact population value. Data is loaded asynchronously using `d3.csv` from a GitHub gist.

Oct 22, 2024
Loading thumbnail…

Activity_6 Task 1

This chart displays the populations of up to 30 countries as horizontal bars, ranked from largest to smallest. Each bar’s length encodes the 2020 population value, with a text tooltip appearing on hover to show the precise figure. The visualization is built with React and D3 v5, using `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and SVG `rect` elements for the marks. Data is loaded asynchronously from a CSV file via `d3.csv`, and formatted using `d3.format` to abbreviate large numbers.

Oct 22, 2024
Loading thumbnail…

Fork of 2 Buddas

This visualization layers two large Buddha-shaped SVG paths over a flower-patterned background, with hundreds of randomly positioned semi-transparent circles generated through triple-nested JavaScript array maps—each circle receiving randomized coordinates, radius, and RGB color values. The React app renders the scene through a single SVG element, combining the static path data with dynamic geometric elements. The code uses React 16.10 with ReactDOM, and the background image is loaded via a CSS URL reference, while the Buddha paths are drawn using raw SVG path strings.

Oct 18, 2024
Loading thumbnail…

5 Buddas

Five overlapping Buddha silhouettes in violet line art are layered atop a flower-background image. The piece uses SVG paths rendered through React, with each shape scaled and translated via group transformations. The design derives from repeated iterations of a source path, producing a deliberate, dense overlapping effect that echoes the original "Buddha in colors" concept.

Oct 18, 2024
Loading thumbnail…

buddas_sd

A matrix of overlapping, multi-colored Buddha outline paths fills the screen, rendered as a dense, generative pattern against a black background. The visualization uses React to map over a numeric array and produce hundreds of semi-transparent SVG circles, while the Buddha shape itself is drawn from a hardcoded SVG path. React 16.10.0 and ReactDOM render the SVG elements dynamically, with random coordinates and RGB fill values generated via `Math.random()` for each circle, creating a chaotic yet structured layering effect.

Oct 14, 2024
Loading thumbnail…

5 buddas

Five overlapping Buddha silhouettes, drawn as detailed SVG paths, float over a field of randomly generated, semi-transparent colored circles against a black background. The visualization layers multiple copies of the same path data, each offset and scaled within a React component, creating a dense, colorful, and abstract composition. The code uses React to render the SVG elements, with the circles positioned via `Math.random()` calls in nested array maps, while the Buddha shapes are defined by complex path strings.

Oct 14, 2024