Skip to main content
Log in
M

mulyasuji999@gmail.com

@Lakshmisaiamulyapratti·15 public vizzes

Loading thumbnail…

Fork of Fork of Hello VizHub

This example displays the text “Hello VizHub!” centered in a large font. It demonstrates fundamental VizHub workflows: loading D3 from a CDN via UNPKG, importing the `select` function from the D3 module, and using a local ES6 module (`myMessage.js`) to supply the displayed string. The rendered output is a single styled HTML div, with CSS controlling the message’s size and alignment.

Oct 21, 2024
Loading thumbnail…

Task8_Q2)

This example shows a stacked bar chart of cricket scores by country, with individual bars colored by player name and an interactive tooltip revealing each player's score on hover. Built with D3.js v7, it renders an SVG visualization using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Data is loaded asynchronously from a CSV file via `d3.csv`, and a custom tooltip is implemented using D3's selection and transition methods. A legend is generated dynamically using `color.domain()` and appended as HTML to the page body.

Oct 19, 2024
Loading thumbnail…

Task - 9&10 - Q2)

This example shows a monthly sales area chart with hover tooltips. It displays sales values over time, where moving the mouse over the transparent overlay rectangles reveals a tooltip showing the month and its exact sales figure. The visualization is built with D3 v7, using `d3.csv` to load the data from a Gist-hosted CSV file and `d3.area` to generate the filled path. The chart renders as an SVG, with axis labels for "Month" and "Sales," and the hover interaction is implemented via D3’s selection and event handling.

Apr 24, 2024
Loading thumbnail…

Task - 9&10 - Q1)

This D3.js v7 visualization displays the prices of various gadgets as an interactive pie chart with a legend. It uses `d3.pie` and `d3.arc` to compute the chart geometry, with categorical colors from `d3.schemeCategory10` via `d3.scaleOrdinal`. Hovering over a slice reveals a tooltip showing the gadget name and price, and each slice is labeled with its corresponding name. Data is loaded from a remote CSV file using `d3.csv`. The chart is rendered as SVG, with the legend positioned separately using `d3.select` and appended HTML elements.

Apr 24, 2024
Loading thumbnail…

Task 8 - Q4)

This bubble chart displays the population of each U.S. state, with circles positioned along an x-axis of state names and a y-axis of population, while the circle size also encodes population and the color represents the state capital. The visualization uses SVG and animation, with interactive tooltips that appear on mouseover, showing the capital and population values. Built with D3 v7, the chart employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for its scales, and renders data from a CSV file loaded via `d3.csv`, with a custom legend below the chart.

Apr 15, 2024
Loading thumbnail…

Task8_Q3)

This scatter plot visualizes each country's population in 2024, with countries on the y-axis and population on the x-axis. It uses the D3.js library (v7) to load data from a CSV file, then renders circles with colors from `d3.schemeCategory10`. The visualization includes interactive hover effects that enlarge the dots and display the country name, alongside axes, and a legend built from the categorical colors. The plot uses `d3.axisBottom` and `d3.axisLeft` for the axes and is rendered as an SVG element.

Apr 14, 2024
Loading thumbnail…

Task8_Q1)2)

This bar chart displays the population of 20 countries in 2010, ordered along a vertical band scale with horizontal bars extending along a linear population scale. The visualization is rendered as an SVG using React and D3 v5, with data loaded from a CSV file via `d3.csv`. Axes are custom-built using `scaleBand` and `scaleLinear`, while tick labels format population values with the `d3.format` function, converting billions (G) to billions (B). Interactive tooltips appear on each bar via SVG `<title>` elements.

Apr 10, 2024
Loading thumbnail…

Task8_Q1)1)

A horizontal bar chart displays the populations of ten countries in the year 2000, ranked with country names on the y-axis and population count on the x-axis. The visualization uses D3 v5 scales, including `scaleBand` and `scaleLinear`, within a React framework to render SVG rectangles. Each bar includes a native SVG tooltip showing the population value in billions via `format('.2s')`. Data is loaded asynchronously from a remote CSV file using D3's `csv` function. Grid lines and axis labels use the Poppins font, with light green bars on a white background.

Apr 10, 2024
Loading thumbnail…

Task8_task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across different car makes. Each bubble’s position encodes horsepower and torque, its radius encodes highway MPG, and its color distinguishes car makes. Built with D3 v7, the visualization uses SVG circles with interactive tooltips that display the make on hover. A legend maps both bubble size to MPG values and color to the categorical make variable, with data sourced from a CSV file.

Apr 10, 2024
Loading thumbnail…

Task8_task3-tutorial3.2

A scatter plot of Iris flower measurements maps sepal length against petal length, with species distinguished by symbol shapes and a custom legend. The visualization loads data from a GitHub-hosted CSV and renders marks using D3 v7. It demonstrates modularized code with `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and custom axis and legend functions built from `d3.axisLeft` and `d3.axisBottom`.

Apr 10, 2024
Loading thumbnail…

Task8_task3

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The code also stores sepal length and width values per point, though these are not currently mapped to visual encodings. Built with D3 v6, it loads the CSV data from a GitHub gist, uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes, and renders colored circles as SVG markers. The chart fills the browser window, with labeled axes for petal length and sepal length.

Apr 10, 2024
Loading thumbnail…

Task8_task2

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, showing the proportion of films within each rating bracket as a fraction of one. The chart uses horizontal bars segmented by rating categories, with color coding to distinguish the five rating levels. Hovering over any segment reveals an exact percentage via a tooltip. The visualization is built with D3 v7, using `d3.stack` for data aggregation and `d3.scaleOrdinal` for color mapping. Data is sourced from a static CSV file, and the rendering is done through SVG elements.

Apr 10, 2024
Loading thumbnail…

Task8_task1

This visualization shows the population of countries in 2020 as horizontal bars, sorted from largest to smallest, with a linear x-axis scaled to the maximum population value and a band scale for country names. The chart is built with React and D3 v5, using `scaleBand`, `scaleLinear`, and `max` from the D3 API, and renders SVG rectangles for each bar. Population values are read from a CSV file, converted from strings to numbers, and formatted with `format('.2s')` to display values in billions. The data consists of the first 30 rows of the source dataset.

Apr 10, 2024
Loading thumbnail…

Task 8_task 1

This visualization displays the populations of 30 countries in 2020 as horizontal bars, ranked by country name along the vertical axis. The bars use a light green fill, with blue axis ticks and gray labels, and a title reading “POPULATION-2020” labels the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data, `csv` to load the dataset from GitHub, and renders the chart as SVG. Hovering over a bar shows a tooltip with the population value formatted using D3’s `format` function.

Apr 10, 2024
Loading thumbnail…

5 Buddhas

Five Buddhas is a generative visualization of a golden Buddha silhouette, created by composing five nested ternary loops that each render a polygon layer. The piece uses React to build an SVG canvas, with each polygon’s position, rotation, and color determined by a pseudo-random function of the loop index. The result is a dense, overlapping stack of geometric shapes that converge to form the icon, overlaid on a black background, with an opacity setting that produces a luminous, crystalline effect. This work demonstrates a code-based approach to sacred iconography through algorithmic, layered construction.

Mar 24, 2024