score:2

Accepted answer

This will get you started, though I'd suggest you rework your data. Most D3 patterns begin with either arrays of arrays or arrays of objects. Objects containing arrays of various lengths will be difficult to work with.

const toy_data = {
  'abstract' : ['a'],
  'introduction' : ['b', 'c'],
  'methods' : ['d', 'e', 'f'],
  'findings' : ['g', 'h', 'i', 'j'],
  'conclusion' : ['k', 'l', 'm', 'n', 'o']
  }
  
 const margin = {top:10,left:90,bottom:25,right:10},
  width = 480 - margin.top - margin.bottom,
  height = 250 - margin.left - margin.right;
  
 const svg = d3.select('#chart')
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform','translate(' + margin.left + ',' + margin.top + ')')
 
 let rows = Object.getOwnPropertyNames(toy_data) 
 let cols = [];
 

 for(prop in toy_data) {
  cols = cols.concat(toy_data[prop])
 }
 const x = d3.scaleBand()
  .domain(cols)
  .range([0,width])
  
 const y = d3.scaleBand()
  .domain(rows)
  .range([0,height])
  
 svg.append('g')
  .call(d3.axisLeft(y))
 
 svg.append('g')
  .attr('transform','translate(0,' + height + ')')
  .call(d3.axisBottom(x))
  
for(prop in toy_data) {

  svg.selectAll(null)
    .data(toy_data[prop])
    .enter()
    .append('circle')
    .attr('cx', d => x(d) + x.bandwidth()/2)
    .attr('cy', y(prop) + y.bandwidth()/2)
    .attr('r', x.bandwidth()/4)
    .style('fill','steelblue')

}
 
 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="chart"><div>

UPDATE: I don't know the constraints of your data, but strictly from a D3 perspective, this would be easier to work with:

const toy_data = {
  'abstract' : ['a'],
  'introduction' : ['b', 'c'],
  'methods' : ['d', 'e', 'f'],
  'findings' : ['g', 'h', 'i', 'j'],
  'conclusion' : ['k', 'l', 'm', 'n', 'o']
 }
 
 let d3_data = [];
 for(prop in toy_data) {
   d3_data = d3_data.concat(toy_data[prop].map(d=> [prop, d]))
 }
 

      


Related Query