Skip to main content
Log in
M

mesclics

@MesClics·4 public vizzes

Loading thumbnail…

Tests

This example tests a radial family tree visualization built with D3 v5, rendering individuals as colored arc segments arranged by generation. Each person’s arc spans from birth to death year, with color gradients indicating paternal and maternal lineage, and labels placed along the arcs. The code imports helper functions like `findGeneration` and `calcArcAngles` to compute positions, and uses SVG paths and gradients for rendering.

Mar 26, 2020
Loading thumbnail…

Data Visualization with D3

This example shows a simple yellow smiley face drawn as an SVG graphic. It uses D3 v5 selections to append and style circles for the face and eyes, and an arc generator to create the mouth path. The face is centered using SVG group transforms, with hardcoded dimensions for the eye spacing and offset.

Feb 26, 2020
Loading thumbnail…

Making Bar Charts

A horizontal bar chart displays population figures for ten countries, with bars sorted alphabetically by country name. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `csv` to load data from a local CSV file. Data values are converted from strings to numbers and scaled to fit an SVG canvas, with custom tick formatting replacing "G" with "B" for billion. The chart renders blue rectangles via SVG, with margins applied to accommodate axis labels, and removes default domain lines from the y-axis.

Feb 24, 2020
Loading thumbnail…

Data Visualization with D3

This example visualizes a family genealogy using D3.js and Canvas rendering. It displays individual records with birth and death dates, places, and gender classifications, organized into generations through a custom kinship code system. The visualization uses DOM elements for individual containers and a Canvas overlay to draw connecting lines between relatives. Data comes from a static JavaScript dataset, with helper functions in `indiv.js` determining gender, direct ancestry, and generation levels based on coded identifiers.

Feb 21, 2020