V

vigneswaran009

@vigneswaran009·57 public vizzes

Loading thumbnail…

Size on a map

This visualization displays the population of cities as circles sized on a geographic map. It uses a Mercator projection to position each city, with the circle radius determined by a square-root scale applied to population data from the Sense Your City dataset. The map is rendered as SVG paths for countries and their interiors, with the circles overlaid in a semi-transparent teal color. The code leverages D3’s `geoMercator`, `geoPath`, and `scaleSqrt` functions within a React framework, loading both world atlas topology and CSV city data from external URLs.

Loading thumbnail…

Points on a map

A geographic scatter plot displays city populations using a square-root size scale for circles overlaid on a landmass map. The visualization uses React with D3’s `geoMercator` projection and `geoPath` to render country boundaries, while the `scaleSqrt` function scales circle radii by population data. The map data comes from TopoJSON, and the city dataset originates from the Data Canvas Sense Your City dataset.

Loading thumbnail…

Salem Map points

This visualization displays Salem city points on a geographical map, showing the spatial distribution of the cities dataset over a region. The map renders country boundaries and interior borders using geo paths, with the mercator projection scaled to center on the Salem area. Built with React and D3 v5, the code employs `geoMercator`, `geoPath`, and TopoJSON

Loading thumbnail…

Fork of Points on a Map

This example shows a world map of cities with populations above 50,000, plotted as small teal circles over light gray landmasses and graticules. The visualization uses React to render SVG elements, with D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map projections and boundary lines. City coordinates come from a Simplemaps CSV, while country outlines derive from TopoJSON world atlas data, with interiors drawn as mesh strokes.

Loading thumbnail…

Fork of Fork of Salem map class added-extract

This example visualizes a map of Salem, India, using a Mercator projection to render geographic boundaries as filled SVG paths. The code loads TopoJSON data, extracts country features and interior borders, and displays them with a teal fill and subtle stroke for internal divisions. Built with React and D3 v5, it employs `geoMercator`, `geoPath`, and TopoJSON's `feature` and `mesh` APIs to transform the source data into renderable geometry. The map is centered on Salem's coordinates and appears in a simple, static SVG layout.

Loading thumbnail…

Stylized Bar Chart with Menus success

This interactive bar chart displays the top 20 hospitals by number of vacant COVID-19 beds, sourced from a CSV file of Covid Bed Status data. Users can switch the x-axis metric among three attributes—Total ICU Beds, Total COVID Beds, and Total COVID Vacant—via a dropdown menu. The visualization is rendered as an SVG using React components, with D3.js handling scales, axes, and data binding through functions like `scaleBand`, `scaleLinear`, and `csv`. Styled with the Poppins font, the chart updates reactively to the selected attribute.

Loading thumbnail…

Stylized Bar Chart with Menus

This example presents a stylized bar chart ranking the top 20 institutions by the number of vacant COVID beds, with interactive dropdown menus to switch between metrics such as total ICU beds, total COVID beds, and vacant COVID beds. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG bars that display tooltips on hover. The chart loads data from a CSV file via `d3.csv`, sorts it in descending order, and slices the top 20 entries. Styling employs the Poppins font and a custom color scheme for the marks and axes.

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the top 20 institutions with the highest number of vacant COVID beds, sorted in descending order and excluding zero values. The bar chart uses React with SVG rendering, leveraging d3-scale for band and linear scales, d3-format for tick label formatting, and d3.csv to load data from a GitHub Gist of UN World Population Prospects data. Tooltips display formatted values, while axes are built from custom React components.

Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot of the Iris dataset with interactive dropdown menus for selecting which attributes to plot on the X and Y axes. Users can switch between sepal length, sepal width, petal length, petal width, and species. The visualization uses React for component state management and user interface, while D3 v5 handles data loading via `csv`, linear scales, and SVG rendering. The marks are circles with tooltips showing the X-axis value.

Loading thumbnail…

Menus with react

This example demonstrates a simple dropdown menu built with React, allowing users to select a car brand from a list of options. The selected value is managed through React's `useState` hook and displayed in the console. The interface uses a native HTML `<select>` element, with options rendered via the React `Dropdown` component. Although the page loads D3.js and other libraries, the core interaction relies solely on React’s state management and event handling, with no data visualization or SVG rendering involved.

Loading thumbnail…

Fork of Menus with react

This example demonstrates a React-based dropdown menu that lets users select a car brand from a list of options. The selection updates the component’s state and reflects the chosen value in the dropdown. The code uses React’s `useState` hook for state management and a custom `Dropdown` component that renders a native `<select>` element. The visualization is rendered with D3.js v6 and styled with large fonts, though no graphical data output is shown beyond the control itself.

Loading thumbnail…

Week Temperature

This bar chart displays the total covid bed availability across Salem Hospital names, with the y-axis representing total covid beds and color encoding indicating vacant beds. The visualization uses the vega-lite-api to construct the specification, with d3.csv loading data from a Gist-hosted CSV file. A tooltip reveals the total vacant beds for each hospital on hover.

Loading thumbnail…

Fork of Menus with react

A React dropdown menu renders a list of car options, with a yellow background circle behind it. The page uses controlled React components to map an array of option objects into `<select>` and `<option>` elements. D3.js and jQuery DataTables are loaded via CDN, though the code primarily demonstrates core React rendering. The SVG background circle is defined in a separate component, while the main App component uses `ReactDOM.render` to mount the interface.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to integrate D3 version 6 with React 17 and jQuery DataTables in a single web page. It shows a tabular display of COVID-19 bed status data loaded from a CSV file using `d3.text` and `d3.csvParseRows`, which is then rendered as an interactive table by DataTables. The code also includes a simple React dropdown menu for choosing a car, and it appends the table directly to the body via D3 selection methods.

Loading thumbnail…

Menus with react

The example shows an interactive menu system rendered with React and SVG, drawing a yellow circle with a black border as the central visual element. The code uses React components, such as `BackgroundCircle`, to define SVG elements, and relies on ReactDOM to mount the application into the HTML page. It imports D3.js version 6.7.0, though the visible code primarily creates static SVG shapes rather than dynamic D3-driven visualizations. The interface is built from a minimal React app structure, with D3 available as a dependency for potential data manipulation. The rendering approach is SVG within a React component hierarchy.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to begin using D3 version 6, displaying the text "Hello D3 version 6" before rendering a sortable DataTable. It loads airport data from the OpenFlights extended dataset and uses `d3.csvParseRows` to convert the raw text into a table structure. The code employs `d3.select` to create HTML table elements and integrates jQuery DataTables via the `$(‘#example’).DataTable()` call for enhanced interactivity. The visualization shows a functional starting point for combining D3 with external CSV data and table libraries.

Loading thumbnail…

Table using d3.js

This example demonstrates a searchable, sortable data table built with D3.js and the DataTables jQuery plugin. It displays airport data loaded from a raw GitHub file using `d3.text` and parsed with `d3.csvParseRows`. The `tabulate` function appends table headers and rows via D3 selections, then initializes DataTables with `$('#example').DataTable()` to add interactive features. The page uses HTML, CSS, and JavaScript in a single `index.html` file, with external libraries loaded via CDN.

Loading thumbnail…

Fork of Salem map class added-extract

This interactive map displays the geographic boundaries and internal divisions of the Salem region, rendered as SVG paths using the Mercator projection. The visualization loads geoJSON topology data and uses D3's `geoPath` and `geoMercator` functions to project and draw country features, while a separate interior mesh highlights connections between neighboring regions. Built with React, it reads from a remote JSON source and applies a Poppins font with hover styling that highlights individual countries in blue.

Loading thumbnail…

Salem map class added

This example visualizes the Salem district of India as an interactive choropleth map. The map displays the region's countries and interiors, with each country path filled with a teal color that changes to a blue highlight on hover. The visualization is built with React and D3 version 5, using the `geoMercator` projection and `geoPath` API to render the vector data. The underlying topological data is fetched from a GitHub gist, processed with the `topojson` library, and displayed as an SVG.

Loading thumbnail…

Fork of Fork of Salem Map

This choropleth map displays the geographic boundaries of Salem, India, with countries filled in teal and interior borders highlighted in red. The visualization uses a React component structure with D3 v5’s `geoMercator` projection and `geoPath` to render SVG paths from TopoJSON data. The data is loaded from a GitHub gist containing Salem’s map topology, processed via `feature` and `mesh` from TopoJSON. The map is static with no interactive elements, emphasizing clear regional divisions.

Loading thumbnail…

Fork of Salem Map

This example displays a map of Salem using a green-blue choropleth style, with geographic features rendered as SVG paths via D3’s `geoMercator` projection and `geoPath`. The map is built with React, pulling TopoJSON data from a GitHub gist and using the `topojson` library’s `feature` function to extract features. Hovering over individual departments (marked with the `.dptos` class) would turn them pink, though the current SVG only renders the main map paths without that interaction.

Loading thumbnail…

Fork of Choropleth Map Argentina Dptos Corona (Topojson)

This choropleth map shows confirmed COVID-19 cases per department in Argentina, using a logarithmic color scale from light yellow to dark purple. Built with D3 v5 and topojson, it loads a TopoJSON file containing department boundaries and case counts, then renders each department as an SVG path via `d3.geoPath` with a transverse Mercator projection. The map includes zoom interaction and a vertical legend with a gradient color bar and axis ticks at powers of ten, while tooltips display department, province, and case totals on hover.

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the share of the population infected with HIV/AIDS for the year 2017, using a yellow-orange-red sequential color scale. Country boundaries and graticules are rendered as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, with React managing the component structure. Data comes from an IHME CSV, joined to country geometries using ISO numeric codes. The visualization is a fork of a prior example, adapting city population data to HIV prevalence rates.

Loading thumbnail…

Fork of D3 map drag demo

An interactive orthographic globe displays world countries as colored paths, draggable via mouse to rotate the projection. Clicking a country logs its name to the console, while hovering reveals tooltips with country names from the world-atlas TSV file. The visualization uses D3 v5’s `d3.geoOrthographic`, `d3.geoPath`, `d3.drag`, and `d3.zoom`, with TopoJSON data rendered as SVG paths. A graticule and sphere outline provide geographic context, and country fill colors change on hover.

Loading thumbnail…

Salem Map

This example displays a map of Salem, India, rendered as SVG paths using the React framework and D3's `geoMercator` projection and `geoPath` function. The visualization loads geographic data from a TopoJSON file hosted on GitHub, converting it to GeoJSON with the `feature` method from topojson. The map is drawn with a green stroke color, and the code includes a loading state while the data is fetched asynchronously.

Loading thumbnail…

json new salem

This visualization displays a map of Salem, likely a geographical area, using a topojson data source. The map is rendered as an SVG graphic, with the shape of the region drawn using the `feature` API from the `topojson` library. While the code includes a time-series scatter plot of temperature data, the visible output is a geographic boundary, not a scatter plot. The project is built with React and uses d3's `json` function for data loading.

Loading thumbnail…

Fork of Fork of Fork of Fork of Stylized Line Chart

This example displays a detailed choropleth map of Salem, India, using SVG paths rendered with a heavily zoomed-in Mercator projection. It loads TopoJSON data from a remote gist and converts it to GeoJSON features using the `feature` function from the `topojson` library. The React component fetches the data with a custom hook and renders each geographic feature as a styled path via `d3.geoPath`. The map emphasizes regional boundaries with a teal stroke, contrasting against a clean white background.

Loading thumbnail…

Fork of Fork of Fork of Stylized Line Chart

This example visualizes a geographic map of the Salem region using React and D3. The code renders SVG paths from TopoJSON data sourced from a GitHub gist, with the `geoMercator` projection applied at a high scale and specific center coordinates. The `geoPath` function generates the path data for each feature, while the styling uses a teal stroke color with rounded line joins. The map is displayed as a static visualization without interactive elements or additional chart layers.

Loading thumbnail…

Fork of Fork of Stylized Line Chart

This example displays the Salem district map as a stylized line chart, rendering geographic boundaries as bold, teal strokes on a plain background. The visualization uses a React-based architecture with SVG, and the map geometry is processed from TopoJSON data using the `feature` function. The GeoJSON features are projected and drawn through `d3.geoMercator` and `d3.geoPath`, which are called within a React component structure. The underlying data comes from the Data Canvas Sense Your City Dataset, loaded asynchronously via `d3.json` and a custom `useData` hook.

Loading thumbnail…

Fork of Fork of Stylized Line Chart

This visualization displays the administrative boundaries of India as a choropleth-style map, rendered as a stylized line chart of geographic regions. The map is drawn using SVG paths generated with d3.geoPath and a d3.geoMercator projection centered on latitude 15°E, with the TopoJSON data loaded from a GitHub-hosted file and converted to GeoJSON via the topojson feature method. The visualization uses React for component structuring and styling, with d3.v5 handling the geographic projection and path generation.

Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays a geographical map of a region, rendered as an SVG using a web Mercator projection with D3's `geoMercator` and `geoPath` functions. The map’s paths are drawn in a teal stroke with rounded line joins and caps. The underlying data comes from a JSON file fetched via `json` from a Gist, processed into GeoJSON features using the TopoJSON `feature` function. The React framework manages the application state, and the chart is styled with the Poppins font.

Loading thumbnail…

Fork of Mexico Waste 2018 Choropleth Pass3

This choropleth maps municipal solid waste generation across Mexican states for 2018, using a Mercator projection via `d3.geoMercator` and rendering boundaries with `d3.geoPath`. State-level waste values are encoded with a sequential Viridis color scale, while a graticule and interior mesh provide geographic context. The visualization loads GeoJSON and CSV data through React hooks and `d3.json`/`d3.csv`, with missing states filled in blue. The SVG is generated from TopoJSON data processed by `topojson.feature` and `topojson.mesh`, with a color legend displayed as an external image.

Loading thumbnail…

Fork of Fork of Stylized Line Chart_salem

This choropleth map displays the Salem region using a GeoJSON-derived TopoJSON dataset from GitHub. The map visualizes geographic boundaries as styled SVG paths with a teal stroke and fill. Built with React and D3 v5, the code uses `geoMercator` for projection and `geoPath` to render the map features. The data is loaded via D3's `json` function and processed using the `feature` function from the TopoJSON library, with the final visualization rendered as an SVG element.

Loading thumbnail…

Fork of Fork of Stylized Line Chart

This example displays a stylized line chart of India’s administrative boundaries, rendered as a monochrome SVG map with thick, rounded strokes. The visualization imports a TopoJSON file of Indian states, converts it to GeoJSON features using `topojson.feature`, and projects the paths with `d3.geoMercator` and `d3.geoPath`. Built with React, the app loads data via `d3.json` and maps each feature to a `<path>` element, styled with CSS to emphasize the country’s shape. The chart’s title suggests a forked lineage of prior works, though the current code only shows the geographic outline.

Loading thumbnail…

Fork of Polished World Map

This example visualizes a world map with country boundaries derived from the World Atlas TopoJSON dataset, wrapped in a polished presentation that includes graticules. The map uses the `geoNaturalEarth1()` projection and renders with SVG paths via `geoPath`, drawing landmasses in teal, a light gray sphere, and subtle graticule lines. Data is loaded asynchronously using `json()` from D3 and processed with `feature()` and `mesh()` from TopoJSON. The application is built with React, using a custom `useData` hook to fetch and transform the topology into renderable geometries.

Loading thumbnail…

Empty Covid beds - Salem

A bar chart displays the number of vacant COVID-19 beds across hospitals in Salem, India, using horizontal bars sorted in descending order. The chart shows only the top 20 institutions with non-zero vacant bed counts, with each bar labeled by hospital name and the x-axis representing the count in thousands. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and SVG elements for rendering. Data comes from a CSV sourced from the United Nations World Population Prospects 2019, though adapted for COVID bed counts.

Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous countries as horizontal bars, with country names on the left and numeric population values along the bottom axis. It loads UN population data from 2019 using `d3.csv`, then renders the chart as SVG through React components. The code uses D3’s `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and manually draws tick lines and labels for both axes. React state management and hooks coordinate the asynchronous data loading and conditional rendering.

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the ten most populous countries as horizontal bars, with no axes or labels, scaled proportionally to their 2020 population estimates from the United Nations World Population Prospects 2019 dataset. The React app fetches CSV data using d3.csv, then uses d3.scaleBand for the y-axis positioning and d3.scaleLinear with d3.max for the x-axis scaling. Each country is rendered as an SVG rectangle element within a fixed 960x500 canvas, with a simple loading message shown before data arrives.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a radial burst of the CSS named colors, with each color represented as a slice of a pie chart. It uses React hooks like `useState` and `useEffect` to asynchronously load the data with `d3.csv`, then renders SVG paths via React. The `d3.pie` and `d3.arc` APIs compute the angular layout and path geometry, while the fill color comes from the `RGB hex value` column. The visualization transitions from a loading message to the full color wheel once the data arrives.

Loading thumbnail…

Fork of Week Temperature

This fork of "Week Temperature" displays a circular bubble chart, mapping countries on the x-axis and religions on the y-axis, with bubble size representing population. The visualization loads CSV data from a Gist, which is a subset of the UCI Auto MPG dataset. It is built using the Vega-Lite API, which compiles specifications into Vega for rendering, and uses D3.js to fetch the data. The chart is configured with dark text and a light gray axis for improved readability.

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This scatterplot visualizes the relationship between miles per gallon, horsepower, weight, and origin for vehicles from the UCI Auto MPG dataset. It uses Vega-Lite API to create a circle mark encoding mpg and horsepower on the axes, weight for size, and origin for color, with hover tooltips. The code loads CSV data via d3.csv, registers the Vega-Lite API with vega and vega-lite, and renders to SVG through vega-tooltip's handler.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays relationships among automobile characteristics from the UCI Auto MPG dataset, encoding miles per gallon and horsepower on the axes, origin as color, and weight as point size. Built with Vega-Lite's API wrapper, the code uses `vega-lite-api` to construct a circular mark encoding specification, then renders interactively through Vega and Vega-Lite. The visualization includes tooltips for car names, styled with custom axis and label configuration for improved readability.

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays the relationship between car origin and horsepower, with each car represented as a circular mark and hover tooltips revealing the model name. The code uses the Vega-Lite API to define the scatterplot encoding, while D3’s `csv` function loads the auto-mpg dataset from a GitHub gist. The visualization renders as SVG with custom axis styling and tooltip handling via `vega-tooltip`, and it fits to the full window using autosize.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data by plotting engine displacement against horsepower, with each point colored by model year. Built using the Vega-Lite API and rendered with VEGA-Lite’s vega.min.js and vega-lite.min.js libraries, it fetches the auto-mpg.csv dataset via d3’s csv function. The chart encodes quantitative fields for both axes, uses a config file to customize axis and label styling, and enables tooltips showing car names. The visualization automatically fits its width and height to the browser window.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between acceleration and horsepower in auto-mpg.csv data using a scatter plot of points. It employs the Vega-Lite API (vl) to construct the visualization, with vega, vega-lite, and vega-tooltip handling rendering and tooltips. Data is loaded via d3.csv, and the chart is configured with custom axis and label styling in config.js. The visualization is rendered to a canvas, filling the browser window with a fit-based autosize.

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how React state and D3 utilities can work together to load and summarize external data. It fetches a CSV file of CSS named colors from a GitHub gist using D3’s `csv` method, then displays concise statistics about the dataset. The React `useState` and `useEffect` hooks manage the asynchronous data loading and trigger a re-render. A custom `message` function formats the output, showing the file size in kilobytes, row count, and column count using `d3.csvFormat`. Before the data arrives, the interface shows "loading...".

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load external data in a React application using D3 utilities, displaying the dataset's size, row count, and column count as plain text. It uses the `useState` and `useEffect` hooks to manage asynchronous data loading via `d3.csv` from a GitHub Gist containing CSS named colors. Once fetched, the data is stored in React state and formatted with `d3.csvFormat` to compute its kilobyte size. The interface renders the summary information inside a `<pre>` element, switching from a "loading..." message to the final statistics when the data arrives.

Loading thumbnail…

Fork of Loading Data with React and D3

This example demonstrates how React and D3 can cooperate to load and display external data, with the rendered output shown as a text summary inside a `<pre>` element. It uses React’s `useState` and `useCallback` hooks to manage the asynchronous data-fetching state, while D3’s `csv` function retrieves a CSV file from a GitHub gist containing named CSS colors. Once loaded, React re-renders the component to show the file size in kilobytes, row count, and column count computed via `d3.csvFormat`. The SVG output is commented out, leaving only the text-based data summary visible.

Loading thumbnail…

Loading and Parsing CSV data

This example shows the size and structure of a CSV dataset by displaying the file size in kilobytes, the number of rows, and the number of columns. The code loads data from a remote CSV file containing CSS named colors using the `d3.csv` function, which fetches and parses the data asynchronously. It then uses `d3.csvFormat` and `data.columns` to calculate the metrics, and writes the resulting message into a `<pre>` element. The example also includes commented-out code using the Fetch API with `d3.csvParse` for alternative parsing.

Loading thumbnail…

Fork of Loading and Parsing CSV data

This example demonstrates loading and parsing a remote CSV file containing CSS named colors, then displaying basic statistics about the dataset. It uses the D3 v6 library’s `d3.csv` method to fetch and asynchronously parse the data, followed by `d3.csvFormat` and `d3.csvParse` to handle the text conversion. The page reports the file size in kilobytes, row count, and column count in a large `<pre>` element. The data comes from a GitHub gist URL.

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across a full-window SVG canvas. The React component tracks mouse coordinates through the `onMouseMove` event and updates the circle’s `cx` and `cy` attributes using `useState` and `useCallback`. The visualization renders with React and ReactDOM, drawing a single black circle on a blank white background.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-screen SVG, updating its position in real time to mirror the user's pointer. The React app uses the `useState` hook to track mouse coordinates and an SVG `onMouseMove` event handler to update the circle's `cx` and `cy` attributes. Built with React and ReactDOM, the visualization renders solely with SVG elements and relies on `window.innerWidth` and `window.innerHeight` to size the canvas.

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to fetch and display raw CSV data in the browser console. It uses the Fetch API to retrieve a CssNamedColors.csv file from a GitHub gist and logs the parsed text output. The code defines an asynchronous `fetchText` helper that converts the response to plain text, then calls it with the CSV URL and prints the result. No external libraries are used; the implementation relies solely on native JavaScript promises and the `console.log` method for output.

Loading thumbnail…

Multiple faces

A grid of 18 smiling yellow faces fills the view, each with randomized eye sizes and a fixed mouth shape. The faces are rendered as SVG circles with black outlines, built from reusable React components for the background, eyes, and mouth. D3's arc generator creates the mouth path, while the React app maps over a d3.range to produce each face. The component props control geometry like eye offset and mouth radius, allowing variation across the grid.

Loading thumbnail…

Fork of Fork of Smiley Face Part I

A grid of eighteen yellow smiley faces in a React and SVG composition, each generated with randomized eye sizes using `Math.random()`. The faces are assembled from modular React components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that render SVG elements. The mouth uses `d3.arc` to create a half-circle path, while the background circle and eyes are plain SVG circles. Each face is independently styled with fixed dimensions and offsets, producing a uniform yet subtly varied pattern across the display.

Loading thumbnail…

Fork of Smiley Face Part II

This example displays a smiling face rendered with SVG shapes, built using React and D3.js. A yellow circle forms the head, with two black circles for eyes and a D3 arc-based path creating the mouth. The code uses React DOM to render the SVG, while d3.arc constructs the mouth’s curved segment. Dimensions and positions are computed from fixed width and height constants, with the face centered in a 960-by-500 viewport. The layout relies on SVG circle and path elements, with stroke styling applied to the head.

Loading thumbnail…

Hello Html

A bare-bones HTML page renders a single black circle centered on a 960×500 SVG canvas. The circle is drawn using the SVG `<circle>` element, with its center at (480, 250) and a radius of 200. The page includes a minimal embedded CSS style that removes body margins and hides overflow. No external libraries are used; the visualization relies solely on native HTML, SVG, and CSS. The example demonstrates the simplest possible SVG-based data visualization approach.