Old school D3 from simpler times

All examples By author By category About

noblemillie

Full window Github gist

bar w text labels

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    dvi
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
 	var w = 700,
      h = 200
  		barPadding = 1;

//   var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12 ];

var dataset = [
                  [   5,   20 ],
                  [ 480,   90 ],
                  [ 250,   50 ],
                  [ 100,   33 ],
                  [ 330,   95 ],
                  [ 410,   12 ],
                  [ 475,   44 ],
                  [  25,   67 ],
                  [  85,   21 ],
                  [ 220,   88 ]
              ];

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
 
 svg.selectAll("circle")  
   .data(dataset)
   .enter()
   .append("circle")
	 .attr("stroke", function(d) {
     return "rgb(10, 100, " + Math.round(d[1] * 10) + ")";
		})
 	 .attr("fill", function(d) {
     return "rgb(100, 10, " + Math.round(d[1] /6) + ")";
		})
 	.attr('stroke-width', '3px')
   .attr("cx", function(d) {
       return d[0];
   })
   .attr("cy", function(d) {
       return d[1];
   })
   .attr("r", 10);
    
    
//    svg.selectAll("rect")
//    .data(dataset)
//    .enter()
//    .append("rect")
//    .attr("fill", function(d) {
//     return "rgb(10, 100, " + Math.round(d * 10) + ")";
// 		})
//    .attr("x", function(d, i) {
//        return i * (w / dataset.length);
//    })
//    .attr("y", function(d) {
//        return h - (d * 4);
//    })
//    .attr("width", function(d){
//      return w / dataset.length - 32})
//    .attr("height", function(d){
//      return d * 6;
//    }); 
    
    
// svg.selectAll("text")
//    .data(dataset)
//    .enter()
//    .append("text")
//  		.text(function(d) {
//        return d;
//    })   
//   .attr("x", function(d, i) {
//  		return i * (w / dataset.length) + 12;
//    })
//    .attr("y", function(d) {
//        return h - (d * 4)+15;
//    })
//    .attr("font-family", "sans-serif")
//    .attr("font-size", "15px")
//    .attr("fill", "white")
//    .attr("text-anchor", "middle");

svg.selectAll("text")  // <-- Note "text", not "circle" or "rect"
   .data(dataset)
   .enter()
   .append("text")
		.text(function(d) {
       return d[0] + "," + d[1];
   })
   .attr("x", function(d) {
       return d[0] - 20;
   })
   .attr("y", function(d) {
       return d[1] - 15;
   })
   .attr("font-family", "sans-serif")
   .attr("font-size", "14px")
   .attr("fill", "red");

</script>
</body>

https://d3js.org/d3.v4.min.js