K

kbhavithareddy06@gmail.com

@bhavitha-kandi·19 public vizzes

Loading thumbnail…

Activity 7_task

This interactive scatterplot animates the Iris dataset, cycling through four feature-pair combinations on the x-axis while the y-axis displays sepal length. Built with D3.js, it renders color-coded circles for three species, with a legend and dynamic axis labels. The visualization uses `d3.csv` for data loading, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scaling and axes, and `setInterval` for the animation. An SVG element fills the viewport, and the plot updates its x-value mapping based on the current column index.

Loading thumbnail…

activity6_ques3

This example displays a simple static message, “Hello VizHub!”, centered on the page using D3.js v6. The code imports the `select` function from D3 to target the `#message` div and sets its text content from a separate ES6 module. Styling via CSS controls the text alignment and font size. It demonstrates basic D3 selection and module imports in a minimal HTML setup.

Loading thumbnail…

ACTIVITY6_Ques3

This scatter plot visualizes the range in kilometers for electric vehicles from five brands (Tesla, BMW, Nissan, Kia, Hyundai) using a categorical x-axis and linear y-axis. Each car is represented by a distinct symbol (circle, square, triangle, diamond, cross) and color per brand, showing the distribution of ranges across brands. The visualization is built with D3 v7, using d3.scalePoint for the categorical positioning, d3.scaleLinear for the range axis, and d3.symbol to generate the custom glyphs. Data comes from the uploaded ElectricCarData_Clean.csv file, rendered as SVG elements within a static HTML page.

Loading thumbnail…

ACTIVITY6_QUES3

This example visualizes a simple text message, “Hello VizHub!”, centered on the page using CSS styling. The visualization demonstrates a minimal setup for a web-based project, importing a local ES6 module to supply the text content and using D3.js’s `select` API to target a DOM element. The rendering relies on the `styles.css` file to apply large, centered typography, showcasing how static text can be presented as a basic data-visualization output.

Loading thumbnail…

Activity6_task3.2

This scatter plot visualizes the Iris dataset, showing petal length against sepal length for three species of iris flowers. Each species is represented by a distinct shape and color: circles for setosa, squares for versicolor, and triangles for virginica. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleLinear` for axes, custom symbol generators from `d3.symbol`, and a legend built with `d3.symbolCircle`, `d3.symbolSquare`, and `d3.symbolTriangle`. Data is loaded from an external CSV file, and axes are labeled with "Sepal Length" and "Petal Length" in centimeters.

Loading thumbnail…

ACTIVITY6_task3.2

This D3.js visualization is a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Each point’s shape encodes the iris species, with a legend distinguishing the three categories. The chart uses axes created with `d3.axisLeft` and `d3.axisBottom`, and point shapes are generated via `d3.symbol` with a `symbolsFill` scale. Data is loaded asynchronously from a remote CSV and parsed with `d3.csvParse`, with numeric fields converted for plotting.

Loading thumbnail…

ACTiVity6_task3.1

This scatter plot visualizes the Iris dataset, displaying petal length against petal width while coloring each point by species (setosa, versicolor, or virginica). The visualization uses D3.js v6 with SVG rendering, employing `scaleLinear` for both axes and `axisLeft`/`axisBottom` for tick marks. Circle elements are positioned using the `x` and `y` scales, with species-based fill colors. The data loads from a remote CSV file via `d3.csv`, and the chart fills the entire browser window with custom margins and rotated axis labels.

Loading thumbnail…

Activity6_ques4

This interactive bubble chart compares electric vehicle range across five car brands using a dataset of 25 vehicles. The visualization maps brands on a categorical x-axis using `d3.scalePoint` and range in kilometers on a linear y-axis, with circle sizes scaled by `d3.scaleSqrt`. SVG circles are colored by brand via `d3.scaleOrdinal`, and hover interactions trigger a styled tooltip displaying brand and exact range. The chart includes labeled axes, a color-coded legend, and data loaded asynchronously from a CSV file through `d3.csv`.

Loading thumbnail…

Activity6-ques2

This stacked bar chart visualizes the distribution of electric vehicle ranges across five car brands using data from ElectricCarData_Clean.csv. Each horizontal bar represents a brand, segmented into five color-coded range bins, from below 200 km to above 500 km. The visualization uses D3.js v7 to process the data, calculate proportional bin frequencies, and render the SVG with scales from `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal`. The chart includes axes with percentage tick formatting via `d3.axisBottom` and a legend.

Loading thumbnail…

Activity6_ques2

This visualization shows the distribution of movie ratings across different genres using a stacked horizontal bar chart. Each bar represents a genre, divided into colored segments that indicate the proportion of films falling into five rating bins, from "below 5.0" to "above 8.5." The chart uses a d3.scaleOrdinal for color encoding and d3.scaleBand for the categorical y-axis, with the data loaded from a CSV file. The code employs d3.csv, d3.select, and various join methods to efficiently render the SVG output.

Loading thumbnail…

ACTIVITY6_ques2

This stacked bar chart displays the distribution of movie ratings across six genres, showing the proportion of scores within five ranges from below 5 to above 8.5. Each horizontal bar is segmented and color-coded according to rating bracket, with genre labeled on the y-axis and percentage share on the x-axis. Built with D3 v6, the visualization uses the d3.stack layout with SVG rendering, d3.scaleBand for vertical positioning, and d3.scaleOrdinal for segment colors. Interactive tooltips appear on mouseover to identify each genre.

Loading thumbnail…

activity6_task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding MPG and color distinguishing each manufacturer. Built with D3 v7, it renders scalable vector graphics (SVG) circles positioned by linear scales for the x and y axes, while an ordinal color scale maps make names to interpolated turbo colors. Interactive tooltips display the make on hover, and a legend shows MPG values and color-coded manufacturer markers. The chart reads from an external CSV file and uses D3’s selection, scale, and axis APIs.

Loading thumbnail…

activity6_task4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble represents a car brand, positioned by its horsepower and torque values, with bubble size corresponding to fuel efficiency. The visualization uses D3.js v7 with SVG and animation, employing a turbo color scale to differentiate brands. Interactive tooltips appear on hover, and a legend helps interpret the bubble sizes and color groupings.

Loading thumbnail…

activity6_ques2

A stacked bar chart visualizes the distribution of movie genres across years. It shows the contribution of Action, Drama, Comedy, Horror, and SciFi categories to the total number of movies per year from 2015 to 2019. The code uses `d3.stack()` and `d3.scaleOrdinal` to separate genre segments, while `d3.scaleBand` and `d3.scaleLinear` position the bars on the axes. The chart renders as an SVG, with data derived from a local CSV file.

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, where each bar is segmented into five rating categories from "below 5.0" to "above 8.5." Using D3.js v7 with an SVG rendering, the code employs `d3.stack()` to compute the stacked segments, `d3.scaleOrdinal()` for color mapping, and `d3.scaleBand()` for the categorical genre axis. Interactive tooltips display the exact percentage for each genre-rating combination on mouseover, while the data is loaded from a CSV file with precomputed proportions.

Loading thumbnail…

activity6_ques1_task2

This example displays a horizontal bar chart of the top 20 most populous countries in 2010, using the Chart.js library within an HTML Canvas element. The visualization clearly ranks countries from China to the Democratic Republic of the Congo, with the x-axis representing population counts and the y-axis listing country names. The chart's data is sourced from a hard-coded array of country population statistics. All bars share a uniform blue color to facilitate quick comparison of population magnitudes.

Loading thumbnail…

activity6_ques1_task1

This horizontal bar chart displays the populations of the ten most populous countries in the year 2000, with country names on the y-axis and population counts in thousands on the x-axis. Built with Chart.js and rendered on a Canvas element, the visualization uses hardcoded data arrays mapping each country to its population figure. The chart applies a single blue dataset, sets `indexAxis` to 'y' for horizontal orientation, and enables responsive scaling with axis titles.

Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the populations of the top 30 most populated countries in 2020, with country names on the y-axis and population counts in thousands on the x-axis. The chart uses Chart.js via the Canvas API, embedding a dataset extracted from the source data directly into the script. A single blue bar per country emphasizes the population comparisons, while axis titles clarify the units and categories. The renderer is set to the canvas element within the HTML page.

Loading thumbnail…

activity 6

This example displays the text “Hello VizHub!” centered prominently on the page using D3.js. The code imports the `select` function from D3 and applies it to the `#message` div, setting its text content from a separate ES6 module. The styling uses CSS to center the message and set its font size to 12em. While the repository includes a minimal HTML shell and styling, the visualization itself is purely text-based, demonstrating basic DOM manipulation with D3 v6.