P

pradeepgubbala2001@gmail.com

@Pradeepgb2·18 public vizzes

Loading thumbnail…

Activity_7.1_Question2

This example visualizes temperature readings from a weather dataset, showing the first two weeks of January as a smooth area chart. It loads the data via a CSV file and uses D3 modules like `csv`, `scaleTime`, `scaleLinear`, `area`, `axisBottom`, and `axisLeft` to construct the chart. The SVG rendering includes labeled axes for date and temperature, with the area filled in steel blue. The code filters the raw data to a specific date range and parses timestamps using `timeParse`, demonstrating modular ES6 imports from D3.

Loading thumbnail…

Fork of Activity_7.1_Question1

This example presents a pie chart visualizing the top 11 cities by total population in 2024, using data from a GitHub-hosted CSV file. The chart displays each city as a colored slice with a label, and includes a legend for identification. The visualization is built with D3 version 6.7.0, utilizing the `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` APIs to compute and render the arcs, along with the `csv` loader to parse the dataset.

Loading thumbnail…

Activity_7.1_Question1

This example demonstrates a minimal D3.js setup within the VizHub environment, showing how to import functions from the D3 library and a local ES6 module. The code uses `select` from D3 to set the text of a `<div>` element to “Hello VizHub!”, which is defined in the separate `myMessage.js` module. It also includes a regular expression and a constant variable to illustrate basic JavaScript syntax. The page is styled with a centered, large-font message, and the D3 library is loaded via UNPKG.

Loading thumbnail…

Activity6_Task1

This visualization shows a horizontal bar chart comparing the populations of 30 countries for 2020, sorted by country name. Data is loaded from a CSV file via `d3.csv`. The chart uses React components with D3 scales, arranging bars with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The SVG output includes custom axes, blue tick lines, and green bars with tooltips, with populations formatted using `d3.format`.

Loading thumbnail…

Fork of Activity6_Q1.1

This example displays a horizontal bar chart ranking the populations of ten countries for the year 2000, using D3 version 5 scales and SVG rendering within a React component. The code imports `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates, with `format` applying a compact tick label format. Data is pulled from a remote CSV file via `d3.csv`, and the chart is rendered with custom React modules for axes and marks.

Loading thumbnail…

Activity6_Q1.1

This example demonstrates the basic capabilities of VizHub, rendering the text “Hello VizHub!” in large, centered type within a web page. It shows how to integrate the D3.js library (version 5) directly from a CDN and how to import specific functions, such as `select`, for DOM manipulation. The code further illustrates the use of local ES6 modules, importing a text message from a separate `myMessage.js` file. The appearance is styled through a linked CSS file, defining the text alignment and font size for the display.

Loading thumbnail…

Activity6_Task1

This example demonstrates how a web page can display text as a full-screen visual element. It presents the message "Hello VizHub!" in a centered, large font, serving as a simple demonstration of rendering text within a browser. The visualization uses HTML and CSS for layout and styling, while D3.js version 5, loaded via UNPKG, is used to select the HTML element and set its text content. The underlying code also illustrates modular JavaScript programming by importing a string from a separate local ES6 module.

Loading thumbnail…

Activity_6_Q9

This bubble chart visualizes the relationship between population, GDP, and life expectancy for 15 countries, with each country represented by a colored circle. The x-axis shows GDP in USD, the y-axis shows population, and bubble size encodes life expectancy. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and includes interactive tooltips on mouseover. SVG circles are rendered with animation-ready styling, and a legend illustrates life expectancy values.

Loading thumbnail…

Activity_6_Task_4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across different car makes, with each circle sized by its highway MPG value and colored by make. Hovering reveals the make name via a tooltip. Built with D3 v7, it reads from a CSV file and renders interactive SVG circles with linear scales for position and size, plus an ordinal color scale for categorical make labels. A legend displays the MPG bubble sizes and make colors.

Loading thumbnail…

Activity_6_Q6

This interactive scatter plot displays the relationship between horsepower and weight for ten car manufacturers, with each point colored by manufacturer. The visualization uses d3.csv to load data from cars.csv and d3.scaleLinear for both axes, while d3.scaleOrdinal maps manufacturers to d3.symbolsFill shapes. d3.axisLeft, d3.axisBottom, and custom legend functions render the chart elements, with symbol generators creating the point markers.

Loading thumbnail…

Activity_6_Task_3.2

This visualization is a scatter plot of the Iris dataset, showing sepal length against petal length, with the three iris species distinguished by different symbol shapes. The plot uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to generate the marks, with custom modules for axes and a shape legend. Data is fetched as CSV from a GitHub repository and parsed with `csvParse`. The chart is rendered across the full window and includes labeled axes and a legend for species categories.

Loading thumbnail…

Activity_6_Task_3

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis. Each circle’s color corresponds to the iris species (setosa, versicolor, or virginica), which is determined through a switch statement. The plot uses D3 version 6.7.0, with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scaling and axes. Data is loaded via `d3.csv` from a GitHub-hosted CSV file. The SVG rendering includes green axis labels and is sized to the full browser window.

Loading thumbnail…

Activity_6_Q3

This example visualizes the distribution of energy generation percentages across five energy sources (Coal, Solar, Wind, Nuclear, Hydro, and Natural Gas) using a stacked horizontal bar chart. It shows the proportional share of each source across five percentage categories, from below 10% to above 40%. The chart uses D3 v7’s `d3.stack()` and `d3.scaleBand()`, with SVG rendering and an ordinal color scale. Hovering over any bar segment highlights it and displays a tooltip with the exact percentage value, formatted via `d3.format()`. Data comes from a locally loaded CSV file.

Loading thumbnail…

Activity_6_2

This example shows the distribution of movie ratings across genres as a horizontal stacked bar chart. The chart displays the percentage of films falling into five rating categories, from "below 5.0" to "above 8.5", with each genre as a separate bar. The visualization uses D3 v7 APIs including `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, `d3.stack` for data processing, and `d3.scaleOrdinal` for color mapping. The code loads data from a local CSV file and renders the chart as SVG with interactive tooltips that display the exact percentage on hover.

Loading thumbnail…

Fork of Activity6_Task1

This example demonstrates how to load D3 via a CDN and use ES6 module imports to structure a simple D3 project. It renders a static text message inside a div, selected and updated using `d3.select`. The visualization also includes a local ES6 module (`myMessage.js`) that exports the message string, and imports the `select` function directly from D3 v5. The code uses D3’s UNPKG distribution and modifies the DOM’s text content without any data binding or complex rendering.

Loading thumbnail…

Activity6_Q1.2

This horizontal bar chart visualizes the population of the first 20 countries in 2010. Built with React and D3 v5, it renders as an SVG, using `d3.csv` to load data from a remote CSV file, `d3.scaleBand` for the y-axis, and `d3.scaleLinear` for the x-axis. Rectangles represent population values, formatted with the `d3.format` function. The chart includes custom axes and a tooltip showing the formatted population value on hover.

Loading thumbnail…

Question_Buddha

This SVG visualization renders a Buddha silhouette as a violet path, repeated six times with varying scales and translations across a green floral background. Built with React and ReactDOM, each instance uses SVG `<path>` elements with identical coordinate data, transformed through `translate` and `scale` operations. The code references a stylesheet that applies a background image from an external URL, while the SVG paths define the figure’s contours with stroke and fill attributes.

Loading thumbnail…

buddha 10

A dense field of semi-transparent, rotated SVG polygons forms an abstract, colorful backdrop, while a complex Buddha silhouette rendered as an SVG path is overlaid on top. The code uses React to render the SVG elements, generating polygon points and fill colors through repeated calls to `Math.random()`. The Buddha path data is hardcoded, and the visualization is built with React components and SVG primitives like `polygon` and `path`.