Built with blockbuilder.org
xxxxxxxxxx
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Chronological Diagram of Asia</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<script type="text/javascript" src="notesOnlyJSON.js"></script>
<style type="text/css">
.chart {
shape-rendering: crispEdges;
}
.mini text {
font: 9px sans-serif;
}
.main text {
font: 12px sans-serif;
}
.miniItem0 {
fill: darksalmon;
stroke-width: 6;
}
.miniItem1 {
fill: darkolivegreen;
fill-opacity: .7;
stroke-width: 6;
}
.miniItem2 {
fill: slategray;
fill-opacity: .7;
stroke-width: 6;
}
.brush .extent {
stroke: gray;
fill: dodgerblue;
fill-opacity: .365;
}
</style>
</head>
<body>
<script type="text/javascript">
//data
var lanes = ["E4", "C4", "A3"],
laneLength = lanes.length,
timeBegin = 0,
timeEnd = 65.33326800000005;
</script>
<script type="text/javascript">
var m = [20, 15, 15, 120], //top right bottom left
w = 960 - m[1] - m[3],
h = 500 - m[0] - m[2],
miniHeight = laneLength * 12 + 50,
mainHeight = h - miniHeight - 50;
//scales
var x = d3.scale.linear() //where is this positioned? at the top or bottom? this might be for main
.domain([timeBegin, timeEnd])
.range([0, w]);
var x1 = d3.scale.linear()
//.domain([timeBegin, timeEnd])
.range([0, w]);
var y1 = d3.scale.linear()
.domain([0, laneLength])
.range([0, mainHeight]);
var y2 = d3.scale.linear()
.domain([0, laneLength])
.range([0, miniHeight]);
var xAxis = d3.svg.axis().scale(x1).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x).orient("bottom"),
drag = d3.behavior.drag() //when moving rect from left side, other components of rectangle need to be resized //so we must include this...i think
.on("drag", dragmove);
chart = d3.select("body")
.append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.attr("class", "chart");
chart.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", w)
.attr("height", mainHeight);
var main = chart.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")")
.attr("width", w)
.attr("height", mainHeight)
.attr("class", "main");
var mini = chart.append("g")
.attr("transform", "translate(" + m[3] + "," + (mainHeight + m[0]) + ")")
.attr("width", w)
.attr("height", miniHeight)
.attr("class", "mini");
//main lanes and texts
main.append("g").selectAll(".laneLines")
//.data(items)
.data(minimalNotesFinal)
.enter().append("line")
.attr("x1", m[1])
.attr("y1", function(d) {return y1(d.lane);}) //added "lane" key to minimalNotesFinal object array
.attr("x2", w)
.attr("y2", function(d) {return y1(d.lane);})
.attr("stroke", "lightgray")
main.append("g").selectAll(".laneText")
.data(lanes)
.enter().append("text")
.text(function(d) {return d;})
.attr("x", -m[1])
.attr("y", function(d, i) {return y1(i + .5);})
.attr("dy", ".5ex")
.attr("text-anchor", "end")
.attr("class", "laneText");
main.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + mainHeight + ")")
.call(xAxis);
//mini lanes and texts
mini.append("g").selectAll(".laneLines")
.data(minimalNotesFinal)
//.data(notes)
.enter().append("line")
.attr("x1", m[1])
.attr("y1", function(d) {return y2(d.lane);})
.attr("x2", w)
.attr("y2", function(d) {return y2(d.lane);})
.attr("stroke", "lightgray");
mini.append("g").selectAll(".laneText")
.data(lanes)
.enter().append("text")
.text(function(d) {return d;})
.attr("x", -m[1])
.attr("y", function(d, i) {return y2(i + .5);})
.attr("dy", ".5ex")
.attr("text-anchor", "end")
.attr("class", "laneText");
mini.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + miniHeight + ")")
.call(xAxis2);
var itemRects = main.append("g")
.attr("clip-path", "url(#clip)");
//mini item rects soon to be brushes
mini.append("g").selectAll("miniItems")
.data(minimalNotesFinal)
.enter().append("rect") //"brush"
.attr("class", function(d) {return "miniItem" + d.lane;}) //midi
.attr("x", function(d) {return x(d.time);}) //time
.attr("y", function(d) {return y2(d.lane + .5) - 5;}) //midi
.attr("width", function(d) {
return x(d.duration);})
.attr("height", 10);
//brush on mini chart
var brush = d3.svg.brush()
.x(x)
.on("brush", display);
mini.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", 1)
.attr("height", miniHeight - 1);
display();
function display() {
var rects, labels, axis
minExtent = brush.extent()[0],
maxExtent = brush.extent()[1],
visItems = minimalNotesFinal.filter(function(d) {
//end = d.time + d.duration;
return d.time < maxExtent && (d.time + d.duration) > minExtent;});//MAKE SURE THIS IS OKAY
//visItems = notes.filter(function(d) {return d.time < maxExtent && (d.duration + d.time) > minExtent;});
mini.select(".brush")
.call(brush.extent([minExtent, maxExtent]));
x1.domain([minExtent, maxExtent]);
//update main item rects //update main items brushes
rects = itemRects.selectAll("rect")
.data(visItems, function(d) { return d.name; }) //name
.attr("x", function(d) {return x1(d.time);}) //time
.attr("width", function(d) {return x1(d.time + d.duration) - x1(d.time);});
var dragRect = rects.enter().append("rect")
.attr("class", function(d) {return "miniItem" + d.lane;}) //midi
.attr("x", function(d) {return x1(d.time);})
.attr("y", function(d) {return y1(d.lane) + 10;})
.attr("width", function(d) {return x1(d.time + d.duration) - x1(d.time);})
.attr("height", function(d) {return .8 * y1(1);})
.attr("cursor", "move")
.call(drag);
rects.exit().remove();
x1.domain(brush.empty() ? x.domain() : brush.extent());
main.select(".main").attr("d", main); //area
main.select(".x.axis").call(xAxis);
}
function dragmove(d) {
d3.select(this)
//.attr("transform", "translate(" + d3.event.x + ")");
.attr("x", d.x = Math.max(0, d3.event.x));
}
</script>
</body>
</html>
Modified http://mbostock.github.com/d3/d3.v2.js to a secure url
https://mbostock.github.com/d3/d3.v2.js