Skip to main content
Log in
A

akankshareddygorla@my.unt.edu

@Akankshhh03·17 public vizzes

Loading thumbnail…

Activity 6_Task 2 Q3

This stacked bar chart displays clothing sales across five stores, breaking down revenue into jeans, t-shirts, and shirts. Using D3 v7, the code loads data from a CSV file and applies the `d3.stack()` function to generate segments, with an ordinal color scale distinguishing product categories. Horizontal bars are rendered as SVG rectangles scaled by `d3.scaleLinear` for the x-axis and `d3.scaleBand` for store names. Interactive tooltips appear on mouseover, showing precise sales figures for each category per store.

Oct 22, 2024
Loading thumbnail…

Activity 6_Task 4 Q4

This bubble chart shows the correlation between average temperature, humidity, and pressure across 25 U.S. states. Each circle’s x-position maps to temperature, y-position to humidity, and radius to pressure, with colors assigned per state via a custom ordinal scale based on `d3.interpolateTurbo`. The visualization is rendered with SVG and includes interactive tooltips on mouseover and a legend for pressure values. Data is loaded from a CSV file using `d3.csv`, and axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Oct 21, 2024
Loading thumbnail…

Activity 6_Task 4

This bubble chart shows the correlation between average horsepower, average torque, and highway MPG across different car makes. Each circle represents a make, positioned by its horsepower and torque values, with the bubble size scaled by highway MPG and color encoding the make. Built with D3 v7, it renders as an SVG and uses `d3.scaleLinear` for positioning and sizing, `d3.scaleOrdinal` with `interpolateTurbo` for colors, and `d3.csv` to load the data. Tooltips appear on hover, and a legend indicates the MPG mapping.

Oct 21, 2024
Loading thumbnail…

Activity 6_Task 4

This bubble chart shows the correlation between average horsepower, average torque, and highway MPG across different car makes. Each circle represents a make, positioned by its horsepower and torque values, with the bubble size scaled by highway MPG and color encoding the make. Built with D3 v7, it renders as an SVG and uses `d3.scaleLinear` for positioning and sizing, `d3.scaleOrdinal` with `interpolateTurbo` for colors, and `d3.csv` to load the data. Tooltips appear on hover, and a legend indicates the MPG mapping.

Oct 21, 2024
Loading thumbnail…

Activity 6_Task 3 Q3

This example shows a scatter plot of age versus insurance charges, with points shaped by sex and a legend for gender. The plot uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to generate shapes, along with custom axis and legend modules. Data is loaded as CSV from a GitHub gist and parsed with `csvParse`. The SVG chart resizes to the viewport, and the axes and legend are drawn using D3's `axisLeft` and `axisBottom` helpers.

Oct 21, 2024
Loading thumbnail…

Activity 6_Task 3.2

This example shows a scatter plot of AGE versus CHARGES, with data points encoded by shape to represent the SEX category and labeled with misleading axis titles ("Accessories" and "Clothing") and a "Store" legend. The visualization uses D3 v7's `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to map categories to symbol shapes, and a custom shape legend built with `symbolGenerator`. Data is loaded from a remote CSV file via `d3.csvParse` and rendered into an SVG that fills the viewport.

Oct 21, 2024
Loading thumbnail…

Activity 6_Task 3.2

This example visualizes the classic Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis as colored circles. The scatter plot uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `schemeCategory10` to color-code the three species, with a custom color legend. It relies on `d3.csvParse` to load data from a CSV file, `d3-selection` and `selection.join` for DOM updates, and `axisLeft`/`axisBottom` for the axes, which are rendered with `d3.scaleLinear` domains computed via `extent`.

Oct 21, 2024
Loading thumbnail…

Activity 6_Task 3.2

This example builds a scatter plot with a categorical legend, where data points are distinguished by shape. The visualization maps two quantitative variables to the x and y axes using `d3.scaleLinear` and assigns a different symbol to each category via `d3.scaleOrdinal` and `d3.symbol`. The chart includes axes with labels, drawn using `d3.axisLeft` and `d3.axisBottom`, and a custom legend that displays the shape mapping. The underlying data and its source are not specified in the provided code.

Oct 21, 2024
Loading thumbnail…

Activity 6_Task 3.1

This scatter plot visualizes the Iris dataset, comparing petal length and width across three flower species. Each data point is color-coded by species, with setosa in sky blue, versicolor in light green, and virginica in orange. The visualization uses D3's `csv` loader to fetch remote data, then applies `scaleLinear` with `extent` for axis scaling. Points are rendered as SVG circles via `selectAll`, with axes generated using `axisLeft` and `axisBottom`. Chart dimensions dynamically adapt to the browser window size.

Oct 21, 2024
Loading thumbnail…

Activity 6_Task 2 Q2

This example visualizes the nutritional breakdown of 80 cereal products as a stacked bar chart. It uses a D3.js v7 SVG rendering with a horizontal layout, showing the contribution of three nutrient categories (calories, protein, fat) per cereal brand, as specified in the data.csv file. The chart employs `d3.stack()` for data stacking, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the quantitative x-axis. Interactive tooltips display exact values per category and cereal when hovering over each bar segment, using D3’s event handlers (`mouseover`, `mousemove`, `mouseout`).

Oct 21, 2024
Loading thumbnail…

Activity 6_task 1 Q1.2

This bar chart displays the top 20 countries by 2010 population, using horizontal bars ordered by country name along the y-axis and population along the x-axis. Population values are formatted in billions, with tooltips showing each bar’s exact magnitude. The visualization is built with D3 v5’s `scaleBand` and `scaleLinear` for axes, while React components render SVG rectangles and tick marks. Data is fetched from a remote CSV via `d3.csv`, and the chart uses D3’s `format` to abbreviate axis labels.

Oct 21, 2024
Loading thumbnail…

Activity 6_task 1 Q1.1

This bar chart displays the population of ten countries in the year 2000, ranked along a vertical axis. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with population values converted from thousands. Axis components use `tickFormat` to abbreviate large numbers, converting 'G' to 'B' for billions.

Oct 21, 2024
Loading thumbnail…

Activity 6_Task 1

This bar chart displays the 2020 population estimates for thirty countries, using horizontal bars ordered by country name. The visualization relies on D3 version 5's `scaleBand` and `scaleLinear` to map categorical and quantitative data, with React components rendering SVG rectangles. Data is loaded from a remote CSV via D3's `csv` function, and population values are formatted using D3's `format` with SI prefixes, converting values from raw numbers to billions.

Oct 21, 2024
Loading thumbnail…

Activity 6_Task 2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres—Documentary, Drama, Comedy, Romance, Animation, and Action—with each bar segmented into five rating levels from "below 5.0" to "above 8.5". The visualization makes the impact of genre on ratings immediately apparent; for instance, Action films have a high proportion of low ratings, while Documentaries skew toward higher scores. Built with D3 v7 and rendered as SVG, the chart uses `d3.stack()` to create the stacked segments, `d3.scaleOrdinal()` for color encoding, and `d3.scaleLinear()` for the percentage axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating level within a genre, computed from the CSV data source.

Oct 21, 2024
Loading thumbnail…

Fork of Activity 7

A horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file and rendered as SVG. React components build the visualization, using `scaleBand` and `scaleLinear` from D3 v5 to map country names and population values to positions and lengths. The `Marks` component draws rectangles with tooltips, while `AxisBottom` and `AxisLeft` generate ticks and labels.

Oct 20, 2024
Loading thumbnail…

Activity 6 Task 1

This example demonstrates a minimal VizHub integration, loading D3.js via a CDN and rendering a simple "Hello VizHub!" message through the `select` API onto an HTML div. The code highlights modular ES6 imports, combining D3’s DOM selection methods with a local `myMessage.js` module for the display text, while `styles.css` centers and scales the output. It serves as a foundational template for testing D3 functionality and modular JavaScript workflows.

Oct 19, 2024
Loading thumbnail…

Buddha

A generative Buddha image renders as overlapping, rotated polygons in a kaleidoscopic display of random colors. The visualization is built with React and drawn as SVG, using nested array mappings to create hundreds of diamond shapes that blend into a dense, abstract pattern. A Buddha figure is overlaid as a detailed SVG path, while the background remains black with the entire composition centered on a 960 by 1000 pixel canvas. The code relies on React’s component structure and JavaScript’s Math.random for positioning and color generation.

Oct 11, 2024