Skip to content

Instantly share code, notes, and snippets.

@herbps10

herbps10/.block

Last active March 1, 2018 15:42
Show Gist options
  • Save herbps10/93bf9e1101a37a352b0d0da9673b9dc1 to your computer and use it in GitHub Desktop.
Save herbps10/93bf9e1101a37a352b0d0da9673b9dc1 to your computer and use it in GitHub Desktop.
Download ZIP
comparison
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.rawgit.com/VACLab/d3-tip/master/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment