P

pravallikaratankanthkatragadda@my.unt.edu

@PravallikaRatan·19 public vizzes

Loading thumbnail…

Task9and10_PR_2

This example visualizes fruit preference data as a green area chart, mapping six fruit categories along a band scale and student preference counts along a linear scale. The visualization includes labeled axes, a legend, and a link to the underlying CSV dataset. The code uses d3.area() to generate the SVG path, d3.scaleBand() and d3.scaleLinear() for positioning, and d3.axisBottom() and d3.axisLeft() to render the axes. A separate legend is built with SVG rectangles and text elements, while D3 is loaded via the v7 minified script from UNPKG.

Loading thumbnail…

Task9and10_PR_1

This example presents a pie chart visualizing the distribution of favorite fruits among students, using a dataset of six categories such as Mango, Orange, and Plum. The chart is rendered as an SVG with D3 v7, employing `d3.pie()` to compute arc angles and `d3.arc()` to generate the path shapes. A categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) assigns distinct colors to each segment, while a custom legend lists the fruit categories alongside colored rectangles. The visualization also includes axis labels and a GitHub link pointing to the raw CSV data source.

Loading thumbnail…

Task6_Q2_Try2

A stacked bar chart displays the percentage of movie ratings across five genres, using a dataset of IMDb ratings categorized into five ranges. Each genre row shows the proportion of films falling into rating brackets from "5.0-6.5" up to "above 8.5." The visualization uses D3.js v7 with SVG rendering, employing `d3.stack` to create the stacked bars and `d3.scaleOrdinal` for color encoding. Hovering over any bar segment reveals a tooltip showing the precise percentage for that genre and rating category.

Loading thumbnail…

Fork of Task8_Q3_2

This visualization is a scatter plot of the Iris dataset showing sepal length on the x-axis and petal length on the y-axis, with points colored by species and encoded with different shapes via a categorical scale. It includes a shape legend for the iris species (setosa, versicolor, virginica) and labeled axes. The plot is rendered using D3.js v7 with SVG paths generated by the `d3.symbol` API, and data is fetched as CSV from a GitHub repository. The modular code imports axis and legend helpers that use `d3.axisLeft`, `d3.axisBottom`, and `d3.scaleOrdinal`.

Loading thumbnail…

Task4_Tutorial

This bubble chart visualizes the correlation between average temperature, humidity, and pressure across 25 U.S. states. Each circle’s position encodes temperature (x-axis) and humidity (y-axis), while its radius and color represent pressure and the state category, respectively. Hovering reveals a black tooltip with the state name via D3 event handlers. The SVG is built using D3 v7 with `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.interpolateTurbo`, `d3.scaleOrdinal`, and `.join()` for element creation. Interactive transitions use `d3.transition()` for tooltip opacity and position. Data loads from an external CSV file.

Loading thumbnail…

Task4_Tutorial

This example demonstrates how to build a minimal D3.js visualization within the VizHub environment. It sets the text content of a `<div>` element to the string “Hello VizHub!” using the `d3.select` API. The code also showcases ES6 module imports, both for D3’s namespace and for a local module, and includes a single CSS rule that centers and sizes the text dramatically.

Loading thumbnail…

Task3_Q3

This scatter plot visualizes the relationship between age and height for 30 individuals, with each data point color-coded and labeled by its index. The SVG-based visualization uses D3 v7 to parse CSV data, apply linear scales for both axes, and render circles that expand and display a tooltip on mouseover. A legend identifies each point, while axis labels clarify the variables plotted, and the color scale employs d3.schemeCategory10.

Loading thumbnail…

Fork of Task6_Part3

This stacked bar chart visualizes the impact of car make on three metrics—horsepower, torque, and highway MPG—by stacking the values for each make. Hovering over a bar segment displays a tooltip with the exact value for that metric. The visualization uses D3.js v6 with SVG rendering and includes a color-coded interactive legend. Bars animate from zero to their final height on load using D3’s transition system, while axes are drawn with `d3.axisBottom` and `d3.axisLeft` from data loaded via `d3.csv`.

Loading thumbnail…

Task8_Q3_Sol

This scatter plot visualizes the relationship between sepal length and petal length for iris flowers, with species encoded by symbol shape. A shape legend identifies the species categories. The visualization uses D3 v7 modules including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`, with data loaded from a remote CSV file via `csvParse`. Axes and legend are rendered as reusable functions, while marks use generated SVG path symbols.

Loading thumbnail…

Task8_Q3_PR

This scatter plot shows the relationship between age and height for 30 individuals, with each point colored by its index in the dataset. The visualization uses D3 v7 to load CSV data, create linear scales for both axes, and render SVG circles. It includes axes with labels and employs d3.scaleOrdinal with d3.schemeCategory10 for point coloring, with data drawn from a local data.csv file.

Loading thumbnail…

Task8_Tutorial

This example visualizes the Iris dataset as a scatter plot, showing petal length versus petal width for individual flowers. Points are colored by species (skyblue, lightgreen, or orange) and also encode sepal measurements through their radii. The code loads CSV data via `d3.csv`, uses `d3.scaleLinear` for axes and scales, and renders SVG circles with `d3.axisLeft` and `d3.axisBottom`. Axis labels are rotated, and styling is set with HTML and CSS.

Loading thumbnail…

Task8_Tutorial2

This interactive scatter plot displays the relationship between sepal length and petal length for three iris species, using distinct symbols to differentiate species categories. The visualization loads the Iris dataset from a remote CSV, parses it with `csvParse`, and renders the plot using D3 v7’s `symbol` generator and `scaleOrdinal`. It includes custom axes with labels and a shape legend positioned on the right. The code demonstrates reusable D3 modules for scatter plotting, axis drawing, and legend rendering, highlighting how to structure modular visualizations with data-driven joins and asynchronous state management.

Loading thumbnail…

Fork of Task8_Tutorial2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length. It uses D3 v7 to render SVG circles as symbols, with different shapes representing iris species via `scaleOrdinal` and the `symbolsFill` API. A custom shape legend is drawn using `symbolGenerator`, and axes are generated with `axisLeft` and `axisBottom`. Data loads asynchronously from a GitHub-hosted CSV file and is parsed with `csvParse`.

Loading thumbnail…

Fork of Task6_3

A stacked bar chart visualizes the percentage distribution of IMDb ratings across six movie genres, using five rating brackets from below 5.0 to above 8.5. Each bar shows the proportional share of ratings within a genre, with colors distinguishing the rating levels. The chart reads data from a CSV file and renders with D3 v7, using `d3.stack()` to create the stacked series, `d3.scaleBand` for the genre axis, and `d3.scaleLinear` for percentages. Hovering over a segment triggers a tooltip displaying the exact percentage, implemented with mouse event handlers and HTML div elements.

Loading thumbnail…

Task6_Tutorial_PR

This stacked bar chart visualizes the impact of movie genre on IMDb ratings, showing the percentage distribution of five rating brackets (from below 5.0 to above 8.5) across six genres. The data is loaded from a local CSV file and rendered as horizontal bars using d3.stack and d3.scaleBand. Hovering over any segment displays a tooltip with the exact percentage, while a color-coded legend distinguishes the rating categories. All elements are drawn as SVG shapes within a d3.v7 selection.

Loading thumbnail…

Task6_Tutorial

This example visualizes IMDb movie ratings across different genres using a stacked horizontal bar chart. The chart displays the percentage distribution of ratings across five categories, from "below 5.0" to "above 8.5", for genres such as Documentary, Drama, Comedy, Romance, Animation, and Action. The implementation uses D3.js v7, loading the library via UNPKG, and leverages d3.stack for data transformation, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the continuous x-axis. Interactive tooltips appear on mouseover, showing the exact percentage for each rating segment.

Loading thumbnail…

Fork of Task6_Question1_2_PR

This visualization shows the population of 20 countries in 2010, using horizontal bars ranked by population size. Data is loaded from a CSV file via `d3.csv` and processed as an ES6 module with the `useData` hook. The React app renders an SVG chart, mapping categorical country names with `scaleBand` on the y-axis and a linear population scale on the x-axis. D3 v5 provides formatting, while custom Axis components generate styled ticks. The bar widths encode population values, with a tooltip displaying the formatted measure on hover.

Loading thumbnail…

Task6_Question1_1_PR

A horizontal bar chart displays the populations of the top ten countries for the year 2000, with country names on the y-axis and population values on the x-axis. The visualization loads CSV data from a GitHub repository and uses React with D3 v5 scaleBand and scaleLinear to position bars, while custom AxisBottom and AxisLeft components render tick marks and labels. Tooltips appear on hover via SVG title elements, and axis labels use D3’s format function to abbreviate large numbers.

Loading thumbnail…

Fork of Hello VizHub1

This bar chart displays the populations of 30 countries in 2020, ranked from largest to smallest. The visualization loads a CSV dataset from GitHub and renders horizontal bars in SVG using React. It employs D3 v5’s `scaleBand`, `scaleLinear`, `csv`, `format`, and `max` functions, with custom React components for axes and marks. The x-axis uses abbreviated tick formatting, and hovering over a bar shows an exact population via a tooltip. The chart includes labeled axes and a title specifying the population year.