D3 Examples - comparison

xxxxxxxxxx
 
<!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>
​
    