Skip to main content
Log in
P

p99vijaya@gmail.com

@vijayalakshmipepala·16 public vizzes

Loading thumbnail…

dataq2

This example shows a monthly sales area chart rendered as an SVG, with labeled x- and y-axes. It uses D3 v6 `scaleBand` and `scaleLinear` to map months and sales values, while `d3.area` generates the filled path from the provided dataset. Axis labels are drawn manually as SVG text elements, and the chart is embedded directly in the HTML page without a separate data-loading step.

Nov 6, 2024
Loading thumbnail…

dataq1

This example displays six small pie charts, one for each movie genre, showing the proportion of ratings across five categories from "Below 5.0" to "Above 8.5." The charts are arranged vertically within a single SVG, with each genre’s chart positioned using a translated group. The code builds the visualization with D3.js v6, using `d3.pie()` to compute arc angles, `d3.arc()` to generate SVG path data, and `d3.scaleOrdinal()` with `d3.schemeCategory10` for coloring rating categories. A legend identifies the color mapping for each rating range.

Nov 6, 2024
Loading thumbnail…

Question1

This visualization is a donut-style pie chart that displays the distribution of five age groups (0-17, 18-34, 35-49, 50-64, and 65+) by their respective counts. The chart uses a categorical color scale from `d3.scaleOrdinal` with `d3.schemeCategory10` to differentiate each segment. The pie layout is computed using the `d3.pie` and `d3.arc` APIs, with the arcs rendered as SVG paths inside a 400x400 pixel container. A custom HTML legend, styled with flexbox, lists each age group alongside a color swatch and its count. The data is defined locally in a JavaScript array and rendered via the `d3.select` API.

Nov 5, 2024
Loading thumbnail…

Activity 7

An animated scatter plot of the Iris dataset cycles through different feature pairings on the x-axis, with petal width fixed on the y-axis. The visualization rotates through petal width, sepal width, petal length, and sepal length using a `setInterval` callback that updates the D3 `scaleLinear` domains. Circles are colored by species, and a legend identifies setosa, versicolor, and virginica. The code uses D3's `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, and defines a reusable `scatterPlot` module. Data is loaded from a GitHub Gist.

Nov 4, 2024
Loading thumbnail…

Act6_q1

This bubble chart plots GDP against life expectancy for five countries, with bubble size representing population. The visualization uses D3.js v7 with inline SVG rendering. It applies `d3.scaleLinear` for both axes and `d3.scaleSqrt` for bubble sizing, while `d3.axisBottom` and `d3.axisLeft` generate tick marks. Country labels appear next to each bubble, and the data comes from a simple hardcoded array rather than an external file.

Oct 25, 2024
Loading thumbnail…

Activity6_task4

This bubble chart shows the relationship between average horsepower, torque, and highway MPG for various car makes, using bubble size to represent MPG and color to distinguish makes. Built with D3 v7, it renders as SVG with interactive tooltips on hover that display the car make. The chart uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color mapping, and includes legends for bubble size and make colors, with data loaded from a local CSV file.

Oct 25, 2024
Loading thumbnail…

act3_q1

This example visualizes the relationship between horsepower and weight for five car models using a scatter plot. The data is hard-coded as an array of JavaScript objects, mapping each car's horsepower to the x-axis and weight to the y-axis. Built with D3 v7, it renders SVG circles whose positions are determined by linear scales (`d3.scaleLinear`), and their fill colors are mapped via a sequential plasma color scale based on horsepower. The chart includes labeled axes and uses D3’s axis functions for tick marks.

Oct 25, 2024
Loading thumbnail…

Act3_TAsk3

This interactive scatter plot displays the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with each species distinguished by a different shape. A separate legend identifies the three species using their corresponding symbols. The visualization is built with D3 v7, using d3.scaleLinear for the axes, d3.scaleOrdinal and d3.symbol for the shapes, and d3.csvParse to load the remote CSV data. Axes and legend labels are added through custom modules.

Oct 25, 2024
Loading thumbnail…

Act6_q2

This example shows a stacked bar chart of three region values across four years, with each bar segment colored by region and labeled with year and value axes. The chart is rendered as SVG using D3 v7, leveraging `d3.stack()` to compute the layered series, `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.schemeSet2` for categorical colors. The data is embedded directly in the script rather than loaded from the CSV file, and axes are added via `d3.axisBottom` and `d3.axisLeft`.

Oct 25, 2024
Loading thumbnail…

Fork of Activity 6_Task2

A stacked bar chart shows the percentage distribution of IMDb ratings across six genres, with each bar segmented into five rating ranges from below 5.0 to above 8.5. Hovering over a segment highlights it and displays a tooltip with the exact percentage. The chart uses d3.stack() to compute stacked series, d3.scaleOrdinal for colors, and d3.axisBottom with gridlines. Data comes from a CSV file loaded via d3.csv, rendered as SVG rects with mouse event handlers.

Oct 25, 2024
Loading thumbnail…

Activity 6

This example presents a minimal D3.js demonstration that displays a personalized greeting message. It shows how to set up a VizHub project by importing D3 through a CDN and using the `select` function from the `d3` module to target an HTML element and populate it with text. The code also illustrates local ES6 module imports, pulling a string from `myMessage.js` and applying basic CSS styling to center the text on the page.

Oct 25, 2024
Loading thumbnail…

activity 6_Task 1

This chart displays the population of 20 countries in the year 2000 as a horizontal bar chart using SVG. The code uses D3 v5’s `scaleBand` and `scaleLinear` to position bars, with React rendering the visualization. Population values are formatted with a custom tick formatter that converts large numbers (e.g., “G” to “B”). The data is loaded from a CSV file via D3’s `csv` function, and each bar includes an HTML `<title>` element for tooltips.

Oct 25, 2024
Loading thumbnail…

activity 6_Task 1

This example renders a simple "Hello VizHub!" message in large text, centered on the page. It demonstrates fundamental VizHub capabilities: loading D3.js v5 via UNPKG, importing the `select` function from D3, and importing a local ES6 module (`myMessage.js`) that exports the message string. The code also includes a regular expression and an unused variable. The D3 `select` API targets the message div in `index.html`, while `styles.css` controls the text alignment and font size.

Oct 23, 2024
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization layers hundreds of semi-transparent, randomly generated diamond-shaped polygons on top of a static SVG path of a Buddha, creating an overlapping, colorful composition. The polygons are positioned, colored, and rotated using JavaScript's `Math.random()` within React's JSX mapping, while the Buddha silhouette is drawn as a complex SVG `path` element. The React code renders both elements into an SVG canvas, with a floral background image set via CSS on the body element.

Oct 19, 2024
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

Six layered Buddha silhouette shapes overlap in a vertical stack, each rendered in a distinct translucent color. The composition creates a moiré-like effect as the identical forms interweave, with the title suggesting six reflections of a single figure. The visualization uses plain HTML `<div>` elements with CSS classes (`buddha-reflection`) inside a `.container`, relying on CSS styling from `style.css` for the shapes and colors. No JavaScript libraries or data-processing APIs are involved; the effect is purely structural and style-driven.

Oct 18, 2024
Loading thumbnail…

5 buddhas

The visualization depicts a chaotic, overlapping formation of five colorful Buddhist figures, rendered in an abstract, geometric style. A programmatic loop generates a dense field of semi-transparent polygons with random positions and colors, creating a vibrant, pixelated backdrop. This dynamic canvas is layered with a detailed SVG path of the Buddha, which is repeatedly transformed and overlaid. The example uses React for the interface and SVG for static drawing, while JavaScript’s `Math.random` drives the generative shapes.

Oct 14, 2024