Y

yamunaunt

@yamunaunt·32 public vizzes

Loading thumbnail…

3D scatter plot-penguin dataset

This visualization presents the Palmer Penguins dataset as an interactive 3D scatter plot, mapping body mass, culmen length, and flipper length along the x, y, and z axes. Each marker’s color encodes the penguin species, using a custom color scale that distinguishes Adelie, Chinstrap, and Gentoo penguins. The plot is rendered with Plotly’s `scatter3d` type, while D3 handles loading the CSV data via `d3.csv`. The code assigns numeric color values to each species and configures a background grid with axis titles through the `layout.scene` object, all within a WebGL-enabled browser.

Loading thumbnail…

penguin 3D Scatter Plot

This interactive 3D scatter plot visualizes the Palmer Penguins dataset, comparing body mass, bill length, and flipper length across three penguin species: Adelie, Gentoo, and Chinstrap. Each species is represented by a distinct marker color, with Adelie in purple, Gentoo in pink, and Chinstrap in light gray. The visualization uses Plotly’s `scatter3d` trace type within a `Plotly.newPlot` call, loading data via D3’s `d3.csv` function. Axis labels indicate the three measured variables, and the plot allows users to rotate and explore the spatial distribution of penguin measurements.

Loading thumbnail…

Fork of Fork of 3D Scatter Plot-sheela

This 3D scatter plot visualizes video game sales in North America and Japan across different years, with North American sales in blue and Japanese sales in purple. The plot is rendered using Plotly's `newPlot` function within a React application, with data loaded via `d3.csv` from a remote CSV file. The visualization distinguishes the two regions' sales figures on the z-axis, while game names and years are mapped to the x and y axes, with margin and axis titles configured through Plotly's layout object.

Loading thumbnail…

3D Scatter Plot

This is a 3D scatter plot of the Iris dataset, rendered with Plotly.js inside a React application. It shows two overlapping sets of points: one mapping sepal length, sepal width, and petal length, and another using petal width in place of petal length, with distinct marker styling. The data is loaded asynchronously using D3’s `d3.csv` from a GitHub-hosted CSV file. The chart uses `Plotly.newPlot` to draw both `scatter3d` traces into a specified div, with a zero-margin layout for immersive viewing.

Loading thumbnail…

Reusable_D3_Scatter_Plot.

This example demonstrates an animated scatter plot of the Iris dataset, cycling through different feature pairs on the x-axis while keeping sepal length on the y-axis. Points are colored by species using hard-coded color mapping. The visualization uses D3.js (v6) with a reusable `scatterPlot` module that handles scales, axes, and circle rendering via SVG. A `setInterval` triggers updates to the x-value accessor, and the plot re-renders with new axes and titles, including a legend and axis labels.

Loading thumbnail…

Fork of Area Death's

This area chart visualizes female suicide counts from 1985 to 2015, with years on the x-axis and the number of suicides on the y-axis. Using D3 v5, the code employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to render the filled path in SVG. The dataset is loaded via `csv` from a GitHub gist, and axis labels and a title are styled through CSS classes.

Loading thumbnail…

Line_Stroke_GasPrice

This line chart visualizes female suicides among ages 25–34 per year, using data from a CSV file. The chart plots year on the x-axis and suicide counts on the y-axis, with a smooth blue line generated by `d3.line()` and the `curveBasis` curve. The visualization uses `d3.csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and gridlines, while styled SVG elements display red axis labels and a bold title. The line’s stroke width and color are set via CSS.

Loading thumbnail…

Fork of Pie Chart

This example visualizes the top 10 countries by gas price per gallon (USD) for June 2023, using a pie chart with a color-coded legend for each country and its price. Data is loaded from a CSV gist and rendered with React, using D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to generate SVG paths. Hovering a slice logs its price to the console. The chart displays a title and a custom legend with formatted dollar values.

Loading thumbnail…

Fork of Area Death's

This area chart displays average life expectancy versus gas prices across countries, using a one-week temperature dataset from San Francisco sourced from Data Canvas - Sense Your City. The visualization renders as an SVG using D3 v5, employing `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. A blue-violet axis label and red title annotate the chart, while the orange-filled area path is generated with `d3.curveBasis`. Data is loaded via `d3.csv` from a GitHub gist.

Loading thumbnail…

ICE7-Pie Chart

A pie chart displays the cost per gallon of gas for ten countries, labeled as the "Basic Cost of Netflix," with a legend listing each country and its corresponding dollar value. The visualization uses D3 v5 APIs including `pie()`, `arc()`, `scaleOrdinal` with `schemeCategory10`, and SVG rendering within a React component. Data is loaded via `csv()` from a GitHub gist, parsed for numeric cost values, and sorted to show the top ten entries.

Loading thumbnail…

Palmer Penguins - ICE-6 Scatter Plot

This interactive scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis against body mass on the y-axis. Each point's color encodes the penguin species (Adelie, Gentoo, or Chinstrap), while the circle's fill radius is overridden with bill length and bill depth values (though these are not visually effective since `r` is fixed). The visualization uses d3.csv for data loading, d3.scaleLinear for axes scaling, and d3.axisLeft/axisBottom for tick marks. Data is parsed in JavaScript, and the SVG rendering populates circles with a static 5-pixel radius.

Loading thumbnail…

DV ICE-6 Bar Graph

This chart displays the average gas prices per gallon for fifteen countries, using horizontal bars sorted by country name. The visualization loads data from a CSV file via `d3.csv`, then maps the price values to bar widths using `d3.scaleLinear` and country names to y-axis positions with `d3.scaleBand`. The React component renders an SVG, with gridlines generated from `xScale.ticks()`, and sticks to a functional, no-frills style without color or labels on the bars themselves.

Loading thumbnail…

Fork of Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository’s Auto MPG Data Set. Each blue, semi-transparent circle represents a car, with its position determined by the d3.scaleLinear scales applied to the horsepower (x-axis) and weight (y-axis) attributes. The visualization uses d3.select, d3.csv, and d3.extent to load and process the data, while d3.axisBottom and d3.axisLeft generate the annotated axes with grid lines. The chart is rendered as an SVG with a fixed 960x500 viewport.

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Auto MPG data set. It demonstrates how to build a D3 visualization using the `scaleLinear`, `axisLeft`, and `axisBottom` APIs, rendering circles in SVG with a red, semi-transparent fill. The chart includes labeled axes, grid lines, and a title, all styled through an external stylesheet.

Loading thumbnail…

DV ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, showing horsepower against petal width with circles colored by species (setosa, versicolor, virginica). The code uses D3 v6 to load CSV data, create linear scales with `scaleLinear`, and plot SVG circles. Axes are generated via `axisLeft` and `axisBottom`, with fixed margin and label styling. The data source is the auto-dataset CSV, rendered as an SVG chart inside a React framework.

Loading thumbnail…

ICE-6 Bar Graph

This bar graph displays the top ten IMDB-rated movies, plotting each movie’s rating along a horizontal scale. The visualization uses React for component management and D3 v5 for data loading and scales, rendering as an SVG. Movie titles appear on the y-axis using a band scale, while ratings map to bar widths via a linear scale, with red gridlines and tick labels generated from the x-scale. Data is fetched as CSV from a GitHub gist, and the graph updates after loading.

Loading thumbnail…

DV ICE-6 Bar Graph

This bar graph shows the top five countries by total COVID-19 deaths, using a horizontal layout with a red gridline and a labeled population axis. The React app fetches comma-separated data from a GitHub gist using d3.csv, then renders an SVG via d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.max for domain calculation, with d3.axisBottom and d3.axisLeft formatting ticks.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This bar chart displays the 2022 population of RICH, using horizontal bars to compare total deaths across the top three countries from a COVID-19 dataset. The visualization renders as an SVG within a React component, leveraging D3 v5 APIs including `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`. Data is loaded asynchronously via D3’s `csv` function from a GitHub gist, with only the first three records shown. Axes are drawn manually with tick marks and labels, while purple gridlines extend from the x-axis ticks.

Loading thumbnail…

ICE-6 Bar Graph

This bar graph displays the cost of living across different Amazon locations, comparing the basic monthly expenses for twelve countries. The visualization uses React to manage the state of the loaded data and renders the chart as an SVG. D3’s `csv` method fetches the dataset, while `scaleBand` and `scaleLinear` position the bars and axes. The code manually constructs the axis ticks and labels using D3’s `format` and `max` functions, with red gridlines marking each tick value along the x-axis.

Loading thumbnail…

Yennem

A map of significant earthquakes from 1900 to 2023 displays the geographic locations and magnitudes of over 370 seismic events. The visualization renders data from a CSV file using d3.csv, loading a background map image into an SVG element and overlaying the earthquake data. The page also presents dataset summaries, including file size, row count, and column count, computed from the parsed data. The design features a light gray background and an embedded base map image, with HTML headings providing context about the USGS NEIC dataset.

Loading thumbnail…

Loading Data with React & D3- yamuna ICE5

This example demonstrates loading a CSV dataset of CSS named colors and displaying a text summary of its contents. The application uses React hooks (`useState` and `useEffect`) to manage the asynchronous data fetching state, while the D3 `csv` function retrieves the data from a GitHub Gist URL. Once loaded, the `d3.csvFormat` utility calculates the file size in kilobytes, and the interface reports the total number of rows and columns, initially showing a “Loading…” message before the data arrives.

Loading thumbnail…

Fork of Buddha in colors -overlapping 5 Buddha images

Five Buddha images, each rendered with intricately detailed SVG paths, overlap in a colorful, chaotic composition on a black background. The piece layers ten thousand randomly generated, rotated, multicolored rectangles over the deities. Built with React and ReactDOM, the visualization uses `Math.random()` to determine rectangle positions, fill colors, and rotation angles, creating a dense, abstract field that obscures and transforms the traditional Buddha figures.

Loading thumbnail…

Buddha in colors -overlapping 5 Buddha images

The visualization displays a clustered arrangement of randomly positioned, diamond-shaped rectangles overlaid on a large SVG canvas, with five distinct Buddha images rendered as intricate vector paths. The collaborative composition creates a vibrant, chaotic field of colorful rotating shapes that overlap the traditional Buddhist iconography. Built with React and ReactDOM, the code generates the geometric elements through nested mapping operations, applying random color values via `Math.random()` and rotating each diamond 45 degrees. The Buddha paths use SVG `path` elements with complex cubic Bézier curve data and SVG transforms for positioning and scaling.

Loading thumbnail…

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

Overlapping Buddha renders a dense, colorful SVG composition of rotated, semi-transparent rectangles layered over a large Buddha path. The code uses React to map nested arrays and generate random positions, sizes, and RGB fill colors for each rectangle. The Buddha silhouette is drawn via an SVG path element, translated and scaled within the viewport. The visualization relies on React’s declarative JSX and SVG rendering without external libraries, producing a chaotic, generative overlay atop the static figure.

Loading thumbnail…

Fork of Flowers

A garden of 300 intertwined, flower-like SVG paths fills the canvas, each rendered with a distinct color based on its index and random scaling, creating a layered, chaotic bloom. The paths are drawn using a complex cubic Bézier curve defined in the `Path.js` component, which is replicated via React's `Array.map` function in `index.js`. Each flower is transformed with random translations and scaled down, while a drop shadow filter adds depth against the vibrant gradient background defined in `index.html`. The visualization relies on React and ReactDOM to generate and render the SVG elements dynamically.

Loading thumbnail…

test of Buddha in colors -overlapping Buddha

This example overlays multiple semi-transparent colored rectangles to create a psychedelic, layered fractal pattern. The visualization uses React with an SVG canvas, generating a grid of rectangles via nested array maps. The Buddha figure is rendered as a single complex SVG path, scaled and translated to overlap the vibrant graphics. The code relies on ReactDOM for rendering and manual SVG path data for the figure, with randomized RGB colors for the rectangles.

Loading thumbnail…

overlapping Buddha

A dense field of randomly sized, positioned, and colored overlapping circles fills the frame, creating an abstract, vibrant visual texture. Built with React and SVG, the visualization maps a set of numeric values through nested array iterations, each generating a circle with stochastic properties for coordinates, dimensions, and RGB fill. Overlaid on this is a large, fixed Buddha silhouette path, rendered via SVG path data and a group transformation, which anchors the chaotic composition. The code utilizes React's component model to render all SVG elements directly.

Loading thumbnail…

Buddha in colors - 5 overlapping Buddha

Five overlapping Buddha silhouettes emerge from chaotic scatter plots of randomly positioned circles, rendered in vivid RGB colors against a black background. The React application maps nested arrays to generate hundreds of circles with random coordinates and opacity, while SVG path data defines each Buddha figure. The composition layers the five identical religious icons with varying transforms, creating a dense, colorful visual meditation on order within randomness. The code uses React's component model and SVG circle elements for the background texture.

Loading thumbnail…

face editing ICE4

This interactive visualization displays a stylized smiley face rendered as an SVG graphic. The face features a pink circular head, two black eyes, and a mouth constructed from both a curved arc path and straight line segments that form teeth. The code uses React components to structure the SVG elements and D3's `arc()` generator to define the mouth's curved shape. Positioned at the center of a 960×500 viewport, the face is drawn with D3 v5 and React 16.9.0, using absolute coordinates for facial features like eye offset and tooth spacing.

Loading thumbnail…

Smiley face arc

A yellow smiley face rendered with SVG features a circular head, two eyes, and an arc-shaped mouth. The mouth uses D3’s `arc()` generator with specified inner and outer radii and angular start and end points, while the face elements are positioned via SVG transforms. React manages the component structure, and D3 v5 computes the mouth path. The drawing is centered within a fixed 960×500 viewport.

Loading thumbnail…

Fork of Smiley Face Part II

This visualization displays a yellow smiley face rendered as a cohesive SVG composition within a React application. The face derives its dimensions and positioning from the browser window’s width and height, centering the head and eyes accordingly. Using React and ReactDOM, the code constructs circles for the face, eyes, and mouth, with explicit stroke width and offsets for facial features. The SVG elements adapt responsively to the viewport, while the source code integrates external React libraries via a CDN, producing a clean, scalable graphic.

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of a D3 v3 tutorial draws a static yellow smiley face on an SVG canvas. A large circle forms the head, with two smaller circles for eyes, and an unfinished `d3.arc` path for the mouth, which is defined but not rendered. The code sets explicit pixel coordinates for each shape, using SVG circle elements and the `d3.arc()` API with inner and outer radii plus start and end angles. The example demonstrates basic SVG shape composition and D3 arc generation without any interactive or animated behavior.