S

sugunagar

@sugunagar·16 public vizzes

Loading thumbnail…

mammals

This interactive visualization displays a classification tree of mammals, branching from the class Mammalia into orders like Carnivora and Artiodactyla, then to families and specific species such as the gray wolf and domestic cow. The tree uses collapsible nodes and animated transitions, with users able to click to expand or contract branches. Built with React, the code leverages D3.js alongside SVG elements to render the hierarchy, with styling applied through CSS. The layout is computed using D3’s tree layout and diagonal projection functions, and animations are driven by D3’s transition mechanisms.

Loading thumbnail…

CountryMap

This interactive map of India uses a Mercator projection to display state and district boundaries, with clickable regions that zoom and pan to focus on a selected area while triggering a callback. Built with React and D3 v6, it leverages `geoMercator`, `geoPath`, and `d3.zoom` to handle scaling and transitions. The geographic data is fetched from a TopoJSON file via `topojson.feature`, and the SVG polygons are rendered with smooth 500ms zoom animations.

Loading thumbnail…

SocialNetwork

A force-directed network diagram visualizes friendship ties among seven people, with nodes labeled by name and links styled as green lines with arrowheads to indicate direction. The graph uses `d3.forceSimulation` with link distance, charge, collision, and centering forces to position nodes, which are rendered as purple-stroked circles with bold text labels. Users can drag nodes to rearrange the layout, and hovering highlights a node with a cyan outline. Data comes from a JSON file containing nodes and links with relationship and value attributes, rendered as SVG.

Loading thumbnail…

WorldMap

This world map uses an orthographic projection to display Earth as a globe, with countries filled in cyan and outlined in maroon. A graticule is also drawn to show the projection’s coordinate grid. The visualization is built with React, using d3’s `geoPath` and `geoOrthographic` functions for map generation, and the `topojson` library’s `feature` function to parse country boundaries from the world-atlas dataset. The output is rendered as SVG.

Loading thumbnail…

ICE7 Area Chart

This area chart visualizes export values over a period of years, using a curved basis spline to smooth the line and a cyan fill to emphasize the area under the curve. The visualization loads data from a CSV file hosted on a GitHub gist, parsing years as dates and values as numbers. It renders to an SVG using D3 v6, with time-scaled x-axis and linear-scaled y-axis, both featuring gridlines and labeled axes. The chart's title and axis labels are styled prominently, and the y-axis tick labels are formatted to abbreviate large numbers.

Loading thumbnail…

ICE7

This pie chart visualizes export values across different years. It loads CSV data from a GitHub gist and renders an SVG donut chart using D3 v5’s `pie` and `arc` generators, with `scaleOrdinal` for section colors. Labels display formatted values via `format`, and a legend lists each year with its corresponding value.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width on the x-axis against sepal length on the y-axis. It uses distinct symbols for each iris species, generated via D3's `scaleOrdinal` and `symbol` APIs to differentiate categories. The plot is rendered as an SVG, with axes created using `axisLeft` and `axisBottom`. The reusable chart component, inspired by Bostock’s "Towards Reusable Charts," accepts configurable data, value accessors, margins, and symbol size, demonstrating a modular approach to D3 visualization.

Loading thumbnail…

ICE 7

This visualization displays the export values of countries over time, using a line chart to reveal trends across the years. The X-axis represents years as a time scale, while the Y-axis shows the export value, with both axes enhanced by grid lines and labeled clearly. Built with React and D3 v5, the code leverages `d3.csv` to load external data, then applies `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes. A `line` generator and SVG `path` element render the data as a single maroon line, with styling defined in CSS.

Loading thumbnail…

Fork of Scatter Plot Example

This scatter plot visualizes the relationship between flipper length and bill length in a penguin dataset, with points colored by sex (red for male, orange for female). Built with D3 v5 and React, the SVG chart uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and loads data via `d3.csv` from a GitHub gist. Circle elements are appended with `.append("circle")`, using opacity and hover effects defined in CSS.

Loading thumbnail…

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

This example shows the basic subscription cost of Netflix in 15 countries using a horizontal bar chart rendered as SVG. The visualization loads CSV data from a GitHub gist, processes it with d3.csv, and uses d3.scaleBand and d3.scaleLinear to map countries and costs to spatial positions. Rectangles encode the cost values, with d3.ticks generating gridlines and labels for the quantitative axis. React manages the component state and lifecycle via useState and useEffect, while d3-selection is used for axis formatting and data binding.

Loading thumbnail…

ICE5

This example displays metadata about a food order dataset, including its size in kilobytes, row count, and column count, presented as large text over a food-themed background image. The page loads a CSV file from a GitHub gist using D3 v7’s `d3.csv`, computes the formatted data length with `d3.csvFormat`, and updates the DOM via `textContent`. Styling relies on CSS for centered headings and background, while links provide access to the raw dataset.

Loading thumbnail…

Cat Smiling

This example renders a smiling cat face using React 17 and D3 v7’s `arc` generator to create the mouth, eyes, and ears as SVG paths. The cat is drawn with circles, ellipses, and lines for the head, pupils, whiskers, and facial features, all positioned within a single SVG element. D3’s `arc` function computes the curved shapes for the eyes, ears, and mouth, which are then transformed via SVG `rotate` and `translate` attributes. The visualization is static, with no data input, relying solely on hardcoded coordinates and styles.

Loading thumbnail…

Cat smiley

This example renders a cartoon cat face as a smiley using React and D3 version 7. It constructs the head, eyes, ears, and mouth through SVG shapes, with D3’s `arc` generator defining the curved paths for the ears, eyebrows, and open mouth. The cat’s features include purple ears, green and yellow accents, blue irises, and a brown mouth, all positioned within a fixed 900×460 viewport. The rendering relies on React elements for circles, lines, and ellipses, while D3 computes the arc geometries used in the `path` elements.

Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js v5. The code uses `d3.select` and `d3.append` to build circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrow movement is achieved through chained `transition().duration()` calls that shift the group’s transform. The example demonstrates fundamental DOM manipulation and transition sequencing with D3.

Loading thumbnail…

Fork of funn face

This example shows a stylized, cartoonish face built from layered SVG shapes, featuring gradient-filled cheeks, elliptical eyes, and a mouth with segmented teeth. The face is composed modularly in React components, with each facial feature defined as its own reusable component. The smile and teeth are drawn using d3-shape’s `arc` generator, while the rest of the face relies on standard SVG elements like circles, ellipses, and lines. D3 v7 provides the arc math, and React 18 handles rendering into an SVG container with a fixed viewport.

Loading thumbnail…

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

This example uses D3.js v5 to construct a smiley face from basic SVG shapes and animates its eyebrows. The face comprises a green circle, two eyes, a mouth drawn with an arc, and two rectangular eyebrows. D3’s `transition` API moves the eyebrows up and down in a two-second loop. The code builds the SVG scene by directly appending elements like `circle`, `rect`, and `path` to a centered group, using `d3.select` to target the SVG and `d3.arc` for the mouth’s path data.