sharanyabobbala@my.unt.edu

@SharanyaRBobbala·20 public vizzes

Activity 6 Tutorial 3.2

A scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, while encoding species with different point shapes via d3.scaleOrdinal and d3.symbol. A custom shape legend, built with d3.symbol, displays the species categories. The code uses d3.csvParse for data loading, d3.scaleLinear for axes, and d3.axisLeft/axisBottom for tick rendering. Axes and legend labels are positioned manually, with the plot resizing to the full browser window.

Nov 1, 2025

Loading thumbnail…

Activity 7.1.1

This area chart displays laptop sales across different months of the year. The visualization loads data from an external CSV file hosted on GitHub and renders a smooth, cardinal-curved area filled in yellow, with labeled X and Y axes. The implementation uses D3 v7 with several key APIs: `d3.select` to build the SVG container, `d3.scaleBand` and `d3.scaleLinear` for coordinate mapping, `d3.area` with `d3.curveCardinal` for the area shape, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Nov 6, 2024

Loading thumbnail…

Activity 7.1

A pie chart displays car production totals for countries in 2019, with a legend listing each country and its corresponding value in thousands. The visualization uses D3 v5 to load CSV data via the `csv` function from a GitHub gist, then processes it with `pie` and `arc` to generate the chart segments. `scaleOrdinal` assigns a categorical color palette, while `format` converts large numbers into a compact tick label format. The SVG output includes clickable paths and a separate legend group with circles and text elements positioned via `attr` transforms.

Nov 5, 2024

Loading thumbnail…

Activity6 Tutorial 1

This example shows a horizontal bar chart of population estimates for 30 countries in 2020, using a React-based SVG rendering approach. The visualization uses `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates, with formatted tick labels converting values to billions. The code loads CSV data via `d3.csv`, applies a custom row-parsing function, and renders the bars using generated `rect` elements with hover tooltips provided by SVG `<title>` elements. Axes are constructed as separate React components that generate tick marks and labels using D3's scale methods.

Oct 24, 2024

Loading thumbnail…

Activity6 Tutorial2

A stacked horizontal bar chart visualizes IMDb movie rating distributions across six genres, with each bar segmented into five rating buckets from below 5.0 to above 8.5. The chart uses D3 v7’s `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render SVG rectangles, while a custom tooltip on mouseover displays the exact percentage for each segment. Data comes from a local CSV file, and the visualization includes axis labels, a legend, and color-coded categories.

Oct 24, 2024

Loading thumbnail…

Activity 6 Task 4

This bubble chart visualizes the relationship between city population, GDP, and land area. Each circle’s position is mapped to GDP on the x-axis and population on the y-axis, while its radius encodes area via `d3.scaleSqrt`. Tooltips, styled through CSS with a lightsteelblue background, appear on mouseover using `d3.select` and `transition` to display city-specific data. The chart is rendered in SVG with axes generated by `d3.axisBottom` and `d3.axisLeft`, and colors are assigned using `d3.scaleOrdinal` with `d3.schemeCategory10`. The data is loaded from a CSV file using `d3.csv`.

Oct 23, 2024

Loading thumbnail…

Activity 6 Tutorial 3.1

This example visualizes the Iris dataset with a scatter plot comparing petal length against petal width, coloring points by species (setosa, versicolor, virginica) in skyblue, lightgreen, and orange. The code loads CSV data via d3.csv, then uses scaleLinear, extent, axisLeft, and axisBottom to map values and render axes in SVG. Circles are positioned using cx/cy attributes, with additional rx/ry properties derived from sepal measurements. Axis labels are rotated and styled using d3 selections.

Oct 23, 2024

Loading thumbnail…

Activity 6 Q1.1

This horizontal bar chart displays the populations of ten countries for the year 2010. The visualization, built with React and D3 v5, renders as an SVG. It uses `d3.scaleBand` and `d3.scaleLinear` to map categorical and quantitative data, while the `d3.csv` function loads the dataset from a remote gist. The custom `AxisBottom`, `AxisLeft`, and `Marks` components define the blue tick lines, gray labels, and green bars, and a tooltip shows the formatted population value via `<title>`.

Oct 23, 2024

Loading thumbnail…

Activity 6 Q1.2

This example displays a horizontal bar chart comparing the populations of 20 countries in 2010, with the countries sorted along the y-axis and population values along the x-axis. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` to abbreviate tick labels (e.g., converting billions to “B”). Data is loaded as CSV via D3’s `csv` function from a remote gist.

Oct 23, 2024

Loading thumbnail…

Activity 6 task 4(Q4)

This bubble chart visualizes the electronics.csv dataset, plotting Units Sold (millions) on the x-axis, Market Value (billions) on the y-axis, and encoding Yearly Growth via circle size and Category via color. Rendered as SVG with animation, the chart uses D3 v7’s `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` to map data dimensions. Hovering reveals a tooltip with detailed values, implemented through D3’s selection and transition APIs.

Oct 22, 2024

Loading thumbnail…

Activity6 tutorial 4

This visualization displays a bubble chart that explores the correlation between average horsepower, torque, and highway MPG across various car makes. Each bubble represents a car brand, positioned by horsepower on the x-axis and torque on the y-axis, while the bubble size encodes highway MPG and color distinguishes between manufacturers. The chart includes interactive tooltips that appear on mouse hover. Built with D3 v7 and SVG, the code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` for color encoding, with data loaded from a CSV file.

Oct 22, 2024

Loading thumbnail…

Task 3 Question

This scatter plot visualizes penguin measurements, plotting flipper length against body mass, with each point colored by species using a categorical color scale. The D3 v6 code loads CSV data from a GitHub gist, converts string values to numbers, and uses `d3.scaleLinear` for both axes. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`, while a legend is constructed manually with colored rectangles and text labels. The SVG rendering approach uses `d3.select` to target the designated container element.

Oct 22, 2024

Loading thumbnail…

Activity 6 Tutorial 3.2

This example shows a scatterplot of the Iris flower dataset, plotting sepal length against petal length while encoding species with different point shapes. The visualization includes labeled axes and a shape legend identifying each species. The code uses D3 v7 modules such as `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to generate the marks, with axes and legend built through reusable functions. Data is loaded asynchronously from a GitHub-hosted CSV and parsed using `csvParse`.

Oct 20, 2024

Loading thumbnail…

Activity 6 Task2

This example displays a stacked bar chart of normalized car statistics (horsepower, torque, and highway MPG) for 31 makes, with each row showing the proportional contribution of each metric. The visualization uses D3 v7 to load CSV data, normalize values via `d3.sum`, and render the chart as SVG with `d3.stack`, `d3.scaleBand`, and `d3.scaleOrdinal` for colors. Interactive tooltips appear on mouseover, revealing the percentage share of each stat, alongside a custom legend. The data comes from `data.csv`, and the code demonstrates modular ES6 imports and UNPKG loading.

Oct 20, 2024

Loading thumbnail…

Activity6_Task2

This stacked bar chart displays the percentage distribution of IMDb rating levels across six movie genres, showing how genre impacts audience ratings. Each genre’s bar is divided into five rating segments, from “below 5.0” to “above 8.5,” with tooltips revealing exact percentages on hover. Built with D3 v7 using SVG, the chart employs `d3.stack()` for data stacking, `d3.scaleOrdinal` for color encoding, and `d3.axisBottom` for the percentage axis. The data originates from a CSV file, rendered with interactive mouseover events for detailed value exploration.

Oct 20, 2024

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A grid of 900 small colored squares is rendered over a black background, with the Buddha path repeated and transformed across the view. The artwork layers the same intricate SVG path multiple times, offset by random positions and scales, creating an overlapping, abstract composition. Built with React and rendered as SVG, the code uses nested `map` loops to generate the grid and sets each square’s fill color via `Math.random()` values in an `rgb()` string. The Buddha path is drawn using raw SVG path data within a `<g>` transform.

Oct 19, 2024

Loading thumbnail…

Fork of 6 Buddha

A work-in-progress React data art piece renders six Buddha silhouettes as black SVG paths against a decorative flower background image. The code uses React and ReactDOM to generate a 1000x1000 SVG canvas, with nested map functions creating hundreds of small, randomly colored and positioned rectangles to fill the space. Each Buddha path is defined with an extensive SVG path data string and transformed using group elements with translate and scale operations. The visualization appears to be an experimental composition exploring random generative elements overlaid with structured geometric forms.

Oct 19, 2024

Loading thumbnail…

6 Buddhas

A generative Buddha image rendered in SVG, composed of overlapping, semi-transparent paths that form a stylized seated figure. The piece layers six Buddha silhouettes via repeated transformations, with each path’s fill color randomly selected from an RGB palette. Built with React and JSX, the code maps nested arrays to generate numerous small elements that create a textured, abstract pattern around the central figure, resulting in a dense, colorful visual.

Oct 19, 2024

Loading thumbnail…

6 Buddhas

Six Buddhas displays a grid of multicolored triangular polygons that are randomly positioned and rotated across a large SVG canvas. The image is composed of three nested loops over an array of numbers, generating over 8,000 semi-transparent shapes with randomly assigned RGB fill colors. Built with React and rendered as SVG, the visualization uses ReactDOM to mount the interactive graphic, which sits atop a floral background image. The code references a long path data string, though the primary visual output emerges from the generative polygon placement.

Oct 18, 2024

Loading thumbnail…

5 Buddha

Five concentric mandala-like layers of small, randomly placed diamonds radiate outward from the center of a black canvas, each shape filled with a bright RGB color and rotated 45 degrees. The composition combines procedurally generated geometric forms with a detailed SVG path of the Buddha drawn in white, which sits atop the layered array. Built with React and rendered as an SVG, the code maps over nested arrays to produce hundreds of overlapping polygons with randomized positions, colors, and opacity values.

Oct 11, 2024