M

meghna.reddy700@gmail.com

@meghnacheedhu·27 public vizzes

Loading thumbnail…

Data Viz P

This example presents a multi-page agricultural data analysis interface. It uses a web application structure with HTML, CSS, and JavaScript to create a landing page and a separate page containing an embedded visualization. The code loads Plotly, a graphing library, to render a candlestick chart of Apple stock data (AAPL) from a CSV file, fetched via `Plotly.d3.csv`. The interface includes navigation, a "Home" link, and an "ENTER" button that reveals the visualization iframe, loading its content from a GitHub-hosted HTML file.

Loading thumbnail…

Assignment 2 Question 2 (b)

This area chart displays nuclear energy usage from 2010 to 2020. It uses D3 v5 to load and parse CSV data, then applies a time-scale for the x-axis and a linear scale for the y-axis. The chart renders a smoothed line with a basis curve and fills the area beneath it with a green color. The SVG output includes axis labels, grid lines, and styled tick marks.

Loading thumbnail…

Assignment 2 Question 2 (b)

This area chart visualizes nuclear energy usage in the United States from 2010 to 2020, with the x-axis representing time and the y-axis showing energy consumption values. The visualization combines a smooth line plot with a green filled area beneath the curve, using d3.line and d3.area generators with curveBasis interpolation. The chart loads CSV data from a GitHub repository, parses dates with d3.timeParse, and renders axes with d3.axisBottom and d3.axisLeft within an SVG container. The layout includes labeled axes and gridlines, with the y-axis formatted using d3.format.

Loading thumbnail…

Assignment 2 Question 2(a)

This area chart visualizes mobile phone prices over time, with cost on the y-axis and year on the x-axis. The chart uses a smooth curve to connect data points and fills the area beneath the line in light blue. The visualization is built with D3 v5, employing `scaleTime` and `scaleLinear` for axes, `line` and `area` generators with `curveBasis` for the smooth path, and `axisBottom`/`axisLeft` for tick marks. Data is loaded from a remote CSV file and parsed with `d3.timeParse` to extract years from date strings.

Loading thumbnail…

Assignment 2 Question 2(a)

This area chart displays mobile phone costs over time, with monthly data points connected by a smooth curve and the region beneath the curve filled in gray. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` and `area` generators with `curveBasis` for smoothing, and parses date strings from a remote CSV file using `d3.timeParse`. Axis labels and ticks are styled via SVG elements and CSS.

Loading thumbnail…

Assignment 2 Question 2

This area chart displays one week of temperature data in San Francisco, sourced from Data Canvas Sense your City. It uses D3 v7 with an SVG rendering, employing `scaleTime` and `scaleLinear` for axes, and an `area` generator with `curveBasis` to create the smoothed shaded region. The chart includes labeled axes for time and temperature, plus a title, with gridlines styled via CSS.

Loading thumbnail…

Question 1 Pie Chart

This pie chart visualizes the top 10 countries with the most air pollution-related deaths in 2022. It uses D3.js (v5) with the `d3.pie` and `d3.arc` APIs to generate SVG paths, displaying death counts as labels formatted in thousands. Data is loaded asynchronously from a CSV file via `d3.csv`. A legend, positioned to the right, pairs each country with a colored rectangle and corresponding value, using `d3.scaleOrdinal` for color assignment.

Loading thumbnail…

Question 1 Pie Chart

A pie chart visualizes the top 10 countries by air pollution-related deaths in 2022, using CSV data from a GitHub gist. Each slice is labeled with its death count in thousands, and a corresponding legend lists country names and values. Built with D3 v5, the code uses `d3.pie`, `d3.arc`, and `scaleOrdinal` to generate and color the chart, while rendering text and SVG elements for labels and the legend.

Loading thumbnail…

Assignment 2 Question1

This pie chart visualizes genre distribution from survey data, showing the proportion of responses in the "Less than 3" category. The code loads CSV data from a GitHub repository and uses d3.pie and d3.arc to generate SVG path segments, with d3.scaleOrdinal assigning colors to genres. Interactive hover tooltips appear via appended title elements, and the chart includes a legend and percentage labels positioned at arc centroids. The visualization renders as a static SVG with D3 v7, totaling 600×600 pixels.

Loading thumbnail…

Assignment 2 Question1

This pie chart displays the distribution of survey responses about how many hours people spend on an activity, with the data segmented by genre and labeled with exact values. The chart renders as SVG using D3 v7, with `d3.pie` and `d3.arc` generating the slices from CSV data loaded via `d3.csv`. A color scale maps each genre to a distinct fill, while arc labels show the response values and a legend identifies the genre categories. The visualization loads data from a GitHub-hosted CSV and calculates the pie geometry from the numeric "Less than 3" column.

Loading thumbnail…

Assignment 2 _Test

This pie chart displays the distribution of three iris species (setosa, versicolor, and virginica) from a CSV dataset. Using D3.js, the `pie` and `arc` functions generate the slices, with each species assigned a distinct color and an interactive tooltip showing counts. The chart is rendered as an SVG, sized to the window, and includes a legend identifying each species.

Loading thumbnail…

Activity6_Task2

This example visualizes the percentage distribution of IMDb movie ratings across six genres using a stacked horizontal bar chart. The chart shows how rating categories, from below 5.0 to above 8.5, are proportionally represented within each genre. The visualization is built with D3 v7, using `d3.stack` to compute the stacked segments and `d3.scaleBand` and `d3.scaleLinear` for axes. Interactive tooltips appear on hover, displaying the exact percentage for each rating segment. The data comes from a CSV file containing genre and rating proportion values, rendered as SVG elements.

Loading thumbnail…

activity6_Question4

This bubble chart displays the correlation between processor speed, GPU performance, and storage capacity across various gaming consoles. Each bubble’s x-position represents processor speed in GHz, the y-position shows GPU performance, and the bubble size encodes storage capacity, with color distinguishing console manufacturers. Built with d3.v7, the visualization uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeCategory10` for color, and includes interactive tooltips on hover. The chart renders as an SVG with animated transitions, sourcing data from the Question4.csv file.

Loading thumbnail…

activity6_Question3

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length against flipper width for three penguin species: Adelie, Chinstrap, and Gentoo, each colored distinctly. The visualization uses D3.v7’s `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` APIs to construct the axes and plot circles, with data loaded via `d3.csv` from a GitHub raw source. Points are rendered as SVG circles with a radius of five, colored by species through a custom switch statement.

Loading thumbnail…

Question2

This stacked bar chart shows the percentage distribution of movie ratings across different genres, with each horizontal bar broken into colored segments representing rating levels from 'Less than 3' to 'More than 6'. The visualization uses d3.stack() to process the CSV data and d3.scaleBand() for the genre categories on the y-axis, with d3.scaleLinear() mapping percentages on the x-axis. Hovering over any segment triggers a tooltip displaying the exact percentage for that rating level within the genre, while the chart uses d3.axisBottom() and d3.axisLeft() for axes and a color ordinal scale to distinguish rating categories.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average torque, horsepower, and highway MPG across 31 car makes, with circle position encoding horsepower and torque, circle size encoding highway MPG, and color encoding make. The visualization uses d3.v7 to load CSV data, create linear scales, and render SVG circles with tooltips. A legend shows the circle-size scale and color key, and the SVG supports hover interactions that display the car make. The chart employs d3.scaleLinear, d3.scaleOrdinal, and d3.interpolateTurbo for visual encoding.

Loading thumbnail…

activity 6_Task 1

This example displays a horizontal bar chart comparing the 2020 population of 30 countries, using a categorical y-axis for country names and a linear x-axis for population values. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, with axes rendered via custom React components. Data is loaded asynchronously from a remote CSV file using D3’s `csv` function and formatted with the `format` API to display values in billions. The bars are drawn as SVG rectangles with tooltips showing exact population values.

Loading thumbnail…

Activity6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted from largest to smallest with green bars and a blue axis. The visualization uses D3 v5 scales (`scaleBand`, `scaleLinear`) and React components to render SVG marks, with custom `AxisBottom` and `AxisLeft` components. Data is loaded asynchronously from a CSV file via `useData`, and the x-axis formats values using D3's `format` API to abbreviate large numbers. Tooltips provide exact population values on hover.

Loading thumbnail…

5 Buddhas

Overlapping semi-transparent polygons in random colors accumulate over a black background to form a layered, abstract composition of a seated Buddha. The image shows a dense cluster of triangular shapes whose opacity and rotation create a luminous, ghostly central figure. The visualization is built with React and renders polygons directly to an SVG canvas, using nested `Array.map` loops to generate the shapes with `Math.random()` for positioning and color. The Buddha silhouette itself originates from an embedded SVG path, which is scaled and translated into place.

Loading thumbnail…

Activity6_Task3

This example uses D3 v7 to render a scatter plot of the Iris dataset, displaying sepal length against petal length. Each point’s shape encodes the species of the flower, with a legend mapping shapes to species labels. The visualization is implemented using D3’s selection join API, `scaleLinear` for the x- and y-axes, and `scaleOrdinal` for the shape scale. Data is loaded asynchronously from a CSV file using `csvParse` and a `fetch` request.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width. Each point represents a flower, colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The visualization uses D3 v6's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to map the data and render axes. The SVG circles are positioned using `cx` and `cy` attributes, while the dataset is loaded via the `csv` function from a GitHub URL.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal width against petal length for individual flowers. Each circle is colored by species (setosa, versicolor, virginica) to reveal clustering patterns within the data. The visualization uses D3.js v6 with SVG rendering, employing `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and plot the measurements. Axis labels indicate the variables, while the responsive sizing adapts to the browser window.

Loading thumbnail…

activity 6_Task 1

This interactive bar chart visualizes the 2010 population data for 20 countries, with country names on the y-axis and population counts on the x-axis. Built with React and D3 v5, it uses an SVG canvas and relies on `scaleBand` for the categorical axis and `scaleLinear` for the population values. The data is fetched from a remote CSV file using `d3.csv`, and tooltips are provided via SVG `<title>` elements. The visualization demonstrates a clean, annotated layout with custom tick formatting for readability.

Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing the populations of twenty countries in 2010, with country names on the y-axis and population values on the x-axis. The visualization uses React with D3 v5, employing `scaleBand` and `scaleLinear` for positioning, with SVG rectangles rendered as marks. Data is loaded from a CSV file using `d3.csv` and formatted with D3's `format` function to display values in billions. Axis components handle tick generation and titles, while hover tooltips reveal precise population figures.

Loading thumbnail…

activity 6_Task 1

This example demonstrates basic VizHub functionality by displaying the message "Hello VizHub!" in the center of the page. The visualization uses `d3.select` from the D3 v5 library to target the `#message` div and set its text content. The code imports both a local ES6 module (`./myMessage`) and D3's API functions, showcasing how to combine external libraries with modular JavaScript. The page's styling is handled via a separate CSS file, and the example includes a simple regular expression and number assignment within the main script.

Loading thumbnail…

Activity 6

This example demonstrates the minimal structure of a VizHub project, showing how to combine D3 with ES6 modules and local styling. It uses D3’s `select` function to set the text content of a `div` element, pulling a string from a separate local module via `import`. The page renders a single centered message, “Hello VizHub!”, with D3 loaded from a CDN and the DOM updated in plain JavaScript. The code also includes an unused variable and regular expression to illustrate syntax support.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes are rendered as SVG paths, layered with a dense grid of small randomly rotated shapes that use a color scale derived from the cube function. The composition sits on a floral background image. The React app maps over nested arrays to generate over 9,000 points and applies randomized coordinates, fill colors, and rotations. The code uses React 16.10, ReactDOM, and SVG elements, with the Buddha paths drawn from an embedded path dataset.