Skip to content

Instantly share code, notes, and snippets.

@avimoondra

avimoondra/index.html

Last active August 29, 2015 14:11
Show Gist options
  • Save avimoondra/f0572ab7d097c46b383d to your computer and use it in GitHub Desktop.
Save avimoondra/f0572ab7d097c46b383d to your computer and use it in GitHub Desktop.
Download ZIP
Modality
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<style>
#panelWrapper {
width: 180px;
border: solid #808080 1px;
padding: 10px;
display: inline-block;
position: fixed;
margin-top: 10px;
}
.chartWrapper{
display: inline-block;
}
.separator {
margin-bottom: 10px;
height: 1px;
background-color: #808080;
}
.buttonRow{
width: 50%;
margin: 0 auto;
}
.chart .bar rect{
fill: #569BBD;
}
.chart {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<div>
<div id="uniModal" class="chartWrapper">
<div class="svgWrapper"></div>
<div class="buttonRow">
<button type="button" class="btn btn-sm btn-default dropButton">Drop</button>
<button type="button" class="btn btn-sm btn-default resetButton disabled">Reset</button>
</div>
</div>
<div id="biModal" class="chartWrapper">
<div class="svgWrapper"></div>
<div class="buttonRow">
<button type="button" class="btn btn-sm btn-default dropButton">Drop</button>
<button type="button" class="btn btn-sm btn-default resetButton disabled">Reset</button>
</div>
</div>
<div id="multiModal" class="chartWrapper">
<div class="svgWrapper"></div>
<div class="buttonRow">
<button type="button" class="btn btn-sm btn-default dropButton">Drop</button>
<button type="button" class="btn btn-sm btn-default resetButton disabled">Reset</button>
</div>
</div>
<div id="panelWrapper">
<div>
<p> Histogram Modes</p>
<div class="separator"></div>
<p>
Drop a "limp spaghetti" to see the peaks in the distribution more clearly. From left to right, we observe single modal, bimodal, and multimodal distributions.
</p>
</div>
</div>
</div>
<script>
var margin = {top: 20, right: 30, bottom: 30, left: 30},
width = 220 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
chartData = {};
var drawHistogram = function(chartName, histData, lineData){
var chart = d3.select("#" + chartName + " .svgWrapper").append("svg")
.attr("class","chart " + chartName)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scale.linear()
.domain([0, d3.max(histData, function(d) { return d; })])
.range([0, width]);
var data = d3.layout.histogram()
.bins(x.ticks(14))
(histData);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.y; })])
.range([height, 0]);
chartData[chartName] = {};
chartData[chartName]["xScale"] = x;
chartData[chartName]["yScale"] = y;
var bar = chart.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
bar.append("rect")
.attr("x", 1)
.attr("width", x(data[0].dx) - 1)
.attr("height", function(d) { return height - y(d.y); });
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.call(yAxis)
chartData[chartName]["end"] = lineData;
startLineData = [];
maxY= d3.max(data, function(d) { return d.y; }) - 0.5;
console.log(maxY)
for(index in lineData){
point = {};
point["x"] = lineData[index].x;
point["y"] = maxY
startLineData.push(point)
}
chartData[chartName]["start"] = startLineData;
drawNoodle(chartName);
}
var drawNoodle = function(chartName){
d3.select("path." + chartName).remove();
lineDataStart = chartData[chartName]["start"];
x = chartData[chartName]["xScale"];
y = chartData[chartName]["yScale"];
var lineFunction = d3.svg.line()
.x(function(d) { return margin.left + x(d.x); })
.y(function(d) { return y(d.y); })
.interpolate("basis");
var lineGraph = d3.select(".chart." + chartName).append("path")
.attr("class",chartName)
.attr("d", lineFunction(lineDataStart))
.attr("stroke", "#EDDDA9")
.attr("stroke-width", 4)
.attr("fill", "none");
}
var dropNoodle = function(chartName){
lineDataEnd = chartData[chartName]["end"];
x = chartData[chartName]["xScale"];
y = chartData[chartName]["yScale"];
var lineFunction = d3.svg.line()
.x(function(d) { return margin.left + x(d.x); })
.y(function(d) { return y(d.y); })
.interpolate("basis");
var lineGraph = d3.select("path." + chartName)
.transition()
.attr("d", lineFunction(lineDataEnd))
}
d3.json("../static/data/00/modalData.json", function(error, data) {
histData = data["histData"];
lineData = data["lineData"];
//console.log(lineData["biModal"])
for (key in histData) {
console.log(lineData)
drawHistogram(key, histData[key], lineData[key]);
}
d3.selectAll(".dropButton").on("click", function(){
chartName = $(this).parents(".chartWrapper").attr("id");
dropNoodle(chartName);
$(this).siblings('.resetButton').removeClass("disabled");
$(this).addClass("disabled");
})
d3.selectAll(".resetButton").on("click", function(){
chartName = $(this).parents(".chartWrapper").attr("id");
drawNoodle(chartName);
$(this).siblings('.dropButton').removeClass("disabled");
$(this).addClass("disabled");
})
});
</script>
</body>
Raw
modalData.json
{
"histData":
{
"uniModal": [7.687, 3.466, 8.545, 4.276, 5.06, 7.471, 11.976, 12.077, 5.479, 2.596, 5.698, 2.751, 3.416, 3.553, 9.785, 8.244, 11.545, 6.138, 5.224, 1.835, 7.78, 3.296, 4.168, 6.979, 2.152, 8.061, 7.118, 9.654, 4.672, 6.08, 4.323, 4.439, 4.888, 4.577, 2.765, 11.493, 2.288, 5.74, 4.682, 14.511, 2.603, 10.481, 3.837, 9.225, 9.544, 9.008, 8.274, 10.491, 3.031, 13.287, 5.501, 11.441, 2.952, 4.251, 3.366, 9.531, 2.248, 12.383, 4.716, 3.876, 1.639, 13.624, 16.278, 1.753, 8.088],
"biModal": [9.779, 2.461, 10.855, 4.906, 2.082, 0.495, 3.293, 1.568, 2.647, 7.333, 5.342, 2.883, 10.975, 4.485, 8.248, 2.428, 3.01, 4.164, 2.766, 7.803, 4.808, 2.33, 16.393, 15.934, 18.849, 16.281, 18.958, 12.436, 18.053, 18.675, 15.581, 18.794, 16.933, 17.704, 16.778, 16.393, 14.54, 17.395, 18.318, 15.325, 15.979, 15.663, 16.466, 17.671, 14.677, 17.716, 17.448, 16.734, 16.359, 19.392, 14.851, 16.476, 18.292, 14.943, 16.913, 13.929, 16.955, 14.653, 17.638, 18.759, 17.587, 17.228],
"multiModal": [4.819, 0.958, 0.943, 0.182, 0.744, 0.713, 2.01, 3.294, 6.932, 2.861, 1.183, 0.779, 2.086, 5.449, 3.172, 6.462, 1.85, 1.006, 4.223, 3.125, 13.621, 11.475, 11.985, 11.605, 10.955, 11.159, 9.329, 9.863, 11.329, 11.668, 13.277, 11.802, 11.843, 10.789, 10.492, 12.178, 11.834, 12.349, 12.47, 12.629, 11.176, 11.253, 10.147, 12.209, 9.839, 11.742, 10.552, 12.266, 10.026, 12.55, 10.459, 13.111, 10.789, 13.371, 11.531, 21.031, 18.297, 18.276, 17.479, 19.921, 20.064, 17.854, 18.255, 16.268, 18.391, 17.369, 15.905, 17.091, 20.028, 17.454, 18.063, 16.417, 18.824, 16.649, 16.737, 17.569, 18.151, 18.381, 17.822, 21.437, 17.06, 17.929, 19.995, 17.221, 17.995, 20.171, 18.677, 16.582, 17.458, 17.743, 18.357, 18.878, 19.189, 18.19, 19.956, 21.355, 19.451]
},
"lineData":
{
"uniModal": [
{ "x": 0, "y": 3.5},
{ "x": 4, "y": 12.25},
{ "x": 10, "y": 5.0},
{ "x": 17, "y": 0.25}],
"biModal": [
{ "x": 0, "y": 3.5},
{ "x": 3, "y": 11},
{ "x": 6, "y": 4},
{ "x": 12, "y": 2},
{ "x": 16, "y": 32},
{ "x": 19, "y": 25}],
"multiModal": [
{ "x": 0, "y": 8},
{ "x": 1.5, "y": 11},
{ "x": 6, "y": 1},
{ "x": 8, "y": 3},
{ "x": 10, "y": 30},
{ "x": 14.5, "y": 10},
{ "x": 17.5, "y": 22.5},
{ "x": 19.5, "y": 24},
{ "x": 21, "y": 20}]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment