Skip to main content
Log in
A

AnilKumarReddyVanteru@my.unt.edu

@anilreddy001709·27 public vizzes

Loading thumbnail…

Question-2 Anil

An area chart displays India’s population over time, with the year on the x-axis and population values on the y-axis. The code loads a CSV file via `d3.csv`, converts the data to numbers, and uses `d3.scaleLinear` for both scales. An area path is generated with `d3.area` and appended to an SVG, while `d3.axisBottom` and `d3.axisLeft` create labeled axes. The chart renders in an SVG container using D3 v7.

Apr 29, 2024
Loading thumbnail…

Question-2 Anil

This example demonstrates a minimal VizHub setup that loads D3.js from a CDN and uses local ES6 modules to render a message. It shows how to import API functions from the `d3` package, such as `select`, and how to import custom modules like `myMessage`. The code sets the text content of a `div` element via D3, displaying the string "Hello VizHub!" styled with large, centered CSS. No data visualization or complex rendering is present, focusing instead on foundational integration patterns.

Apr 29, 2024
Loading thumbnail…

Question-2 Anil

This area chart displays India’s population growth over time, with years on the x-axis and population values on the y-axis. The visualization is rendered as an SVG using D3.js v7, loading data from a remote CSV file via `d3.csv`. The chart employs `d3.scaleLinear` for both axes, `d3.area` to generate the filled path, and `d3.axisBottom` and `d3.axisLeft` to construct the axes. The code also adds axis labels and uses `d3.extent` and `d3.max` for domain calculations.

Apr 29, 2024
Loading thumbnail…

Question 1-1 Anil

A pie chart from d3.v5 displays the top 10 car-producing countries in 2019, using data loaded via `d3.csv` from a GitHub Gist. Each slice’s size corresponds to a country’s total production value, with a color-coded legend listing country names and formatted totals using `d3.format`. The chart is rendered as an SVG, with slices generated using `d3.pie` and `d3.arc`, and legends positioned via `d3.select` and `d3.append`.

Apr 29, 2024
Loading thumbnail…

Question 1-1 Anil

This D3.js v5 visualization shows the top 10 car-producing countries in the world based on 2019 data from a CSV file loaded via a Gist URL. A pie chart displays each country's total production value, with a color-coded legend to its right listing country names and their corresponding values in thousands. The visualization uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute slice angles, render SVG paths, and assign colors. Data is processed by summing the "2019" column, and values are formatted with `d3.format`. The SVG output is styled with external CSS.

Apr 29, 2024
Loading thumbnail…

Question 1-1 Anil

This visualization shows the top 10 car-producing countries in the world, with each country’s 2019 total vehicle output represented as a proportional slice of a pie chart. The data is loaded from a CSV file via `d3.csv` and parsed asynchronously, with values summed from the year 2019. The chart is rendered using D3 v5’s `pie()` and `arc()` generators to compute segment angles, with `scaleOrdinal` providing a fixed color palette for each country. SVG elements, including the pie slices, a legend with colored circles, and formatted text labels using `d3.format`, are appended and positioned manually within the main SVG container.

Apr 29, 2024
Loading thumbnail…

Question1-1 Anil

This example shows a pie chart of car horsepower by make, with a color-coded legend for each manufacturer. Built with D3 v6, it loads CSV data from GitHub, parses numeric values, and uses `d3.pie` and `d3.arc` to generate the SVG slices. A `d3.scaleOrdinal` with `schemeCategory10` maps makes to colors, while `d3.csv` handles asynchronous data fetching. The chart includes a custom legend built from `color.domain()`, rendered as SVG rectangles and text.

Apr 29, 2024
Loading thumbnail…

Question1-1 Anil

This pie chart visualizes the total value of movies by country for 2019, with each slice colored and paired with a legend showing country names and their corresponding values in thousands. The visualization uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `format` APIs to compute slice angles, render SVG paths, and label the data. Data is loaded asynchronously from a CSV gist via d3.csv, and the chart is drawn using SVG elements within a 960×500 viewport.

Apr 29, 2024
Loading thumbnail…

Question1-1 Anil

This pie chart visualizes the distribution of horsepower across different car makes, with each slice colored by a categorical color scale. The data is loaded from a remote CSV file using `d3.csv`, and numerical values for horsepower, torque, and highway MPG are parsed into numbers. The chart is rendered as SVG using `d3.pie` and `d3.arc` to compute and draw the slices, while a legend built with `d3.scaleOrdinal` and `d3.schemeCategory10` identifies each make. The visualization demonstrates basic D3 v6 data binding and SVG rendering techniques.

Apr 29, 2024
Loading thumbnail…

Fork of Pie_Chart_Question1

This example visualizes the basic cost of Netflix subscriptions across ten countries using a pie chart, with a legend displaying each country’s name and cost in dollars. The chart is rendered as an SVG using React and D3 v5, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with a `schemeCategory10` color palette. Data is loaded from a CSV file hosted on GitHub, sorted descending, and sliced to the top ten entries. Mouseover events log the corresponding cost to the console.

Apr 28, 2024
Loading thumbnail…

Task8_Q4

This bubble chart displays the correlation between sepal length, sepal width, and petal length for three iris species, using the classic Iris dataset. Bubble position encodes sepal length and width, while bubble radius represents petal length and color distinguishes species. The visualization uses D3.js with SVG rendering, employing `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with the `interpolateTurbo` color scheme for species, and `d3.axisBottom` and `d3.axisLeft` for axes. Interactive tooltips appear on mouseover, showing species and petal length using `d3.select` and transition effects.

Apr 15, 2024
Loading thumbnail…

Task8_Tutorial4

This visualization shows the correlation between a vehicle's average horsepower, torque, and highway MPG, with each circle representing a car make. The chart uses position to encode horsepower on the x-axis and torque on the y-axis, while the radius and color of each circle represent the vehicle’s highway fuel efficiency and the manufacturer, respectively. Built with D3.js (v7) and rendered as an SVG, it uses `d3.scaleLinear` for axes and bubble size, and `d3.scaleOrdinal` with `d3.interpolateTurbo` for color mapping. Hovering reveals a tooltip with the car make, and the legend displays both the bubble size scale and a color key for all makes.

Apr 15, 2024
Loading thumbnail…

Task8_Tutorial4

This example demonstrates a minimal VizHub project that renders a simple greeting message on a webpage. It loads D3.js version 5 from a CDN and uses the `select` function from D3 to update the text content of a `<div>` element. The code imports a local ES6 module, `myMessage.js`, to supply the greeting string, and applies styling through an external CSS file. The project serves as a template for combining CDN-loaded D3 with local JavaScript modules.

Apr 15, 2024
Loading thumbnail…

T3_Q3.6

This scatter plot displays the relationship between horsepower and highway MPG for a car dataset, with points colored by car make. The visualization uses D3 v6 to fetch CSV data, map horsepower to the x-axis and highway MPG to the y-axis via `scaleLinear`, and encode car make with `scaleOrdinal` and `schemeTableau10`. The SVG rendering includes axis labels, a legend, and uses a data join to create circles.

Apr 15, 2024
Loading thumbnail…

Task8_Tutorial3.2

This scatter plot visualizes the iris dataset, mapping sepal length and petal length along the x- and y-axes, with each point’s shape encoding the species of iris. The visualization is built with D3 v7, using the `scaleLinear`, `extent`, `symbolsFill`, and `symbol` APIs to position marks and generate a shape legend. Axes and their labels are rendered via `axisLeft` and `axisBottom`, while data is fetched from a remote CSV and parsed with `csvParse`.

Apr 15, 2024
Loading thumbnail…

Task8_Tutorial3.2

This example shows a scatter plot of iris flower measurements, comparing sepal length on the x-axis against petal length on the y-axis, with each of the three species distinguished by a unique symbol shape and accompanied by a custom shape legend. The visualization is rendered using D3 v7, with axes generated via the `axisLeft` and `axisBottom` functions and marks drawn using `symbol()` with `symbolsFill` and a `scaleOrdinal` mapping species to shapes. Data is loaded from a remote CSV file and parsed with `d3.csvParse`, while the chart layout adapts to the full window size.

Apr 15, 2024
Loading thumbnail…

Task8_Tutorial3

A scatter plot of the Iris dataset shows petal length against petal width, with each point colored by species (setosa, versicolor, and virginica). The visualization uses D3 v6, loading data from a CSV via `d3.csv`, and maps the x and y axes using `scaleLinear`. Circles are drawn with SVG `<circle>` elements, where the `rx` and `ry` attributes are set from sepal measurements, though the visual remains a standard circle. Axis labels are added manually with SVG text, and axes are rendered using `axisLeft` and `axisBottom` onto the SVG canvas.

Apr 15, 2024
Loading thumbnail…

Tutorial2_Q3

A stacked horizontal bar chart displays the percentage distribution of four iris measurements—sepal length, sepal width, petal length, and petal width—across three species. Using d3.stack and d3.scaleBand, each species row segments colored rectangles proportionally, with a tooltip showing exact percentages on hover. The SVG renders with d3.axisBottom and d3.axisLeft, and the iris dataset is loaded from a CSV file.

Apr 15, 2024
Loading thumbnail…

Task8_Tutorial2

This example visualizes IMDb movie ratings across six genres, showing the percentage distribution of ratings within five score bands using stacked horizontal bars. The chart loads data from a local CSV file and renders it as SVG using D3 v7, employing `d3.stack()` for the stacked layout, `d3.scaleOrdinal` for color encoding, and `d3.axisLeft`/`d3.axisBottom` for axes. Interactive tooltips display exact percentages on mouseover, while the y-axis uses `d3.scaleBand` for genre positioning.

Apr 15, 2024
Loading thumbnail…

Task-8 Q2

This bar chart displays the populations of 20 countries in 2010. Built with React and D3.js v5, it renders scalable vector graphics (SVG) rectangles whose widths are proportional to each population value. The chart imports `scaleBand`, `scaleLinear`, `max`, and `format` from D3 to position the bars and format tick labels with a custom billion suffix. Data is loaded asynchronously from a remote CSV file using D3's `csv` function, and each country's population is calculated by multiplying the 2010 column by 1,000. The visualization includes labeled axes for both country and population.

Apr 14, 2024
Loading thumbnail…

Task-6 Q1

This example displays a horizontal bar chart of the top 10 countries by population for the year 2000, fetched from a CSV file via the `csv` function in D3 v5. The React-based visualization uses SVG and D3's `scaleBand` and `scaleLinear` for axes, with bars rendered as `rect` elements that include tooltips formatted with D3's `format`. The code demonstrates local module imports for axes and marks, and loads D3 and React from UNPKG.

Apr 14, 2024
Loading thumbnail…

Activity_6 Task-1

This bar chart displays the population of ten countries in the year 2000, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components for ticks and labels, while `Marks` renders the bars. Data is loaded asynchronously from a CSV file using D3’s `csv` function, and tick values are formatted using the `format` API.

Apr 14, 2024
Loading thumbnail…

Fork of Fork of Hello VizHub

This example shows a minimal web page that displays the text “Hello VizHub!” centered on the screen. It loads D3 v5 from the UNPKG CDN and uses the `select` API to target a `<div>` element, setting its text content. The message string is imported from a local ES6 module (`myMessage.js`), demonstrating modular code organization. Styles are applied via an external CSS file, controlling the font size and alignment. The example focuses on basic D3 DOM manipulation and local module imports.

Apr 14, 2024
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js integration within a VizHub project, showing how to load D3 via UNPKG and use ES6 modules. It imports the `select` function from D3 and a local `message` constant from `myMessage.js`, then sets the text of a `#message` div to "Hello VizHub!". The page uses a static HTML structure with a stylesheet, and the visualization renders a simple centered text message without any data or interactive elements.

Apr 14, 2024
Loading thumbnail…

Tutotial3

The visualization displays an abstract Buddha silhouette formed by a dense lattice of overlapping semi-transparent circles, layered over a red-toned path traced from SVG coordinate data. Randomly generated RGB fill colors and circle positions create a vibrant, textured mandala effect against a black background. Built with React and rendered as SVG, it uses ReactDOM to generate nested map iterations of circle elements, combining computed randomness with the provided path data for the central figure.

Mar 25, 2024
Loading thumbnail…

2Rs of Buddha

This visualization, titled "2Rs of Buddha," renders a stylized Buddhist figure constructed from overlapping, semi-transparent polygon shapes. The image is built using React with SVG, where a nested triple map over an array of numbers generates hundreds of randomly placed, rotated quadrilaterals. These polygons are filled with vibrant, randomly generated RGB colors and rendered with high opacity, creating a dense, colorful mosaic against a black background. Overlaid on this abstract pattern is a detailed line-art depiction of Buddha, drawn with a precise SVG path and scaled to fit within the composition. The piece explores themes of order within chaos, combining algorithmic randomness with a structured, spiritual iconography.

Mar 25, 2024
Loading thumbnail…

2Rs of Buddha

The visualization titled "2Rs of Buddha" renders a dense, kaleidoscopic field of randomly positioned, rotated polygons in vivid RGB colors against a black background, built with React and SVG. A large circular path drawing of the Buddha forms the central anchor, overlaid with semi-transparent triangular shapes that create a layered, chaotic pattern. The composition juxtaposes geometric abstraction with a recognizable sacred figure, inviting contemplation of order and randomness.

Mar 25, 2024