Skip to main content
Log in
V

VrushikaKanaparthy@my.unt.edu

@vrushika782·11 public vizzes

Loading thumbnail…

task4_q4

This bubble chart visualizes correlations between average temperature, humidity, and pressure across 25 states, with each circle’s position encoding temperature (x-axis) and humidity (y-axis), while its radius and color represent pressure and state, respectively. Built with D3 v7, it uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for categorical coloring, and includes a tooltip with mouseover events. The visualization renders as SVG with a legend for pressure values, and reads from a CSV file containing state-level environmental metrics.

Oct 23, 2024
Loading thumbnail…

task4

This bubble chart visualizes the correlation between average torque, horsepower, and highway MPG across various car makes, with each bubble's position and size encoding these three attributes. The chart uses d3.scaleLinear for axes and bubble scaling, d3.scaleOrdinal with d3.interpolateTurbo for color mapping, and d3.axisBottom/axisLeft for axes. Interactive tooltips appear on mouseover, showing the car make. A legend displays the bubble size scale for MPG values (20 and 40) and color-coded dots for each make. The SVG renders with smooth hover effects and opacity changes.

Oct 23, 2024
Loading thumbnail…

task3_question3

This interactive scatter plot visualizes insurance data, plotting age on the x-axis and charges on the y-axis while using different symbols to encode gender. The visualization loads its dataset from a remote CSV file hosted on GitHub and renders it as an SVG canvas. The code leverages D3 v7 APIs including `select`, `csvParse`, `scaleLinear`, `scaleOrdinal`, `symbolsFill`, `axisLeft`, and `axisBottom` to construct the chart, with a custom shape legend displaying gender categories. The plot updates dynamically as new data is fetched and parsed.

Oct 23, 2024
Loading thumbnail…

tutorial 3.2

This example shows an interactive scatter plot of the Iris dataset, comparing sepal length against petal length, with each of the three species distinguished by a unique symbol shape via a custom legend. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.symbolsFill` to map species to symbols, and `d3.csvParse` to load and parse the remote CSV data. Custom modules handle axis rendering and legend construction, with the chart filling the entire viewport.

Oct 23, 2024
Loading thumbnail…

task3

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes, with points colored by species (setosa, versicolor, and virginica). The code draws circles using SVG, applying a custom `marker` function to assign colors based on the species field. It uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and chainable selections with `.join()`. Data is loaded from a remote CSV file, and the plot includes labeled axes with custom text styling.

Oct 23, 2024
Loading thumbnail…

task2_question3

This stacked bar chart shows how horsepower, torque, and highway MPG values contribute to the total specifications for each car manufacturer, with each bar segment colored by specification type. The visualization uses d3.stack() to compute the stacked series, d3.scaleLinear and d3.scaleBand for positioning, and built-in SVG mouse events with a tooltip to display exact segment values on hover. A legend identifies the three color-coded specifications, while the x-axis represents the cumulative value scale. Data comes from a CSV file loaded directly into the d3.v7 environment.

Oct 23, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage distribution of five IMDb rating levels across six movie genres, demonstrating how genre influences audience ratings. The visualization uses a diverging color scheme to distinguish rating categories and includes hover tooltips that display exact percentages. The code employs D3 v7 with the `d3.stack()` method for data stacking, `d3.scaleOrdinal()` for color mapping, and `d3.scaleLinear()` with `d3.scaleBand()` for axes. Data is loaded from a CSV file and rendered as SVG rectangles within an HTML page.

Oct 23, 2024
Loading thumbnail…

Activity6_task2

This example visualizes the distribution of IMDb-style rating categories across six film genres using a stacked bar chart. The chart displays proportional shares for five rating bands, from “below 5.0” to “above 8.5,” with each genre’s row summing to 1.0. The data originates from a local `data.csv` file, loaded and parsed by D3.js via UNPKG. The visualization leverages D3’s `select` API to target DOM elements, while the chart itself is rendered using standard D3 scaling and layout functions. A separate ES6 module demonstrates local module import, though its content is not visually represented.

Oct 22, 2024
Loading thumbnail…

Activity6_question1.2

This example displays a horizontal bar chart of the population for the top 20 countries in 2010, sorted by country name. Each bar’s length encodes the population value, with a tooltip revealing the precise number on hover. The visualization is built with React, using D3 v5’s `scaleBand` and `scaleLinear` for positioning, and renders SVG `<rect>` elements for the marks. The data is loaded from a CSV file using D3’s `csv` function, and custom axis components generate the ticks and labels.

Oct 22, 2024
Loading thumbnail…

Activity6_question1

A horizontal bar chart displays the population of the top ten countries in the year 2000, with bars extending from left to right. The visualization uses D3’s `scaleBand` for the y-axis to position each country and `scaleLinear` for the x-axis to map population values, with axis tick labels formatted using D3’s `format`. Data is loaded from a remote CSV file via `d3.csv`, and the chart is rendered as an SVG with React, with tooltips showing the formatted population for each bar.

Oct 22, 2024
Loading thumbnail…

Activity6_task1

A horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. SVG rectangles render the bars, with tooltips showing formatted values via `format('.2s')`. The chart includes custom `AxisBottom` and `AxisLeft` components for ticks and labels.

Oct 22, 2024