JSFiddle - React, Tailwind, and code Playground

by Óscar Gómez Alcañiz

HTML

<div id="family-tree"></div>

SCSS

$pad: .4em;
$bg-m: #dfe;
$bg-f: adjust-hue($bg-m, 180);

#family-tree {
  background: #ffc;
  padding: $pad;
}
.member {
  border: 1px solid #ccc;
  border-radius: $pad/2;
  padding: $pad/2 $pad;
  background: #ddd;
  color: #999;
  margin: $pad;
  position: relative;
  &:after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
    height: 1em;
  }
}
.male {
  color: darken($bg-m, 60%);
  background: $bg-m;
  border-color: darken($bg-m, 20%);
  &:after {
    content: "♂";
  }
}
.female {
  color: darken($bg-f, 60%);
  background: $bg-f;
  border-color: darken($bg-f, 20%);
  &:after {
    content: "♀";
  }
}

Babel + JSX

const family = [
  {
  	id: 1,
    name: 'Isaac Rangel',
    gender: 'm',
    born: 1899,
    spouse: 2
  },
  {
  	id: 2,
    name: 'Aurora Soler Sorní',
    gender: 'f',
    born: 1899,
    spouse: 1
  },
	{
    id: 3,
  	name: 'Consuelo Rangel Soler',
    gender: 'f',
    born: 1931,
    parents: [1, 2]
  },
  {
  	id: 4,
    name: 'Francisco Rangel Soler',
    gender: 'm',
    born: 1926,
    parents: [1, 2]
  },
  {
    id: 5,
  	name: 'Aurora Rangel Soler',
    gender: 'f',
    born: 1928,
    parents: [1, 2]
  },
  {
    id: 6,
  	name: 'Ramón Rangel Soler',
    gender: 'm',
    born: 1924,
    parents: [1, 2]
  },
  {
    id: 7,
  	name: 'Ángel Alcañiz',
    gender: 'm',
    born: 1924
  },
  {
    id: 8,
  	name: 'Amparo Ortiz',
    gender: 'f',
    born: 1924
  },
  {
    id: 9,
  	name: 'Ernesto Ribes',
    gender: 'm',
    born: 1927
  },
  {
    id: 10,
  	name: 'Consuelo Gascó',
    gender: 'f',
    born: 1924
  },
  {
    id: 11,
  	name: 'Ramón Rangel Gascó',
    gender: 'm',
    born: 1956,
    parents: [6, 10]
  },
  {
    id: 12,
  	name: 'Chelo Rangel Gascó',
    gender: 'f',
    born: 1955,
    parents: [6, 10]
  },
  {
    id: 13,
  	name: 'Aurora Rangel Gascó',
    gender: 'f',
    born: 1962,
    parents: [6, 10]
  },
  {
    id: 14,
  	name: 'Gabriel Rangel Gascó',
    gender: 'm',
    born: 1961,
    parents: [6, 10]
  },
  {
    id: 15,
  	name: 'Nuria Rangel Gascó',
    gender: 'f',
    born: 1964,
    parents: [6, 10]
  },
  {
    id: 12,
  	name: 'Esperanza Rangel Gascó',
    gender: 'f',
    born: 1966,
    parents: [6, 10]
  }
];

class FamilyTree {
  constructor(family) {
  	this.family = family;
  }
  
  draw(where = '#family-tree') {
    d3.select(where)
      .selectAll('.member')
      .data(family)
      .enter()
      .append('div')
      .classed('member', true)
      .classed('male', m => m.gender === 'm' ? 
      	true : false)
      .classed('female', m => m.gender === 'f' ? 
      	true : false)
      .text(m =>...