vinilavoddi@my.unt.edu

Vinila_7.1.QUESTION-1

This visualization displays a pie chart tracking the number of vehicles seized across American states, with each slice labeled by its value in thousands and accompanied by a legend showing state names and corresponding quantities. The code loads data from a CSV file using D3’s `csv` method, then applies `pie` and `arc` generators to create the chart, while `scaleOrdinal` assigns colors to each state. Additional D3 utilities like `format` and `select` handle number formatting and SVG rendering. The example demonstrates importing from both the D3 module and local ES6 modules.

Nov 2, 2024

Vinila_7.1.Tutorial-1

This animated scatter plot cycles through different pairings of the four Iris measurements (petal and sepal width/length), using the classic Iris dataset loaded from a gist via d3.csv. Each frame updates the x-axis mapping while points are colored by species (setosa, versicolor, virginica) and include both circular and elliptical markers based on sepal dimensions. The visualization, rendered with SVG and D3’s scaleLinear, axisLeft, and axisBottom, shifts axes and labels dynamically via setInterval, with a fixed legend and title.

Nov 2, 2024

Activity6_TASK3(Question)

This scatter plot visualizes the Bubblechart dataset, mapping horsepower on the x-axis, highway MPG on the y-axis, and coloring each point by car make using a custom ordinal color scale. It loads CSV data via `d3.csv`, applies linear scales with `scaleLinear`, and renders SVG circles with axes from `d3.axisLeft` and `d3.axisBottom`. A legend built with SVG rectangles and text labels identifies the makes, using data bound through D3’s `join` method and dynamic element creation.

Activity6_bubblechart-TASK4(Question)

This interactive bubble chart visualizes the Iris dataset, mapping sepal length and width to the x- and y-axes while encoding petal length as bubble radius. Each of the three species—setosa, versicolor, and virginica—is distinguished by color through a `d3.scaleOrdinal`, with a legend and tooltip revealing petal length on hover. Built with D3 v7, the visualization uses SVG circles, `d3.axisBottom` and `d3.axisLeft` for scales, and transitions for tooltip fade effects.

Activity6_bubblechart-TASK4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across 31 car makes. Each bubble represents a make, positioned by its horsepower on the x-axis and torque on the y-axis, while bubble radius encodes highway MPG and color distinguishes makes. The visualization uses D3 v7 to load data from a CSV file, render SVG elements with linear scales for all three variables, and includes interactive tooltips that display the make name on hover. A legend explains the bubble size scaling and color mapping for each make.

Activity6_IRIS-Task3.2

This visualization displays the Iris dataset as a scatter plot of sepal length against petal length, with each of the three species distinguished by a distinct symbol. A shape legend identifies the species mapping. The visualization uses D3 v7 components including `scaleLinear` for axes, `scaleOrdinal` and `symbolsFill` for shapes, and custom functions `axes` and `shapeLegend` for labeling. The data is loaded from a remote CSV file and parsed with `csvParse` before being passed to `scatterPlot`.

Activity6_IRIS-Task3.1

This example visualizes the Iris dataset with a scatter plot of petal length against petal width, coloring each point by species (setosa, versicolor, or virginica). It uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load data, map scales, and render axes, while circles are drawn with SVG attributes. The plot is sized to the window and displays axis labels for both petal and sepal measurements, with a legend implied through color coding.

Activity6-TASK2(Question)

This visualization displays monthly car sales for eight models as a horizontal stacked bar chart, with each bar segmented by month from January through August. It uses D3 v7’s `d3.stack` to compute the stacked values, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis, rendering rectangles within SVG groups. Data is loaded externally from a CSV file via `d3.csv`, and a color-coded legend identifies each month alongside the chart.

Activity6_TASK-2

A stacked bar chart visualizes the distribution of five rating categories across six movie genres, with each bar segment showing the percentage of ratings within that genre. Hovering over a segment displays a tooltip with the exact percentage value. The chart uses d3.stack() to aggregate data from a CSV file, d3.scaleBand() for the categorical genre axis, and d3.scaleLinear() for the percentage scale. Colors are assigned via d3.scaleOrdinal(), and SVG rendering displays the horizontal bars with axis labels.

Activity6_population-2010

This example displays a horizontal bar chart comparing the populations of 20 countries in 2010. The visualization uses React with D3 v5 scales, including `scaleBand` for the categorical country axis and `scaleLinear` for the population values. The chart fetches CSV data from a GitHub repository, formats the tick labels with `d3.format`, and renders SVG bars with tooltips via the `<title>` element. Purple bars, blue axis lines, and custom labels for both axes and the chart title are styled through CSS classes.

Activity6_population-2000

This example displays a horizontal bar chart titled “Population by Country (2000) for Top 10,” showing the population of ten countries. It uses React with D3 v5, importing `scaleBand`, `scaleLinear`, `max`, and `format` from D3. The SVG rendering includes custom `AxisBottom`, `AxisLeft`, and `Marks` components. Data is loaded from a remote CSV using `useData`, and each bar includes a native SVG tooltip showing the formatted population value.

Activity 6

This example visualizes 2020 population estimates for 30 countries as a horizontal bar chart. Using React and D3 v5, it loads CSV data via d3.csv and maps each country’s population to bar widths with d3.scaleLinear and d3.scaleBand, while axes are rendered through custom React components. Bars include native SVG tooltips showing formatted values, and d3.format abbreviates large numbers.

Buddhas of 6

The Buddhas of 6 visualizes a chaotic scatter of semi-transparent circles over a flower background, overlaid with a large decorative Buddha path. React renders the SVG, generating a 3D array of circles with randomized positions and colors using `Math.random()` within nested `.map()` calls. The SVG includes a static `<path>` element for the Buddha figure, while the background is set via CSS `background-image`. The example demonstrates layered SVG rendering with React’s `ReactDOM` and production UMD builds.

Buddhas

A colorful, abstract Buddhist-themed visualization renders a field of overlapping diamond polygons with randomized positions, colors, and rotations on a green background. The SVG output is generated in React 16.10, using nested array loops to repeatedly draw polygon elements with computed point coordinates and RGB fill values. A central, translated Buddha path graphic is overlaid on top of the chaotic diamond field, creating a layered composition that contrasts structured sacred imagery with generative geometric noise.

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

A black-background visualization displays a dense, overlapping cloud of translucent, randomly colored SVG circles generated with React, overlaid with a large, single Buddha path rendered in thick red stroke. The circles are positioned using nested array maps and JavaScript's `Math.random()`, while the Buddha shape is defined by a complex SVG `path` element transformed and scaled. The React code maps an array of numbers to generate hundreds of circles, creating a chaotic, layered effect against the static figure.

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

A dense field of randomly generated, semi-transparent SVG polygons in bright, varied colors overlays a single large, pixelated Buddha path. The composition is built through a triple-nested React map that produces overlapping diamond shapes, whose positions, colors, and rotations are determined by calls to `Math.random()` and array calculations. A `polygon` element is rendered for each iteration, with its `points` and `fill` attributes computed dynamically. The Buddha silhouette itself is a complex SVG `path` with a long string of cubic Bezier coordinates. The result is a chaotic, colorful fractal-like tangle that obscures the central figure beneath a storm of abstract geometry.

Buddhas

A network of hundreds of small Buddha silhouettes forms a circular, mandala-like cluster, with each figure positioned and sized according to a force-directed layout. The visualization uses d3.forceSimulation to compute the positions and d3.forceCollide to prevent overlaps, while the Buddha shapes are drawn as SVG paths. A subtle gray background and varied opacity levels create depth, emphasizing the dense, organic arrangement of the repeated icon.