Old school D3 from simpler times

All examples By author By category About

herbps10

Full window Github gist

comparison

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/vaclab/d3-tip/d3-tip.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<style>
    body { 
      margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
      font-family: "Open Sans", sans-serif;
		}
    
    .d3-tip {
      line-height: 1.2;
      text-align: left;
      padding: 12px;
      background: rgba(250, 246, 186, 0.95);
      color: black;
      border-radius: 2px;
      pointer-events: none;
      text-align: center;
    }
  </style>
</head>

<body>
  <script>
    var margin = { top: 70, right: 10, bottom: 210, left: 110 };
		var width = 700 - margin.right - margin.left;
    var height = 600 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    	.attr('shape-rendering', 'crisp-edges')
    	.append('g')
    		.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var data = [
      {
        "prettyname2": "2,4-Dichlorophenol",
        "50%": 0.20,
        "special": "0",
        "source": "DMAK"
      },
      {
        "prettyname2": "2,5-Dichlorophenol",
        "50%": 0.84,
        "special": "0",
        "source": "DMAK"
      },
      {
        "prettyname2": "Benzophenone-3",
        "50%": 23.47,
        "special": "1",
        "source": "DMAK"
      },
      {
        "prettyname2": "Bisphenol A",
        "50%": 0.58,
        "special": "0",
        "source": "DMAK"
      },
      {
        "prettyname2": "Bisphenol F",
        "50%": 0.88,
        "special": "1",
        "source": "DMAK"
      },
      {
        "prettyname2": "Bisphenol S",
        "50%": 0.47,
        "special": "1",
        "source": "DMAK"
      },
      {
        "prettyname2": "Butyl Paraben",
        "50%": 0.09,
        "special": "0",
        "source": "DMAK"
      },
      {
        "prettyname2": "Ethyl Paraben",
        "50%": 1.52,
        "special": "1",
        "source": "DMAK"
      },
      {
        "prettyname2": "Methyl Paraben",
        "50%": 13.76,
        "special": "0",
        "source": "DMAK"
      },
      {
        "prettyname2": "Propyl Paraben",
        "50%": 1.89,
        "special": "0",
        "source": "DMAK"
      },
      {
        "prettyname2": "Triclosan",
        "50%": 0.62,
        "special": "0",
        "source": "DMAK"
      },
      {
        "prettyname2": "2,4-Dichlorophenol",
        "50%": 0.6,
        "special": "2",
        "source": "NHANES"
      },
      {
        "prettyname2": "2,5-Dichlorophenol",
        "50%": 1.8,
        "special": "2",
        "source": "NHANES"
      },
      {
        "prettyname2": "Benzophenone-3",
        "50%": 21,
        "special": "2",
        "source": "NHANES"
      },
      {
        "prettyname2": "Bisphenol A",
        "50%": 1.3,
        "special": "2",
        "source": "NHANES"
      },
      {
        "prettyname2": "Bisphenol F",
        "50%": 0.4,
        "special": "2",
        "source": "NHANES"
      },
      {
        "prettyname2": "Bisphenol S",
        "50%": 0.4,
        "special": "2",
        "source": "NHANES"
      },
      {
        "prettyname2": "Butyl Paraben",
        "50%": 0.1414,
        "special": "2",
        "source": "NHANES"
      },
      {
        "prettyname2": "Ethyl Paraben",
        "50%": 0.7071,
        "special": "2",
        "source": "NHANES"
      },
      {
        "prettyname2": "Methyl Paraben",
        "50%": 41.7,
        "special": "2",
        "source": "NHANES"
      },
      {
        "prettyname2": "Propyl Paraben",
        "50%": 4.8,
        "special": "2",
        "source": "NHANES"
      },
      {
        "prettyname2": "Triclosan",
        "50%": 6.3,
        "special": "2",
        "source": "NHANES"
      }
    ] 
    
    data.sort(function(a, b) { return d3.descending(a['50%'], b['50%']); });
    
    var tip = d3.tip()
    	.attr('class', 'd3-tip')
    	.offset([20, 0])
    	.html(function(d) {
       	var subset = data.filter(function(x) { return x.source == "DMAK" && x.prettyname2 == d; })
        var html = "<strong>" + d + "</strong>";
        if(subset[0].special == 1) {
          html += "<br/>median concentration in study<br/>was higher than U.S. median";
        }
        return html;
      })
    
    var x = d3.scaleBand()
    	.padding(0.15)
    	.domain(data.map(function(d) { return d.prettyname2; }))
    	.range([0, width]);
    
    var extent = d3.extent(data.map(function(d) { return d['50%']; }));
    extent[1] *= 1.5;
    extent[0] /= 1.5;
    
    var y = d3.scaleLog()
    	.domain(extent)
    	.range([height, 0]);
    
    var xaxis = d3.axisBottom(x);
    var yaxis = d3.axisLeft(y)
    	.tickValues([1, 10])
    	.tickFormat(d3.format("1"));
    
    svg.append('g')
    	.attr('transform', 'translate(0, ' + height + ')')
    	.call(xaxis)
    	.selectAll('text')
    	.attr('transform', 'rotate(-45)')
    	.attr('text-anchor', 'end')
    	.style('font-size', '12px')
    
    svg.append('g')
    	.call(yaxis);
   
    svg.append('text')
    	.text("Median concentration (ng/mL)")
    	.attr('text-anchor', 'middle')
    	.attr('transform', 'translate(-35, ' + (height / 2) + ') rotate(-90) ');
    
    svg.append('text')
    	.text("Are chemical levels in Action Kit participants higher or lower")
    	.style('font-size', '14pt')
    	.style('font-weight', 'bold')
    	.attr('transform', 'translate(0, -50)')
    
    svg.append('text')
    	.text("than typical levels in the United States?")
    	.style('font-size', '14pt')
    	.style('font-weight', 'bold')
    	.attr('transform', 'translate(0, -30)')
    
    var rects = svg.selectAll('rect')
    	.data(x.domain())
    	.enter()
    	.append('rect')
    	.attr('height', height)
    	.attr('width', x.bandwidth())
    	.attr('transform', function(d) { return "translate(" + x(d) + ", 0)"; })
    	.style('fill', '#eee')
    	.on('mouseover', tip.show)
    	.on('mouseout', tip.hide);
    
    var points = svg.selectAll('.point')
    	.data(data)
    	.enter()
    	.append('g')
    	.attr('transform', function(d) {
      	return "translate(" + (x(d.prettyname2)) + ", 0)";
      })
    	.attr('class', 'point')
    
    points
    	.append('g')
    	.attr('transform', function(d) {
      	return "translate(" + (x.bandwidth() / 2) + ", " + y(d['50%']) + ")";
    	})
    	.append('path')
    	.attr('d', function(d) {
      	if(d.source == "NHANES") {
          return d3.symbol().size(100).type(d3.symbolSquare)(d)
        }
      	else {
          return d3.symbol().size(100).type(d3.symbolTriangle)(d);
        }
    	})
    	.attr('transform', function(d) {
      	if(d.source == "NHANES") {
          return "scale(1.5, 0.5)";
        }
      	else if(d.special == 0) {
          return "rotate(180) "
        }
      	else {
          return "";
        }
    	})
      .style('fill', function(d) {
     		if(d.source == "NHANES") {
          return "black";
        }
      	else if(d.special == 0) {
        	return "steelblue";
        }
      	else if(d.special == 1) {
          return "orange";
        }
    	})
    
     var legendEnter = svg.append('g')
     	.attr('class', 'legend')
     	.attr('transform', 'translate(' + (width - 350) + ',' + (height + 120) + ')')
      .selectAll('.legend-item')
     	.data([{ symbol: d3.symbolTriangle, transform: "", color: 'orange', text: "Detox Me Action Kit median (above NHANES)"},
             { symbol: d3.symbolSquare, transform: "scale(1.5, 0.5)", color: 'black', text: "NHANES median"},
             { symbol: d3.symbolTriangle, transform: "rotate(180)", color: 'steelblue', text: "Detox Me Action Kit median (below NHANES)"}])
      .enter();
    
     var legendGroup = legendEnter
      .append('g')
    		.attr('class', 'legend-item')
     		.attr('transform', function(d, i) { return "translate(0," + (i * 20) + ")"});
    
     legendGroup.append('text')
     	.text(function(d) { return d.text; })
     	.attr('transform', 'translate(20, 0)');
     
     legendGroup.append('path')
       .attr('d', function(d) { return d3.symbol().type(d.symbol)(); })
     	 .attr('transform', function(d) { return d.transform; })
     	 .style('fill', function(d) { return d.color; })
    
     svg.call(tip);

</script>
</body>

Updated missing url https://cdn.rawgit.com/VACLab/d3-tip/master/d3-tip.js to https://cdn.jsdelivr.net/gh/vaclab/d3-tip/d3-tip.js

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

https://cdn.rawgit.com/VACLab/d3-tip/master/d3-tip.js