V

vamsikrishnakanchukommala@my.unt.edu

@Vamsikrishnakanchukommala·21 public vizzes

Loading thumbnail…

Vamsi_Reusable Scatter plot

This interactive scatter plot visualizes the Iris dataset, animating through four different attribute combinations on the x-axis while keeping sepal length on the y-axis. The visualization cycles through petal width, sepal width, petal length, and sepal length using a setInterval function that updates the D3 scaleLinear axes and circle positions. The code uses D3 v6 APIs including csv for data loading, scaleLinear, axisLeft, axisBottom, and selection joins to render SVG circles colored by species. A custom scatterPlot function makes the chart reusable across different data mappings.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This animated scatter plot visualizes the Iris dataset, showing petal and sepal dimensions across three flower species. The visualization cycles through different attribute combinations on the x-axis every few seconds, updating the scatter plot dynamically with D3's `setInterval`. Circles are color-coded by species (setosa, versicolor, virginica), with filled markers rendered in skyblue, lightgreen, and orange. The implementation uses D3's `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` data loading, with SVG circles and text for labels and legends, updating via `selection.join` and `selection.call`.

Loading thumbnail…

Q2

This example displays the average measurements of iris flowers (sepal length, sepal width, petal length, and petal width) for three species (setosa, versicolor, and virginica) as a stacked horizontal bar chart. Each bar represents a species, with colored segments showing the average values for each measurement, and hovering over a segment reveals its exact value via a tooltip. Built with D3 v7, it reads data from a CSV file and uses `d3.stack`, `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom` to render the SVG visualization. The chart includes styled axes, a title, and custom fonts.

Loading thumbnail…

Question1-vamsi

This bar chart displays the 2010 population estimates for 20 countries from a CSV dataset loaded via D3’s `csv` function. The chart uses React with SVG rendering, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Bars are drawn as SVG `<rect>` elements with tooltips using the native `<title>` element. Axis components render ticks and labels, with x-axis tick formatting via D3’s `format` helper to abbreviate large numbers (e.g., converting G to B).

Loading thumbnail…

Question2-Vamsi

This visualization displays a horizontal bar chart comparing the 2010 population of 20 countries, with bars extending from left to right proportionally to each country’s population value. The chart loads CSV data from a GitHub repository via d3.csv, processes the values by multiplying the raw numbers by 1000, and renders using React with SVG elements. The implementation uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and d3.format for abbreviating tick labels (converting G to B for billions). While the code imports d3.arc and d3.pie, these are not used in the final rendering.

Loading thumbnail…

Question:1_Vamsi

This visualization displays the populations of 20 countries in 2010 as a horizontal bar chart. The chart uses D3's `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, rendering bars as SVG rectangles via React. Data loads from a remote CSV using D3's `csv` parser, with population values converted from thousands. The axis ticks are generated by D3's `scale.ticks()` method, and hover tooltips show the formatted population values.

Loading thumbnail…

Task-3

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with different agricultural species distinguished by distinct symbols. The visualization uses D3 v7's `scaleLinear` for axes scaling and `scaleOrdinal` with `symbolsFill` to map species categories to different shapes. A shape legend at the bottom right identifies each species, while the plot is rendered using `svg` paths with `symbol` generators. The data is loaded asynchronously from a CSV file fetched from GitHub, and axes are added via custom `axes` and `shapeLegend` functions.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. The x-axis represents average horsepower, the y-axis shows average torque, while bubble size encodes highway MPG and color distinguishes each manufacturer. Built with D3 v7, the visualization uses SVG rendering with `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color mapping, and `d3.interpolateTurbo` for the color palette. Interactive tooltips appear on hover, and a legend explains the bubble size scale for MPG values.

Loading thumbnail…

Activity6_Task3

This interactive scatter plot visualizes the Iris dataset, displaying petal length against petal width with points colored by species (setosa in skyblue, versicolor in lightgreen, and virginica in orange). The visualization loads CSV data from a GitHub gist using d3.csv, then renders circles using d3.scaleLinear axes and d3.axisLeft/axisBottom. Each circle's radius is fixed, though the code also stores sepal measurements as rx/ry attributes, and the SVG output is generated with D3 v6, filling the browser window.

Loading thumbnail…

Activity6_Task3

This example demonstrates a minimalist rendering of the text “Hello VizHub!” in the center of the page using D3.js. It loads D3 v5 from UNPKG and uses the `select` function to target a `div` element with the ID `message`, setting its text content from a local ES6 module. The code also defines an unused constant and a regular expression, showcasing basic JavaScript syntax alongside D3’s selection API. The page styling is handled by an external CSS file that centers the text with a large font size.

Loading thumbnail…

Activity6_Task2

This example displays a stacked horizontal bar chart showing IMDb movie rating distributions across six genres, with proportions for rating brackets below 5.0 through above 8.5. The visualization uses D3 v7’s `d3.stack()` and `scaleOrdinal` to create the layered bars, while `d3.axisBottom` and `scaleBand` handle axes and genre categories. Interactive tooltips appear on mouseover, showing precise percentages using the `d3.format` function. The bars are rendered as SVG rectangles with data loaded from a local CSV file.

Loading thumbnail…

Fork of Activity 7

This is a horizontal bar chart showing the 2020 population estimates for 30 countries and territories, with bars colored in light green against a white background. The chart uses React with D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a remote CSV file and formatted using D3’s `format` function to display values in billions with a "B" suffix. SVG rectangles are rendered for each bar, with tooltips revealing the exact population value.

Loading thumbnail…

Fork of Activity 7

This visualization shows the population of thirty countries in 2020 as a horizontal bar chart, with a title labeling the x-axis "POPULATION-2020". It uses React to render an SVG and the D3 v5 library's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. D3's `format('.2s')` formats axis tick labels (e.g., converting values to billions), and the `csv` function loads population data from a remote GitHub CSV file. The chart is interactive only through SVG `<title>` tooltips showing exact values.

Loading thumbnail…

Activity6_population

This example visualizes population trends across multiple countries from 1950 to 2020 using a line chart built with D3 v5. The data is loaded from a CSV file containing yearly population figures for countries including China, India, and the United States. The visualization uses D3's `select` function to manipulate the DOM and render the chart. The code demonstrates ES6 module imports, including local modules like `myMessage.js`, and sets a greeting message using D3's text manipulation.

Loading thumbnail…

Fork of IMDb Movie ratings

This stacked bar chart displays the percentage distribution of IMDb movie ratings across different genres, with each bar segment representing a rating category. The visualization uses a D3.js v7 implementation with SVG rendering, leveraging the `d3.stack` function to create the stacked layout and `d3.scaleLinear` for proportional scaling. The data is loaded from a CSV file containing genre-specific rating percentages. Interactive tooltips appear on hover, showing the exact percentage for each rating segment, while a color-coded legend identifies the rating categories.

Loading thumbnail…

Fork of Responsive Bar Chart

This example presents a responsive bar chart that visualizes population estimates for the top 10 countries by total population, using data from the UN Population Estimates 2024 dataset. The chart displays the population values in thousands for each country, with bars rendered on a canvas that includes a light gray inner rectangle and labeled axes. The implementation leverages D3.js APIs including `scaleBand`, `scaleLinear`, and `axisLeft`, along with the `@curran/responsive-axes` library to handle dynamic resizing. The code also utilizes `observeResize` from `@curran/responsive-axes` to adapt the chart dimensions to its container.

Loading thumbnail…

activity 6_Task 1_Vamsi

This visualization displays the top 30 countries by population in 2020 using a horizontal bar chart rendered with React and D3 v5. SVG rectangles scaled with `d3.scaleLinear` represent population values, while `d3.scaleBand` positions the categorical country labels. The chart includes formatted tick labels using `d3.format` (converting G to B) and axis components built with React. Population data is loaded asynchronously from a remote CSV via `d3.csv` in the `useData` hook, with values multiplied by 1000 before rendering.

Loading thumbnail…

Activity 6_Task 1_Vamsi

This example demonstrates a minimal D3.js web application that displays the text "Hello VizHub!" centered on the page. It serves as a template for loading D3 from a CDN and importing functions from local ES6 modules. The code uses D3’s `select` API to target the HTML element with the ID `message`, and imports a text constant from a separate `myMessage.js` module. The rendering relies on static HTML and CSS, with no data source involved.

Loading thumbnail…

activity 6_Task 1

This visualization shows a horizontal bar chart of the top 30 countries by 2020 population, with country names on the y-axis and population counts on the x-axis. The code uses React components to render SVG elements, while D3 v5 handles data loading via `d3.csv` and scales through `d3.scaleBand` and `d3.scaleLinear`. The data comes from a GitHub-hosted CSV file, and the bars are light green with axes styled in blue and tick labels. Tooltips provide formatted population values on hover.

Loading thumbnail…

Fork of activity 6_Task 1

This bar chart displays the 2020 population estimates for 30 countries, with country names on the y-axis and population values on the x-axis. The visualization uses React to structure SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for positioning and `format` for tick labels. Data is loaded asynchronously from a CSV file using `d3.csv`. Marks are rendered as SVG rectangles with tooltip titles, while custom axis components generate ticks and labels.

Loading thumbnail…

Activity 6

This example demonstrates a minimal D3.js v5 setup where the library is loaded via UNPKG and used to manipulate a DOM element using the `select` API. It imports a local ES6 module (`myMessage.js`) to provide the text content and displays a static message centered on the page. The code also includes example syntax for regular expressions and a variable declaration, showing basic JavaScript integration. The rendering approach is straightforward: D3 selects the `#message` div and sets its text content, while external CSS styles control formatting.