A

aparnachalumuri@gmail.com

@aparna7423·23 public vizzes

Loading thumbnail…

zip2

This dashboard explores the relationship between housing affordability and homelessness across U.S. states from 2005 to 2022. It presents five linked visualizations: a grouped bar chart comparing affordable housing percentages against homeless populations, a scatterplot correlating median home prices with homelessness, a dual-axis line chart tracking yearly trends, a stacked area chart breaking down homelessness by youth and chronic categories, and a heatmap displaying homeless population intensity over time. All charts use D3 v6 with SVG rendering, load CSV data from GitHub, and include interactive tooltips.

Loading thumbnail…

Housing Affordibility for homeless

This dashboard visualizes the relationship between housing affordability and homelessness across U.S. states from 2005 to 2022 using three linked D3.js charts: a grouped bar chart comparing state-level metrics, a scatterplot plotting median home prices against homeless populations, and a dual-axis line chart showing national trends over time. It employs D3 v6 with SVG rendering, loading data from external CSV files and featuring interactive tooltips on mouseover for all visualizations.

Loading thumbnail…

Homessless house affordobility

This dashboard visualizes housing affordability and homelessness across U.S. states by merging two CSV datasets on state and year. It displays a grouped bar chart comparing the percentage of affordable housing against homeless population counts, with hover tooltips providing exact values. The visualization uses d3.scaleBand for the categorical axes, d3.scaleLinear for the value axis, and d3.scaleOrdinal for color encoding. Data is loaded asynchronously via d3.csv with Promise.all, and rendered as SVG elements with interactive mouseover events.

Loading thumbnail…

activity6-question1

A horizontal bar chart displays the 2000 population of ten countries, with countries on the y-axis and population on the x-axis. Built with React and D3, it uses `scaleBand` and `scaleLinear` from the 'd3' module imported directly, loading data via `csv` from a GitHub URL. The SVG rendering includes custom `AxisBottom`, `AxisLeft`, and `Marks` components, with tooltips showing formatted values.

Loading thumbnail…

home

This dashboard visualizes the relationship between housing affordability and homelessness across Connecticut towns from 2011 to 2022. It presents two interactive charts: a bar chart showing the percentage of affordable housing units per town, and a line chart tracking year-round bed counts for homeless shelter programs. The visualization uses dropdown filters to select specific years and towns, with all charts rendered as SVG elements. The code employs d3.csv for data loading, d3.scaleBand and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.select to dynamically populate filter menus and append chart components.

Loading thumbnail…

Question2_Activity7

This area chart tracks tourist park income month-by-month throughout 2022. The visualization uses a steelblue filled area with axes labeled "Month" and "Income" to display the data. The chart is built with D3.js v7, loading CSV data from a GitHub gist and rendering as an SVG. It employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area()` to generate the filled path, with `d3.axisBottom` and `d3.axisLeft` creating the labeled axes.

Loading thumbnail…

Activity-7_Aparna

A pie chart visualizes the percentage of sales contributed by each of five regions. The chart displays slices with percentage labels and a legend with color-coded region names and values. It uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` to generate the chart from CSV data, fetched from a GitHub gist. The SVG rendering places the pie at the center, with the legend positioned to the right.

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example displays a pie chart of regional sales data from a CSV file, with each slice’s percentage labeled and a legend listing regions and their shares. It uses D3’s `csv`, `pie`, `arc`, and `scaleOrdinal` to fetch data, compute slice geometry, and map colors. The chart is rendered into an SVG, with the VizHub V3 runtime handling data loading and hot reloading.

Loading thumbnail…

activity6_Task1

This horizontal bar chart displays the top 30 countries by 2020 World Bank population data, drawn using React and D3 v5. The visualization converts raw population values (stored as CSV data from a GitHub repository) into D3 scaleBand and scaleLinear scales for the y-axis and x-axis respectively, rendering SVG rectangles via the Marks component. Population formatting uses D3's format function to abbreviate large numbers (e.g., 'G' for billions, replaced with 'B'). Hovering over each bar reveals the exact population value in a tooltip, while blue tick lines and green bars provide clear visual separation.

Loading thumbnail…

Activity6_Question4

This interactive bubble chart visualizes the relationship between smartphone price, battery capacity, and average rating using data from a CSV file. The visualization uses D3 v7 to render SVG circles positioned by price and battery on x and y axes, with bubble size representing rating and color distinguishing phone models via an ordinal scale with interpolateTurbo. Hover interactions trigger tooltips displaying model details. A legend on the right maps bubble sizes to star ratings, while CSS styles enhance hover opacity for improved readability.

Loading thumbnail…

Fork of Bubble chart

This bubble chart visualizes the correlation between price, battery capacity, and average rating for various car models. Each circle’s x-position shows price, y-position shows battery capacity in mAh, and its radius encodes the average rating. D3’s `scaleLinear` and `scaleOrdinal` map data to positions, sizes, and colors, while a custom tooltip displays model details on mouse events. The legend with star values clarifies the rating scale, rendered as SVG with a black stroke.

Loading thumbnail…

Activity6_task4

This animated bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Rendered using D3 v7 with SVG, the tooltip displays the car make on mouseover. The color and size of each circle encode the car brand and highway MPG, respectively. A legend clarifies the MPG scaling, and the chart uses d3.scaleLinear and d3.scaleOrdinal to map the data.

Loading thumbnail…

Activity6_question3

This scatter plot visualizes penguin measurements, displaying flipper length against body mass for three species, colored red, green, and blue. The visualization loads CSV data from a GitHub repository using `d3.csv`, filters out invalid entries, and renders the points as SVG circles via D3 v7. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales are computed using `d3.scaleLinear` for position and `d3.scaleOrdinal` for species colors.

Loading thumbnail…

Fork of Fork of Activity6_tutorial3.2

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis against petal length on the y-axis, with each species distinguished by a unique symbol shape. The chart includes labeled axes and a shape legend identifying the three species. Built with d3.v7, the code uses `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to position and render marks, while `axisLeft` and `axisBottom` generate the axes. Data loads from a remote CSV via `fetch` and `csvParse`.

Loading thumbnail…

Fork of Activity6_tutorial3.2

This example renders a large, centered HTML message using plain CSS and JavaScript, without any external libraries. The page displays the text “Hello HTML!” at a font size of 13em, styled via an inline stylesheet and positioned using a `<div>` element. It demonstrates a minimal setup for static content, relying solely on the browser’s default rendering of HTML and CSS rather than data-driven visualization or interactive frameworks. The code serves as a basic starter template for web pages, showing how structure and styling combine in a single file.

Loading thumbnail…

Activity6_tutorial3.2

This example displays a large, centered message reading “Hello HTML!” using a minimalist layout. The page is styled entirely through embedded CSS, which sets the font size to 13em and centers the text horizontally. It uses plain HTML and CSS within a single file, with no JavaScript logic or external libraries beyond the basic document structure. The rendering approach is a static, unstyled browser default, demonstrating the fundamental separation of content and presentation in a web document.

Loading thumbnail…

Activity6_Task3

A scatter plot displays the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. Circles also store sepal length and width as properties, though these are not visually encoded. The visualization loads data from a GitHub CSV using `d3.csv`, scales with `scaleLinear` and `extent`, and renders as SVG circles via `selectAll` and `join`. Axes are generated with `axisLeft` and `axisBottom`, with custom labels added as SVG text.

Loading thumbnail…

activity6_question2.1

This example presents a stacked bar chart that compares the proportion of customer ratings across six technology product categories, including Smartphones, Laptops, and Tablets. The chart shows how ratings are distributed across six defined score ranges, from below 5.0 to above 9.0. Built with D3.js v7, the visualization loads data from a local CSV file and uses `d3.csv` to parse it. The chart employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, with `d3.stack` to create the stacked segments and `d3.schemeSet2` for the color palette.

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes IMDb movie rating distributions across six genres, showing the percentage of films falling into five rating brackets from “below 5.0” to “above 8.5.” Each genre bar is segmented by rating category, with the legend on the right indicating the color for each bracket. Using D3 v7 with SVG rendering, the code employs d3.stack, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand to process the CSV data and position the rectangles. Interactive tooltips display the exact percentage for a hovered segment, updating opacity for visual feedback.

Loading thumbnail…

activity6_question1.2

This example shows a horizontal bar chart displaying the population of twenty countries from a CSV dataset for 2010, with a green fill for the bars and blue tick lines. It is implemented in React and D3 v5, using `scaleBand` and `scaleLinear` for the axes, while custom components like `AxisBottom`, `AxisLeft`, and `Marks` render the SVG elements. The code also imports the `format` function to abbreviate tick labels, converting values like 'G' to 'B' for billions.

Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates a minimal D3.js setup that displays the text "Hello VizHub!" centered on a webpage. It loads D3 v5.16.0 from the UNPKG CDN and uses the `select` function to target the `#message` div, setting its text content. The project also shows how to import from local ES6 modules, with a separate `myMessage.js` file exporting the message string, and includes basic CSS styling for the text.

Loading thumbnail…

6 buddhas

The visualization displays a stylized, overlapping arrangement of six colorful Buddha figures rendered as SVG paths on a green floral background. The code uses React to generate a single `<svg>` element, with each Buddha composed of intricate path data. The rendering relies on ReactDOM to inject the SVG into the DOM, while CSS applies the background image. The code includes commented-out attempts to generate random circles, but the active output showcases the fixed, pre-defined Buddha paths with varied colors and transformations.

Loading thumbnail…

5 bhuddhas

The visualization shows five abstract Buddha silhouettes rendered as overlapping filled polygons on a black background. Built with React and raw SVG, it generates numerous randomly positioned, rotated triangles with semi-transparent RGB colors, creating a dense, kaleidoscopic effect around the central Buddha paths. The code uses nested array maps to create hundreds of polygons, with fill colors and opacity values derived from `Math.random()`. The Buddha shapes themselves are defined as SVG path data within transformed groups, layered over the generative geometric chaos.