bhavanimandula@my.unt.edu

@Bhavani3336·19 public vizzes

bhavani mandula task 9

This example demonstrates the basic setup of a VizHub project, showing how to combine D3, ES6 modules, and CSS in a single-page visualization. The code imports the `select` function from D3 v5 and a local `message` string, then uses `select('#message').text()` to display “Hello VizHub!” in the center of the page. It also includes a minimal HTML structure that loads D3 from UNPKG, a stylesheet, and a separate module file. The example serves as a template for exploring more complex D3 visualizations.

Apr 22, 2024

Loading thumbnail…

BHAVANI TASK 9

This area chart visualizes the relationship between horsepower and torque for a dataset of vehicles. It uses D3.js v5 to load CSV data and render an SVG visualization, with the area filled in steelblue at 70% opacity. The chart employs `d3.scaleLinear` for both axes, `d3.area` to generate the shaded path, and `d3.axisBottom` and `d3.axisLeft` to display the axes. Axis labels for Torque and Horsepower are appended as SVG text elements, and data comes from a remote GitHub repository.

Apr 21, 2024

Loading thumbnail…

bhavani

This example shows a pie chart of Iris flower species based on sepal length values, using data loaded from a remote CSV file via `d3.csv`. The chart renders as an SVG with colored arcs generated by `d3.pie` and `d3.arc`, while an adjacent HTML legend maps each species to its color using `d3.scaleOrdinal`. The visualization relies on D3 v7 APIs to bind data, compute arc paths, and update the DOM dynamically.

Apr 21, 2024

Loading thumbnail…

BHAVANI MANDULA TASK 9

This visualization displays an Iris dataset’s sepal length as a pie chart, using D3.js to transform CSV data into proportional arc segments. Each slice’s color corresponds to a species, with a legend mapping colors to species names. The code uses `d3.csv` to load the dataset, `d3.pie` and `d3.arc` for chart geometry, and `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical coloring. SVG rendering creates the pie chart, while HTML divs form the legend.

Apr 21, 2024

Loading thumbnail…

Bubble Plot D3

This bubble plot visualizes the Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis. Each circle's radius encodes petal width, while its color distinguishes the three iris species (setosa, versicolor, virginica) via a categorical color scheme. Built with D3.js v6, the SVG visualization uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with `d3.schemeSet1` for species coloring. Data is loaded asynchronously from a CSV file using `d3.csv`, with axes rendered via `d3.axisBottom` and `d3.axisLeft`.

Apr 11, 2024

Loading thumbnail…

Fork of Bubble chart

This fork of a bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes using data loaded from a CSV file. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius scales with highway MPG and its color maps to the car make via a categorical ordinal scale using d3.interpolateTurbo. Rendered with SVG, the chart includes interactive tooltips on mouseover, axis labels, and a legend displaying both bubble-size values and color-coded makes. The visualization uses d3.csv, d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/axisLeft.

Apr 11, 2024

Loading thumbnail…

q3 scatter plot bhavani mandula

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle represents a make, positioned by its horsepower and torque, with size encoding highway MPG and color distinguishing brands. Hovering reveals the make name via a tooltip. Built with D3 v7, the SVG visualization uses `d3.scaleLinear` and `d3.scaleOrdinal`, and reads data from a CSV file.

Apr 11, 2024

Loading thumbnail…

Q3 SCATTER PLOT BHAVANI MANDULA

This scatter plot shows the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG for 31 car makes, with bubble size encoding fuel efficiency and color distinguishing each brand using `d3.scaleOrdinal` with `d3.interpolateTurbo`. The D3 v7 SVG visualization includes hover tooltips, a size legend for MPG values, and a color legend listing all makes. Data comes from the BUBBLECHART.csv file, rendered with React and animated opacity changes on mouse interactions.

Apr 11, 2024

Loading thumbnail…

Fork of Activity 7 Scatter Plot

This fork of the activity 7 scatter plot visualizes vehicle data, mapping average make, horsepower, torque, and highway MPG for various car brands. It renders as a bubble chart, using a D3 force simulation to position the labeled bubbles, which are sized according to a data attribute. The chart is drawn using d3.v7 within a designated HTML division, with styling managed by a linked CSS file.

Apr 11, 2024

Loading thumbnail…

Activity 6 Scatter Plot BHAVANI MANDULA

This scatter plot shows population trends for China, India, and the USA from 1950 to 2020, with each country represented by markers on a shared timeline. The visualization uses Plotly’s `Plotly.newPlot` to render three scatter traces, plotting population values against year on the x-axis. Data is drawn from the included CSV file, which provides annual population figures per country. The chart is titled "Country Population over Years" and includes axis labels for year and population.

Apr 11, 2024

Loading thumbnail…

3.2 Scatter Plot with Shape bhavani mandula

This scatter plot shows the relationship between sepal length and petal length for Iris flowers, with each species represented by a distinct shape from the `symbolsFill` collection. Shapes include circles, crosses, and diamonds, rendered using `d3.symbol` and `symbolGenerator`. A custom legend maps species names to their corresponding shapes. The chart uses `d3.scaleLinear` for both axes and loads the Iris dataset from a remote CSV file via `d3.csvParse`, applying numeric coercion before plotting.

Apr 11, 2024

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot displays Iris flower measurements, mapping sepal length to the x-axis and petal length to the y-axis. Each point’s shape encodes the species of the flower, with a legend showing which shape corresponds to which species. The visualization uses D3 v7 with modules like `scaleLinear`, `scaleOrdinal`, and `symbol` to render marks and axes. Data is loaded asynchronously from a remote CSV file and parsed using `csvParse`, with numeric fields converted before plotting.

Apr 11, 2024

Loading thumbnail…

ACTIVITY 6 tutorial 2 Bhavani mandula

This stacked bar chart displays the average horsepower and torque for various car makes, revealing performance differences across brands. The chart uses d3.stack() and d3.scaleBand to segment each bar, with d3.scaleLinear for the y-axis and d3.scaleOrdinal for color encoding. Hovering over a bar triggers a pop-up with exact percentages, though the code currently omits the tooltip implementation. Data is sourced from the provided CSV file, and rendering uses SVG elements generated by D3 v7.

Apr 11, 2024

Loading thumbnail…

Activity 6 Tutorial 2 BHAVANI MANDULA

A stacked bar chart shows the distribution of IMDb rating categories across six movie genres, with each bar segment representing the percentage of ratings in ranges from below 5.0 to above 8.5. The visualization uses d3.stack() to compute the stacked segments and d3.scaleOrdinal() with a custom color palette for the rating bands. Hovering over a segment displays a tooltip with the exact percentage via d3.format(). Data comes from a CSV file loaded with the D3 v7 library, rendered as SVG with scales for percentage and genre on the x and y axes.

Apr 11, 2024

Loading thumbnail…

ACTIVITY 6 Q 1.1

This bar chart displays the population of ten countries in the year 2000, with bars extending horizontally to represent population values. The visualization uses React to render SVG elements, with D3 v5 functions scaleBand, scaleLinear, max, and format handling the axes and tick formatting. The chart loads data from a remote CSV and converts population values to a readable format using suffix abbreviations like “B” for billions. Styled with light green bars and blue axis lines, it provides a clear comparison of national populations.

Apr 11, 2024

Loading thumbnail…

Activity 6

This bar chart displays the populations of 20 countries in 2010, sorted vertically by country name with proportional horizontal bars. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG rectangles via reusable AxisBottom, AxisLeft, and Marks components. Population values are parsed from a CSV file using `d3.csv`, formatted with `d3.format`, and displayed with a tooltip on each bar.

Apr 11, 2024

Loading thumbnail…

Activity 6 QUESTION 1a BHAVANI MANDULA

This bar chart displays the populations of ten countries in the year 2000, with countries listed along the vertical axis and population values on the horizontal axis. The visualization uses React to render SVG elements, with D3 v5’s scaleBand and scaleLinear functions mapping the dataset to the chart’s dimensions. Data is loaded asynchronously from a CSV file via D3’s csv method, and formatted population figures are shown using the format function. Tooltips appear on each bar through an SVG title element.

Apr 11, 2024

Loading thumbnail…

tutorial 1 Bhavani

This visualization displays the populations of 30 countries for 2020 as a horizontal bar chart, with each bar’s length proportional to its population value. Built with React and D3 v5, the app uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the continuous x-axis, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to render SVG rectangles. The data is loaded from a remote CSV via `d3.csv` and formatted with `d3.format` for tick labels.

Apr 11, 2024

Loading thumbnail…

Activity 6

This bar chart displays 2020 population estimates for 30 countries, sorted by country name along the vertical axis. The visualization uses React components to render SVG elements via D3 scales, with `scaleBand` positioning the categorical axis and `scaleLinear` mapping population values to bar widths. D3’s `csv` loader fetches the dataset, while `format` abbreviates tick labels (e.g., converting billions to “B”). Tooltips appear on hover through native SVG `title` elements, and the styling uses light green bars with blue axis ticks.

Apr 11, 2024