M

manojapopuri@gmail.com

@Manoja444·26 public vizzes

Loading thumbnail…

Man fork

This gallery page showcases six distinct visualizations of global development data, including population growth trends, land area versus population density, agricultural land, CO2 emissions, geographic population distribution, and GDP versus life expectancy. The page loads D3 via UNPKG, demonstrates importing from the `"d3"` module, and uses local ES6 modules. Each chart is presented as a static PNG or JPG image, embedded via HTML `<img>` tags with absolute file paths, rather than rendered dynamically in the browser. The visualizations rely on pre-generated Python outputs, not interactive D3 graphics.

Loading thumbnail…

Web page

This page presents a gallery of eleven static data visualizations exploring global demographic, economic, and environmental indicators. It showcases population growth trends, land area versus density, agricultural land, CO2 emissions, GDP versus life expectancy, and urban population percentages. The visualizations are rendered using Python (likely with matplotlib), D3.js, and Tableau, with each image embedded directly in the HTML. The page serves as a central hub, linking to external image files for the different chart types and a Tableau dashboard.

Loading thumbnail…

Man Task 9

This animated scatter plot cycles through four pairwise comparisons of iris flower measurements (petal width, sepal width, petal length, and sepal length) on the x-axis, using the D3.js library. It displays the classic Iris dataset fetched from a GitHub gist, rendering each flower as a circle colored by species (setosa in skyblue, versicolor in lightgreen, and virginica in orange). The visualization also includes a legend and dynamic axis labels, updating at intervals to explore correlations between different feature combinations.

Loading thumbnail…

xyz

This example shows a pie chart visualizing the counts of car names from a CSV dataset of F1 cars. The chart displays each car as a colored slice with its count labeled in the center, and it includes a legend with colored rectangles for each car name. The code loads D3 v7 via Skypack and uses `csv`, `pie`, and `arc` to generate the chart, along with `d3.scaleOrdinal` and `d3.schemeCategory10` for coloring. The visualization is rendered as SVG with axis labels for "Car Names" and "Count".

Loading thumbnail…

Man Tuto

This example shows the distribution of percentages across different social media platforms using a pie chart, with a legend and axis labels identifying the categories and values. The visualization is rendered as an SVG using React and D3 v7, leveraging `d3.select` for DOM selection, `d3.csv` to load data from a GitHub-hosted CSV file, and `d3.pie` with `d3.arc` to compute and draw the pie slices. Percentage labels are placed at each slice’s centroid, and the color scheme uses `d3.scaleOrdinal` with the `schemeCategory10` palette.

Loading thumbnail…

Mano T9 - Q1

This example shows a pie chart of social media platform usage percentages, with a legend displaying each platform’s name and share. The visualization is rendered as an SVG and uses D3’s `pie` and `arc` generators to compute and draw the segments, while `scaleOrdinal` with `schemeCategory10` assigns colors. Data is loaded via D3’s `csv` function from a GitHub gist, and the legend is built manually with appended `rect` and `text` elements.

Loading thumbnail…

Manoja T9 Q2

This D3.js area chart visualizes data from a CSV file, showing how category values change across years. The stacked areas use a categorical color scheme, with each band representing a different column from the dataset. The code loads the data via `fetch`, parses it with `csvParse`, and constructs the visualization using `scaleBand`, `scaleLinear`, `stack`, and `area` with `curveMonotoneX`. Axes and labels are added with `axisBottom` and `axisLeft`.

Loading thumbnail…

Question 3

This scatter plot visualizes a dog dataset, mapping weight on the x-axis and height on the y-axis, with each point colored by species. The chart uses D3 v6 APIs including `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render the SVG. Circles are drawn via a `join` operation, and the plot includes labeled axes with custom fonts and colors. The data is fetched asynchronously from a remote CSV file hosted on GitHub.

Loading thumbnail…

Manoja Q3

This scatter plot visualizes the relationship between the height and weight of different dog breeds, with each point colored by species using a fixed color mapping. The chart uses D3.js v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data from a remote CSV, compute scales, and render SVG circles within a full-window canvas. Axis labels are added as rotated SVG text elements, and the point radius is constant at five pixels.

Loading thumbnail…

Manoja SDV 3

This scatter plot displays the relationship between height and weight for fish species in a dataset loaded from a GitHub-hosted CSV file. The visualization uses colored circles to differentiate between species, with a legend showing each species’ color mapping. The code leverages D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and scales, while the D3 `select` and `join` functions handle SVG circle creation. The rendered SVG fills the browser window, with styled axis labels and a red title.

Loading thumbnail…

Man SDV Q4

This bubble chart visualizes the relationship between vehicle acceleration and fuel efficiency (MPG) across 19 car makes, with each circle’s size encoding price tier (high, medium, or low). It uses D3.js v7 with SVG rendering, loading data from a CSV file. The chart maps acceleration to the x-axis and MPG to the y-axis using linear scales, while a square-root scale determines bubble radius. Axes are labeled, though tick marks are not drawn. Data is processed by converting strings to numbers and lowercasing price values before scaling.

Loading thumbnail…

Man Task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes, with each bubble's size representing fuel efficiency and its color indicating the manufacturer. Built with D3 v7, the visualization uses SVG rendering and animated transitions, implementing linear scales for the x- and y-axes and an ordinal color scale with the `interpolateTurbo` palette. Interactive tooltips appear on hover using D3's `.on()` event handlers, while a legend demonstrates bubble size scaling and color-coded car makes.

Loading thumbnail…

Fork of Man Task 4

This animated bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes torque and horsepower, its radius scales with highway MPG, and color distinguishes the manufacturer. The chart is built with D3 v7, using `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color, and SVG elements. Interactive tooltips appear on mouseover via `d3.select` event handlers, while the legend maps both the bubble-size scale and make-specific colors.

Loading thumbnail…

Man Task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across different car makes. Each circle’s position maps horsepower and torque, while its radius encodes highway MPG and color distinguishes automotive brands using the D3 `scaleLinear`, `scaleOrdinal`, and `interpolateTurbo` color scale. The visualization includes axis labels, a legend for MPG values, and a color-coded make legend. Interactive tooltips appear on mouseover, implemented with D3 event handlers, while the data comes from the embedded CSV file and is rendered as SVG with hover animations.

Loading thumbnail…

Man SDV Task 4

This visualization shows the correlation between average horsepower, torque, and highway MPG for 31 car makes, with each bubble positioned by horsepower (x-axis) and torque (y-axis), while its size encodes highway MPG. A tooltip appears on hover to reveal the car make. The code uses D3.js v7 with SVG, employing `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color encoding, and hover event handlers for the tooltip. Data comes from an external CSV file, and a legend displays both bubble size values and color-coded makes.

Loading thumbnail…

Fork of Man SDV Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. The x-axis represents horsepower, the y-axis represents torque, and the size of each bubble encodes highway MPG. A legend maps bubble size to MPG values and color to car brand. Built with D3.js v7, the SVG visualization uses `d3.scaleLinear` for all axes and bubble size, and includes interactive tooltips on mouseover events. Data is loaded from the `bubblechart.csv` file.

Loading thumbnail…

Man SDV Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG and its color distinguishes the manufacturer. Built with D3 v7, the SVG renders circles with a color scale using `d3.interpolateTurbo` and `d3.scaleOrdinal`. Interactive tooltips appear on mouseover via D3 event handlers, and a legend shows bubble size mapping and make colors, all based on data from `bubblechart.csv`.

Loading thumbnail…

Man SDV Task 8 Q3

This scatter plot visualizes the relationship between the width and length of items from a CSV dataset, with points colored and shaped by category. The visualization uses D3.js v7 to create SVG marks, axes, and a shape legend that maps ordinal categories to distinct symbols. The plot updates dynamically to fill the browser window, with axes labeled “Width” and “Length” and hover effects increasing point opacity. It is built using modular D3 components like `scaleLinear`, `scaleOrdinal`, `symbols`, `axisLeft`, and `axisBottom`, applying a joined subchart approach.

Loading thumbnail…

Man SDV Question 3

This example shows a scatter plot of custom dataset points, with each dot colored by category using a categorical color scale. The visualization loads data from a remote CSV file and renders it with D3 v7, using `scaleLinear` for axes and `scaleOrdinal` with `schemeCategory10` for colors. It includes a reusable axis module and a legend component that maps shapes to categories using `d3.symbol`. The plot updates responsively to the window size.

Loading thumbnail…

Man SDV Question 3 - 6

This scatter plot visualizes the relationship between sepal length and sepal width from the Iris dataset, with species information indicated through a shape legend. It uses D3.js (v7) with the `d3.axisBottom` and `d3.axisLeft` APIs to generate the axes, `d3.scaleLinear` for coordinate mapping, and `d3.symbols` for the legend shapes. The plot is rendered as an SVG, with each flower represented as a steelblue circle positioned by its sepal measurements. The implementation loads data from a CSV file and draws the chart programmatically.

Loading thumbnail…

Man SDV Activity 6_ Task 3 - Tutorial 3.2

This example shows a scatter plot of iris flower measurements, with sepal length on the x-axis, petal length on the y-axis, and species encoded by ten distinct symbol shapes from d3.symbolsFill. A shape legend identifies each species marker. Using D3 v7, the code loads data from a remote CSV via fetch and csvParse, then renders the plot with d3.scaleLinear for axes, d3.axisBottom/axisLeft for ticks, and d3.symbol to generate the shape paths.

Loading thumbnail…

Man SDV Activity6_Task3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length (x-axis) and petal width (y-axis), with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The code loads CSV data via `d3.csv`, uses `d3.scaleLinear` with `d3.extent` for scales, and renders circles with `d3.axisLeft` and `d3.axisBottom` for axes. Although the implementation includes extra `rx` and `ry` attributes, the actual marks are circles of fixed radius, with axes labeled for petal length and sepal length.

Loading thumbnail…

Man SDV Activity6_Task2

This stacked bar chart displays sales performance across five product categories—Electronics, Clothing, Books, Furniture, and Toys—for four regions (North, South, East, West), with percentages derived from the CSV dataset. The visualization uses D3.js v7 to render an SVG, employing d3.stack() to compute stacked series, d3.scaleOrdinal for category colors, and d3.scaleBand with d3.scaleLinear for axes. Interactive tooltips show exact category percentages on mouseover, while hover effects change bar opacity, and a legend identifies each category.

Loading thumbnail…

Fork of Man - SDV Activity 6 _Task 1

This horizontal bar chart displays the populations of the top 20 countries in 2010, ordered by country name along the y-axis and population magnitude along the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering data as SVG rectangles with tooltips showing formatted values. The chart loads CSV data from a remote GitHub repository and applies a custom tick formatter that converts large numbers to abbreviated units like "B" for billions. Axis labels and styling utilize CSS classes defined in the HTML document.

Loading thumbnail…

Man - SDV Activity 6

This example demonstrates a minimal Hello VizHub message rendered as large centered text. It shows how to load D3 from a CDN, import API functions such as `select`, and use local ES6 modules with an exported `message` constant. The page structure is defined in HTML and CSS, while the JavaScript sets the text content of the `#message` div. The code also includes unused variables and a regular expression, but the visible behavior is simply the static text display.

Loading thumbnail…

5 buddhas

Five golden buddha silhouettes, each composed of scattered triangular facets, overlap diagonally across a black canvas. The shapes are generated from randomized polygon coordinates and vibrant fill colors, while a subtle rotation transform gives the figures a shimmering, fragmented quality. Rendered with React and SVG, the piece uses repetitive mapping over coordinate arrays to construct its meditative, kaleidoscopic composition.