Old school D3 from simpler times

All examples By author By category About

sannehombroek

Full window Github gist

joining data

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>DOM Manipulation</title>
</head>

<style>
  body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
  }
  .person {
    height: 20px;
    position: relative;
  }
  .person .label {
    width: 90px;
    text-align: right;
  }
  .person .bar {
    height: 19px;
    background-color: grey;
    position: absolute;
    left: 100px;
  }
  .person div {
    display: inline-block;
  }
  .menu {
    margin-top: 20px;
  }
  circle {fill: #ddd;
    }
  circle.high {fill: orange;}
  g.item text {
	fill: black;
	font-size: 10px;
	text-anchor: middle;
	font-weight: bold;
}
</style>

<body>

<div id="wrapper">
  </div>

<div class="menu">
    <button onClick="sort();">Sort</button>
  </div>
	
 <svg class=a width="760" height="800">
	<g transform="translate(70, 100)">
  <g class="item" transform="translate(0, 0)"><circle r="40" /></g>
	<g class="item" transform="translate(120, 0)"><circle r="40" /></g>
	<g class="item" transform="translate(240, 0)"><circle r="40" /></g>
  <g class="item" transform="translate(360, 0)"><circle r="40" /></g>
	<g class="item" transform="translate(480, 0)"><circle r="40" /></g>
  <g class="item" transform="translate(600, 0)"><circle r="40" /></g>
  </g>  
  </svg>
 
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>

myData = [
  {
    "name": "Andy",
    "score": 37
  },
  {
    "name": "Beth",
    "score": 60
  },
  {
    "name": "Craig",
    "score": 31
  },
  {
    "name": "Diane",
    "score": 35
  },
  {
    "name": "Evelyn",
    "score": 38
  },
  {
  	"name": "Sanne",
  	"score": 80
  }
];
var barWidth = 300;
var barScale = d3.scaleLinear().domain([0, 100]).range([0, barWidth]);

var u = d3.select('#wrapper')
  .selectAll('.person')
  .data(myData);

var entering = u.enter()
  .append('div')
  .classed('person', true);

entering.append('div')
  .classed('label', true)
  .text(function(d) {
    return d.name;
  });

entering.append('div')
  .classed('bar', true)
  .style('width', function(d) {
    return barScale(d.score) + 'px';
  });

function sort() {
  d3.selectAll('.person')
    .sort(function(a, b) {
      return b.score - a.score;
  d3.selectAll('.person')
    });
  }
    
d3.selectAll('svg.a').selectAll('circle').data(myData)
d3.selectAll('svg.a').selectAll('g.item').data(myData)
d3.selectAll('svg.a').selectAll('circle').attr('r', function(d) {return d.score;});
d3.selectAll('svg.a').selectAll('g.item').append('text').text(function(d) {return d.name +', score:'+d.score});

</script>
</body>
</html>

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