T

tallavijayalakshmi0710@gmail.com

@vijayalakshmitalla·23 public vizzes

Loading thumbnail…

Question2

This example displays a multi-series area chart of genre rating proportions using D3 v6. It loads CSV data from a GitHub gist, parses columns into separate genre series, and renders overlapping filled areas with a categorical color scheme alongside an x-axis for genres and a y-axis for ratings. The code uses `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.area`, `d3.axisBottom`, `d3.axisLeft`, and `d3.schemeCategory10`, outputting to an SVG container. A legend maps each genre to its corresponding color.

Loading thumbnail…

Question2

This example demonstrates a minimal VizHub project that displays a centered "Hello VizHub!" message. It shows how to set up a basic D3.js visualization environment by loading the library via UNPKG and using local ES6 modules. The code imports the `select` function from D3 to target a div element and set its text content, while a separate module exports the message string. Styling is applied through an external CSS file.

Loading thumbnail…

Fork of Question 1:Pie Chart

This example displays a pie chart that breaks down genres by the proportion of entries scoring above 8.5. The visualization uses `d3.pie()` to compute arc positions and `d3.arc()` to generate the SVG path data for each slice. A categorical color scheme from `d3.schemeCategory10` fills the segments, with an accompanying legend mapping colors to genre names. Data loads asynchronously from a CSV file via `d3.csv()`.

Loading thumbnail…

Question 1:Pie Chart

This example displays a simple pie chart visualization built with D3.js. The chart is rendered using SVG paths generated from data, with slices sized proportionally to their values. The code demonstrates loading D3 via UNPKG, importing the `select` function from the `d3` module, and using it to manipulate the DOM. A custom ES6 module (`myMessage.js`) provides the text content, which is set in the HTML element. The visualization is minimal, focusing on core D3 functionality and module imports rather than complex chart features.

Loading thumbnail…

Fork of Question 2(2)_Activity 6

This example shows a horizontal bar chart of population data for 20 countries in 2010, using a green fill for each bar and a blue axis. It loads data from a remote CSV file via `d3.csv` and renders the visualization with React, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The chart includes custom axis components built with SVG, tick formatting through `format('.2s')` to convert values to billions, and tooltips via SVG `<title>` elements.

Loading thumbnail…

Question 1_Activity 6

This chart shows the population of the top 10 countries in the year 2000, using a horizontal bar chart with a linear scale for the x-axis and a band scale for the y-axis. It uses React to render SVG elements, with D3 functions such as `scaleLinear`, `scaleBand`, and `format` for axis ticks and tooltips. Data is loaded as CSV from a GitHub repository and parsed using D3’s `csv` method.

Loading thumbnail…

Activity 6

A horizontal bar chart displays 2020 population estimates for 30 countries, sorted by country name. Built with React and D3 v5, the visualization uses SVG rectangles scaled by population using `scaleLinear` and `scaleBand` for axes. Data is loaded from a CSV via `d3.csv`, with tooltips formatted using `d3.format` to abbreviate large numbers.

Loading thumbnail…

Fork of Activity 6_Question 4

This example visualizes the Iris dataset as an interactive bubble chart, using circle size to represent petal length and color to distinguish iris species. The chart plots sepal length on the x-axis and sepal width on the y-axis for all 150 samples. Built with D3 v7 and rendered as SVG, it includes a legend for species and tooltips that display species and petal length on mouseover. The visualization implements scales via `d3.scaleLinear` and `d3.scaleOrdinal`, with color mapping derived from `d3.interpolateTurbo`.

Loading thumbnail…

Activity 6_Question 4

This bubble chart visualizes correlations among sepal length, sepal width, and petal length for three iris species, with petal length encoded as bubble size and species color-coded using a categorical scale built with `d3.scaleOrdinal` and `d3.interpolateTurbo`. It loads data from `iris.csv` and renders SVG circles positioned by linear scales. Interactive tooltips highlight species and petal length on mouseover, while a legend identifies color assignments.

Loading thumbnail…

Activity 6_Task 4

A bubble chart displays the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower and torque, while its radius and color represent highway MPG and car brand, respectively. Using D3.js v7, the visualization maps data from a CSV file to SVG elements, with a black tooltip appearing on hover, and a legend showing MPG values and color-coded make categories.

Loading thumbnail…

Activity 6_Question 3

This scatter plot visualizes a car dataset, mapping horsepower on the x-axis against highway MPG on the y-axis, with each point colored by the car’s make. The visualization uses D3 v6, loading CSV data from a GitHub URL and rendering as SVG. Axes are created with `axisLeft` and `axisBottom`, while `scaleLinear` handles the positional scales and `scaleOrdinal` with `schemeTableau10` assigns categorical colors. A legend identifies the car makes, and point radius is fixed at five pixels.

Loading thumbnail…

Activity 6_Tutorial 3.2

This is a scatter plot showing the relationship between sepal length and petal length for Iris flowers, with points colored and shaped by species. It uses D3 v7’s modular API, including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and the `symbol` generator to draw different shapes. The plot includes axes with labels, a shape legend, and loads data from a local CSV file via `csvParse`. The visualization updates dynamically when the data is fetched, initially showing a loading state.

Loading thumbnail…

Activity 6_Tutorial 3.1

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three flower species. Each circle is colored by species—skyblue for setosa, lightgreen for versicolor, and orange for virginica—making species clusters visible. The visualization loads CSV data via `d3.csv`, uses `scaleLinear` and `extent` for axis scaling, and renders SVG circles with `d3.selectAll` and `join`. Axis labels are added with `axisLeft` and `axisBottom`, while custom text labels annotate the axes. The chart uses D3 v6 and is displayed in a full-window SVG layout.

Loading thumbnail…

Activity 6_Question 2

This stacked horizontal bar chart displays the percentage distribution of iris flower species, comparing the proportion of setosa, versicolor, and virginica flowers across different percentage ranges. The visualization uses D3.js v7 to render SVG elements, employing the d3.stack function to compute cumulative bar segments and d3.scaleOrdinal with a color scale to distinguish each species. Interactive tooltips appear on mouseover, revealing the exact percentage value for each segment. The data originates from the classic Iris dataset, with axes labeled for percentage and species categories.

Loading thumbnail…

Activity 6_Question 2

This example demonstrates the VizHub V3 Runtime Environment’s “Hello World” starting point, showing how a simple text string can be rendered with dynamic styling. The code exports a `main` function that receives a `container` DIV, sets its `innerHTML` to display “Hello World!”, and enables interactive editing—users can Alt-drag the `fontSize` variable to change the text size in real time. The visualization uses no external libraries, relying solely on the runtime’s continuous hot reloading to update the DOM.

Loading thumbnail…

Activity 6_Task 2

This stacked bar chart displays the percentage distribution of IMDb movie ratings across six genres, showing how rating levels such as 5.0–6.5 or above 8.5 vary by genre. It uses d3.v7 with SVG rendering, employing d3.stack, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand to construct the bars. Hovering over a segment triggers a tooltip via d3.select, displaying the exact percentage for that genre and rating category. The data comes from a CSV file and is formatted using d3.format.

Loading thumbnail…

Fork of Activity 6_Task 2

This stacked bar chart displays the percentage distribution of IMDb rating categories across five movie genres, showing how genre influences audience ratings. The visualization uses color-coded segments for each rating bracket, with tooltips revealing precise percentages on hover. Built with D3.js v7, the chart employs d3.stack to generate stacked data, d3.scaleLinear and d3.scaleBand for axes, and d3.scaleOrdinal for color mapping. SVG rendering handles the interactive elements, with data sourced from a local CSV file.

Loading thumbnail…

Activity 6_Task 2

This example demonstrates a minimal D3.js integration within a VizHub project, rendering the text "Hello VizHub!" prominently in the center of the page. It shows how to load D3 v5 via UNPKG and use the `import` statement to access the `select` function from the D3 module for DOM manipulation. The code also imports a local ES6 module, `myMessage.js`, which exports the displayed string, and applies styling through an external CSS file. This serves as a foundational template for combining D3 with modular JavaScript.

Loading thumbnail…

Question 2(2)_Activity 6

This example demonstrates how D3.js can be used to dynamically update text content in a webpage. It loads D3 v5 from a CDN and uses the `select` API to target a specific HTML element, setting its displayed text to a string imported from a local ES6 module. The visualization shows a simple hello-world interaction, rendering the message “Hello VizHub!” in large, centered text via CSS. It highlights D3’s ability to manipulate the DOM alongside modern JavaScript module imports.

Loading thumbnail…

Buddhas

The Buddhas visualization displays a large central violet Buddha figure composed of a single intricate path, accompanied by a dense field of small, randomly positioned, semi-transparent colored circles that create a scattered, pointillist backdrop. The React application renders all elements within a 960 by 1000 pixel SVG canvas, using nested `A.map()` loops to generate the numerous circles, whose positions and fill colors are determined by `Math.random()`. The main Buddha shape is drawn via a complex SVG `<path>` element with extensive path data, scaled and translated into position.

Loading thumbnail…

Fork of Buddhas

The visualization displays a Buddha-like figure rendered as a violet SVG path, overlaid with a scattered field of small, semi-transparent circles. The circles are generated by iterating through a fixed array and placing each at random coordinates, with colors derived from randomly generated RGB values. The path, a detailed hand-coded vector shape, is transformed and scaled to center the figure within the 960x1000 pixel canvas. The example uses React for component structure and SVG for rendering, with JavaScript loops used to populate the decorative circle layer.

Loading thumbnail…

Fork of 5 buddhas

Five concentric diamond shapes of repeating scraped polygons form a hypnotic static. Each dot’s position, fill color, and rotation derive from nested iterations of variable `a` multiplied by `Math.random()`. The output uses React to render 9,261 SVG `<polygon>` elements inside a fixed 960x1000 canvas, with the five Buddha paths drawn with `transform` scaling and rotation, producing an overlapping, kaleidoscopic effect over a black background.

Loading thumbnail…

5 Buddhas

A glowing, photorealistic image of the Buddha materializes from a field of small, colored particles. The piece uses a particle system to reconstruct the portrait, with each particle’s position and color sampled from a source image via Canvas `getImageData`. React manages the component lifecycle, while a custom animation loop gradually moves particles toward their target locations, creating a shimmering, emergent effect against a black background.