guypursey/.block

## .block
license: mit

## README.md

      
        

                Raw

        
        
          
            
          
          
            
              README.md
            
          
        
      
      
    A development on bunkat's timeline in d3.js.

  

  

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>Chronological Diagram of Asia</title>
		<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.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;
		}

		.axis {
		  font: 10px sans-serif;
		}

		.axis path,
		.axis line {
		  fill: none;
		  stroke: #000;
		  shape-rendering: crispEdges;
		}

		</style>
	</head>
	<body>
		<script type="text/javascript">
		//data
		var lanes = ["Chinese","Japanese","Korean"],
			laneLength = lanes.length,
			items = [{"lane": 0, "id": "Qin", "start": 5, "end": 205},
					{"lane": 0, "id": "Jin", "start": 265, "end": 420},
					{"lane": 0, "id": "Sui", "start": 580, "end": 615},
					{"lane": 0, "id": "Tang", "start": 620, "end": 900},
					{"lane": 0, "id": "Song", "start": 960, "end": 1265},
					{"lane": 0, "id": "Yuan", "start": 1270, "end": 1365},
					{"lane": 0, "id": "Ming", "start": 1370, "end": 1640},
					{"lane": 0, "id": "Qing", "start": 1645, "end": 1910},
					{"lane": 1, "id": "Yamato", "start": 300, "end": 530},
					{"lane": 1, "id": "Asuka", "start": 550, "end": 700},
					{"lane": 1, "id": "Nara", "start": 710, "end": 790},
					{"lane": 1, "id": "Heian", "start": 800, "end": 1180},
					{"lane": 1, "id": "Kamakura", "start": 1190, "end": 1330},
					{"lane": 1, "id": "Muromachi", "start": 1340, "end": 1560},
					{"lane": 1, "id": "Edo", "start": 1610, "end": 1860},
					{"lane": 1, "id": "Meiji", "start": 1870, "end": 1900},
					{"lane": 1, "id": "Taisho", "start": 1910, "end": 1920},
					{"lane": 1, "id": "Showa", "start": 1925, "end": 1985},
					{"lane": 1, "id": "Heisei", "start": 1990, "end": 1995},
					{"lane": 2, "id": "Three Kingdoms", "start": 10, "end": 670},
					{"lane": 2, "id": "North and South States", "start": 690, "end": 900},
					{"lane": 2, "id": "Goryeo", "start": 920, "end": 1380},
					{"lane": 2, "id": "Joseon", "start": 1390, "end": 1890},
					{"lane": 2, "id": "Korean Empire", "start": 1900, "end": 1945}]

		items = items.map(v => {
			v.start = new Date(`${v.start < 10 ? "0" : ""}${v.start < 100 ? "00" : ""}${v.start}-01-01`)
			v.end = new Date(`${v.end}-12-31`)
			return v
		})

		timeBegin = new Date("0000")
		timeEnd = new Date("2000")

		</script>
		<script type="text/javascript">

		var m = [20, 15, 15, 120] //top right bottom left
		var w = 960 - m[1] - m[3]
		var h = 500 - m[0] - m[2]
		var f = 20
		var miniHeight = laneLength * 12 + 50
		var mainHeight = h - miniHeight - 50

		//scales
		var x = d3.time.scale()
			      .domain([timeBegin, timeEnd])
			      .range([0, w])

		var x1 = d3.time.scale()
			       .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(x)
			          .orient("bottom")
			          .ticks(d3.time.years, 100)
			          .tickFormat(d3.time.format("%Y"))
			          .tickSize(5)
			          .tickPadding(1)

		var x1Axis = d3.svg.axis()
			           .scale(x1)
			           .orient("bottom")
			           .ticks(d3.time.years, 100)
			           .tickFormat(d3.time.format("%Y"))
			           .tickSize(5)
			           .tickPadding(1)

		var 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")

		var focus = main.append("g")
			           .attr("class", "focus")

		focus.append("g")
			 .attr("class", "x1 axis")
			 .call(x1Axis)

		//main lanes and texts
		main.append("g").selectAll(".laneLines")
			.data(items)
			.enter().append("line")
			.attr("x1", m[1])
			.attr("y1", d => y1(d.lane) + f)
			.attr("x2", w)
			.attr("y2", d => y1(d.lane) + f)
			.attr("stroke", "lightgray")

		main.append("g").selectAll(".laneText")
			.data(lanes)
			.enter().append("text")
			.text(d => d)
			.attr("x", -m[1])
			.attr("y", (d, i) => y1(i + .5) + f)
			.attr("dy", ".5ex")
			.attr("text-anchor", "end")
			.attr("class", "laneText")

		//mini lanes and texts
		mini.append("g").selectAll(".laneLines")
			.data(items)
			.enter().append("line")
			.attr("x1", m[1])
			.attr("y1", d => y2(d.lane) + f)
			.attr("x2", w)
			.attr("y2", d => y2(d.lane) + f)
			.attr("stroke", "lightgray")

		mini.append("g").selectAll(".laneText")
			.data(lanes)
			.enter().append("text")
			.text(d => d)
			.attr("x", -m[1])
			.attr("y", (d, i) => y2(i + .5) + f)
			.attr("dy", ".5ex")
			.attr("text-anchor", "end")
			.attr("class", "laneText")

		var itemRects = main.append("g")
			                .attr("clip-path", "url(#clip)")

		//mini item rects
		mini.append("g").selectAll("miniItems")
			.data(items)
			.enter().append("rect")
			.attr("class", d => `miniItem${d.lane}`)
			.attr("x", d => x(d.start))
			.attr("y", d => y2(d.lane + .5) - 5 + f)
			.attr("width", d => x(d.end) - x(d.start))
			.attr("height", 10)

		//mini labels
		mini.append("g").selectAll(".miniLabels")
			.data(items)
			.enter().append("text")
			.text(d => d.id)
			.attr("x", d => x(d.start))
			.attr("y", d => y2(d.lane + .5) + f)
			.attr("dy", ".5ex")

		//brush
		var brush = d3.svg.brush()
			          .x(x)
			          .on("brush", display)

		mini.append("g")
			.attr("class", "x brush")
			.call(brush)
			.selectAll("rect")
			.attr("y", 1 + f)
			.attr("height", miniHeight - 1)

		display()

		function display() {

			var rects
			var labels
			var minExtent = brush.empty() ? x1.domain()[0] : brush.extent()[0]
			var maxExtent = brush.empty() ? x1.domain()[1] : brush.extent()[1]
			var visItems = items.filter(d => d.start < maxExtent && d.end > minExtent)

			if (!brush.empty()) {
				mini.select(".brush")
					.call(brush.extent([minExtent, maxExtent]))
			}

			x1.domain([minExtent, maxExtent])

			focus.select(".x1.axis").call(x1Axis)

			//update main item rects
			rects = itemRects.selectAll("rect")
			        .data(visItems, d => d.id)
				.attr("x", d => x1(d.start))
				.attr("width", d => x1(d.end) - x1(d.start))

			rects.enter().append("rect")
				.attr("class", d => "miniItem" + d.lane)
				.attr("x", d => x1(d.start))
				.attr("y", d => y1(d.lane) + 10 + f)
				.attr("width", d => x1(d.end) - x1(d.start))
				.attr("height", d => .8 * y1(1))

			rects.exit().remove()

			//update the item labels
			labels = itemRects.selectAll("text")
				.data(visItems, d => d.id)
				.attr("x", d => x1(Math.max(d.start, minExtent) + 2))

			labels.enter().append("text")
				.text(d => d.id)
				.attr("x", d => x1(Math.max(d.start, minExtent)))
				.attr("y", d => y1(d.lane + .5))
				.attr("text-anchor", "start")

			labels.exit().remove()

		}

		</script>
	</body>
</html>

## thumbnail.png

      
        

                Raw

        
        
          
            
          
          
            
              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Chronological Diagram of Asia</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.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;
	}

	.axis {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">
	//data
	var lanes = ["Chinese","Japanese","Korean"],
	laneLength = lanes.length,
	items = [{"lane": 0, "id": "Qin", "start": 5, "end": 205},
	{"lane": 0, "id": "Jin", "start": 265, "end": 420},
	{"lane": 0, "id": "Sui", "start": 580, "end": 615},
	{"lane": 0, "id": "Tang", "start": 620, "end": 900},
	{"lane": 0, "id": "Song", "start": 960, "end": 1265},
	{"lane": 0, "id": "Yuan", "start": 1270, "end": 1365},
	{"lane": 0, "id": "Ming", "start": 1370, "end": 1640},
	{"lane": 0, "id": "Qing", "start": 1645, "end": 1910},
	{"lane": 1, "id": "Yamato", "start": 300, "end": 530},
	{"lane": 1, "id": "Asuka", "start": 550, "end": 700},
	{"lane": 1, "id": "Nara", "start": 710, "end": 790},
	{"lane": 1, "id": "Heian", "start": 800, "end": 1180},
	{"lane": 1, "id": "Kamakura", "start": 1190, "end": 1330},
	{"lane": 1, "id": "Muromachi", "start": 1340, "end": 1560},
	{"lane": 1, "id": "Edo", "start": 1610, "end": 1860},
	{"lane": 1, "id": "Meiji", "start": 1870, "end": 1900},
	{"lane": 1, "id": "Taisho", "start": 1910, "end": 1920},
	{"lane": 1, "id": "Showa", "start": 1925, "end": 1985},
	{"lane": 1, "id": "Heisei", "start": 1990, "end": 1995},
	{"lane": 2, "id": "Three Kingdoms", "start": 10, "end": 670},
	{"lane": 2, "id": "North and South States", "start": 690, "end": 900},
	{"lane": 2, "id": "Goryeo", "start": 920, "end": 1380},
	{"lane": 2, "id": "Joseon", "start": 1390, "end": 1890},
	{"lane": 2, "id": "Korean Empire", "start": 1900, "end": 1945}]

	items = items.map(v => {
	v.start = new Date(`${v.start < 10 ? "0" : ""}${v.start < 100 ? "00" : ""}${v.start}-01-01`)
	v.end = new Date(`${v.end}-12-31`)
	return v
	})

	timeBegin = new Date("0000")
	timeEnd = new Date("2000")

	</script>
	<script type="text/javascript">

	var m = [20, 15, 15, 120] //top right bottom left
	var w = 960 - m[1] - m[3]
	var h = 500 - m[0] - m[2]
	var f = 20
	var miniHeight = laneLength * 12 + 50
	var mainHeight = h - miniHeight - 50

	//scales
	var x = d3.time.scale()
	.domain([timeBegin, timeEnd])
	.range([0, w])

	var x1 = d3.time.scale()
	.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(x)
	.orient("bottom")
	.ticks(d3.time.years, 100)
	.tickFormat(d3.time.format("%Y"))
	.tickSize(5)
	.tickPadding(1)

	var x1Axis = d3.svg.axis()
	.scale(x1)
	.orient("bottom")
	.ticks(d3.time.years, 100)
	.tickFormat(d3.time.format("%Y"))
	.tickSize(5)
	.tickPadding(1)

	var 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")

	var focus = main.append("g")
	.attr("class", "focus")

	focus.append("g")
	.attr("class", "x1 axis")
	.call(x1Axis)

	//main lanes and texts
	main.append("g").selectAll(".laneLines")
	.data(items)
	.enter().append("line")
	.attr("x1", m[1])
	.attr("y1", d => y1(d.lane) + f)
	.attr("x2", w)
	.attr("y2", d => y1(d.lane) + f)
	.attr("stroke", "lightgray")

	main.append("g").selectAll(".laneText")
	.data(lanes)
	.enter().append("text")
	.text(d => d)
	.attr("x", -m[1])
	.attr("y", (d, i) => y1(i + .5) + f)
	.attr("dy", ".5ex")
	.attr("text-anchor", "end")
	.attr("class", "laneText")

	//mini lanes and texts
	mini.append("g").selectAll(".laneLines")
	.data(items)
	.enter().append("line")
	.attr("x1", m[1])
	.attr("y1", d => y2(d.lane) + f)
	.attr("x2", w)
	.attr("y2", d => y2(d.lane) + f)
	.attr("stroke", "lightgray")

	mini.append("g").selectAll(".laneText")
	.data(lanes)
	.enter().append("text")
	.text(d => d)
	.attr("x", -m[1])
	.attr("y", (d, i) => y2(i + .5) + f)
	.attr("dy", ".5ex")
	.attr("text-anchor", "end")
	.attr("class", "laneText")

	var itemRects = main.append("g")
	.attr("clip-path", "url(#clip)")

	//mini item rects
	mini.append("g").selectAll("miniItems")
	.data(items)
	.enter().append("rect")
	.attr("class", d => `miniItem${d.lane}`)
	.attr("x", d => x(d.start))
	.attr("y", d => y2(d.lane + .5) - 5 + f)
	.attr("width", d => x(d.end) - x(d.start))
	.attr("height", 10)

	//mini labels
	mini.append("g").selectAll(".miniLabels")
	.data(items)
	.enter().append("text")
	.text(d => d.id)
	.attr("x", d => x(d.start))
	.attr("y", d => y2(d.lane + .5) + f)
	.attr("dy", ".5ex")

	//brush
	var brush = d3.svg.brush()
	.x(x)
	.on("brush", display)

	mini.append("g")
	.attr("class", "x brush")
	.call(brush)
	.selectAll("rect")
	.attr("y", 1 + f)
	.attr("height", miniHeight - 1)

	display()

	function display() {

	var rects
	var labels
	var minExtent = brush.empty() ? x1.domain()[0] : brush.extent()[0]
	var maxExtent = brush.empty() ? x1.domain()[1] : brush.extent()[1]
	var visItems = items.filter(d => d.start < maxExtent && d.end > minExtent)

	if (!brush.empty()) {
	mini.select(".brush")
	.call(brush.extent([minExtent, maxExtent]))
	}

	x1.domain([minExtent, maxExtent])

	focus.select(".x1.axis").call(x1Axis)

	//update main item rects
	rects = itemRects.selectAll("rect")
	.data(visItems, d => d.id)
	.attr("x", d => x1(d.start))
	.attr("width", d => x1(d.end) - x1(d.start))

	rects.enter().append("rect")
	.attr("class", d => "miniItem" + d.lane)
	.attr("x", d => x1(d.start))
	.attr("y", d => y1(d.lane) + 10 + f)
	.attr("width", d => x1(d.end) - x1(d.start))
	.attr("height", d => .8 * y1(1))

	rects.exit().remove()

	//update the item labels
	labels = itemRects.selectAll("text")
	.data(visItems, d => d.id)
	.attr("x", d => x1(Math.max(d.start, minExtent) + 2))

	labels.enter().append("text")
	.text(d => d.id)
	.attr("x", d => x1(Math.max(d.start, minExtent)))
	.attr("y", d => y1(d.lane + .5))
	.attr("text-anchor", "start")

	labels.exit().remove()

	}

	</script>
	</body>
	</html>