require d3.js

rateran.js

var w = 840;
var h = 630;
var lineWidth = 1;
var textOffset = 40;
var hOffset = 20;
var wOffset = 4;

var data = [
        { "title": "アニゲマスター", "day": "Sat", "station": "文化放送", "start": "21:00", "end": "23:00"  },
        { "title": "ドリカン", "day": "Sat", "station": "文化放送", "start": "23:00", "end": "24:00"  },
        { "title": "ツイパラ３", "day": "Sat", "station": "文化放送", "start": "24:00", "end": "24:30"  },
        { "title": "ポリケロ", "day": "Sat", "station": "文化放送", "start": "24:30", "end": "25:00"  },
        { "title": "電撃大賞", "day": "Sat", "station": "文化放送", "start": "26:00", "end": "26:30"  },
        { "title": "マルチ天国", "day": "Sat", "station": "文化放送", "start": "25:00", "end": "25:30"  },
        { "title": "プリンセスクラブ", "day": "Sat", "station": "文化放送", "start": "26:30", "end": "27:00"  },
        { "title": "あぁぁ新天地", "day": "Sun", "station": "文化放送", "start": "23:30", "end": "24:00"  },
        { "title": "少コミ♡Night", "day": "Sun", "station": "文化放送", "start": "24:00", "end": "24:30"  },
        { "title": "銀河にほえろ", "day": "Sun", "station": "文化放送", "start": "24:30", "end": "25:00"  },
        { "title": "みんなでた～る", "day": "Sun", "station": "TBS", "start": "25:30", "end": "26:00"  },
        { "title": "ぴんくドラゴン", "day": "Mon", "station": "AM KOBE", "start": "25:00", "end": "25:30"  },
        { "title": "HAPPY♪プリン", "day": "Tue", "station": "AM KOBE", "start": "25:00", "end": "25:30"  },
        { "title": "はぁとのためいき", "day": "Tue", "station": "AM KOBE", "start": "24:30", "end": "25:00"  },
        { "title": "輝け!大和魂!!", "day": "Wed", "station": "AM KOBE", "start": "25:00", "end": "25:30"  },
        { "title": "ミラクル!!しゅびっち!!", "day": "Thu", "station": "AM KOBE", "start": "25:00", "end": "25:30"  },
        { "title": "うさぎのみみたぶ", "day": "Fri", "station": "AM KOBE", "start": "25:00", "end": "25:30"  },
        { "title": "覇王塾F", "day": "Fri", "station": "文化放送", "start": "24:00", "end": "24:30"  },
        { "title": "アニスク", "day": "Fri", "station": "文化放送", "start": "24:30", "end": "25:00"  },
];

var days = { "Sun": 0, "Mon": 1, "Tue": 2, "Wed": 3, "Thu": 4, "Fri": 5, "Sat": 6 };
var wScale = d3.time.scale()
	.domain([0, 7])
	.range([wOffset, w - wOffset]);
var rectWidth = wScale(1) - wScale(0);

var today = '2014-01-01T';
var tomorrow = '2014-01-02T';
var minDate = new Date(today+'21:00');
var maxDate = new Date(tomorrow+'03:00');
var hScale = d3.time.scale()
	.domain([minDate, maxDate])
	.range([textOffset + hOffset , h - hOffset]);
var rectHeight = h;

var svg = d3.select("#radio-tv-program").append("svg")
	.attr("width", w)
	.attr("height", h);

// day of week
var dayOfWeek = [
	{"day": "Sun", "color": "Red"},
	{"day": "Mon", "color": "Orange"},
	{"day": "Tue", "color": "Yellow"},
	{"day": "Wed", "color": "Cyan"},
	{"day": "Thu", "color": "BurlyWood"},
	{"day": "Fri", "color": "Green"},
	{"day": "Sat", "color": "Blue"}
];
var header = svg.selectAll(".bg")
    .data(dayOfWeek);
var rect_back = header.enter().append("rect")
    .attr("class", "bg")
    .attr("width", rectWidth)
    .attr("height", rectHeight)
    .attr("opacity", 0.35)
    .attr("fill", function(d){return d.color})
    .attr("y", 0)
    .attr("x", function(d, i){
    	return wScale(i) - wOffset;
    });

var text_days = header.enter().append("text")
    .attr("class", "bg")
    .attr("font-size", "12px")
    .attr("font-weight", "bold")
    .attr("y",  "12px")
    .attr("x", function(d, i){
    	return wScale(i);
    })
    .text(function(d){ return d.day; });

// Programs
var graph = svg.selectAll(".select")
	.data(data);

var texts_time = graph.enter().append("text")
    .attr("class", "select")
    .attr("font-size", "12px")
    .attr("y", function(d,i) {
    	var hm = String(d.start).split(':');
    	var h = hm[0];
    	var d = today + h + ":"+ hm[1];
    	if (h > 24) {
    		d = tomorrow + "0" + (h-24) + ":"+ hm[1];
    	}
    	return hScale(new Date(d)) + 2;
    })
    .attr("x", function(d){
    	return wScale(days[d.day]);
    })
    .text(function(d) { return d.start; });

var texts_title = graph.enter().append("text")
    .attr("class", "select")
    .attr("font-size", "11px")
    .attr("y", function(d,i) {
    	var hm = String(d.start).split(':');
    	var h = hm[0];
    	var d = today + h + ":"+ hm[1];
    	if (h > 24) {
    		d = tomorrow + "0" + (h-24) + ":"+ hm[1];
    	}
    	return hScale(new Date(d)) + 16;
    })
    .attr("x", function(d){
    	return wScale(days[d.day]);
    })
    .text(function(d) { return d.title; });

var yAxisScale = d3.time.scale()
	.domain([minDate, maxDate])
	.range([hOffset*2, h - (hOffset*2)]);;

var axis = d3.svg.axis()
    .scale(yAxisScale)
    .ticks(d3.time.minutes, 30)
    .orient("left");

svg.append("g")
	.attr("class", "yAxis")
	.attr("transform", "translate(0, 10)")
	.call(axis);

d3.selectAll(".yAxis .tick line")
    .attr("stroke", "black")
    .attr("stroke-width", lineWidth)
    .attr("opacity", .8)
	.attr("x1", 0)
	.attr("x2", w - (wOffset*2));