Skip to main content
Log in
M

MounishAllam@my.unt.edu

@Mounishallam·18 public vizzes

Loading thumbnail…

Activity-7

A pie chart displays the box office collection in India for various movies, showing each film’s collection as a slice with labels and a legend. The chart renders with D3 v5’s `pie` and `arc` generators, using `scaleOrdinal` for slice colors and `format` for tick labels. Data is fetched from a CSV file via `d3.csv`, and the SVG output includes labeled arcs and a legend with per-movie values.

Nov 7, 2024
Loading thumbnail…

Activity7-Question2

This area chart shows the number of Formula 1 races held each year, with a yellow fill beneath a black line curve. The visualization uses D3 v5 to load CSV data from a GitHub repository, parse dates, and render an SVG. It employs d3.scaleTime and d3.scaleLinear for axes, while d3.line, d3.area, and curveBasis generate the smoothed path and filled region.

Nov 3, 2024
Loading thumbnail…

ruf

This pie chart displays sales data for various gun brands across different periods, including monthly figures, last year totals, and year-to-date comparisons. The visualization uses D3.js v6 with SVG rendering, employing d3.pie and d3.arc to generate slices from the JSON data source. Colors are assigned via d3.scaleOrdinal with d3.schemeCategory10, and each slice is labeled with its corresponding data values. A legend indicates the brand names associated with each color.

Nov 2, 2024
Loading thumbnail…

Activity6_Question 1.1

A horizontal bar chart displays the populations of ten countries for the year 2000, sorted by descending value. Built with React and D3 v5, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map country names and population counts to SVG rectangles and axes. It loads CSV data via `d3.csv` from a remote GitHub repository, with population values scaled from the raw figures. Axis ticks and marks are rendered as SVG elements, with a tooltip showing formatted values using `d3.format`.

Oct 21, 2024
Loading thumbnail…

Activity6_Question4

This interactive bubble chart visualizes the relationship between healthcare spending (in USD) and life expectancy across several countries from 1970 to 1974. Each circle’s size encodes spending amount, while its color distinguishes the country, with tooltips revealing exact values on hover. Built with D3 v7, it uses `d3.csv` to load data, `scaleLinear` for axes and bubble sizing, `scaleOrdinal` for color mapping, and `d3.axisBottom`/`axisLeft` for axes. The chart includes a legend for bubble sizes and country categories, rendered as SVG with animated tooltip transitions.

Oct 19, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle’s position encoding torque and horsepower while its radius and color represent highway MPG and make. The visualization includes tooltips on hover, a size legend for MPG values, and a color legend for car brands. Rendered as SVG with animation, it uses D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateTurbo` for color encoding, with data loaded from a local CSV file.

Oct 19, 2024
Loading thumbnail…

Activity6-Question3

This scatter plot visualizes the Palmer Penguins dataset, showing bill length on the x-axis and bill depth on the y-axis, with each point colored by penguin species (Adelie, Chinstrap, or Gentoo). The D3 v6 code loads CSV data via `d3.csv`, uses `scaleLinear` and `extent` for scales, and renders SVG circles with a fixed radius. Axis labels are added using `axisLeft` and `axisBottom`, while text elements annotate the axes. The visualization fills the browser window and applies species-based color mapping through a custom marker function.

Oct 19, 2024
Loading thumbnail…

Activity6_Task3.2

This interactive scatter plot visualizes the Iris dataset, plotting sepal length against petal length and encoding species through different point shapes. The visualization uses D3.js version 7, specifically leveraging `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `symbolsFill` to map data dimensions. The code demonstrates a modular architecture with separate modules for axes, scatter plot rendering, and a custom shape legend. Data is loaded asynchronously from a CSV file hosted on GitHub, parsed using `csvParse`, and then rendered responsively to the full browser window dimensions.

Oct 19, 2024
Loading thumbnail…

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, displaying petal length and width for individual flowers. The circles are color-coded by species: skyblue for setosa, lightgreen for versicolor, and orange for virginica. Using D3 v6, the example loads data from a remote CSV via `d3.csv`, parses the numeric columns, and maps them to SVG circles using `d3.scaleLinear` for the x and y axes. It also incorporates sepal dimensions into the `rx` and `ry` attributes, making each point an ellipse. The chart renders axis labels with `d3.axisLeft` and `d3.axisBottom`, and uses D3's `select` and `join` APIs for efficient SVG element creation.

Oct 19, 2024
Loading thumbnail…

Activity6-Question2

This example displays a horizontal stacked bar chart comparing the ratings distribution (below 5.0 to above 8.5) across music streaming platforms like Spotify, YouTube, and Apple. The contoured bars use a gradient-filled legend, and hovering over a segment reveals the exact percentage via a tooltip. The code uses D3 v7’s `scaleLinear`, `scaleBand`, `scaleOrdinal`, and `stack` APIs to process the CSV data and render the chart as SVG.

Oct 19, 2024
Loading thumbnail…

Activity6_Task2

A stacked horizontal bar chart displays the distribution of IMDb movie ratings across six genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5". The visualization uses d3.stack to compute the stacked segments, d3.scaleOrdinal for color encoding, and d3.scaleBand for the categorical y-axis. Interactive tooltips appear on mouseover, showing the exact percentage for each rating segment. The SVG chart includes axis labels and a title, rendered with d3.v7 loaded via UNPKG.

Oct 19, 2024
Loading thumbnail…

Activity6_Question 1.2

This example displays a horizontal bar chart of the top 20 countries by population in 2010, with bars colored light green and axes rendered as SVG elements. It loads population data from a GitHub-hosted CSV file using `d3.csv`, and builds the visualization with `scaleBand` and `scaleLinear` for scales. The React-based code demonstrates modular components for the bottom and left axes, as well as marks, while using `d3.format` to abbreviate large population values (e.g., converting gigabytes to billions) in the tooltip and tick labels.

Oct 19, 2024
Loading thumbnail…

Activity6_Question 1

This bar chart displays the 2020 populations of 30 countries, sorted alphabetically along the vertical axis with horizontal bars scaled by population. The visualization uses React to render an SVG, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Axis components are custom-built using D3’s tick methods, while data is loaded via `d3.csv` from a GitHub-hosted CSV file. Hovering over a bar reveals a tooltip via an SVG `<title>` element, and the x-axis labels are formatted using `d3.format`.

Oct 19, 2024
Loading thumbnail…

Activity6_Task 1

This example displays a bar chart of the 2020 population for 30 countries, ordered along a categorical y-axis with a linear x-axis. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the scales, while custom React components (AxisBottom, AxisLeft, Marks) draw the axes and bars. The data is loaded from a remote CSV file using d3.csv, and tick labels are formatted in billions using d3.format.

Oct 19, 2024
Loading thumbnail…

Activity 6

This example demonstrates a minimal D3.js setup that renders static text into a web page. It shows how to load D3 from a CDN and use ES6 module imports to structure code across multiple files. The `select` function from D3 targets a div element by ID, and the text content is supplied by a custom local module. A regex literal and a constant are defined in the main script, though they do not affect the visual output. The styling is applied via a linked CSS file that centers the text at a very large font size.

Oct 19, 2024
Loading thumbnail…

6-Buddha

Six identical Buddha silhouettes overlap across a decorative floral background, each rendered as a black SVG path. The visualization uses React to generate a grid of small colored circles with random positions and fills, layering them behind the Buddha shapes. The code maps over arrays to create these circles using React elements within an SVG container, while the Buddha outlines come from static path data. The background image is loaded from an external URL, and the entire composition is built with React 16 and rendered through ReactDOM.

Oct 18, 2024
Loading thumbnail…

5 Buddhas

Five concentric diamond-shaped polygons overlap in chaotic, randomized patterns, each rotated 45 degrees and filled with bright, translucent RGB colors. Built with React and rendered as SVG, the visualization uses nested array maps to generate hundreds of polygon elements, with coordinates and colors derived from repeated `Math.random()` calls. The composition layers a detailed Buddha path figure at the center, creating a dense, psychedelic collage against a black background.

Oct 13, 2024
Loading thumbnail…

5 Buddhas

Five Buddhas presents five overlapping Buddha silhouettes, each filled with a dense, chaotic polygon field. The artwork is generated by React code that maps a numeric array onto hundreds of semi-transparent SVG polygons, each with randomized positions, fills, and a constant rotation. The rendering uses ReactDOM to inject the SVG into the DOM, with the primary Buddha path drawn as a complex SVG path element with a scale transform.

Oct 13, 2024