DivyaKota2@my.unt.edu

Fork of task-9

Fork of task-9(2)

Horizontal bar chart that represents the population of various countries in millions

Horizontal bar chart that represents the population of various countries in millions.

Horizontal bar chart that represents the population of various countries in millions.

Horizontal bar chart that represents the population of various countries in millions.

Fork of Fork of Horizontal bar chart that represents the population of various countries in millions.

This horizontal bar chart displays the populations of various countries in millions, using 2023 data from the covidandworldpopulation.csv file. Countries with smaller populations appear at the top, and larger ones at the bottom, with bar lengths encoding the population values. The visualization uses d3 scaleLinear and scaleBand for axes and positioning, and a color legend that supports hovering to highlight a selected country in the plot.

Horizontal bar chart that represents the population of various countries in millions.

Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart displays population estimates for the world's most populous countries, segmented by religion for the year 2010. Hovering over the color legend highlights the corresponding segments across all bars. Built with D3.js, it uses `scaleOrdinal` for colors and `stack` for the bar aggregation. The data comes from a Pew Research report, processed and loaded from a CSV file.

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

Fork of Fork of Fork of Interactive Stacked Bar Chart

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart displays the total COVID-19 cases per continent against population, using a categorical color scale to distinguish continents. A linked legend allows hovering to highlight a specific continent’s bars while dimming others. The visualization uses D3’s `flatRollup` and `stack` to structure data, `scaleBand` and `scaleLinear` for axes, and responsive resizing via `@curran/responsive-axes`. Data is loaded from a local CSV file containing population and case counts.

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

Fork of Fork of Fork of Interactive Stacked Bar Chart

This interactive stacked bar chart displays the estimated religious breakdown of the 20 most populous countries in 2010, based on data from the Pew Research Global Religious Landscape. Users can hover over the legend to highlight specific religions. The visualization uses D3’s `scaleOrdinal`, `stack`, and `scaleBand` to render stacked segments, with hover interactions managed by mouseenter and mouseleave events that adjust highlight opacity and stroke. Data is loaded from a CSV file.

Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart visualizes the estimated per-continent population and total COVID-19 case counts from a local CSV file for the year 2010, using an ordinal color scale to represent continents. The visualization is built with D3 and implements a custom `colorLegend` component that enables hovering over legend items to highlight corresponding segments in the stacked bars. The chart also incorporates responsive axes and a stacking algorithm that groups data by continent, with interactive fading and stroke emphasis applied to the selected category.

Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart visualizes the estimated per-continent population and total COVID-19 case counts from a local CSV file for the year 2010, using an ordinal color scale to represent continents. The visualization is built with D3 and implements a custom `colorLegend` component that enables hovering over legend items to highlight corresponding segments in the stacked bars. The chart also incorporates responsive axes and a stacking algorithm that groups data by continent, with interactive fading and stroke emphasis applied to the selected category.

Fork of Fork of Fork of Interactive Stacked Bar Chart

Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart visualizes the estimated per-continent population and total COVID-19 case counts from a local CSV file for the year 2010, using an ordinal color scale to represent continents. The visualization is built with D3 and implements a custom `colorLegend` component that enables hovering over legend items to highlight corresponding segments in the stacked bars. The chart also incorporates responsive axes and a stacking algorithm that groups data by continent, with interactive fading and stroke emphasis applied to the selected category.

Fork of Fork of Fork of Webpage

Fork of Fork of Webpage

Fork of Webpage

Fork of Fork of Fork of React Starter

This visualization displays the total COVID-19 cases over time for Afghanistan, using a bar chart to show the cumulative case count for each date. The data is loaded from a CSV file containing COVID-19 statistics, with the chart rendering as an SVG using the React framework and the @visx/shape and @visx/axis libraries. D3.v7 handles the underlying scale calculations, while the bars are colored purple and axes are labeled accordingly.

Fork of Fork of Fork of Fork of React Starter

This bar chart displays the total COVID-19 cases over time for Afghanistan, using a simple time-series visualization. The chart uses a band scale for the date axis and a linear scale for the case counts, rendering each bar with the `Bar` shape from `@visx/shape`. Data is loaded from a local CSV file and parsed in a React component using `useState` and `useEffect`. The SVG output includes axes from `@visx/axis` and is styled with the color `#8884d8`.

Fork of Fork of React Starter

Fork of Fork of React Starter

This example shows the progression of total COVID-19 cases over time using a bar chart. The visualization loads a merged CSV file containing COVID-19 population data and displays it as a series of vertical bars, one for each date entry. The code uses the React framework with the Recharts library, specifically employing its `BarChart`, `Bar`, `XAxis`, `YAxis`, `CartesianGrid`, `Tooltip`, and `Legend` components within a `ResponsiveContainer`. The data is fetched via the native `fetch` API and parsed manually from comma-separated rows into JavaScript objects for the chart.

Fork of Fork of React Starter

This example shows the progression of total COVID-19 cases over time using a bar chart. The visualization loads a merged CSV file containing COVID-19 population data and displays it as a series of vertical bars, one for each date entry. The code uses the React framework with the Recharts library, specifically employing its `BarChart`, `Bar`, `XAxis`, `YAxis`, `CartesianGrid`, `Tooltip`, and `Legend` components within a `ResponsiveContainer`. The data is fetched via the native `fetch` API and parsed manually from comma-separated rows into JavaScript objects for the chart.

Fork of React Starter

Fork of Fork of React Starter

Fork of Fork of Missing Migrants Date Histogram

This visualization displays a date histogram of the total dead and missing migrants per month, using data from the Missing Migrants Dataset. Built with React and D3 v5, it showcases the `bin()` and `sum()` APIs from `d3-array` to aggregate monthly totals, rendered as SVG rectangles with tooltips. The chart employs `scaleTime()` for the x-axis and `scaleLinear()` for the y-axis, with a clean, minimal aesthetic defined by custom styling.

Fork of Fork of Fork of Interactive Stacked Bar Chart

Fork of Fork of task-9(2)

This area chart displays house prices across three locations—Rural, Urban, and Suburban—with a steelblue filled path and labeled values. Built with D3 v7, it uses `d3.area()` to generate the path, `scaleBand` for the x-axis, and `scaleLinear` for the y-axis. The SVG includes axes via `axisBottom` and `axisLeft`, with prices formatted as dollar amounts. A title annotation appears at the top, and the static dataset is hardcoded in the script.

task-9

task-8(1.2)

task-8(question-4)

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across ten car makes. Each circle’s position encodes torque and horsepower on the axes, while its size maps to highway MPG and its color distinguishes the car brand. The visualization uses D3 v7 with SVG rendering, including a tooltip for make identification on mouseover, a size legend, and a color legend. Data is loaded from a local CSV file using `d3.csv`, with scales built via `d3.scaleLinear` and `d3.scaleOrdinal`, and colors assigned using `d3.interpolateTurbo`.

Fork of task-8(part-4)

task-8(part-4)

Task-8(part-4)

task-8(question 3)

task-8(tutorial-3.2)

task-8(part-3)

Fork of Task -8(part-2)

A stacked horizontal bar chart visualizes ice cream flavor ratings across five Likert-scale categories from strongly dislike to strongly like. The D3 v7 code composes the data from a CSV with d3.stack, maps flavor names to the y-axis with d3.scaleBand, and positions bar segments with a linear percentage scale. Hovering over individual segments triggers d3.select and tooltip interactions to reveal precise percentages, while custom axis labels and Google Fonts styling frame the chart.

Task -8(part-2)

This example demonstrates basic D3.js functionality within the VizHub environment, loading D3 via UNPKG and using ES6 modules to structure the code. It uses `import { select } from 'd3'` to target the `#message` div and set its text content to a greeting string exported from a local `myMessage.js` module, while an external stylesheet controls the large centered font size.

task-8

This interactive bar chart visualizes the population of 20 countries in 2010, loaded from a remote CSV file and rendered as SVG via React and D3 v5. The code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to render ticks and bars. A formatting function from `d3.format` converts large numbers to abbreviations like "B" for billions.

Buddha

This visualization depicts a stylized Buddha silhouette built from dozens of overlapping, randomly rotated polygon triangles rendered in vivid, saturated colors against a black background. Using React and SVG, the code maps a numeric array to generate translucent, diamond-like shapes with randomized positions, colors, and rotations, layering them to create a textured, kaleidoscopic portrait. The Buddha figure emerges from the chaotic, colorful geometry, with each triangle contributing to the overall form while retaining its own vibrant hue, blending algorithmic generative art with a sacred iconography.