Skip to main content
Log in
V

vishnutejareddyambati@my.unt.edu

@vishnutejaredd·16 public vizzes

Loading thumbnail…

Activity 7 Q2

This area chart visualizes expense amounts by subcategory, drawing from a remote CSV dataset. The visualization combines a semi-transparent steelblue area with an overlaid steelblue line to show trends. Built with D3 v6, it uses `d3.scalePoint` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.area` and `d3.line` generators to create the paths. The SVG output includes rotated x-axis labels and axis labels, with data loaded via `d3.csv`.

Nov 7, 2024
Loading thumbnail…

Activity 7 Q1

This example shows a pie chart that visualizes categorical data loaded from a remote CSV file, with each slice colored using a categorical color scale and a legend pairing colors with category and subcategory labels. The chart is rendered as SVG using D3.js v6, where the `d3.pie()` generator computes slice angles and `d3.arc()` creates the path shapes. Data is fetched via `d3.csv`, and the color mapping uses `d3.scaleOrdinal` with `d3.schemeCategory10`. The code also adds axis labels (X and Y) that are not tied to the pie chart, acting as placeholders within the SVG layout.

Nov 7, 2024
Loading thumbnail…

Activity 7 tutorial

This interactive scatterplot animates through different pairings of the Iris flower dataset’s measurements, cycling its x-axis among petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Using D3 version 6, it builds a reusable scatter plot via the `scatterPlot` module, which employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG axes and circles. A `setInterval` updates the x-value accessor, and custom legend labels, colored by species (setosa, versicolor, virginica), are drawn alongside the animated transitions.

Nov 7, 2024
Loading thumbnail…

Activity6 Q4

This bubble chart visualizes the correlation between the number of cylinders, engine displacement, and city MPG for various car models. Each circle represents a car, with its x-position mapped to cylinders, y-position to displacement, and circle size encoding city MPG, while color differentiates car brands. The visualization includes interactive tooltips on hover, a legend for city MPG values, and a color legend for brands. Built with D3.js v7, the code uses SVG rendering, scaleLinear for axes and bubble size, and scaleOrdinal for color mapping.

Oct 26, 2024
Loading thumbnail…

Activity6 task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble's position corresponds to its horsepower (x-axis) and torque (y-axis), while its size scales with highway MPG. Bubbles are color-coded by make, and the chart includes a legend for MPG values and car makes. Built with D3 v7, it renders as SVG, uses `d3.scaleLinear` for axes and sizing, and features interactive tooltips displaying the make on mouseover.

Oct 26, 2024
Loading thumbnail…

Activity6 task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius scales with highway MPG, and its color distinguishes the make. The D3.js v7 example uses `d3.scaleLinear` for positioning and sizing, `d3.scaleOrdinal` with interpolated turbo colors for categorical encoding, and adds interactive tooltips on mouseover. A legend shows MPG values and a color key for all makes. Data comes from `bubblechart.csv`, rendered as SVG with hover animations.

Oct 26, 2024
Loading thumbnail…

Activity6 Q3

This scatterplot visualizes the relationship between horsepower and engine size for a collection of classic cars, with each point colored by the vehicle’s model year. The chart includes axes labeled “Horsepower” and “EngineSize,” a light gray plot area, and a legend grouping cars by year. The visualization uses D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeDark2` to map data attributes. Data is loaded from a CSV file, parsed numerically, and rendered as SVG circles with fixed radius and opacity.

Oct 26, 2024
Loading thumbnail…

Activity6 task3.2

This example visualizes the Iris dataset as an interactive scatter plot, mapping sepal length to the x-axis, petal length to the y-axis, and distinguishing species by different symbol shapes. The plot includes labeled axes and a legend for species, rendered using D3 v7's `scaleLinear` and `scaleOrdinal`. Data is loaded via `csvParse` from a remote URL, with numeric fields converted to numbers. The chart resizes to the viewport and uses d3-fetch to load the CSV, with axes drawn via `axisLeft` and `axisBottom`.

Oct 26, 2024
Loading thumbnail…

Activity6 task3

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample while coloring points by species (setosa, versicolor, and virginica) using D3 v6. The SVG rendering uses `scaleLinear` for both axes, `extent` to set domains, and `axisLeft`/`axisBottom` for tick marks. Data is loaded asynchronously from a GitHub CSV via `d3.csv`, with each circle assigned a radius of 5 and a species-specific fill color from a simple switch statement.

Oct 26, 2024
Loading thumbnail…

Activity6 Q2

This stacked bar chart displays the distribution of city ratings across 20 UK cities, with each bar showing the percentage share of ratings falling into six categories from “below 4.0” to “above 8.0.” The visualization uses d3.stack to compute the stacked segments, d3.scaleOrdinal for color encoding, and d3.scaleBand with d3.scaleLinear for axes. Mouseover interactions highlight bars and show tooltips with exact percentages via the d3.format function. Data is loaded from an external CSV file and rendered as SVG.

Oct 26, 2024
Loading thumbnail…

Activity6 task 2

A stacked horizontal bar chart displays the percentage distribution of IMDb ratings across six movie genres, using five rating categories from "below 5.0" to "above 8.5." The chart shows proportions per genre via color-coded segments, with a tooltip revealing exact percentages on hover. Built with D3 v7, it uses `d3.stack()` to compute stacked series, `d3.scaleBand()` for genre positioning, and `d3.scaleLinear()` for the percentage axis. Data comes from an external CSV file, rendered as SVG within an HTML page, with axis labels and a title included.

Oct 26, 2024
Loading thumbnail…

Activity6 Q1.2

A horizontal bar chart displays population estimates for 20 countries in 2010, with country names on the y-axis and population values on the x-axis. The visualization uses React components with D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. SVG rectangles render the bars, with axis tick formatting converting numbers to billions using D3's `format` function. Population data is loaded asynchronously from a CSV file hosted on GitHub, and native SVG `<title>` elements provide hover tooltips.

Oct 26, 2024
Loading thumbnail…

Activity6 Q1.1

This example shows a horizontal bar chart of population data for ten countries from the year 2000, sourced from a CSV file. The chart uses the React framework to render SVG elements, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. It employs `AxisBottom` and `AxisLeft` components to draw the axes, while the `Marks` component generates the bars. Hovering over a bar displays the population value via a tooltip, formatted using D3’s `format` function.

Oct 26, 2024
Loading thumbnail…

Activity6 task 1

This bar chart displays the 2020 population estimates for 30 countries, ranked by country name. The visualization uses D3 version 5 within a React component, rendering data from a CSV file hosted on GitHub. Population values are formatted using D3’s `format` function, converting large numbers to abbreviated labels like “B” for billions. The chart employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with SVG rectangles representing each bar. Native SVG `<title>` elements provide tooltips showing precise population values on hover.

Oct 26, 2024
Loading thumbnail…

Fork of 6 Buddha

This visualization renders an intricate, geometric Buddha silhouette as a layered composition of brightly colored, overlapping shapes. The artwork is built using React and rendered as SVG, with the main drawing defined by a complex SVG path. The visualization also incorporates generative randomness, scattering small colored elements across the canvas, and uses a floral background image. The code relies on nested array mappings to create multiple layered paths, demonstrating a programmatic approach to digital art. The underlying data is a series of coordinate points for the Buddha’s outline.

Oct 19, 2024
Loading thumbnail…

5 buddha

The visualization renders a dark canvas filled with thousands of randomly generated, semi-transparent polygons, each colored with varied RGB values and rotated at 45 degrees. A large, detailed Buddha silhouette is drawn as an SVG path, positioned and scaled over this chaotic background. Built with React and ReactDOM, the code uses nested array mappings to generate the polygons, while the static Buddha path is defined with complex coordinate data. The entire composition is displayed using SVG elements within a 960 by 1000 pixel viewport.

Oct 15, 2024