S

SaiSree0122

@SaiSree0122·56 public vizzes

Loading thumbnail…

Fork of Social Network graph

This is a fork of a social network graph that visualizes connections between nine named individuals using a force-directed layout. The visualization loads data from a `graph.json` file, which contains nodes grouped by category and weighted links between them, and displays it as red circles connected by black lines whose thickness corresponds to link weight. The graph uses the older `d3.layout.force` API to simulate node movement, with drag-and-drop interaction enabled via `force.drag`. The example is implemented in React and renders to SVG, with node labels shown as text next to each circle.

Loading thumbnail…

ICE-8: Tree

A hierarchical tree diagram displays world landmarks grouped by country and continent, using SVG circles and maroon links. The visualization animates connections and node appearances through D3 v6 transitions, with text labels revealing each location’s name. The data, hardcoded in the script, is processed using `d3.stratify()` and laid out with `d3.tree()`, while the React framework handles rendering. Circle styling and centered page alignment are defined in CSS.

Loading thumbnail…

Country map

This example displays a map of the United States with state boundaries rendered as SVG paths. Using D3’s `geoPath` and the `geoAlbersUsaTerritories` projection, it draws land areas in burlywood and state interior borders in teal. Geographic data comes from the `us-atlas` TopoJSON file, processed with `feature` and `mesh` from TopoJSON. The React component structure uses hooks (`useState`, `useEffect`) via `useData` to load and pass the map data to the `Marks` component.

Loading thumbnail…

Fork of Country map

This example displays a map of the United States with its individual states filled in sky blue and state boundaries drawn in teal. It uses the `geoAlbersUsaTerritories` projection and `geoPath` from d3 to render geographic shapes as SVG paths, with data from the US Atlas TopoJSON. React manages the component state, loading the topology via `useData` and `topojson.feature` and `topojson.mesh` to extract land and interior boundaries.

Loading thumbnail…

World Map

This visualization displays a world map using a Natural Earth projection, with each country rendered as a distinct colored region on a white background. The map is constructed with React and D3 v5, projecting geographic data from the world-atlas TopoJSON dataset. The code uses d3.geoPath with a geoNaturalEarth1 projection to generate SVG paths for both the globe outline and individual country boundaries, with countries filled in light green and outlined in black.

Loading thumbnail…

Fork of Fork of Fork of Famil Tree

This example visualizes a hierarchical family tree of world landmarks, showing parent-child relationships from “World” down to individual sites like the Taj Mahal and Stonehenge. The graph uses a static tree layout rendered as SVG circles with text labels, animated via D3 transitions that draw connecting paths and expand nodes over time. It employs `d3.stratify()` to structure the data, `d3.tree()` to compute positions, and D3 transitions to animate path drawing and node appearance. The styling uses maroon strokes and light green fills, with all elements centered on the page.

Loading thumbnail…

Fork of Fork of Famil Tree

This example renders a family tree as an animated SVG dendrogram using React and D3 v6. The code builds hierarchical data from a flat child-parent array via `d3.stratify()`, then computes node positions with `d3.tree()`. Circles represent individuals, linked by maroon path edges that animate from parent to child on load. Node labels fade in sequentially based on depth, while the tree layout fills a fixed 950x300 viewport. The visualization uses SVG transitions to animate both the connecting lines and the circular node elements.

Loading thumbnail…

Fork of Naruto Tree

A fork of the Naruto Tree example visualizes a fictional clan hierarchy as a static, animated tree diagram. The code uses D3 v6 with `d3.stratify()` and `d3.tree()` to convert an array of parent-child relationships into a layout, rendering circles that represent nodes as clan characters. It uses SVG elements, with a `transition()` animating the drawing of the connection paths and the growth of node radii, while text labels display each member's name. Node fill colors are assigned by generation depth via a custom `setGeneration` function, and the entire chart is centered within a full-screen SVG.

Loading thumbnail…

World Map

This example displays a static world map rendered as an SVG, with each country filled in light green and outlined in black. It uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to convert geographic coordinates into screen paths. Country boundaries come from the `world-atlas` TopoJSON dataset, parsed with `topojson.feature`. A single globe outline is drawn separately, while the map itself is built through a data join that appends a path per country feature.

Loading thumbnail…

Fork of Social Network graph

This interactive force-directed graph visualizes a small social network of nine people connected by eight weighted links, with node labels showing names and link thickness encoding connection weight. The visualization uses D3.js v4 with the legacy `d3.layout.force` API, rendering nodes as red circles with yellow strokes and black connecting lines in an SVG container. Users can click and drag individual nodes to rearrange the network, while the simulation updates positions during tick events to maintain the layout. The data comes from a local `graph.json` file with node and link arrays.

Loading thumbnail…

Fork of Fork of Family Tree

A family tree visualization displays hierarchical relationships among named individuals using orange circles connected by maroon lines. The tree animates as nodes and links transition into place, with text labels appearing progressively based on depth. Built with React, the code uses d3.stratify and d3.tree to compute layout, while SVG transitions animate the paths, circles, and text elements.

Loading thumbnail…

Fork of Naruto Tree

This visualization displays the Naruto clan lineage as a tree diagram, with each node represented by a colored circle and text label. The hierarchical structure uses `d3.stratify()` to convert the flat dataset into a hierarchy, then `d3.tree()` to compute the layout. SVG paths animate from each parent to its child, while circles transition in size and fill color based on generation depth. The code employs d3 v6 with transitions for the connections and nodes, rendering all elements in SVG.

Loading thumbnail…

Fork of Family Tree

This fork of a family tree visualizes a hierarchical dataset using a static tree layout, with generations distinguished by node colors. Nodes animate in size, and connecting paths grow between parent and child elements. The visualization uses d3.stratify to construct the hierarchy and d3.tree for layout, rendering the result as an SVG with animated transitions. Each node is a circle with a bold label, and the dataset is hardcoded as a list of parent-child pairs.

Loading thumbnail…

World Map

This visualization displays a world map using a Natural Earth projection, with each country rendered as a distinct colored region on a white background. The map is constructed with React and D3 v5, projecting geographic data from the world-atlas TopoJSON dataset. The code uses d3.geoPath with a geoNaturalEarth1 projection to generate SVG paths for both the globe outline and individual country boundaries, with countries filled in light green and outlined in black.

Loading thumbnail…

Bonus ICE

This interactive 3D scatter plot, built with Plotly and D3.js, visualizes electronic sales data from a CSV file hosted on GitHub. Two distinct traces display relationships between item and unit price, using green and yellow markers to differentiate the encoded dimensions. The code initializes the plot by loading data with `d3.csv`, then constructs scatter3d traces with specific marker styling and opacity, ultimately rendering the visualization into a designated HTML div.

Loading thumbnail…

Bonus ICE - 3D Bar chart

A 3D bar chart displays manufacturing totals for seven airline manufacturers, including Airbus and Boeing, across six stacked data series representing different sources. The chart uses Highcharts with the highcharts-3d extension, applying rotation angles alpha and beta to create the three-dimensional perspective. Categories appear on the x-axis, manufacturing values on the y-axis, and sources on the z-axis, with each series assigned to a distinct stack. Data points are provided as coordinate-value pairs in the series arrays.

Loading thumbnail…

Bonus ICE - 3D Bar chart

This example displays a 3D vertical bar chart comparing application download volumes across seven aircraft manufacturers, using six grouped series to represent different download sources. The chart uses Highcharts with the highcharts-3d module, enabling a rotated perspective view through configurable alpha, beta, and depth parameters. Each bar’s height encodes total downloads, with stacked, grouped columns along the category axis and a z-axis labeling the sources. The visualization relies on jQuery for initialization and static data arrays embedded directly in the script.

Loading thumbnail…

Fork of Fork of 3D Bar Chart using D3.js

This example presents car manufacturer sales data for six months as an interactive 3D bar chart. It uses the D3.js `csv` loader to parse a remote CSV file into a multi-series dataset, which is then attached to a chart component created with `d3.x3d.chart.barChartMultiSeries`. The visualization leverages the d3-x3d bridge to render bars in an X3D scene, with D3's `scaleLinear`, `axisLeft`, and `axisBottom` handling the chart layout and axes within the HTML container.

Loading thumbnail…

Electronic Sales data

An interactive horizontal bar chart displays electronic product sales percentages for Television, Home Theater, and Cell Phone. Hovering over a bar highlights it, shows a dashed threshold line, and reveals percentage divergence values for other items. Built with React and D3 v5, the visualization uses SVG rendering with d3.scaleBand, d3.scaleLinear, and transition animations for interactive feedback, featuring a dark blue themed layout with grid lines.

Loading thumbnail…

ICE-7 PIE CHART

This example visualizes COVID death percentages across U.S. states using an interactive pie chart built with D3 v4 in a React framework. The chart displays seven state values as colored wedges, with a custom tooltip that appears on mouseover showing the state name and its corresponding percentage, while the SVG-rendered arcs respond to hover by adjusting opacity. The code implements hover and touch interactions using D3 event handlers, and includes a legend generated from the same data array.

Loading thumbnail…

ICE-7 Area

This area chart illustrates electronic sales from 2009 to 2022. Data is loaded from a CSV file and rendered as a smooth, filled shape using D3’s `area()` generator with `curveBasis`. The visualization employs `scaleTime` for the year axis, `scaleLinear` for sales values, and `axisBottom`/`axisLeft` for ticks. Styling is applied via CSS classes, and the React framework manages the SVG rendering.

Loading thumbnail…

ICE-7 Scatter Plot 1

This scatter plot visualizes electronic sales data, showing the relationship between Year and Electronicsales, with points colored by Item type and tooltips revealing item names on hover. The visualization uses Vega-Lite’s API to encode quantitative fields on both axes, with zero-scaled domains for clearer trends. Data loads from a remote CSV file via d3.csv, while the chart renders in SVG using Vega’s renderer. Custom configuration adjusts axis tick colors, label font sizes, and tooltip styling to improve readability. The plot fills the entire viewport, adapting to window dimensions with a fitted autosize strategy.

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot displays Item_Data.csv, with each point positioned by Serial_value and Item_id, and axes labeled accordingly. Built with D3 v6, it uses scaleLinear, extent, axisLeft, axisBottom, and join to render SVG circles and axes. An animation cycles the x-axis variable every two seconds among Serial_no, Item_id, Item_value, and Serial_value, updating the plot dynamically.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to explore the relationship between the year and electronic sales, with each point colored by item type. The Vega-Lite API constructs a circle mark with a tooltip that reveals the item name on hover. Data is loaded asynchronously via D3’s `csv` function from a Gist-hosted ElectronicSales dataset. The rendering pipeline leverages the Vega and Vega-Lite libraries, with a custom config to adjust font sizes and axis styles, while Vega-Tooltip provides interactive hover details.

Loading thumbnail…

ice 7 scatter

This scatter plot visualizes video game sales data, displaying each game as a circle positioned by sales volume and unit price, with color encoding the item category and a tooltip revealing the exact sale amount on hover. The visualization is built with the Vega-Lite API, using its `markCircle` and `encode` methods to map fields from the Iris dataset, and renders interactive tooltips through the vega-tooltip `Handler` class.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the basic structure of a VizHub project, showing how to display a simple text message on a webpage using D3.js. The code imports the `select` function from the D3 library and a custom `message` string from a local ES6 module. It then uses `select` to target the `#message` div element and sets its text content to the imported string. A separate CSS file centers the message and scales its font size to 12em, while the HTML loads D3 from UNPKG and bundles the JavaScript modules.

Loading thumbnail…

ICE-7 PIE CHART

This interactive donut chart visualizes the distribution of COVID-19 deaths across several US states, with each state's value represented as a proportion of the whole. Built with React and D3 v4, it renders SVG paths using `d3.arc` and `d3.pie` to create the ring, while a hover interaction, implemented with `d3.select` and mouse events, highlights a slice and displays a tooltip with the state name and value. A separate legend built from the same data array lists each category, using `d3.scaleOrdinal` with `d3.schemeCategory10` to assign colors consistently.

Loading thumbnail…

Fork of Pie Chart (with labels) with d3

This interactive donut chart visualizes COVID-19 deaths in US states using React and D3 v4. The pie chart displays state names and death counts with hover tooltips and opacity changes for emphasis. The code loads CSV data from a GitHub gist, parses it with the `csv` function, and renders SVG arcs using `d3.arc` and `d3.pie` within a React component. A legend accompanies the chart, and mouse events trigger tooltip positioning and visual feedback.

Loading thumbnail…

ICE - 7 Pie Chart

This example visualizes the distribution of COVID-19 deaths across U.S. states as a pie chart, with each slice colored and paired with a legend showing the state name and its corresponding percentage of total deaths. The data is loaded from a CSV file hosted on GitHub, parsed with `d3.csv`, and the chart is rendered as SVG using D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions. The legend, built with appended SVG groups and rectangles, includes formatted percentage values using `d3.format`.

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart visualizes COVID-19 death percentages across U.S. states, with each slice colored by a categorical scale and labeled through a legend with state names and values. The chart uses d3.pie and d3.arc to generate SVG paths from a CSV dataset, while d3.scaleOrdinal assigns section colors. The legend, rendered with SVG rectangles and text, displays state names and percentage values formatted with d3.format. The code fetches data via a Gist URL using d3.csv and renders all elements synchronously in an SVG container.

Loading thumbnail…

ICE-7 Line Chart

This line chart displays electronic sales in India from 2009 to 2022, with the year on the x-axis and sales figures on the y-axis. The visualization is rendered as an SVG using D3 v5, with data loaded from a CSV file hosted on GitHub. The chart uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `line` to generate the path. Axes are labeled with `axisBottom` and `axisLeft`, and the chart includes a title and custom styling for the line and text.

Loading thumbnail…

ICE-7 Area

This area chart visualizes electronic sales from 2008 to 2022, with the x-axis mapping years using `d3.scaleTime` and the y-axis showing sales values via `d3.scaleLinear`. The chart is rendered in SVG using D3 v5, with an `d3.area` generator employing `curveBasis` to create a smooth filled path. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, and data is loaded from a CSV file hosted on GitHub. The chart includes labeled axes, a title, and grid lines, with sales values formatted using `d3.format`.

Loading thumbnail…

line charrt-1

A line chart displays electronics sales over time, with the y-axis representing sales values and the x-axis showing years from 2009 to 2022. The visualization loads data from a CSV file hosted on GitHub Gist using d3.csv, and renders the chart as an SVG with d3.line for the path, scaleTime and scaleLinear for the axes, and d3.axisBottom and d3.axisLeft for tick marks. Axis labels and a title are added as SVG text elements, with styling applied via CSS classes.

Loading thumbnail…

LIne chart -7

This line chart shows Amazon stock price over time, with the year on the x-axis and price on the y-axis. The chart uses D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator, rendering as an SVG. Data is loaded via D3’s `csv` function from a remote URL, with dates parsed using `d3.timeParse` and prices converted to numeric values. Grid lines, axis labels, and a styled path highlight the trend.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart displays electronic sales in India from 2009 to 2022, with year on the x-axis and sales figures on the y-axis. The visualization uses d3.scaleTime for the temporal axis, d3.scaleLinear for the value axis, and d3.axisBottom/axisLeft for tick marks. A single blue line path is generated via d3.line, with data loaded asynchronously from a CSV file using d3.csv. The React-based SVG rendering includes labeled axes, a title, and grid lines, with styling applied through external CSS.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart

A pie chart visualizes COVID-19 death percentages across Indian states, with each slice labeled by state and its corresponding share of total deaths. The chart uses d3.pie and d3.arc to generate the circular segments and d3.scaleOrdinal to map death values to a fixed color palette. A legend, built with SVG rectangles and text elements, lists each state alongside its formatted percentage. Data is loaded as CSV via d3.csv from a GitHub gist, and the visualization renders with SVG in a 1000x500 viewport.

Loading thumbnail…

ICE - 7 Pie Chart

A pie chart visualizes wildlife population percentages across different states in the United States. The chart maps each state’s population value to a colored arc slice, with a legend listing state names and their corresponding percentages. Data is loaded as CSV via D3’s `d3.csv` from a GitHub Gist, while `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` generate the segments and colors. The SVG output renders slices and a separate legend group, with numeric labels formatted using `d3.format`.

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a scatter plot of auto-mpg data, with each circle’s position mapping miles per gallon against horsepower, while color encodes origin and size encodes weight. Tooltips revealing the vehicle name appear on hover. The visualization is built using the vega-lite-api library, which registers vega and vega-lite, and pulls data from a CSV loaded via d3.csv from the UCI Auto MPG dataset. The chart is fitted to the viewport using the autosize setting and customized with a custom config for axis styling.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates the Iris Dataset, cycling through four flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3 6.7.0, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles as SVG, with the data fetched as CSV from a GitHub gist. The animation runs via `setInterval`, redrawing the plot with a new x-value mapping.

Loading thumbnail…

ICE - 6 Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width on the axes while coloring each point by species (setosa, virginica, or versicolor). Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to generate the axes and `select` to append SVG circles with a fixed radius. The code also parses numeric fields from CSV data and applies a custom color marker for species.

Loading thumbnail…

ICE - 6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, virginica, or versicolor) via a brightness-based marker function. After loading the CSV data with `d3.csv`, the example uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3 v6 to establish scales and axes, while `select` and `join` render circles for each observation. The SVG rendering fills the browser window, with sepal length and width values stored as point metadata but not plotted.

Loading thumbnail…

ICE-6: Marks and Channels

A bar chart displays sales data for eleven items, with each item’s sale amount encoded by the horizontal bar length. The visualization uses React to manage state and render the SVG, while D3 v5 scales (`scaleBand`, `scaleLinear`) and CSV loading (`d3.csv`) handle data binding and axis generation. Rectangular marks represent values, with orange gridlines and labeled axes for clarity.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Sports List

A horizontal bar chart displays the popularity of sports in 2021, ranking eleven sports by match counts from a CSV dataset. The visualization uses React with D3 v5, employing `d3.csv`, `scaleBand`, and `scaleLinear` to map data to SVG rectangles. Purple bars represent match totals, with axes drawn using `xScale.ticks()` and manual tick text. The chart renders client-side, fetching data from a GitHub gist URL.

Loading thumbnail…

Fork of Fork of ICE - 6 Scatter Plot

This scatter plot visualizes the Iris dataset, encoding petal length and width on the x- and y-axes, with circles colored by species (setosa in green, virginica in orange, versicolor in blue). It uses D3 v6 to load CSV data, create linear scales with `scaleLinear`, and render SVG circles via `selectAll().join()`. Axes are drawn with `axisLeft` and `axisBottom`, while rotated text labels annotate the axes. Although `rx` and `ry` attributes are set from sepal measurements, the circles remain uniformly sized, and the code does not apply any other encodings or interactions.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Sports List

This visualization displays the popularity of sports in 2021 using horizontal purple bars. The chart ranks the top 11 sports based on match counts, with a blue gridline background and labeled axes. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub gist, `scaleBand` for the y-axis, and `scaleLinear` for the x-axis, rendering all elements as SVG rectangles.

Loading thumbnail…

data

This visualization displays the top 11 popular sports in 2021 as a horizontal bar chart, using a purple bar for each sport whose length corresponds to the number of matches played that year. The chart loads data from a CSV file using `d3.csv` and renders SVG elements through React components. It uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and custom tick rendering for both axes. The page includes a title and uses React hooks like `useState` and `useEffect` to manage data loading.

Loading thumbnail…

Fork of company list

This visualization displays a horizontal bar chart comparing the first 11 rows of a company dataset, with "Leave" categories on the y-axis and "Serial_Number" values on the x-axis. The SVG rendering uses React components with D3's `scaleBand` and `scaleLinear` to position purple bars, while axis ticks are generated manually. Data loads asynchronously via D3's `csv` parser from a GitHub gist, and the chart includes numeric labels formatted through D3's `format` capability.

Loading thumbnail…

Fork of company list

This example is a fork of a company list visualization, built with React, D3 v5, and Vega-Lite API. It shows a scatter plot of transactions by category and amount, paired with a time-based bar chart of the same data, both rendered as SVG. Users can brush on the time chart to filter the scatter plot, and click categories in the scatter to filter the time chart, with credit/debit status encoded by color. The data is loaded from a CSV file via `d3.csv`, and the charts use Vega-Lite’s `vl.markCircle`, `vl.selectInterval`, and `vl.selectPoint` APIs for interaction.

Loading thumbnail…

ICE-5

The visualization displays summary statistics about a CSS colors dataset, presenting the data size, row count, and column count in a text block alongside a static SVG image. It loads a CSV file from a GitHub gist using `d3.csv`, then uses `d3.csvFormat` to calculate the file size, and accesses the parsed data’s `length` and `columns` properties to populate a `<pre>` element. The page is styled with basic HTML and CSS, relying on D3 v7 for data fetching and formatting.

Loading thumbnail…

Micky

This visualization displays a stylized Mickey Mouse face constructed as a scalable SVG graphic. The face is built using React components that render geometric shapes, including circles, ellipses, and arcs, on a 900x500 canvas. The code relies on D3’s `arc` function to generate the mouth, nose, eyes, and ears, while React manages the SVG element tree. The design uses a warm peach face, black facial features, and red accents for the nose and cheeks, with all shapes positioned around the center of the viewport.

Loading thumbnail…

Fork of ICE-5

This visualization displays a summary of the top 100 actors dataset, showing the number of rows, columns, and file size in kilobytes. The page presents this information in a large, styled text block alongside a static SVG image of a wall hanger. It uses D3 v7’s `d3.csv` to fetch and parse the remote CSV file, then employs `d3.csvFormat` to calculate the data size. The HTML includes custom CSS for colorful typography and inserts the image directly via an `<img>` tag.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the basic structure of a VizHub project, showing how to display a simple text message on a webpage using D3.js. The code imports the `select` function from the D3 library and a custom `message` string from a local ES6 module. It then uses `select` to target the `#message` div element and sets its text content to the imported string. A separate CSS file centers the message and scales its font size to 12em, while the HTML loads D3 from UNPKG and bundles the JavaScript modules.

Loading thumbnail…

ICE-5

This visualization displays metadata about a CSV file containing data on the top 100 actors. The page presents a welcome heading, a large cyan text block showing the file’s size in kilobytes, row count, and column count, alongside a static SVG image of a wall hanger. The code uses the D3.js library’s `d3.csv` method to fetch and parse the remote CSV, then accesses the resulting data object’s `columns` property to determine the number of columns.

Loading thumbnail…

Fork of homework smiley face

This SVG visualization shows a stylized smiley face centered on a 960-by-500 canvas. The face is constructed from a large circle for the head, two smaller circles for eyes with green and purple pupils, and an arc for the mouth. Additional line elements form eyebrows and short hair-like strokes at the top, all rendered with heavy black strokes. Built with React and D3 v7, the code uses the `arc()` API to generate the mouth path and relies on SVG primitives for all shapes, with the entire composition translated to the canvas center via a `transform` group.

Loading thumbnail…

meow meow

A panda face composed of simple SVG shapes rendered with React and D3. The code uses d3.arc to generate paths for the eyes, nose, mouth, and ears, while React elements position and style each circle and ellipse. A white face with black eye sockets and eyes, an orange nose, and black ears sits centered on a 960 by 500 canvas. All shapes are drawn directly using SVG primitives within a React component.

Loading thumbnail…

Fork of Let's make a face with D3.js

This example renders a smiling cartoon face as a static SVG scene, but adds a looping animation that moves the eyebrows up and down over time. The face is constructed using D3.js primitives: a yellow circle for the head, smaller circles for the eyes, rectangles for the brows, and a path generated with `d3.arc` to form the mouth. The code uses D3 v5’s selection and transition API to animate the eyebrow group’s transform attribute, creating a simple, expressive effect.