anjalimadhavi98@gmail.com

@Anjalimadhavi98·13 public vizzes

Fork of Activity 7-pie

This example visualizes the distribution of penguin species as a pie chart, showing the counts for Adelie, Gentoo, and Chinstrap penguins. The chart is rendered as an SVG, with each slice colored by species and labeled with its count. It uses the d3 pie and arc generators to compute slice geometry and the scaleOrdinal function for color assignment. Data is loaded from a remote CSV file containing penguin measurements, and the visualization includes a title and a legend.

Nov 5, 2024

Loading thumbnail…

Fork of Fork of Activity 7-Scatter-plot

This fork of a scatter plot example transforms the classic visualization into a reusable area chart that displays the distribution of penguin culmen lengths across three species—Adelie, Gentoo, and Chinstrap. Using the D3.js libraries `bin`, `area`, and `curveBasis`, it groups the data into bins and renders smoothed density-like curves for each species, colored via `scaleOrdinal`. The chart reads from an external CSV dataset, includes axes and labels, and is rendered as SVG, leveraging D3's `select`, `scaleLinear`, and axis APIs for the final interactive display.

Nov 5, 2024

Loading thumbnail…

Fork of Fork of Activity 7-AreChart

This visualization displays the distribution of penguin species by culmen length, using stacked area charts to compare the species-specific counts across the measurement range. The chart aggregates the penguin dataset by species and culmen length bins, then renders the stacked areas with distinct colors for each species. It uses D3 v6 APIs including `stack`, `area`, `scaleLinear`, and `scaleOrdinal`, with SVG for rendering. The data is loaded from a CSV file, and the chart includes labeled axes and a title.

Oct 30, 2024

Loading thumbnail…

Activity 7

This animated scatter plot, styled as a reusable D3.js component, visualizes the Iris dataset, cycling through different feature pairs on the x-axis (petal width, sepal width, petal length, sepal length) while plotting sepal length on the y-axis. It shows the distribution of three iris species—setosa, versicolor, and virginica—with color-coded circles. The visualization initially renders circles using SVG attributes, then repeatedly invokes the `scatterPlot` function with `d3.scaleLinear` axes and updates at fixed intervals via `setInterval`. It loads CSV data asynchronously with `d3.csv` and includes an SVG-based legend and text labels.

Oct 30, 2024

Loading thumbnail…

Fork of Bubble chart

A bubble chart displays the correlation between the area in square kilometers, GDP in billion USD, and population in millions for major U.S. cities. The visualization uses D3.js v7, rendering SVG circles whose x-position maps population, y-position maps area, and radius encodes GDP. A color scale, derived from the city names via `d3.interpolateTurbo` and `d3.scaleOrdinal`, distinguishes each city, while a tooltip shows the city on hover. The code also includes a legend for bubble size and interactive hover effects.

Oct 20, 2024

Loading thumbnail…

Activity_6_task3

This scatter plot visualizes the Iris dataset, mapping petal length and width to the x- and y-axes while coloring each circle by species (A, B, or C). It uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the SVG chart. Data is loaded via `d3.csv` from a GitHub gist, with each row parsed into numeric attributes. The code stores additional raw attribute values for potential ellipse sizing, though the rendered circles use a fixed radius.

Oct 19, 2024

Loading thumbnail…

Activity6_task3.1

This interactive scatter plot visualizes the relationship between sepal length and petal length in a flower dataset, with each point’s shape encoding the species. Using D3 v7, the visualization employs `scaleLinear` for both axes, `scaleOrdinal` with `symbolsFill` to map species to distinct shapes, and `symbol()` to render the marks. The x- and y-axes are generated via `axisBottom` and `axisLeft`, with custom labels. A shape legend clarifies the species mapping. Data is fetched as CSV and parsed with `csvParse`, then plotted across the full window.

Oct 19, 2024

Loading thumbnail…

Activity6-Task2

This stacked bar chart visualizes the percentage distribution of IMDb rating categories across six movie genres, with each bar segment representing a rating range from “below 5.0” to “above 8.5.” Hovering over any segment reveals its exact percentage, and the total for each genre sums to 100%. The chart uses d3.stack for data stacking, d3.scaleBand for the categorical genre axis, and d3.scaleLinear for the percentage axis. SVG rendering and a custom tooltip created with d3 selection methods provide the interactive feedback, while data is loaded from an external CSV file.

Oct 19, 2024

Loading thumbnail…

Activity6_population-2010

This bar chart displays the populations of 20 countries in 2010, with countries listed on the vertical axis and population values (formatted in billions) on the horizontal axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for bars. The data is loaded from a CSV file via `d3.csv`, with the population column converted from a string to a number by multiplying by 1000.

Oct 19, 2024

Loading thumbnail…

Activity6

A horizontal bar chart displays the population of ten countries in the year 2000, with bars extending from left to right and a blue bottom axis showing values formatted in billions. The visualization is rendered as SVG within a React application, using D3.js modules `scaleBand` and `scaleLinear` for the coordinates and `format` for axis labels. Data is loaded from a CSV file via the `d3.csv` loader, which derives the population value from the raw 2000 column.

Oct 19, 2024

Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates how to create a simple text display using D3.js within the VizHub environment. It uses the `select` function from D3 to target a DOM element with the ID "message" and sets its content to the text "Hello VizHub!". The text message is imported from a local ES6 module via the `import { message } from './myMessage'` statement, showcasing modular JavaScript. The page loads D3 version 5.16.0 directly from the UNPKG CDN. Custom styling is applied through a linked CSS file, which centers the message and sets its font size to 12em. This example illustrates the basic workflow of combining external libraries, local modules, and custom styles in a data visualization project.

Oct 19, 2024

Loading thumbnail…

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

This visualization is a chaotic, colorful composition of overlapping diamond-like polygons generated from repeated mathematical calculations. The React application renders a grid of polygon shapes using SVG elements, where each polygon’s position, size, and color are determined by random values derived from an array of numbers. The code uses React’s `ReactDOM` to render the SVG, with polygon points and fill colors generated via `Math.random()`. An underlying Buddha silhouette path is embedded and transformed, though the dense polygon layer visually dominates the composition.

Oct 9, 2024

Loading thumbnail…

5BuddhasViz

The visualization displays five overlapping Buddha figures rendered in vibrant colors against a black background. Using React with ReactDOM, it generates a field of randomly positioned circles with varying RGB values before layering the Buddha path data. The SVG rendering incorporates large, intricate path definitions scaled and translated to create the overlapping Buddhist iconography, with each Buddha appearing at different coordinates to form a composite, multi-colored composition.

Oct 9, 2024