JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<div id="chart"></div>

JavaScript

newdata = [{
  'Name': 'Andrew',
  'Country': 'US',
  'Start date': '2012-7-2',
  'Total': '30days',
  'starting point': 'Island'
}, {
  'Name': 'Kat',
  'Country': 'US',
  'Start date': '2012-2-2',
  'Total': '24days',
  'starting point': 'Island'
}, {
  'Name': 'Barry',
  'Country': 'France',
  'Start date': '2012-12-2',
  'Total': '22days',
  'starting point': 'Island'
}, {
  'Name': 'Ash',
  'Country': 'US',
  'Start date': '2015-2-2',
  'Total': '20days'
}, {
  'Name': 'Lucy',
  'Country': 'UK',
  'Start date': '2016-2-2',
  'Total': '35days'
}, {
  'Name': 'Gerry',
  'Country': 'US',
  'Start date': '2016-2-2',
  'Total': '40days'
}, {
  'Name': 'Alex',
  'Country': 'France',
  'Start date': '2016-2-2',
  'Total': '28days',
  'starting point': 'Island'
}, {
  'Name': 'Morgan',
  'Country': 'UK',
  'Start date': '2012-6-2',
  'Total': '24days',
  'starting point': 'Island'
}];

var nested_data = d3.nest()
  .key(function(d) {
    return d.Country;
  })
  .entries(newdata);
console.log(nested_data)

var canvas = d3.select('#chart')
  .attr('width', 350)
  .attr('height', 600)
  .attr('transform', 'translate(0,20)')

var country = canvas
  .selectAll(".country")
  .data(nested_data)

var countryEnter = country
  .enter().append('div')
  .attr('class', 'country')

countryEnter
  .append("p")
  .attr('class', 'label')
  .style('font-weight', 'bold')
  .text(function(d, i) {
    return d.key;
  })

countryEnter.selectAll('.name')
  .data(function(d) {
    return d.values;
  })
  .enter().append('p')
  .attr('class', 'name')
  .text(function(d) {
    return d.Name;
  })

nested_data.map(function(m) {
  m.values = m.values.filter(function(d) {
    return d['starting point'] == 'Island';
  })
})
console.log(nested_data)