Hemanthh81

@Hemanthh81·52 public vizzes

Reusable_Scatter_Plot

This example demonstrates an animated scatter plot of the Iris dataset, cycling through four different x-axis variables (petal width, sepal width, petal length, and sepal length) while keeping petal length on the y-axis. The plot uses D3.js via UNPKG, with custom ES6 modules for the reusable scatter plot logic. Data is loaded from a CSV file, and the visualization updates every few seconds using `setInterval`, recoloring points by species. The SVG rendering includes axes, a legend, and axis labels, with styling applied via CSS.

Jul 22, 2023

Loading thumbnail…

Reusable Scatter plot

This example demonstrates an interactive scatter plot of the Iris dataset, cycling through combinations of sepal and petal measurements on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, it loads CSV data via `d3.csv`, uses a reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom`, and animates axis changes with `setInterval`. The SVG also includes a custom color legend for species and styled axis labels.

Jul 22, 2023

Loading thumbnail…

Reusable Scatter Plot with D3.js

This example demonstrates a reusable scatter plot built with D3.js that visualizes the Iris dataset, mapping sepal length and sepal width for each flower specimen. The code loads data from a remote CSV file using `d3.csv`, converts numeric columns, and constructs an SVG chart with `d3.scaleLinear` for the axes. It uses `d3.axisBottom` and `d3.axisLeft` to render the scales, and appends circles with a steelblue fill to represent data points.

Jul 22, 2023

Loading thumbnail…

SocialNetwork Graph

A social network graph shows friendships among eight people, with arrows indicating the direction of each relationship and labels on nodes identifying each person. The visualization uses a force-directed layout via `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while `d3.drag` enables interactive movement. Data is loaded from a JSON file, and nodes are rendered as orange circles with SVG text labels; hovering highlights a node by increasing its stroke width. The code defines arrow markers in SVG `defs` and updates link positions on each simulation tick.

Jul 22, 2023

Loading thumbnail…

Vehicles Tree

This visualization shows a hierarchical tree of vehicle types, from the root "Car" node down to three subcategories—Sedan, SUV, and Coupe—each branching to specific car models like Toyota and Honda. The tree is rendered using the D3.js v3 layout API with collapsible nodes that animate when clicked. Node rectangles are color-coded by type and connected by directional links with arrows, while tooltips provide additional label details. The layout accounts for collisions between nodes and supports zoom and drag panning through `d3.behavior.zoom`.

Jul 22, 2023

Loading thumbnail…

Mexico Country Map

This visualization displays a Mexico country map with state boundaries as gray filled polygons with red outlines, set against graticule lines and a geographic projection backdrop. It uses a Mercator projection centered on the country, refined with d3.geoMercator and d3.geoPath to render the SVG paths. TopoJSON data, sourced from ArcGIS and processed via mapshaper, is loaded with d3.json and converted to GeoJSON features using the topojson.feature API. The React-based UI manages data loading with hooks while D3 v6 handles the geographic rendering.

Jul 21, 2023

Loading thumbnail…

Assign2_Ques6.2

This example displays a choropleth map of Mexico’s regions, rendered as SVG paths using a Mercator projection. The code loads TopoJSON data from a gist, converts it to GeoJSON with `topojson.feature`, and draws each region via `d3.geoPath`. The visualization layers graticule lines and land borders, with CSS styling assigning distinct colors to the land, graticules, and regional boundaries. The map is built in React using `useState` and `useEffect` to fetch and prepare the data, then renders the marks through a custom `Marks` component.

Jul 21, 2023

Loading thumbnail…

World Map

This example presents a choropleth world map visualizing countries colored by income group, with data sourced from World Atlas TopoJSON and TSV files. It uses D3 v5 with a geoNaturalEarth1 projection and d3.geoPath to render countries, while a color legend explains the ordinal color scale. The map supports zooming via d3.zoom, and hovering highlights countries in green. Animated transitions update the legend circles when the scale changes.

Jul 21, 2023

Loading thumbnail…

Assignment2_Ques6

This example displays world population data over time on a Natural Earth projection map, with countries colored by income group using a red sequential color scale. An animated color legend updates its categories and transitions, while a zoom interaction lets users pan and scale the map. The visualization uses D3 v5 with `geoPath`, `geoNaturalEarth1`, `scaleOrdinal`, `schemeReds`, `zoom`, and `transition`, loading data from a CSV and World Atlas TopoJSON files.

Jul 21, 2023

Loading thumbnail…

World Map

This example renders an interactive world map using SVG, with countries shown in brown and the globe’s sphere in light blue. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON via the `feature` method. The map uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate the paths. Hovering highlights countries by changing their fill color through CSS, while D3 v5 and TopoJSON handle the data binding and rendering.

Jul 21, 2023

Loading thumbnail…

Assignment2_Ques6

This map shows the geographical distribution of a sample of photographs from a European digital heritage collection. For each of the first ten countries listed in a SPARQL query result, a single image is plotted at its associated latitude and longitude coordinates. The visualization uses a D3.js `geoNaturalEarth1` projection and `geoPath` to render the world map, while the `topojson` library converts the country boundaries from a GeoJSON file. Mouseover interaction triggers the display of a text label.

Jul 21, 2023

Loading thumbnail…

Fork of World Map Visualization

This visualization displays a choropleth world map colored by population data from a CSV file, with countries lacking data rendered in red. Using d3.geoNaturalEarth1 projection and d3.geoPath, it draws SVG paths from Natural Earth GeoJSON data. The d3.scaleQuantize with d3.schemeBlues applies a blue color scale to population values loaded via d3.csv, demonstrating D3 v6 with React integration.

Jul 21, 2023

Loading thumbnail…

Fork of World Map Visualization

This visualization presents a choropleth world map, coloring countries by their population from a CSV dataset. Countries without matching data appear black. The map uses the Natural Earth GeoJSON dataset and projects geographic coordinates with D3’s `geoNaturalEarth1` projection, rendered via `geoPath`. Population values are mapped to a blue color scale using `scaleQuantize` with `schemeBlues`, while the SVG is constructed and styled with D3 v6 within a React-compatible HTML page.

Jul 21, 2023

Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot component built with D3 v6, visualizing the classic Iris dataset. The plot cycles through different feature pairs (petal width, sepal width, petal length, sepal length) every three seconds, animating circle positions and axis transitions using `transition().duration(1000)` and `selection.join()`. The component employs scaleLinear, axisLeft, axisBottom, and extent to map data to screen coordinates, with all circles and axes updating smoothly via enter, update, and exit selections.

Jul 21, 2023

Loading thumbnail…

Different Cereal Manufacturers Comparision

This bubble chart compares cereal manufacturers by their product ratings, sodium levels, and calorie counts. It uses a D3.js v7 SVG visualization with a logarithmic scale for the x-axis (sodium) and linear scales for the y-axis (rating) and bubble size (calories). The color legend maps manufacturer codes to a categorical color scheme, and the chart includes a bubble-size legend for calorie values. Data is loaded from a local CSV file.

Jul 21, 2023

Loading thumbnail…

Assignment2_Q4

This bubble chart visualizes cereal manufacturers’ products by plotting sodium levels on the x-axis against cereal ratings on the y-axis, with circle radius encoding calorie content and color distinguishing manufacturers (A, G, K, N, P, Q, R). The visualization uses D3 v7 with SVG rendering to create the scatterplot, axes, and legends. The code employs d3.scaleLinear for positioning and sizing, d3.scaleOrdinal with d3.schemeSet1 for categorical colors, and d3.axisBottom and d3.axisLeft for axes. Data comes from the included data.csv file, and both bubble size and color legends are rendered directly in the SVG.

Jul 21, 2023

Loading thumbnail…

Scatterplot of Penguin Dataset

This scatterplot visualizes the Penguin Dataset, plotting flipper length on the x-axis and body mass on the y-axis, with each circle colored by penguin species. The code uses D3 v7’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map scales, and render axes. SVG circles are positioned using the linear scales, with fill colors assigned per species via a custom marker function, and includes axis labels and a title.

Jul 21, 2023

Loading thumbnail…

Religions in Different Countries

This stacked bar chart displays the estimated 2010 religious breakdown of the 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Bars are segmented by religion, with tooltips on hover and a legend that highlights specific religions by dimming others. Built with D3.js (v3), it uses `d3.layout.stack`, `d3.svg.axis`, and the `d3-legend` and `d3-tip` plugins, rendered as an animated SVG.

Jul 21, 2023

Loading thumbnail…

Religions Stacked Bar Chart

A stacked bar chart shows the estimated 2010 religious breakdown of the 20 most populous countries, with each bar segmented by religion and annotated with a tooltip on hover. The visualization uses D3.js, including `d3.scale`, `d3.layout.stack`, and `d3.svg.axis`, with an SVG rendering and a color legend that highlights individual religions on hover. Data comes from the Pew Research Global Religious Landscape report, processed via a custom script.

Jul 21, 2023

Loading thumbnail…

Assignment2_Ques2

This stacked bar chart visualizes tourist counts by region over time, with yearly totals aggregated on the y-axis and regions distinguished by color. Built with Vega-Lite through the vega-lite-api and D3, the visualization loads CSV data from a GitHub Gist and renders as a responsive SVG. Tooltips provide detailed per-region tourist values, while custom styling via the config object colors axis labels and titles in a dark purple.

Jul 21, 2023

Loading thumbnail…

MPG_Indian Cars

This bar chart displays the miles per gallon (MPG) for various Indian car makes, with each row representing a single car model. Using D3 v7, the visualization employs a linear x-axis for MPG values and a band scale for car makes on the y-axis. The SVG rendering includes interactive tooltips that show the exact MPG value on hover, and the bars are colored violet. The data is loaded from a local CSV file and aggregated by car manufacturer.

Jul 21, 2023

Loading thumbnail…

Yearwise Car Sales Bar Chart

This bar chart displays 1980 car sales figures for various automobile makes, with each car brand listed along the y-axis and its corresponding sales value represented by the horizontal bar length. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and custom axis components for rendering ticks and labels. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and SVG rectangles with tooltips display the values.

Jul 21, 2023

Loading thumbnail…

Yearwise Car Sales Bar Chart

This D3.js v5 bar chart visualizes car sales figures for the year 1980 across different car makes, using a horizontal bar layout encoded with SVG rectangles. The chart employs `scaleBand` for the categorical y-axis of car brands and `scaleLinear` for the numeric x-axis of sales values, with sales data loaded from a CSV file hosted on GitHub. React manages the rendering pipeline, while the visualization includes formatted tick labels (using `format` to abbreviate large numbers) and tooltips that display the precise sales amount for each bar. The data is processed through a custom `useData` hook that converts the CSV's "1970" column into sales numbers.

Jul 21, 2023

Loading thumbnail…

Bar Chart Visualization

This bar chart displays the fuel efficiency (mpg) of various car makes, sourced from a remote CSV file. The visualization uses D3 v7 to load and parse the data with `d3.csvParse`, then renders horizontal bars with `d3.scaleLinear` and `d3.scaleBand`. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, with the SVG output styled in steelblue. Data and marks are updated dynamically through an asynchronous `fetch` workflow.

Jul 21, 2023

Loading thumbnail…

Breast Cancer Data Bar Chart

This bar chart visualizes breast cancer data, comparing two numeric attributes—perimeter_mean on the x-axis and radius_mean on the y-axis—across individual records. The chart uses D3 v7 to fetch a CSV dataset from a GitHub repository, then renders horizontal bars via SVG rectangles. Scales are created with d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, while d3.axisBottom and d3.axisLeft generate the corresponding tick marks and labels. The code includes React components for reusable axes and marks, though the primary implementation in index.html directly manipulates the SVG.

Jul 21, 2023

Loading thumbnail…

Asssssignment

This visualization shows the fuel efficiency (mpg) of 20 car models, with horizontal bars representing each car's miles per gallon alongside their make. The chart uses blue tick lines and light green bars against a clean white background, with a labeled x-axis for population-2020 values. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG elements through custom `AxisBottom`, `AxisLeft`, and `Marks` components that generate the ticks and rectangles. Data is loaded from a CSV file via D3's `csv` function.

Jul 21, 2023

Loading thumbnail…

Bar Chart on VizHub

This example displays a grouped bar chart comparing miles per gallon (mpg) and attributes across car makes, using data fetched from a CSV hosted on GitHub Gist. The visualization is rendered as SVG via D3 v6, with scales and axes built through `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. It also demonstrates importing modules from D3 and local ES6 modules, though the main chart logic in index.html and main.js handles the data parsing with `d3.csvParse` and asynchronous fetch.

Jul 21, 2023

Loading thumbnail…

Assignment2

This interactive bar chart displays the population of the top 20 countries in 2020, using horizontal bars sorted by country name. Built with React and D3 v5, it renders SVG elements through custom components like AxisBottom, AxisLeft, and Marks, which map data to bar widths via d3.scaleLinear and d3.scaleBand. Population values are formatted with d3.format, and CSV data is loaded asynchronously using d3.csv, with a tooltip showing the formatted population figure.

Jul 21, 2023

Loading thumbnail…

Cars

This bar chart displays the population of 20 countries for 2020, with each country represented by a horizontal bar colored light green. The visualization uses React to render SVG elements, with D3 scales and axes handling the layout. Data is loaded asynchronously via `d3.csv` from a GitHub gist, then transformed by multiplying the 2010 column by 1000. Axis components and formatted tick labels (using `d3.format`) clarify value interpretation, while hover tooltips via SVG `<title>` elements provide additional detail.

Jul 21, 2023

Loading thumbnail…

Assignment1_Ques1

This example demonstrates a minimal D3.js setup within a VizHub template, displaying the text “Hello VizHub!” centered on the page. The code imports the `select` function from D3 to target the `#message` div and sets its content from a local ES6 module. It uses the `d3.v5` library loaded via UNPKG, along with custom CSS for styling. The visualization primarily serves as a basic template, showing how to integrate D3, local modules, and static styling in a single-page HTML structure.

Jul 21, 2023

Loading thumbnail…

Network Graph

A social network graph visualizes friendships between named individuals, with nodes representing people and links showing connections. The graph uses a force-directed layout, where nodes are positioned through physics-like simulations, including link forces for connections, many-body charges for repulsion, and collision detection. Rendered using D3 v6 and SVG, the visualization allows node interaction, highlighting nodes on hover while displaying the network structure dynamically. The data comes from a JSON file containing node and link definitions, with the graph rendered in a cyan-background scene for clear visual separation.

Jul 19, 2023

Loading thumbnail…

MuscleCars tree

A hierarchical tree visualization displays the lineage of muscle cars, with the root node "Muscle Cars" branching into manufacturers like Ford and Dodge, which further split into specific models such as Mustang, Torino, Charger, and Challenger, including submodels like Hellcat and SRT. Each node is color-coded by its type (type1 through type4) and rendered as a rectangular box using SVG. Built with D3.js v3, the visualization uses the `d3.layout.tree` API for tree layout and includes interactive features such as zooming and panning via `d3.behavior.zoom`, with data loaded from a JSON file.

Jul 19, 2023

Loading thumbnail…

Activity 8 Country

This example displays an India-focused choropleth map, extracting the country's geometry from a TopoJSON world dataset and fitting a Mercator projection to its boundaries. The visualization renders the mapped region as a single dark SVG path using D3 v5’s `d3.json`, `d3.geoMercator`, and `d3.geoPath` methods, with the TopoJSON client converting the country feature into GeoJSON. The code loads the world-atlas dataset from a CDN and draws the result on a 960×500 pixel SVG canvas.

Jul 19, 2023

Loading thumbnail…

Activity 8 Map

This interactive world map visualizes country boundaries using an equirectangular projection, with countries rendered as light green SVG paths and a sky-blue sphere background. Viewers can zoom and pan the map using D3's zoom behavior. The visualization loads TopoJSON data from the world-atlas package, converts it to GeoJSON using `topojson.feature`, and renders paths with `d3.geoPath`. Hovering over a country triggers a CSS color change to maroon, providing basic interactivity. The implementation uses D3 v5 with ES6 module imports for `json`, `geoEquirectangular`, and `zoom`.

Jul 19, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, using a smooth curved line and a light green filled region beneath it to emphasize trends over time. The visualization is built with D3 v5, using `d3.area` and `d3.line` generators with `curveBasis`, and renders as an SVG. Data is loaded from a CSV file, with the x-axis representing years and the y-axis showing costs, formatted with a compact scale. Axis labels are styled with orange text, while tick values appear in red.

Jul 19, 2023

Loading thumbnail…

linechart

This line chart displays the cost of sales from 2000 to 2013, using a light green stroke with red axis labels and a centered title. The visualization uses D3 v7 to load CSV data via `d3.csv`, then applies `d3.scaleBand` and `d3.scaleLinear` for the axes. A `d3.line` path is drawn within an SVG, with axis labels added as text elements using `d3.axisBottom` and `d3.axisLeft`. The chart includes multiple data points for 2008, reflecting duplicate entries in the source data.

Jul 19, 2023

Loading thumbnail…

Pie Chart

This pie chart displays the number of students per major at UNT, with counts labeled both inside each slice and in a legend. The data is loaded as CSV from GitHub and rendered as SVG using d3.pie, d3.arc, and d3.scaleOrdinal. Slices are filled with distinct colors, and formatted values are shown in thousands. The chart uses async/await to fetch and process the dataset before drawing the visualization.

Jul 19, 2023

Loading thumbnail…

Activity7Task1

This example shows a horizontal bar chart ranking 20 countries by their 2020 population, with each bar’s length encoded by a linear scale and a green fill. The visualization uses React to render SVG components, with D3 v5 providing the scaleBand, scaleLinear, and format utilities for axes and tick labels. Data is loaded via d3.csv from a Gist URL, and axes are built with custom React components (AxisBottom, AxisLeft) that generate tick lines and text. Hovering reveals a tooltip with the formatted population value.

Jul 15, 2023

Loading thumbnail…

Assignment2_Ques1

This example demonstrates how to integrate D3.js into a minimalist HTML page, displaying a single text message centered on the screen. The code imports the `select` function from D3 and uses it to set the text content of the `#message` div, pulling the value from a local ES6 module (`myMessage.js`). The page loads D3 v5 from a CDN via UNPKG and imports the message from a separate file, showcasing modular JavaScript structure alongside D3’s DOM manipulation capabilities. The message renders as large, centered text using the `styles.css` styling.

Jul 15, 2023

Loading thumbnail…

Activity7Task1.2_2010Data

This bar chart displays the population of the top 10 countries in 2010, sourced from a CSV file loaded via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with population values formatted using `d3.format`. Bars are rendered as SVG `<rect>` elements with built-in tooltips showing the formatted population. The visualization is built with React, using reusable axis and mark components, and styled with green bars and blue axis lines.

Jul 3, 2023

Loading thumbnail…

Activity7_task5

This interactive 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 represents highway MPG, and color distinguishes the make. The visualization includes a tooltip showing the make on hover, plus legends for bubble size and color categories. Built with D3 v7, it loads data from a CSV file, uses SVG rendering, and implements hover interactions through mouse events and D3 transitions.

Jul 2, 2023

Loading thumbnail…

Activity7_task4_shape

This scatter plot visualizes iris flower measurements, encoding sepal length on the x-axis, petal length on the y-axis, and species as different symbol shapes. The plot uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to generate the marks. A custom legend built with `shapeLegend` displays the species-to-shape mapping, while the `axes` module adds labeled axes. Data is loaded asynchronously from a CSV file on GitHub and parsed with `csvParse`.

Jul 2, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot displays the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa in black, versicolor in yellow, and virginica in blue). The visualization uses D3 v6 to load the CSV data from a GitHub repository, applies `scaleLinear` and `extent` for scaling, and renders circles as SVG elements with `axisLeft` and `axisBottom` for the labeled axes.

Jul 2, 2023

Loading thumbnail…

Activity7_task2

This example visualizes the distribution of movie ratings across different genres as a stacked horizontal bar chart. Each bar shows the proportional percentage of ratings within five categories, from "below 5.0" to "above 8.5," with interactivity highlighting segments and displaying exact percentages via a tooltip. The chart uses `d3.stack()` to compute stacked series and `d3.scaleOrdinal` with a custom color palette for the rating categories. Data is loaded from a CSV file using `d3.csv`, and the SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, plus a manually drawn legend.

Jul 2, 2023

Loading thumbnail…

Fork of Activity 7

This bar chart displays the populations of 20 countries as horizontal bars, sorted by country name. Built with React and D3 v5, it renders as an SVG using `scaleBand` and `scaleLinear` for positioning, with population values loaded via `d3.csv` from a GitHub dataset. Axes are custom React components, and the x-axis uses `d3.format` to abbreviate tick labels from billions to "B" units.

Jul 2, 2023

Loading thumbnail…

Assignment1_Ques10

This example loads a CSV dataset of Indian cars and displays the first ten rows in a preformatted text block on the page. It demonstrates importing both the `select`, `csv`, and `csvFormat` functions from D3 v5 and a local ES6 module, `myMessage.js`. The visualization is minimal, using a simple SVG container with embedded styling, and outputs the data as JSON strings via `JSON.stringify`.

Jul 1, 2023

Loading thumbnail…

Activity 6

This example demonstrates the loading and display of the Iris dataset using D3 v5 within a Vue.js framework. The code imports functions such as `select`, `csv`, and `csvFormat` from D3, fetches the dataset from a GitHub gist URL, and outputs the first ten rows as a JSON-formatted string in a `pre` element. The page includes a large background image and uses SVG and WebGL rendering, following VizHub’s pattern of local ES6 module imports and CDN-loaded D3.

Jun 30, 2023

Loading thumbnail…

Activity 6

This example embeds a large JPEG image inside an SVG, where it is applied as a pattern fill for a rectangle to create a framed photograph. Using D3 v5 via UNPKG, the code imports `select` to set a text message, while local ES6 modules export string content, demonstrating modular JavaScript.

Jun 30, 2023

Loading thumbnail…

Transforming Data

This example loads the classic Iris dataset from a CSV file and computes the average sepal length for each species. The visualization displays this calculated result as formatted JSON text in a `<pre>` element, demonstrating a simple data-transformation pipeline from raw tabular data to a summary table. The code uses D3 v7 functions including `csvParse` for data loading, `flatRollup` and `sum` for aggregation, and `select` for DOM updates. It also showcases ES6 module imports and a state-management pattern for asynchronous data fetching.

Jun 14, 2023

Loading thumbnail…

BMI by Age

A bar chart visualizes the relationship between age and average Body Mass Index (BMI) by binning ages into intervals and computing the mean BMI for each bin. The chart uses D3.js (v7) with SVG rendering, employing `scaleLinear` for axes, `bin` to group data, and `axisBottom`/`axisLeft` for tick marks. Data is loaded as CSV from a GitHub gist, with BMI calculated from height and weight fields. The chart includes labeled axes and a title, with bars colored green.

Jun 14, 2023

Loading thumbnail…

Activity 6

This example displays a static, high-resolution SVG scene rendered with D3.js and WebGL, featuring a detailed background image loaded from a base64-encoded JPEG. The code includes D3 via UNPKG and uses the `select` API to update a message element, demonstrating local ES6 module imports. The visualization combines a large 2880x1800 SVG canvas with an embedded pattern-filled rectangle, showcasing D3’s integration within a Vue framework for layered graphic composition.

Jun 14, 2023

Loading thumbnail…

5 Buddhas

Five Buddhas is a generative SVG artwork composed of layered, randomly positioned diamond shapes that form a dense, colorful field across a black background. A central Buddha silhouette emerges from this chaotic, psychedelic pattern, created by mapping multiple arrays and using `Math.random()` to determine polygon coordinates, rotations, and RGB fill values. The piece is built with React and rendered through ReactDOM, leveraging nested array iterations to produce hundreds of semi-transparent polygons with high opacity. The SVG elements are transformed and colored dynamically, resulting in a vibrant, abstract composition that contrasts geometric noise with a recognizable spiritual figure.

Jun 7, 2023