rivalry profile

Credit

I started with this bubble chart from d3 in depth and I used the marvel data from this block

should be cool but not as cool as stamen

Built with blockbuilder.org

<meta charset="utf-8">
<head>
  <title>Force layout (foci)</title>
</head>

const colorScale = ['orange', 'lightblue', '#B19CD9'];
const xCenter = [150, 400, 650]

const handleLoadComplete = (heroes) => {
  
  //const answers = heroes[0].children.length;
  const centerChild = Math.floor(heroes.length/2)

// center node should be huge and only 1 of them
const nodes = heroes.map(function(d, i) {
  return {
    radius: (i === centerChild) ? 150 : 50,
    category: (i === centerChild) ? 1 : (i < centerChild) ? 0 : 2,
    profile: (i === centerChild) ? true : false,
    img: d.img,
  }
});

u.exit().remove();
}
  
const forceX = d3.forceX(width / 2).strength(0.015)
const forceY = d3.forceY(height / 5).strength(0.015)
  
  const simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody().strength(5))
  //.force('gravity',0.5)
  .force('x', d3.forceX().x(function(d) {
    return xCenter[d.category];
  }))
  .force('y',  forceY)
  .force('collision', d3.forceCollide().radius(function(d) {
    return d.radius;
  }))
  .on('tick', ticked);
}
    
    
d3.json("marvel.json").then(
	response => {
    
    const children = response.children;
    const heroes = children.filter(child => child.name === "Heroes")[0].children;
		console.log("heroes", heroes )
    
    handleLoadComplete(heroes);
    
  },
  error => {},
)    
    
    
  </script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/5.0.0/d3.min.js