G

gunasindhuja

@gunasindhuja·18 public vizzes

Loading thumbnail…

ICE - 8 - Map

This example presents a choropleth map of India's administrative regions, coloring each state according to its name using a categorical color scale. It renders the map with D3's `geoPath` and a Mercator projection, drawing state boundaries as SVG paths with white strokes. Data is loaded from a GeoJSON file hosted on GitHub, processed with `topojson`'s `feature` function, and each state is labeled at its centroid. The visualization uses D3 v5 within a React framework, with styling applied via CSS classes.

Loading thumbnail…

ICE - 8 - World Map

This interactive world map displays countries as green regions on a blue sphere, highlighting each country in red on hover. The visualization uses a TopoJSON file containing geographic data, loaded from a GitHub gist, and renders the map using SVG paths. Built with React and D3 v5, the code employs D3’s `geoEquirectangular` projection and `geoPath` to generate the map, while the `topojson.feature` function converts the TopoJSON data into GeoJSON features for country boundaries.

Loading thumbnail…

ICE 8 : Family Tree

This interactive family tree visualizes the lineage of the Maurya dynasty, starting from Chandragupta Maurya and branching to descendants like Bindusara and Ashoka. Built with React and D3.js, the tree uses animated transitions to reposition nodes and links over a 1-second duration. Each node is a colored circle with a label, and data is structured as nested JSON objects. The D3 layout tree algorithm computes node positions, while custom SVG paths and a diagonal projection connect parent-child relationships.

Loading thumbnail…

ICE - 8 - SOCIAL NETWORK

A social network of 11 named people and 11 weighted connections is visualized as a force-directed graph, with nodes representing individuals and link thickness encoding connection weight. The graph loads from a local `graph.json` file, and the D3 v4 library builds an SVG scene with circles and text labels. Using `d3.layout.force` with gravity, charge, and distance parameters, the simulation positions nodes dynamically, while user interaction enables dragging to rearrange the layout. Styling applies a pink-and-red color palette to links and node strokes.

Loading thumbnail…

ICE-7: Area Chart

This area chart visualizes global video game sales across years, using a shaded region beneath a line to emphasize cumulative sales trends. The data is loaded from a CSV file and processed with D3 v5. The visualization leverages D3's `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` generators to construct the SVG plot, with custom styling applied via CSS for the chart's colors and typography.

Loading thumbnail…

ICE-7 Line Chart

This line chart visualizes global video game sales over time, showing sales trends across years. The visualization uses a time-based x-axis for years and a linear y-axis for sales in millions, with a bold pink line tracing the data points. The code relies on D3 v5 modules including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`, rendering as SVG. It pulls CSV data from a GitHub Gist, parses the year and sales values, and slices the first 180 records before drawing the chart with custom axis labels and gridlines.

Loading thumbnail…

ICE-7 : Pie Chart

This pie chart displays the scores of 10 selected games from a CSV dataset, with each slice colored by game name and accompanied by a legend showing the game and its numeric score. The visualization uses d3.pie and d3.arc to generate the circular segments, with d3.scaleOrdinal assigning colors from a predefined range. Data is loaded asynchronously via d3.csv from a Gist URL, and the SVG rendering includes custom styled text and legends on a black background.

Loading thumbnail…

ICE-7: Reusable D3 Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, where each flower is represented by a symbol colored by species (setosa, versicolor, virginica). The plot cycles through different attribute pairs on the x-axis every second, animating transitions between views. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` to render SVG marks, with data loaded from a CSV via `d3.csv`. A legend and title overlay the visualization.

Loading thumbnail…

ICE-7: Reusable D3 Scatter Plot

This visualization presents the Iris Dataset in a reusable D3 scatter plot, cycling through four variable pairings every three seconds. Implemented as a custom `scatterPlot` function, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `symbols` (cross, diamond, square) to distinguish species, and SVG paths for marks. The plot updates dynamically by changing the `xValue` accessor and re-invoking the chart, with axes redrawn via `d3.axisLeft` and `d3.axisBottom`. Animated transitions are absent; the interval simply triggers fresh renders.

Loading thumbnail…

Penguin Dataset Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length and body mass for individual penguins, with point colors distinguishing three species. The visualization also encodes culmen length and depth as circle radii, revealing relationships across multiple morphological traits. Rendered as SVG using D3 v5 within a React framework, it employs scaleLinear, extent, axisLeft, and axisBottom to construct the axes and scales, with data loaded asynchronously via csv from a GitHub Gist.

Loading thumbnail…

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

This example displays review scores for a selection of video games as a horizontal bar chart, with game names on the y-axis and score values on the x-axis. It uses React for component structure and state management, while D3 v5 functions like `scaleBand`, `scaleLinear`, and `max` handle data scaling and layout. The data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles. D3’s axis ticks are manually generated through `xScale.ticks()`, and the chart is styled with red gridlines.

Loading thumbnail…

ICE5

This page displays metadata about a video game dataset, including file size in kilobytes, row count, and column count, rendered as styled text against a custom background image. The code loads comma-separated values from a remote CSV file using D3.js v7’s `d3.csv` method, then calculates the formatted data length with `d3.csvFormat` and updates the DOM via `textContent`. Styling relies on CSS for layout and visual effects, while the background uses a remote SVG image.

Loading thumbnail…

Fork of Fork of Tweak a Face Assignment by Enze Liu

A panda face built from basic SVG shapes—circles, arcs, and paths—is rendered inside a React component. The face uses red and pink circles for the head and cheeks, black arcs for the eyes and ears, and a half-circle arc for the nose, with a curved mouth made from two symmetric arcs. The code defines each shape using D3’s `arc()` API, then applies rotate and translate transforms to position features symmetrically. All elements are drawn in an SVG coordinate system fixed at 960 by 500 pixels, with no interactive behavior.

Loading thumbnail…

Fork of Visualization

A smiley face drawn with SVG elements animates its eyebrows in a continuous up-and-down motion. Built with D3.js v5, the code constructs the face using circles for the eyes, rectangles for the eyebrows, and a path created with the `d3.arc` function for the mouth. The animation relies on D3's `.transition().duration(2000)` method, sequentially shifting the eyebrow group's transform attribute to create the repetitive movement. The SVG canvas is 960 by 500 pixels, with the face centered via a transform.

Loading thumbnail…

Fork of Viz

A fork of an existing D3.js visualization renders an animated smiley face using SVG primitives, with a yellow head, purple fill, and white eyes. The code uses fundamental DOM manipulation methods like `select`, `append`, and `attr` from D3 v5 to build the face, while `transition().duration()` animates the eyebrows moving up and down over two seconds. The face is constructed from circles, rectangles, and arc paths, drawn on a 960×500 SVG canvas. This example demonstrates basic D3.js shape creation and animation without any external data source.

Loading thumbnail…

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

A yellow smiley face is drawn in an SVG canvas, featuring two eyes and a mouth created with D3.js's `select` and `arc` functions. The face centers on a group, with circles for the eyes and a path for the smiling mouth. Eyebrows, rendered as rectangles, animate vertically over two seconds using chained `transition` calls, moving up and then back down. The SVG dimensions are read from the element, and all shapes are styled with fills and strokes.

Loading thumbnail…

Fork of Viz

A cartoon face rendered with D3.js v5 in SVG animates its eyebrows with chained transitions. The code builds a yellow circular head, two eyes, and a mouth shaped by an arc generator with defined inner and outer radii. Eyebrow rectangles transition vertically up and down over two seconds each, using `selection.transition()` to create a looping bounce. The visualization runs in a React framework on a fixed 960×500 canvas, demonstrating basic SVG shape construction and timed attribute interpolation without external data.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiley face rendered as an SVG graphic using React and D3. The face consists of three circles—a yellow head with a black stroke, two eyes—and a mouth drawn with a D3 arc path generator. The code uses React’s `ReactDOM.render` to mount the SVG, while `d3.arc()` defines the mouth’s inner and outer radii and angular range. All shapes are positioned via SVG circle and path elements within a transformed group, with dimensions hardcoded in the component.