rgarimella-viz

@rgarimella-viz·4 public vizzes

Let's make a face with D3.js

This example renders a hierarchical dataset of world regions and countries as a tidy tree visualization, with the root at the left and leaves extending rightward. The tree layout positions nodes in a parent-child structure, and horizontal links connect them using `d3.linkHorizontal`. Labels display each region’s name, with font size scaling by depth and text anchors varying for leaf versus internal nodes. The visualization supports pan and zoom via `d3.zoom`, and loads the nested JSON data using `d3.json`.

Jun 21, 2020

Loading thumbnail…

Let's make a face with D3.js

This example visualizes country populations as horizontal bars using D3.js v5 within a React framework, rendering to SVG. The bar chart displays each country’s population on the x-axis and country names on the y-axis, with bar widths scaled linearly via `d3.scaleLinear` and positions set by `d3.scaleBand`. The code loads data from a CSV file, multiplies population values by 10, and appends rectangles to the SVG. The visualization uses `d3.csv` for data loading and `d3.max` to determine the scale domain.

Jun 21, 2020

Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face using D3.js v5, rendered as an SVG. It draws a yellow circle for the head, blue eyes, eyebrows, and an arc-based mouth using D3’s `arc` generator. The code demonstrates how to manipulate SVG attributes like `cx`, `cy`, `r`, and `width`/`height` to position shapes relative to a central group, using `select` and `append`. No external data is involved; the visualization is entirely constructed from hardcoded dimensions and offsets.

Jun 21, 2020

Loading thumbnail…

Shapes with svg and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and paths—and style them using CSS classes. The shapes are nested inside a scaled and translated SVG group, showing how transforms affect their positions. The code uses raw SVG elements within an HTML page and applies styling through an external stylesheet, where the `.lines` class sets stroke color and width, and a descendant selector customizes the path's line join.

Jun 21, 2020