Skip to main content
Log in
R

RakshithaRao27

@RakshithaRao27·54 public vizzes

Loading thumbnail…

Example of Social Network

This example shows a small social network of six people organized into three groups, with connections of varying strength indicated by thicker or thinner links. The visualization is rendered as an SVG using the D3.js version 4 library, employing the older `d3.layout.force` API to simulate node positions and `force.drag` for interaction. Node labels are drawn from the `name` field in the data.json file, while the `weight` property of each link drives the stroke-width of the connecting lines, using `Math.sqrt` to scale the visual thickness.

Apr 3, 2022
Loading thumbnail…

Trees

This visualization presents a family tree as a horizontal dendrogram, using node labels to display names and colors to encode different individuals. The hierarchical data is rendered using D3.js, with a tree layout and horizontal link generator to create the branching structure. The visualization supports zooming via D3's zoom and event APIs. Text elements are dynamically positioned and scaled by depth, with font sizes decreasing for deeper nodes. The data is loaded from a local JSON file, and the SVG rendering includes custom styling and text shadows.

Apr 3, 2022
Loading thumbnail…

Fork of Tree

This example shows a fork-style tree diagram depicting cartoon character names, with nodes colored according to the data’s color values and text sizes varying by tree depth. The visualization uses D3 v5’s `tree` layout and `hierarchy` to compute node positions, then renders horizontal links via `linkHorizontal` and SVG text elements. The code loads data from a JSON file, applies a zoom behavior via `d3.zoom`, and styles nodes with custom fills and text shadows.

Apr 3, 2022
Loading thumbnail…

Fork of Tree

This example shows a fork-style tree diagram depicting cartoon character names, with nodes colored according to the data’s color values and text sizes varying by tree depth. The visualization uses D3 v5’s `tree` layout and `hierarchy` to compute node positions, then renders horizontal links via `linkHorizontal` and SVG text elements. The code loads data from a JSON file, applies a zoom behavior via `d3.zoom`, and styles nodes with custom fills and text shadows.

Apr 3, 2022
Loading thumbnail…

Fork of a

This visualization presents a hierarchical tree of branching numeric labels, with each node displaying its value in large, serif text that shrinks as depth increases. The layout uses the D3 tree layout to position nodes, renders horizontal curved links between parent-child relationships, and supports zooming and panning via the D3 zoom behavior. Data is loaded from a JSON file and visualized entirely as SVG elements, with node text drawn using the Playfair Display font.

Apr 3, 2022
Loading thumbnail…

Swedish map

This visualization displays the counties of Sweden using a geographic map rendered with SVG. The map fills the entire viewport via a Mercator projection fit to the data extent, with each county filled red and internal boundaries highlighted in purple. The implementation uses d3-geo’s `geoMercator`, `geoPath`, and `fitExtent` to project GeoJSON features derived from a TopoJSON source via topojson’s `feature` and `mesh` functions. React manages the component state and renders the paths, while data is loaded asynchronously with `d3.json`.

Apr 3, 2022
Loading thumbnail…

Fork of Fork of Swedish map

This example visualizes the counties of Sweden as a choropleth-style map, rendered in black with white interior boundaries. The map is projected using D3’s `geoMercator` and drawn with `geoPath`, fitted to a 960×500 SVG canvas within a React framework. Data comes from a TopoJSON file of Swedish county borders, loaded via `d3.json` and processed with `topojson.feature` and `topojson.mesh`. The visualization highlights administrative divisions without additional quantitative encoding, focusing on geographic shape and boundary contrast.

Apr 3, 2022
Loading thumbnail…

World map

This example displays a world map using the Natural Earth projection to render country boundaries and the globe’s sphere outline. The visualization is built with D3.js v5 and employs `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and TopoJSON’s `feature` method to parse country geometries from a remote dataset. Country shapes are filled with wheat color and stroked in red, while the sphere uses a transparent fill, all rendered as SVG elements.

Apr 3, 2022
Loading thumbnail…

line chart

This example shows cosmetics sales totals over a series of years, with a red line tracing the trend across a time-based x-axis and a linear y-axis. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleTime` and `scaleLinear` to map data, `axisBottom` and `axisLeft` for gridlines, and the `line` generator to create the path. Data is loaded as CSV from a GitHub gist, with dates parsed using `d3.timeParse`.

Mar 28, 2022
Loading thumbnail…

Fork of rakshi

This combined line and area chart visualizes textile industry sales over time, using a yellow background with blue and red styling. The visualization loads CSV data from a GitHub gist and uses D3.js v5, with `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` and `d3.area` with `curveBasis` for the smoothed curve and filled region, and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG rendering includes bold axis labels and a red line over a wheat-colored area beneath it.

Mar 28, 2022
Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width along the x and y axes while coloring each point by species (setosa, versicolor, virginica) in blue, red, and purple. The code loads data via `d3.csv`, uses `scaleLinear` and `extent` for scaling, and renders SVG circles with `selectAll().join()`. Axis labels are added with `axisLeft` and `axisBottom`, while the plot also encodes sepal measurements as `rx` and `ry` attributes, though these do not visually alter the circle shapes.

Mar 27, 2022
Loading thumbnail…

rao

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica) using red, blue, and green. It also encodes sepal length and width as elliptical radii for each circle. Built with D3 v6 in a React project, the SVG rendering uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to generate scales and axes from CSV data loaded via `d3.csv`.

Mar 27, 2022
Loading thumbnail…

iris data set

This scatter plot visualizes the iris data set, mapping petal length and petal width for each sample while coloring points by species (setosa, versicolor, virginica) using blue, red, and purple. The visualization also encodes sepal dimensions as the `rx` and `ry` attributes of the circles, though these do not affect the visible radius. Built with D3 v6 in React, the code loads CSV data via `d3.csv`, scales axes with `scaleLinear` and `extent`, and renders circles and axes using SVG selections and `axisLeft`/`axisBottom`.

Mar 27, 2022
Loading thumbnail…

rao

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica) using red, blue, and green. It also encodes sepal length and width as elliptical radii for each circle. Built with D3 v6 in a React project, the SVG rendering uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to generate scales and axes from CSV data loaded via `d3.csv`.

Mar 27, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through the Iris dataset's four numeric attributes on the x-axis while keeping sepal length fixed on the y-axis, with points colored by species (orange, blue, black). Built with D3 v6, the visualization uses `setInterval` to update the x-scale domain and axis via a reusable `scatterPlot` function, rendering SVG circles and labels. Data loads from a CSV using `d3.csv`, with elements re-bound and joined on each interval tick.

Mar 27, 2022
Loading thumbnail…

rao

This animated scatter plot visualizes the Iris dataset, cycling through four different variable pairs (petal width, sepal width, petal length, sepal length) every two seconds. Each point encodes species via color, while the initial rendering uses rectangles with varying rx and ry values rather than uniform circles. Built with D3.js, the visualization uses scaleLinear, scaleOrdinal, axisLeft, and axisBottom within a reusable scatterPlot function. The animation is driven by setInterval, while data loading relies on d3.csv. SVG rendering updates axes and marks dynamically as the selected dimensions change.

Mar 27, 2022
Loading thumbnail…

rakshi

This example visualizes electronic sales data from 2013 to 2021 using a combined line and area chart rendered as SVG. It plots yearly sales values on a time-scaled x-axis and a linear y-axis, with the line and area paths smoothed using `curveBasis`. The code uses d3.csv to load the data, `scaleTime` and `scaleLinear` for scales, and `axisLeft`/`axisBottom` for tick rendering, while custom CSS colors the line red and the area wheat.

Mar 27, 2022
Loading thumbnail…

rakshitha

This line chart shows the total sales in cosmetics over the years, using a time series with the year on the x-axis and the total sales amount on the y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render the red path with gridlines, loading data from a CSV file via `d3.csv` and parsing dates with `d3.timeParse`. The SVG output is styled with CSS for axis labels and ticks.

Mar 27, 2022
Loading thumbnail…

rao

This example shows the total sales of electronic products over time as a line chart. The chart plots sales figures against years, with a clean, sky-blue background and black line strokes for readability. The visualization is built using D3 version 5, leveraging the library’s scale functions (`scaleTime`, `scaleLinear`), axis generators (`axisBottom`, `axisLeft`), and the `line` generator to create the path. Data is loaded from a CSV file hosted on a GitHub gist, parsed, and rendered as an SVG graphic with custom styling defined in an external stylesheet.

Mar 27, 2022
Loading thumbnail…

rao

This chart displays electronic sales totals over time as a single black line, with a sky-blue background and labeled axes. The visualization uses D3 version 5, reading a CSV data source and parsing date strings with the `d3.timeParse` API. It maps years to the x-axis using a time scale (`d3.scaleTime`) and total sales to the y-axis with a linear scale. The line is drawn using the `d3.line` generator, and axes include grid lines and rotated axis labels.

Mar 27, 2022
Loading thumbnail…

rao

This example shows the total sales of electronic products over time as a line chart. The chart plots sales figures against years, with a clean, sky-blue background and black line strokes for readability. The visualization is built using D3 version 5, leveraging the library’s scale functions (`scaleTime`, `scaleLinear`), axis generators (`axisBottom`, `axisLeft`), and the `line` generator to create the path. Data is loaded from a CSV file hosted on a GitHub gist, parsed, and rendered as an SVG graphic with custom styling defined in an external stylesheet.

Mar 27, 2022
Loading thumbnail…

rao

This visualization displays electronic sales data over time, plotting total sales against years as a single black line on a skyblue background. The chart uses D3 v5 APIs, including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`, to render an SVG with labeled axes and gridlines. Data is loaded from a CSV file via `csv()`, with dates parsed using `d3.timeParse`.

Mar 27, 2022
Loading thumbnail…

rao

This line chart shows the total sales of electronics data over a series of years. The visualization plots the data using a time-scaled x-axis for the years and a linear y-axis for total sales, with the line path drawn in black. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate the SVG chart, and loads the data from a CSV via `d3.csv`. The chart includes labeled axes and a minimal styling with tick marks.

Mar 27, 2022
Loading thumbnail…

rao

This visualization presents a pie chart depicting death counts across U.S. states. Each slice represents a state, with its size proportional to the death toll, and a legend details each state’s exact value. The chart uses `d3.pie` and `d3.arc` to generate the segments and `d3.scaleOrdinal` for color assignment, with data fetched via `d3.csv` from a remote source. Labels are positioned using the arc centroid, and all elements are rendered as SVG paths and text within a fixed 980x900 canvas.

Mar 27, 2022
Loading thumbnail…

rao

This pie chart displays mortality rates across United States, with each slice representing a state and its corresponding death count. The visualization uses D3 v5’s `pie()` and `arc()` functions to generate the chart, with `scaleOrdinal` assigning colors to each segment. A legend on the right shows state names and formatted death values via `d3.format`. Data is loaded asynchronously from a CSV file using `d3.csv`, and the SVG rendering includes percentage-aligned labels positioned through `arc.centroid()`.

Mar 27, 2022
Loading thumbnail…

rao

A pie chart displays the top 10 countries by air pollution deaths in 2020, with each slice labeled in thousands and accompanied by a legend listing country names and values. The visualization uses d3.pie and d3.arc to generate the chart geometry, while d3.scaleOrdinal maps a fixed color palette to data segments, and d3.format handles tick label formatting. Data is loaded asynchronously via d3.csv from a GitHub gist, with the SVG rendered entirely through D3 v5’s selection and enter/exit methods.

Mar 27, 2022
Loading thumbnail…

Fork for country and budget

This visualization shows the 2012 budget allocations for various countries as a donut chart, with each segment labeled with its value in thousands and a corresponding legend. The chart uses d3.pie and d3.arc to generate the ring geometry, with d3.scaleOrdinal mapping categorical colors to the data. Data is loaded from a CSV file via d3.csv, and d3.format is used to abbreviate the numeric labels. The SVG rendering includes explicit text positioning through the arc centroid, and legends are appended with rectangles and text.

Mar 27, 2022
Loading thumbnail…

rao

This example displays a scatter plot of the Iris dataset, mapping petal length and petal width while coloring points by species using a custom marker function. It renders as an SVG via React and D3 v6, using `d3.csv` to load data, `scaleLinear` and `extent` for axes, and `axisLeft`/`axisBottom` for tick marks. The code also appends rotated axis labels and sets circle radii, with point colors assigned per species.

Mar 27, 2022
Loading thumbnail…

rao

This pie chart displays mortality rates across United States, with each slice representing a state and its corresponding death count. Built with D3 v5, the visualization uses `d3.pie` and `d3.arc` to generate the slices, while `d3.scaleOrdinal` maps state names to a predefined color palette. Death data is loaded asynchronously from a CSV file via `d3.csv`, with values parsed as numbers. A legend, constructed with SVG groups and rectangles, lists each state’s name and its death count, formatted using `d3.format`.

Mar 27, 2022
Loading thumbnail…

rao

A pie chart displays the top 10 countries by air-pollution-related deaths in 2020, with each segment labeled in thousands and a legend listing countries and values. The chart is rendered in SVG using D3 v5, fetching CSV data from a GitHub gist. It uses `d3.pie` and `d3.arc` for segment geometry, `d3.scaleOrdinal` for colors, and `d3.format` to abbreviate numbers. Text labels are positioned via `arc.centroid()`, while the legend uses appended rectangles and text elements.

Mar 27, 2022
Loading thumbnail…

RAKSHI

This chart is a static pie chart showing the top 10 countries by deaths from air pollution in 2020. Each slice is labeled with its value in thousands, and a legend lists the country names and corresponding death counts. The visualization is built with D3 v5 and rendered as an SVG, using the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to compute the arcs, slice paths, and categorical colors. Data is loaded as CSV from a GitHub gist, and each country’s death figure is formatted using `d3.format`.

Mar 27, 2022
Loading thumbnail…

rakhi

This visualization displays a scatter plot of the Iris dataset, mapping petal length and width while encoding species with distinct colors (brown, red, and purple). Built with React and D3 v6, the SVG renders circles sized by sepal dimensions, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes. Data loads from a GitHub gist via `d3.csv`, and the code applies custom margins and labels to clarify the petal and sepal measurements.

Mar 27, 2022
Loading thumbnail…

rakshi

This visualization displays the top 10 fashion brands ranked by sales, using horizontal bar lengths to represent sales figures. It is built with React and D3 v5, loading data from a CSV file via `d3.csv`. The code uses `d3.scaleBand` for the y-axis categories, `d3.scaleLinear` for the x-axis values, and renders the chart as SVG rectangles within a React component.

Mar 7, 2022
Loading thumbnail…

raorakshi

This visualization displays a horizontal bar chart of the top 10 most populous countries, using sales data loaded from a remote CSV file. The React component uses d3’s `scaleBand` and `scaleLinear` to map company names to the y-axis and sales values to bar widths, while d3’s `axisBottom` and `axisLeft` are imported for reference. Bars are rendered as SVG rectangles inside an SVG canvas, with axis tick labels generated via d3’s `.ticks()` method. The chart includes grid lines and uses a light gray background with darker gray bars, all styled in a clean, minimal layout.

Mar 7, 2022
Loading thumbnail…

raorakhi

This example displays a horizontal bar chart of the top 10 most populous countries in 2019, using a dataset loaded from a CSV file. The visualization is built with React and D3 v5, where React manages the component state and rendering, while D3 handles data loading, scales, and axes. The chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with the bars rendered as SVG rectangles. The page includes a title and the plot within a fixed-width SVG canvas.

Mar 7, 2022
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 10 most populous countries as a horizontal bar chart rendered with SVG. The chart uses React with hooks `useState` and `useEffect` to load and manage CSV data from a GitHub gist, while D3 v5 provides `csv`, `scaleBand`, and `scaleLinear` for data parsing and scaling. Interactive features include grid lines and axis tick labels generated with D3's `scaleLinear.ticks()`. The bars visually encode population values through their width, with country names positioned along the y-axis.

Mar 7, 2022
Loading thumbnail…

ram

This bar chart shows the top 13 countries with the highest number of deaths in 2018, with country names on the y-axis and death counts on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a CSV file via `d3.csv`, and the chart is rendered as SVG elements, including gridlines and labeled ticks.

Mar 7, 2022
Loading thumbnail…

RAK

This D3 scatter plot visualizes the Iris Dataset, mapping petal length and width for each sample while encoding species through color. The circles are positioned using linear scales, with fixed radius but varied rectangular extents on horizontal and vertical axes. It uses `d3.csv` to load data, `scaleLinear` and `extent` for scales, and `axisLeft`/`axisBottom` for axes. The SVG rendering applies dynamic fill colors per species and displays the dataset’s sepal measurements through `rx` and `ry` attributes.

Mar 6, 2022
Loading thumbnail…

rao

This example visualizes the top 20 most populous countries ranked by deaths in India, using a horizontal bar chart. The chart displays each year on the y-axis and the corresponding death count on the x-axis, with bars sized proportionally to the data values. It uses D3 v5’s `scaleBand` for the categorical year axis, `scaleLinear` for the numeric scale, and React for rendering SVG elements. Data is loaded asynchronously via `d3.csv` from an external URL, and axes are drawn manually with SVG `line` and `text` elements.

Mar 6, 2022
Loading thumbnail…

rao

This example displays a horizontal bar chart of the top 10 most populous countries, ranking them by the number of deaths in India. The visualization uses React to manage state and render the SVG, while D3 v5 handles data loading, scales, and axes. The code fetches data from a CSV file using `d3.csv`, then applies `scaleBand` for the categorical country axis and `scaleLinear` for the numeric death count axis, drawing rectangles for each bar.

Mar 6, 2022
Loading thumbnail…

ram

This visualization displays a horizontal bar chart of the top 10 most populous countries in India for 2019, with each bar representing the population count. The chart uses React to manage state and render SVG elements, while D3 v5 provides the scale functions (`scaleBand`, `scaleLinear`) and the `csv` method to load data from a GitHub gist. Axes are drawn manually with `.ticks()` and grid lines, and bar lengths are determined by the `xScale` mapping the maximum population value.

Mar 6, 2022
Loading thumbnail…

raks

This visualization shows the top 10 countries by deaths in India, rendered as horizontal bars across a purple background with a title and axes. The chart uses a bar chart layout where the bar lengths represent population values, with country names on the y-axis and numeric values on the x-axis. The implementation uses React for the component structure, with D3 v5's `scaleBand` and `scaleLinear` for scaling, and `csv` for data loading from a GitHub-hosted dataset. SVG elements—including `rect` for bars and `line` for gridlines—are generated within the React return, all styled via CSS.

Mar 6, 2022
Loading thumbnail…

dea

This example visualizes the top 20 most populous countries, showing the number of deaths per year in a horizontal bar chart. The chart uses D3.js for data processing and scaling, and React for rendering the SVG elements. Data is loaded from a CSV file and the chart displays the y-axis categories and x-axis values, with the bars length proportional to the death counts. The code uses D3's `scaleBand` and `scaleLinear` for the axes, and `csv` to load the data.

Mar 6, 2022
Loading thumbnail…

rakshi

This chart ranks the top 10 most populous countries, displaying their 2019 death counts as horizontal bars. The visualization uses a bar chart format, with the x-axis representing death counts and the y-axis listing country names. Built with the React framework and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV file via D3's `csv` function. The SVG rendering is produced by React JSX elements, with styled grid lines and labels.

Mar 6, 2022
Loading thumbnail…

rao1

This chart visualizes the top 10 most populous countries using horizontal bars, based on data loaded from a CSV file hosted on GitHub. Each bar’s length represents a country’s population, with axes labeled by country name and population value. The visualization is built with React for component structure and D3 v5 for scales and data handling. SVG is used for rendering, with scaleBand and scaleLinear defining the chart’s layout.

Mar 6, 2022
Loading thumbnail…

rao

This bar chart displays the top 10 most populous countries, drawing data from a CSV file. The visualization uses React and D3 to render an SVG with scaleBand for the y-axis and scaleLinear for the x-axis. Bars represent the death count for 2018, and the chart includes labeled axes and tick marks.

Mar 6, 2022
Loading thumbnail…

rak

This example visualizes the top 10 most populous countries using a horizontal bar chart. It loads CSV data from a GitHub gist, parses the ’2018’ column, and displays the top 10 entries with D3 scales for positioning. The chart is built with React and renders SVG elements, using `scaleBand` for the y-axis categories and `scaleLinear` for the x-axis values. Axes are manually generated by mapping over tick values, with bars drawn as SVG rectangles.

Mar 6, 2022
Loading thumbnail…

rakshitharao27

This horizontal bar chart displays the number of deaths in 2019 for the top 12 countries, with each bar's length representing the death count. The chart uses a React component that loads data from a CSV file via the `d3.csv` function. It employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numerical x-axis. The visualization renders as an SVG with axes and bars constructed using React primitives, styled with simple CSS.

Mar 6, 2022
Loading thumbnail…

rakshitha

This visualization shows the top 10 most populous countries as a horizontal bar chart, using a bar length to represent each country's population. The chart is rendered as an SVG within a React application, with D3 v5 handling the data loading, scales, axes, and tick generation. Population data is loaded from a CSV file via `d3.csv`, and the bars are drawn using React elements for each data point. The chart includes a linear x-axis and a band y-axis, with grid lines and labels generated by iterating over D3 scale ticks.

Mar 6, 2022
Loading thumbnail…

rao

This visualization displays a title "CAR AND ITS ORIGIN!" and a static SVG car illustration, alongside a text summary of a car dataset. The page uses D3.js version 7 to fetch a CSV file from a GitHub gist, then calculates and displays the data's size in kilobytes, the number of rows, and the number of columns. The SVG image, loaded from an external URL, is composed of various paths and circles that form the car's shape. The code also defines custom CSS styles for the heading and the pre-formatted message container.

Feb 27, 2022
Loading thumbnail…

Car2

This example displays a dataset of cars and their origin information, presenting the data size in kilobytes, row count, and column count as text on a webpage. The visualization uses D3.js version 7 to load a CSV file from a GitHub gist via the `d3.csv` method. The page is built with HTML and includes styling for the header and message container. The code also references an SVG illustration of a car, though it is not actively rendered by the JavaScript.

Feb 27, 2022
Loading thumbnail…

rao

This example demonstrates how to load and parse a CSV dataset using D3. It displays a message showing the file size in kilobytes, the number of rows, and the number of columns from the car1.csv file hosted on GitHub. The visualization uses d3.csv to fetch the data and d3.csvFormat to calculate the raw data size. The page also includes a static SVG image as a decorative element.

Feb 27, 2022
Loading thumbnail…

Fork of Data_Visualization_YellowFace_PY

This example shows a static, SVG-based face composed of large green circle with a blue stroke representing the head, two unevenly sized dark eyes, and a small arc-shaped mouth. A single D3.js `path` element uses the `arc()` generator to draw the mouth, while the circles are defined directly in HTML. The visualization relies on the D3 v7 library, with the `select()` method targeting the SVG for potential manipulation. Only the head, eyes, and mouth are rendered; no interactive behavior or animation is implemented.

Feb 21, 2022
Loading thumbnail…

Fork of Fork of Hello HTML teste

This example shows a single simplified face rendered as a yellow circle with a black outline, two gradient-filled eyes, a semi-circular mouth, and a small rectangular nose, all centered in an SVG. The face is composed from modular React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which assemble the SVG elements. D3’s `arc` generator creates the mouth path, while SVG filters and linear gradients style the shapes. A random value generator varies eye offset, radius, and mouth dimensions, producing subtle variability in each render.

Feb 19, 2022