jangalaupender@my.unt.edu

@upendar116·13 public vizzes

Assignment -2

This animated scatterplot explores the classic Iris dataset, cycling through different sepal and petal measurements on the x-axis while keeping sepal length on the y-axis. Each point is colored by species, with a fixed legend and color scheme. The visualization uses D3.js, employing `scaleLinear`, `axisLeft`, and `axisBottom` from the D3 library to construct the plot. SVG rendering and a `setInterval` loop drive the animations, swapping the x-axis variable every few seconds to reveal different relationships in the data.

Apr 12, 2024

Loading thumbnail…

Assignment -2

Apr 12, 2024

Loading thumbnail…

Q4

This bubble chart visualizes the correlation between mean temperature, humidity, and wind speed for 50 US cities. Each city is a circle whose x-position maps to temperature, y-position to humidity, and size to wind speed, with color encoded by city name via the Turbo color scale. Built with D3 v7, the SVG visualization includes axes, a wind-speed legend, and a hover tooltip. Data is loaded from a local CSV file using `d3.csv`.

Apr 5, 2024

Loading thumbnail…

T4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's x-position represents horsepower, y-position represents torque, and size encodes MPG, with color differentiating car manufacturers. Data is loaded from a CSV file. The chart utilizes D3 v7's `scaleLinear`, `axisBottom`, `axisLeft`, `scaleOrdinal`, and `interpolateTurbo` APIs. Interactive tooltips display the car make on mouseover, and a legend explains the bubble sizing and color scheme.

Apr 5, 2024

Loading thumbnail…

Q3

This scatter plot visualizes a dataset's sales quantity against sales cost. The visualization uses D3's `scaleLinear` to map data to pixel coordinates, `axisLeft` and `axisBottom` for the axes, and `csv` to load the remote dataset. Circle markers are colored by item category (Electronics, Cosmetics, or other) using a custom function. The chart renders as SVG, sized to fit the browser window, with green axis labels.

Apr 5, 2024

Loading thumbnail…

task 3.2

This example shows a scatter plot of the Iris dataset, with sepal length mapped to the x-axis, petal length to the y-axis, and species distinguished by different symbol shapes. A custom shape legend labels each species group. The visualization loads CSV data via `d3.csvParse` and uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbol`, `symbolsFill`, and axis functions (`axisLeft`, `axisBottom`) to render marks and axes. A local ES6 module structure organizes the code into separate files for the chart, axes, and legend.

Apr 5, 2024

Loading thumbnail…

task 3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x and y axes, with points colored by species (setosa, versicolor, virginica). The code uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to build the chart, loading data via `csv` from a GitHub URL. Circles are drawn with a fixed radius, while labels for axes are added manually. The visualization is rendered as SVG, with an interactive full-window layout.

Apr 5, 2024

Loading thumbnail…

question-2

The chart displays the percentage distribution of 10th-grade student scores across seven subjects, with horizontal stacked bars for five grade bands ranging from "below 60" to "above 90." It reads subject data from a local CSV file. Using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the percentage x-axis, it applies d3.stack to produce the stacked segments and d3.axisBottom with tick lines for grid reference. Hovering over a segment triggers a tooltip that shows the exact percentage for that subject and score band.

Apr 5, 2024

Loading thumbnail…

Activity6_Task2

This example visualizes IMDb movie ratings across six genres using a stacked horizontal bar chart, showing the percentage distribution of ratings across five score categories. The chart is rendered as SVG using D3 v7, with data loaded from a CSV file. The implementation demonstrates D3’s stack layout for proportional composition, d3.scaleBand for categorical positioning, and d3.scaleOrdinal for color encoding. Interactive tooltips reveal the exact percentage for each rating category on hover, with a legend positioned to the right.

Apr 5, 2024

Loading thumbnail…

activity 6_Task 1

This visualization displays a horizontal bar chart comparing the populations of the top 20 countries in 2010, with bars sorted by population size. Built with React and D3 v7, it loads data from a CSV file via `d3.csv` and renders the chart as SVG. The chart uses `scaleBand` for the y-axis (country names) and `scaleLinear` for the x-axis (population), with bars drawn as SVG rectangles. The code demonstrates custom axis components, tick formatting that converts large numbers to "B" for billions, and tooltips on hover showing population values.

Apr 5, 2024

Loading thumbnail…

5 Buddha

This visualization is a generative artistic composition of multiple overlapping Buddha silhouettes, drawn as orange SVG polygons rendered on a floral background image. The code uses React with ReactDOM to render SVG elements, iterating over a nested array to create a dense cluster of random polygon shapes with varied colors and rotations. The primary Buddha outline is drawn from a hardcoded SVG path, while the surrounding visual noise comes from procedurally generated triangles.

Apr 4, 2024

Loading thumbnail…

6 buddha

A dense, colorful collection of overlapping Buddha silhouettes fills the SVG canvas. The piece uses React and ReactDOM to render a static composition, where a large central Buddha path is duplicated with varying scales and positions. The code generates many small, semi-transparent circles using nested map functions, with random RGB fill values, creating a textured background. The primary visual is a single, detailed SVG path of a Buddha, defined by a long string of path data, which is transformed and repeated to create the layered, overlapping effect. The implementation leverages React's declarative syntax to build the SVG elements directly.

Apr 4, 2024

Loading thumbnail…

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

A dense abstract composition fills the screen with hundreds of overlapping, randomly colored diamond shapes. The polygons are generated by triple-nested React map functions over a numeric array, with each vertex position, fill color, opacity, and rotation determined by JavaScript's `Math.random()`. A large, detailed SVG path of a Buddha figure is rendered prominently underneath, layered amid the chaotic, multicolored array of geometric forms on a black background.

Apr 4, 2024