N

Nikhilchiguru-8

@Nikhilchiguru-8·61 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Family Tree of plants

This visualization presents an interactive hierarchical tree of the animal kingdom, showing the classification from "Animals" down through vertebrates and invertebrates to specific groups like Mammals, Birds, Fish, and Amphibians. Built with D3.js v3, it renders nodes as colored rectangles connected by animated SVG links, with each node color-coded by its hierarchical level (type1 through type4). The layout uses `d3.layout.tree` with zoom and drag behaviors, and includes tooltips and click interactions to expand or collapse subtrees. Data comes from a JSON file structured with nested children arrays.

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This is a social network graph showing friendship connections among eight people. The visualization uses a force-directed layout to arrange nodes and links, with each node labeled by name and rendered as a circle. The code uses D3 v6’s `d3.forceSimulation` with link, charge, collision, and center forces to position the nodes, and SVG elements are updated on each simulation tick. Link arrows are drawn via SVG markers, and nodes are interactive, with hover effects and drag support. The data comes from a JSON file specifying people and their friend relationships.

Loading thumbnail…

Fork of Fork of Family Tree of plants

This interactive tree diagram visualizes a hierarchical classification of animals, using color-coded nodes to distinguish four taxonomic levels. Built with D3.js v3 and SVG, the visualization loads data from a JSON file and supports zooming, panning, and click-to-expand interactions. The layout is computed with `d3.layout.tree`, while link text and custom tooltips display additional details. Animated node transitions and CSS-styled elements enhance readability, though the dataset contains an inconsistent label referencing “plants” within the cold-blooded branch.

Loading thumbnail…

Fork of Family Tree of plants

This visualization arranges plant taxonomy into an interactive, animated tree diagram, using colored, rounded rectangles to represent different classification levels from “plants” down to specific groups like “tulips” and “flowers.” Built with D3.js v3, the layout is computed via `d3.layout.tree`, while SVG elements are manipulated with `d3.select` and standard zoom/pan behaviors. Node colors are assigned by type, and tooltips plus click-to-collapse interactions are included; the diagram loads hierarchical JSON data containing names, links, and direction attributes, with rendering handled primarily through SVG groups, foreignObject for text, and CSS-defined arrow and link styling.

Loading thumbnail…

Fork of England Regional Map

This example displays a choropleth-style map of England, highlighting the country’s geographical regions with a pink fill and purple interior borders. It uses the D3.js library’s `geoNaturalEarth1` projection and `geoPath` to render the geographic features, while TopoJSON’s `feature` and `mesh` functions convert the remote GeoJSON data. The React framework manages the rendering of the SVG elements, with the map’s states and boundaries clearly defined.

Loading thumbnail…

Fork of Fork of Fork of Japan Map.viz

This visualization displays the prefectural boundaries of Japan as colored SVG paths. The map uses a Mercator projection centered on the country, with each administrative region filled in a distinct color from a categorical scheme. The code employs the `d3.geoMercator` projection, `d3.geoPath` for generating path data, and `topojson.feature` to extract features from the TopoJSON source. Interactive zooming is enabled through the `d3.zoom` module, which updates the SVG group's transform.

Loading thumbnail…

Fork of Fork of Japan Map.viz

This example displays a choropleth-style map of Japan’s administrative regions, rendered as SVG paths with an orange fill and white strokes. Users can pan and zoom the map via `d3.zoom`, which applies a transform to the grouped map elements. The code uses `d3.geoMercator` for projection, `d3.geoPath` to generate paths, and TopoJSON’s `feature` to parse the geographic data from a remote JSON file. A categorical color scale (`d3.scaleOrdinal`) is also defined, though the visible map uses a fixed CSS fill.

Loading thumbnail…

Fork of Japan Map

This choropleth map of Japan displays prefecture boundaries as red polygons with white strokes on a blank background. The visualization loads geographic data from a GitHub-hosted TopoJSON file and renders it using D3’s `geoPath` with a `geoMercator` projection. Interactive pan and zoom are enabled via D3’s `zoom` behavior, which applies transforms to the SVG group. The map uses static color fill from `scaleOrdinal` and `schemeCategory10`, with no hover or tooltip interactions. D3 version 5 and topojson are loaded via CDN.

Loading thumbnail…

Fork of Fork of Swedish map

This visualization displays the counties of Sweden as a choropleth-style map, with each region filled in teal and outlined by contrasting strokes. It shows the geographic boundaries and internal subdivisions of Swedish counties, rendered as SVG paths. The code uses D3 v5’s `geoMercator` projection and `geoPath` to convert TopoJSON data into map features, while React manages the component structure. The data is sourced from a simplified Swedish counties dataset, with `topojson.feature` and `topojson.mesh` handling the geometry and internal borders.

Loading thumbnail…

Fork of Swedish map

This visualization displays the counties of Sweden as a choropleth-style map, with each region filled in teal and boundaries highlighted in contrasting strokes. It uses a Mercator projection fitted to the geographic data, rendering the land areas and internal borders as SVG paths. The code employs React for component structure, with D3’s `geoMercator`, `geoPath`, and `fitExtent` for map projection and layout, and TopoJSON’s `feature` and `mesh` functions to parse the simplified Swedish county dataset.

Loading thumbnail…

Fork of Fork of Swedish map - ICE 8

This visualization shows a choropleth map of Swedish counties rendered with SVG, using a muted rose fill for regions and contrasting teal borders between them. The map is projected using a Mercator projection fitted to the viewport via `d3.geoPath` and `projection.fitExtent`. Data is loaded as TopoJSON and converted to GeoJSON using `topojson.feature` and `topojson.mesh`, with React managing the state through the `useData` hook. The code references a separate Indian state dataset in comments, though the active data source is the simplified Swedish county boundaries.

Loading thumbnail…

Fork of Swedish map - ICE 8

This visualization displays Swedish county boundaries as a choropleth-style map, using a Mercator projection fitted to the geographic data. Built with React and D3 v5, it loads TopoJSON from a remote URL and converts it to GeoJSON features using `topojson.feature` and `topojson.mesh`. The `d3.geoPath` generator renders the SVG paths, with counties filled in muted red and interior borders highlighted in cyan. The map uses a static color scheme without data-driven encoding, focusing on geometric clarity rather than quantitative variation.

Loading thumbnail…

Fork of ICE 08 11540905

This visualization displays a world map with countries rendered as filled shapes. It uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw geographic boundaries from TopoJSON data loaded via `json()`. The map is an SVG with an orange ocean background, navy countries, and a red hover effect. Country borders are defined with a black stroke, and hovering any country changes its fill color.

Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This visualization shows the average rent in Dallas over time, using an area chart with a smooth curved line and an orange filled region beneath it. The chart includes labeled axes for year and average rent, with gridlines. Built with D3 v5 within a React framework, the code loads CSV data from a GitHub gist and uses D3’s `scaleLinear`, `line`, and `area` generators with `curveBasis` to render the SVG paths.

Loading thumbnail…

Fork of Fork of line chart section 3

A line chart displays average apartment rent in Dallas from 2015 to 2023, with years on the x-axis and rent amounts on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to map CSV data loaded via `d3.csv`. SVG rendering includes gridlines, axis labels, a title, and a red stroke path. The line is drawn by the `line` generator, with scales defined by `extent` and `max` to set domains.

Loading thumbnail…

Fork of Line Chart

This example displays a line chart of average US city rent prices from 2005 to 2022, using a red stroke to highlight the temporal trend. The visualization is rendered as an SVG using D3 v5, with `d3.scaleTime` and `d3.scaleLinear` mapping the x- and y-axes, and `d3.axisBottom` and `d3.axisLeft` generating the grid lines and tick labels. Data is loaded via `d3.csv` from a remote GitHub gist, and the line path is constructed with the `d3.line` generator. The chart includes labeled axes and a title, with the line itself drawn from parsed date and numeric rent values.

Loading thumbnail…

Fork of piechart ic7

This is a D3.js (v5) pie chart showing the top 10 car-producing countries by total value for 2019. Each slice represents a country's production output, with a legend listing country names and their corresponding values. The chart uses `d3.pie` and `d3.arc` to compute and render the segments, while `d3.scaleOrdinal` assigns a categorical color palette. Data is loaded from a CSV gist using `d3.csv`, and the total value is formatted with `d3.format`. The visualization is rendered as SVG, with styling defined in an external CSS file.

Loading thumbnail…

Fork of Fork of Line Chart

This visualization displays annual US auto sales from 2005 to 2022 as a single red line chart. It uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the path. The SVG rendering includes axis labels, gridlines via tickSize, and a title. The code demonstrates D3 v5’s modular imports and standard margin-based chart layout.

Loading thumbnail…

Fork of Line Chart

This line chart displays annual US auto sales from 2005 to 2022, with the x-axis mapping years and the y-axis mapping sales figures. The visualization uses d3.scaleTime and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft rendering ticks and labels. A red d3.line generator draws the sales trend path in SVG. Data loads from a CSV file via d3.csv, with year values parsed as dates. Axis labels and a title appear as SVG text elements, styled through the page’s stylesheet.

Loading thumbnail…

Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart shows the average cost of living plus rent for various cities, with each slice colored and paired with a legend listing city names and values in thousands. The visualization loads CSV data from a GitHub gist via `d3.csv`, computes the pie layout using `d3.pie` and `d3.arc`, and encodes colors with `d3.scaleOrdinal`. It renders as SVG, styling text and legends through CSS, and formats tick values with `d3.format`.

Loading thumbnail…

Fork of piechart ic7

This visualization shows the top 10 car production countries by displaying their average rent values as a pie chart. The chart uses D3.js version 5 with SVG rendering, loading CSV data from a GitHub gist. It employs `d3.pie` and `d3.arc` to generate the pie segments, `d3.scaleOrdinal` for color mapping, and `d3.format` to display values in thousands. A legend with colored circles and country names is positioned to the right, with each segment’s fill color corresponding to its rent value.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This visualization displays the top 10 countries by deaths in 2020 due to air pollution, represented as a pie chart of cities with their associated costs of living. Each slice’s color corresponds to a category, and a legend on the right lists each city with its numeric value. The chart is rendered in SVG using D3 v5, with data fetched from a CSV via `d3.csv`. It employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate arcs and assign colors, while custom formatting converts raw values into thousands with a “K” suffix.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length. It uses D3 v6 APIs such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to render axes, while `symbol` and `symbols` generate distinct markers for each iris species. The reusable `scatterPlot` function configures scales, margins, and encoding via method chaining. Data loads asynchronously from a GitHub Gist CSV, with numeric parsing applied to all measurements. SVG output adapts to the full viewport size.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length on the x-axis, body mass on the y-axis, and using circle color to distinguish species (Adelie, Gentoo, and Chinstrap). The code loads data from a CSV file via d3.csv, applies scales with d3.scaleLinear and d3.extent, and renders circles as SVG elements. Axis labels and ticks are generated using d3.axisLeft and d3.axisBottom, while the chart fills the full browser window. A title and cursive font styling complete the presentation.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the Iris Dataset, showing the relationship between sepal length and petal length across three species of iris flowers. The visualization encodes each observation as a circle positioned by two quantitative axes, with species differentiated by color coding. Built with D3 v5, the example employs `d3.scaleLinear` for axis scaling, `d3.extent` for domain calculation, and `d3.axisLeft`/`d3.axisBottom` for rendering axes. Data is loaded and parsed asynchronously from a local CSV file using the Fetch API and `d3.csvParse`.

Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). It also encodes bill length and depth through the circle’s rx and ry attributes, creating elliptical markers. The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to load data and render axes, with SVG circles and text labels styled via CSS.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This interactive scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with each point colored by species. Built using D3 v5 within a React starter template, the visualization loads CSV data and uses `d3.scaleLinear` with `d3.extent` to map coordinates, rendering SVG circles. The chart includes `d3.axisLeft` and `d3.axisBottom` axes, along with descriptive labels for both dimensions.

Loading thumbnail…

Fork of D3 Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. Circle size encodes sepal width, while color, using `interpolateRainbow`, represents petal width. The code uses D3 v7 APIs including `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Points are rendered as SVG circles positioned from scaled domain values, with axes and labels drawn using D3’s axis generators.

Loading thumbnail…

Fork of Fork of Fork of Stylized Scatter Plot

This example is a scatter plot of the Iris Dataset, mapping petal length against sepal width. The visualization uses a React and D3 v5 architecture, with linear scales (`scaleLinear`) from D3 to map data values to pixel coordinates. The SVG rendering is composed from custom React components for axes and circular marks. The page loads the Iris dataset from a GitHub gist using D3's `csv` function, and includes an embedded YouTube video in its README. The chart uses a clean, minimal design with Poppins typography and a teal color for the data points.

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis using d3.scaleLinear scales. The React application loads CSV data via d3.csv and renders SVG circles with custom React components for axes and marks. Data points appear as teal circles with tooltips showing formatted values, while styled axis labels and tick marks use the Poppins font. The visualization demonstrates a clean, minimal aesthetic with fixed dimensions and margins.

Loading thumbnail…

Fork of scatter plot

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each flower species represented as a circle. The visualization uses d3.scaleLinear for axis scaling and d3.extent to compute data domains. Axes are drawn with d3.axisLeft and d3.axisBottom, while the SVG circles are created dynamically through data joins. Data is loaded asynchronously via fetch and parsed with d3.csvParse.

Loading thumbnail…

Fork of scatter plot

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each flower species represented as a circle. The visualization uses d3.scaleLinear for axis scaling and d3.extent to compute data domains. Axes are drawn with d3.axisLeft and d3.axisBottom, while the SVG circles are created dynamically through data joins. Data is loaded asynchronously via fetch and parsed with d3.csvParse.

Loading thumbnail…

Fork of Scatter Plot with Color

A scatter plot of the Iris Dataset displays sepal length against petal length for 150 flowers, with points colored by species using a categorical color scale. A legend identifies the three species, and labeled axes provide context. The visualization uses D3 v7 with modular functions for drawing axes, applying scales, and rendering circles. The color encoding uses `scaleOrdinal` and `schemeCategory10`, while data loads asynchronously from a CSV file via `csvParse`.

Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot displays the relationship between engine displacement, horsepower, and weight for various car models, with points colored by model year and labeled with car names via tooltips. It uses the Vega-Lite API with Vega and Vega-Lite libraries, pulling auto-mpg data from a CSV file. The visualization is rendered as an SVG, with custom styling for axis labels and tooltips configured through `config.js`.

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot displays the relationship between engine displacement and horsepower for a collection of automobiles, with each circle’s area scaled by vehicle weight. The visualization is rendered using the Vega-Lite API, a programmatic wrapper around Vega-Lite and Vega, with tooltips supplied by the vega-tooltip library. Data is loaded as CSV from a remote source using d3.csv, and the plot’s axis styles and dimensions are customized via a configuration object.

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement against horsepower, colored by country of origin, with tooltips revealing vehicle names. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that is then rendered by Vega. Data is loaded asynchronously from a CSV file via D3’s `csv` function. The code registers Vega-Lite with the API, applies custom axis and label styling from a configuration object, and renders the chart to fill the browser window using an SVG renderer.

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement against horsepower, colored by country of origin, with tooltips revealing vehicle names. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that is then rendered by Vega. Data is loaded asynchronously from a CSV file via D3’s `csv` function. The code registers Vega-Lite with the API, applies custom axis and label styling from a configuration object, and renders the chart to fill the browser window using an SVG renderer.

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This example plots automobile data as a scatterplot of displacement against horsepower, with points colored by origin and hover tooltips showing car names. It uses the Vega-Lite API to declare the visualization, registered with Vega and Vega-Lite, while D3’s `csv` method loads the auto-mpg dataset from a GitHub gist. The resulting SVG view is rendered across the full browser window with custom axes, label styling, and tooltip handling provided by Vega Tooltip.

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement against horsepower, colored by country of origin, with tooltips revealing vehicle names. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that is then rendered by Vega. Data is loaded asynchronously from a CSV file via D3’s `csv` function. The code registers Vega-Lite with the API, applies custom axis and label styling from a configuration object, and renders the chart to fill the browser window using an SVG renderer.

Loading thumbnail…

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

This example visualizes the average software developer rent in US metros using a bar chart rendered with React and D3 v5. The chart displays 15 metro areas from a CSV dataset, mapping metro names to the y-axis and average rent values to the x-axis via d3.scaleBand and d3.scaleLinear. React manages the component state and SVG rendering, while D3 handles data loading with d3.csv, scales, and axis ticks. The code manually creates gridlines and tick labels using React JSX, avoiding d3.axisBottom or d3.axisLeft.

Loading thumbnail…

Fork of Aditya - bar chart with React & D3

This bar chart displays the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, the visualization renders as an SVG with horizontal bars, though it intentionally omits axes labels. The code uses React state and effects to load and filter CSV data, then applies D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, drawing grid lines, country names, and rectangles via `d3.csv` and React DOM elements.

Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous metropolitan areas by their 2020 cost of living, shown as a horizontal bar chart. It uses React for component state and rendering, while D3 v5's `scaleBand` and `scaleLinear` handle the axis scales and `max` determines the domain. The SVG chart includes a labeled x-axis with ticks and a y-axis of metro names. Data is loaded from a CSV via `d3.csv`, and the code combines React hooks like `useState` and `useEffect` with D3's functional APIs.

Loading thumbnail…

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

This example displays the top 10 countries with the highest CO2 emissions in 2019 as a horizontal bar chart, using a dataset loaded from a CSV file. The visualization is built with React components that render SVG marks while leveraging D3’s `scaleBand` and `scaleLinear` to position rectangles along the x and y axes. Axis ticks and labels are generated manually by mapping over scale domains, and the chart includes a blue gridline for each tick value. The page is titled "CO2 emission in the Countries" and updates asynchronously when the data finishes loading.

Loading thumbnail…

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

This example presents a bar chart of Netflix basic subscription costs across countries, using a horizontal layout with sorted data from a CSV file. The visualization renders SVG marks with React managing state and D3 handling scales and axes. D3’s `scaleBand` and `scaleLinear` position bars, while `axisBottom` and `axisLeft` generate tick marks. The code manually draws gridlines and labels, and fetches data via `d3.csv`. React’s `useState` and `useEffect` load and store the dataset, with `ReactDOM.render` mounting the interactive component.

Loading thumbnail…

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

This interactive bar chart visualizes the basic cost of Netflix subscriptions across 15 countries, sourced from a CSV file. Built with React and D3 v5, it renders SVG elements, using `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric cost scale. The chart displays horizontal rectangles whose widths encode the cost value, with tick labels for both axes generated manually.

Loading thumbnail…

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

This example visualizes the basic cost of Netflix subscriptions across fifteen countries using a horizontal bar chart. The chart maps country names to the y-axis and basic cost values to the x-axis, with blue bars representing each nation’s pricing. Built with React and D3 v5, the app loads data from a CSV file via `d3.csv` and renders SVG marks directly through React components. Axes are constructed manually using `d3.scaleBand` and `d3.scaleLinear`, while tick marks and labels are generated from the scales’ `ticks()` and `domain()` methods.

Loading thumbnail…

Fork of ICE5

This example displays metadata about a home loan approval dataset, including its file size, row count, and column count, on a yellow page with a centered background image. The code loads the dataset from a CSV file hosted on GitHub using `d3.csv`, then computes the metadata with `d3.csvFormat` and `data.columns.length`. It presents the results in an HTML `<pre>` element. Styling is handled via CSS, while D3 v7 and plain JavaScript manage the data fetching and display.

Loading thumbnail…

Fork of Fork of homework smiley face

A smiley face rendered in SVG appears against a solid background, with its eyes, mouth, and ears all composed of simple geometric shapes and arcs. The face also includes teardrop-like ellipses, eyebrows drawn with lines, and a tongue created from an arc. The code builds this static illustration using React and D3 v7, explicitly calling the `d3.arc()` API to generate the curved paths for the eyes, ears, and mouth, while other elements are defined directly as SVG primitives within the JSX markup.

Loading thumbnail…

Fork of Laugh Cry Emoji

This visualization displays a cartoon-style laughing and crying emoji face, constructed with a yellow circle head, closed eyes, a wide open mouth, tongue, and blue tear drops. The face is rendered as SVG elements using React components. The code utilizes D3’s `arc()` generator to create the mouth and tongue shapes, and applies SVG primitives like `circle`, `line`, `ellipse`, and `path` with transforms. The layout is centered on a 960x500 canvas, with all elements positioned relative to the center point.

Loading thumbnail…

Fork of homework smiley face

This example shows a stylized smiley face built with React and D3.js, rendered as an SVG. The face includes yellow circular head, white eyes with black pupils, orange elliptical accents, and a smiling mouth created using the `d3.arc` function. Additional details like ears, eyebrows, a tongue, and blue tear shapes are drawn with SVG paths and ellipses. The code uses React's `ReactDOM.render` to mount the component, and D3's `arc` API to generate curved paths for the mouth, tongue, and eye arcs, with all shapes positioned using explicit coordinates and transforms.

Loading thumbnail…

Fork of Danny Phantom Face

A fork of the classic Danny Phantom face renders a character portrait using React and SVG. The face, eyes, irises, pupils, eyebrows, mouth, and hair are all constructed from basic geometric shapes—circles, rectangles, and polygons—with coordinates computed relative to the viewport center. The mouth uses the d3 `arc` API to generate a curved path, while the hair is a polygon with points defined as strings. The visualization is fully responsive, sizing to the browser window, and demonstrates a playful, programmatic approach to portraiture with D3 v6 inside a React application.

Loading thumbnail…

Fork of Laugh Cry Emoji

A laughing-crying emoji face rendered in SVG with React and D3 v5. The component draws a bisque circular face with black stroke outlines, including stylized eyes, eyebrows, a wide open mouth arc, and a white-toothed smile. It uses D3’s `arc` generator to create the mouth and tongue shapes, while tears are ellipses and the tongue appears as rotated salmon-colored arcs. The rendering relies on React DOM to mount the SVG tree, with all coordinates and radii defined as constants for clear geometric composition.

Loading thumbnail…

Fork of Cat smiley

This fork of a cat smiley face uses D3 and React to render an SVG illustration. The code defines arc paths with `d3.arc()` to construct the mouth, eyes, and ears, and layers standard SVG shapes like circles, ellipses, and lines for the face, features, and whiskers. The visualization is drawn on a fixed 800x450 canvas with yellow fill and black strokes, using SVG elements and transformations to position the cat’s facial components.

Loading thumbnail…

Fork of ICE4 HW_Ramakanth

This example renders a cartoon smiley face using React and D3 v5, combining SVG shapes with D3’s `arc` generator to draw the eyebrows, mouth, and ears. The face features asymmetrical eyes, a purple nose, and rotated and translated arcs for brows and lips, all composed from circles, paths, and polygons. React manages the component structure, while D3 computes arc paths for curved elements, with SVG attributes like `fill`, `stroke`, and `transform` controlling styling and placement. The rendering is entirely SVG-based within a fixed 960×500 viewport, using static, hardcoded coordinates rather than external data.

Loading thumbnail…

Untitled

This example shows a smiley face rendered in SVG whose eyebrows move up and down in a repeating animation. Using D3.js, the code selects SVG elements, binds data to them, and updates their positions in response to a timer-based loop. The eyebrow movement is achieved through direct `selection.attr` calls on the `transform` and `y` attributes, with the animation driven by a `setInterval` function. The visualization is built entirely with plain D3 selections, with styling handled via an external stylesheet.

Loading thumbnail…

Fork of homework smiley face

This example renders a stylized smiley face as a static SVG graphic, sized to fit a 960 by 500 pixel canvas. The face is constructed from basic D3 shapes, including circles for the eyes and an arc for the mouth, all drawn with a thick black stroke. The entire composition is grouped and centered. The code uses the React library to define and render the SVG, while D3’s `arc` function generates the path for the smile.

Loading thumbnail…

Fork of Smiley Face Part III

A stylized smiley face rendered as SVG uses React components to define circles, a polygon nose, and a mouth path, with D3’s `arc` generator for the curved mouth. The face’s head, eyes, and nose are positioned via translations, while eyebrows and mouth are omitted from the final markup despite README mention of tweaks. The example demonstrates mixing React’s declarative JSX with D3’s geometry helpers, using hardcoded coordinates and stroke styling to build a static, cartoon-like SVG scene.

Loading thumbnail…

Fork of homework smiley face

A forked smiley face is rendered as a static SVG visualization, composed of a large circle face, two eyes, a mouth, and several decorative lines. The graphic is drawn using React components that generate SVG elements, including circles, ellipses, paths, and lines. D3’s `arc` API is used to create the mouth’s curved path, while SVG shape properties control the stroke widths, colors, and positions of the facial features, producing a simple, stylized character.

Loading thumbnail…

Fork of homework smiley face

A stylized smiley face is rendered as an SVG graphic using React and D3 v7. The face consists of a black circular head with white and green eyes, a purple nose, and a mouth drawn as an arc using D3's `arc()` generator. Additional SVG elements like lines and ellipses form hair and facial details. The code defines geometric constants for positioning and uses React's `ReactDOM.render` to mount the component, with the SVG canvas sized at 960 by 500 pixels.

Loading thumbnail…

Fork of Fork of Smiley Face Part III

A React application renders a stylized smiley face in SVG, featuring asymmetrical eyes, a purple triangular nose, arcs for eyebrows, and a rotated mouth with a subtle inner line. The face is centered on a yellow circle with a black stroke, and includes hair drawn as a path. D3’s `arc()` generator creates the eyebrow arcs and mouth shapes, which are positioned and rotated using SVG transform attributes. React manages the component structure, while HTML and CSS provide the page layout.

Loading thumbnail…

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

A yellow smiley face rendered in SVG cycles through a two-second animation in which its eyebrows rise and fall. Built entirely with D3.js v5, the example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-generated mouth to a central group. The d3.arc function creates the mouth's path, while chained transition() calls with specified durations animate the eyebrow group's vertical position.