Skip to main content
Log in
M

manishmanda@my.unt.edu

@manishmanda29·7 public vizzes

Loading thumbnail…

Activity6Task_4

This bubble chart displays the relationship between processor speed, battery life, and RAM for twenty smartphone brands. Each bubble’s position maps processor speed (x-axis) against battery life (y-axis), while its radius encodes RAM capacity and color distinguishes brand. The visualization uses D3.js v7 with SVG rendering and includes interactive tooltips on hover, plus legends for both RAM size and brand colors. Data is loaded from a CSV file using `d3.csv`, with scales from `d3.scaleLinear` and colors generated via `d3.interpolateTurbo` and `d3.scaleOrdinal`.

Oct 20, 2024
Loading thumbnail…

Activity6_Task3

This visualization shows the relationship between age and insurance charges, with points shaped according to sex. The scatter plot uses D3 v7’s `scaleLinear` for both axes and `scaleOrdinal` with `symbolsFill` for categorical shape encoding. A custom legend displays the mapping between shapes and sex using D3’s `symbol` generator. Data is loaded asynchronously from a remote CSV file and parsed with `d3.csvParse`, with axes and labels added via the `axisLeft` and `axisBottom` helpers.

Oct 20, 2024
Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This interactive scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis while using distinct symbols to represent each species. Built with D3 v7, it employs `scaleLinear` for the axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbol` generators to draw the marks. A custom shape legend displays the species categories, and the data is fetched as CSV and parsed with `csvParse`.

Oct 20, 2024
Loading thumbnail…

Activity_Task2

A stacked horizontal bar chart displays customer satisfaction ratings across six product categories, showing the proportional distribution of responses from "Very Unsatisfied" to "Very Satisfied" for each product. The visualization uses D3 v7 with SVG rendering, employing d3.stack() to compose the categorical segments and d3.scaleOrdinal with a custom color palette for the five rating levels. Bars are positioned along a d3.scaleBand y-axis, while percentages are mapped through a d3.scaleLinear x-axis. Interactive tooltips appear on mouseover, revealing the exact percentage for each rating category using d3.format().

Oct 19, 2024
Loading thumbnail…

Fork of Activity 6_2

This example shows a horizontal bar chart of the top 20 countries by 2010 population, sourced from a CSV file on GitHub. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to SVG bars, with `d3.csv` loading the data. The code imports local ES6 modules for axes and marks, formats population ticks with `d3.format`, and uses SVG `<title>` elements for tooltips. Axes are rendered as SVG groups, with styling applied via CSS classes.

Oct 19, 2024
Loading thumbnail…

Activity 6

This example presents a horizontal bar chart of population data from the year 2000 for ten countries, using an SVG rendering within a React component. The visualization loads a CSV from GitHub and processes the data with d3.csv, then uses d3.scaleBand and d3.scaleLinear to map categorical and quantitative values to positions. The chart includes custom axes built with map functions, displaying population values in billions with formatted tick labels, alongside interactive tooltips generated through SVG `<title>` elements. The code leverages React’s useState and useEffect hooks for asynchronous data loading, and imports D3 functions like `max`, `format`, and `scaleBand` directly.

Oct 19, 2024
Loading thumbnail…

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

This example renders five overlapping, semi-transparent violet Buddha silhouettes on a black background, each scaled and translated to create a layered, repeated composition. The SVG paths are hard-coded in the source, and the React app uses the `react` and `react-dom` libraries to generate the graphics. A CSS background image of flowers is set on a `div` element, and the page uses a large red text message. The code defines a cubic function and a loop, but these do not affect the visual output.

Oct 17, 2024