Restructure calendar example.
This commit is contained in:
Michael Bostock
Родитель
1de75bc55c
Коммит
44e67e29c0
|
|
@ -0,0 +1,16 @@
|
||||||
|
#chart {
|
||||||
|
font: 10px sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day {
|
||||||
|
fill: none;
|
||||||
|
stroke: #ccc;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month {
|
||||||
|
fill: none;
|
||||||
|
stroke: #000;
|
||||||
|
stroke-width: 2px;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
var calendar = {
|
||||||
|
|
||||||
|
format: d3.time.format("%Y-%m-%d"),
|
||||||
|
|
||||||
|
dates: function(year) {
|
||||||
|
var dates = [],
|
||||||
|
date = new Date(year, 0, 1),
|
||||||
|
week = 0,
|
||||||
|
day;
|
||||||
|
do {
|
||||||
|
dates.push({
|
||||||
|
day: day = date.getDay(),
|
||||||
|
week: week,
|
||||||
|
month: date.getMonth(),
|
||||||
|
Date: calendar.format(date)
|
||||||
|
});
|
||||||
|
date.setDate(date.getDate() + 1);
|
||||||
|
if (day == 6) week++;
|
||||||
|
} while (date.getFullYear() == year);
|
||||||
|
return dates;
|
||||||
|
},
|
||||||
|
|
||||||
|
months: function(year) {
|
||||||
|
var months = [],
|
||||||
|
date = new Date(year, 0, 1),
|
||||||
|
month,
|
||||||
|
firstDay,
|
||||||
|
firstWeek,
|
||||||
|
day,
|
||||||
|
week = 0;
|
||||||
|
do {
|
||||||
|
firstDay = date.getDay();
|
||||||
|
firstWeek = week;
|
||||||
|
month = date.getMonth();
|
||||||
|
do {
|
||||||
|
day = date.getDay();
|
||||||
|
if (day == 6) week++;
|
||||||
|
date.setDate(date.getDate() + 1);
|
||||||
|
} while (date.getMonth() == month);
|
||||||
|
months.push({
|
||||||
|
firstDay: firstDay,
|
||||||
|
firstWeek: firstWeek,
|
||||||
|
lastDay: day,
|
||||||
|
lastWeek: day == 6 ? week - 1 : week
|
||||||
|
});
|
||||||
|
} while (date.getFullYear() == year);
|
||||||
|
return months;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
@ -3,146 +3,13 @@
|
||||||
<title>DJI</title>
|
<title>DJI</title>
|
||||||
<script type="text/javascript" src="../../d3.js"></script>
|
<script type="text/javascript" src="../../d3.js"></script>
|
||||||
<script type="text/javascript" src="../../d3.csv.js"></script>
|
<script type="text/javascript" src="../../d3.csv.js"></script>
|
||||||
<style type="text/css">
|
<script type="text/javascript" src="../../d3.time.js"></script>
|
||||||
|
<script type="text/javascript" src="calendar.js"></script>
|
||||||
@import url("../../lib/colorbrewer/colorbrewer.css");
|
<link type="text/css" rel="stylesheet" href="../../lib/colorbrewer/colorbrewer.css"/>
|
||||||
|
<link type="text/css" rel="stylesheet" href="calendar.css"/>
|
||||||
body {
|
|
||||||
font: 10px sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day {
|
|
||||||
fill: none;
|
|
||||||
stroke: #ccc;
|
|
||||||
shape-rendering: crispEdges;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month {
|
|
||||||
fill: none;
|
|
||||||
stroke: #000;
|
|
||||||
stroke-width: 2px;
|
|
||||||
shape-rendering: crispEdges;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="text/javascript">
|
<div id="chart"></div>
|
||||||
|
<script type="text/javascript" src="dji.js"></script>
|
||||||
d3.csv("dji.csv", function(csv) {
|
|
||||||
var data = d3.nest()
|
|
||||||
.key(function(d) { return d.Date; })
|
|
||||||
.rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
|
|
||||||
.map(csv);
|
|
||||||
|
|
||||||
var color = d3.scale.quantize()
|
|
||||||
.domain([-.05, .05])
|
|
||||||
.range(d3.range(9));
|
|
||||||
|
|
||||||
var w = 960,
|
|
||||||
pw = 14,
|
|
||||||
z = ~~((w - pw * 2) / 53),
|
|
||||||
ph = z >> 1,
|
|
||||||
h = z * 7 + ph * 2;
|
|
||||||
|
|
||||||
var vis = d3.select("body")
|
|
||||||
.selectAll("svg")
|
|
||||||
.data(d3.range(1990, 2011))
|
|
||||||
.enter("svg:svg")
|
|
||||||
.attr("width", w)
|
|
||||||
.attr("height", h)
|
|
||||||
.attr("class", "RdGy")
|
|
||||||
.append("svg:g")
|
|
||||||
.attr("transform", "translate(" + pw + "," + ph + ")");
|
|
||||||
|
|
||||||
vis.append("svg:text")
|
|
||||||
.attr("transform", "translate(-6," + h / 2 + ")rotate(-90)")
|
|
||||||
.text(function(d) { return d; });
|
|
||||||
|
|
||||||
vis.selectAll("rect.day")
|
|
||||||
.data(dates)
|
|
||||||
.enter("svg:rect")
|
|
||||||
.attr("x", function(d) { return d.week * z; })
|
|
||||||
.attr("y", function(d) { return d.day * z; })
|
|
||||||
.attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; })
|
|
||||||
.attr("width", z)
|
|
||||||
.attr("height", z)
|
|
||||||
.append("svg:title")
|
|
||||||
.text(function(d) { return d.Date + ": " + (data[d.Date] * 100).toFixed(1) + "%"; });
|
|
||||||
|
|
||||||
vis.selectAll("path.month")
|
|
||||||
.data(months)
|
|
||||||
.enter("svg:path")
|
|
||||||
.attr("class", "month")
|
|
||||||
.attr("d", function(d) {
|
|
||||||
return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z
|
|
||||||
+ "H" + d.firstWeek * z
|
|
||||||
+ "V" + 7 * z
|
|
||||||
+ "H" + d.lastWeek * z
|
|
||||||
+ "V" + (d.lastDay + 1) * z
|
|
||||||
+ "H" + (d.lastWeek + 1) * z
|
|
||||||
+ "V" + 0
|
|
||||||
+ "H" + (d.firstWeek + 1) * z
|
|
||||||
+ "Z";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function pad(n) {
|
|
||||||
return n < 10 ? "0" + n : n;
|
|
||||||
}
|
|
||||||
|
|
||||||
function format(d) {
|
|
||||||
var month = d.getMonth() + 1,
|
|
||||||
date = d.getDate();
|
|
||||||
return d.getFullYear() + "-" + pad(month) + "-" + pad(date);
|
|
||||||
}
|
|
||||||
|
|
||||||
function dates(year) {
|
|
||||||
var dates = [],
|
|
||||||
date = new Date(year, 0, 1),
|
|
||||||
week = 0,
|
|
||||||
day;
|
|
||||||
do {
|
|
||||||
dates.push({
|
|
||||||
day: day = date.getDay(),
|
|
||||||
week: week,
|
|
||||||
month: date.getMonth(),
|
|
||||||
Date: format(date)
|
|
||||||
});
|
|
||||||
date.setDate(date.getDate() + 1);
|
|
||||||
if (day == 6) week++;
|
|
||||||
} while (date.getFullYear() == year);
|
|
||||||
return dates;
|
|
||||||
}
|
|
||||||
|
|
||||||
function months(year) {
|
|
||||||
var months = [],
|
|
||||||
date = new Date(year, 0, 1),
|
|
||||||
month,
|
|
||||||
firstDay,
|
|
||||||
firstWeek,
|
|
||||||
day,
|
|
||||||
week = 0;
|
|
||||||
do {
|
|
||||||
firstDay = date.getDay();
|
|
||||||
firstWeek = week;
|
|
||||||
month = date.getMonth();
|
|
||||||
do {
|
|
||||||
day = date.getDay();
|
|
||||||
if (day == 6) week++;
|
|
||||||
date.setDate(date.getDate() + 1);
|
|
||||||
} while (date.getMonth() == month);
|
|
||||||
months.push({
|
|
||||||
firstDay: firstDay,
|
|
||||||
firstWeek: firstWeek,
|
|
||||||
lastDay: day,
|
|
||||||
lastWeek: day == 6 ? week - 1 : week
|
|
||||||
});
|
|
||||||
} while (date.getFullYear() == year);
|
|
||||||
return months;
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
d3.csv("dji.csv", function(csv) {
|
||||||
|
var data = d3.nest()
|
||||||
|
.key(function(d) { return d.Date; })
|
||||||
|
.rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
|
||||||
|
.map(csv);
|
||||||
|
|
||||||
|
var color = d3.scale.quantize()
|
||||||
|
.domain([-.05, .05])
|
||||||
|
.range(d3.range(9));
|
||||||
|
|
||||||
|
var w = 710,
|
||||||
|
pw = 14,
|
||||||
|
z = ~~((w - pw * 2) / 53),
|
||||||
|
ph = z >> 1,
|
||||||
|
h = z * 7 + ph * 2;
|
||||||
|
|
||||||
|
var vis = d3.select("#chart")
|
||||||
|
.selectAll("svg")
|
||||||
|
.data(d3.range(1990, 2011))
|
||||||
|
.enter("svg:svg")
|
||||||
|
.attr("width", w)
|
||||||
|
.attr("height", h)
|
||||||
|
.attr("class", "RdGy")
|
||||||
|
.append("svg:g")
|
||||||
|
.attr("transform", "translate(" + pw + "," + ph + ")");
|
||||||
|
|
||||||
|
vis.append("svg:text")
|
||||||
|
.attr("transform", "translate(-6," + h / 2 + ")rotate(-90)")
|
||||||
|
.text(function(d) { return d; });
|
||||||
|
|
||||||
|
vis.selectAll("rect.day")
|
||||||
|
.data(calendar.dates)
|
||||||
|
.enter("svg:rect")
|
||||||
|
.attr("x", function(d) { return d.week * z; })
|
||||||
|
.attr("y", function(d) { return d.day * z; })
|
||||||
|
.attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; })
|
||||||
|
.attr("width", z)
|
||||||
|
.attr("height", z)
|
||||||
|
.append("svg:title")
|
||||||
|
.text(function(d) { return d.Date + ": " + (data[d.Date] * 100).toFixed(1) + "%"; });
|
||||||
|
|
||||||
|
vis.selectAll("path.month")
|
||||||
|
.data(calendar.months)
|
||||||
|
.enter("svg:path")
|
||||||
|
.attr("class", "month")
|
||||||
|
.attr("d", function(d) {
|
||||||
|
return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z
|
||||||
|
+ "H" + d.firstWeek * z
|
||||||
|
+ "V" + 7 * z
|
||||||
|
+ "H" + d.lastWeek * z
|
||||||
|
+ "V" + (d.lastDay + 1) * z
|
||||||
|
+ "H" + (d.lastWeek + 1) * z
|
||||||
|
+ "V" + 0
|
||||||
|
+ "H" + (d.firstWeek + 1) * z
|
||||||
|
+ "Z";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -3,145 +3,13 @@
|
||||||
<title>VIX</title>
|
<title>VIX</title>
|
||||||
<script type="text/javascript" src="../../d3.js"></script>
|
<script type="text/javascript" src="../../d3.js"></script>
|
||||||
<script type="text/javascript" src="../../d3.csv.js"></script>
|
<script type="text/javascript" src="../../d3.csv.js"></script>
|
||||||
<style type="text/css">
|
<script type="text/javascript" src="../../d3.time.js"></script>
|
||||||
|
<script type="text/javascript" src="calendar.js"></script>
|
||||||
@import url("../../lib/colorbrewer/colorbrewer.css");
|
<link type="text/css" rel="stylesheet" href="../../lib/colorbrewer/colorbrewer.css"/>
|
||||||
|
<link type="text/css" rel="stylesheet" href="calendar.css"/>
|
||||||
body {
|
|
||||||
font: 10px sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day {
|
|
||||||
fill: none;
|
|
||||||
stroke: #ccc;
|
|
||||||
shape-rendering: crispEdges;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month {
|
|
||||||
fill: none;
|
|
||||||
stroke: #000;
|
|
||||||
stroke-width: 2px;
|
|
||||||
shape-rendering: crispEdges;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="text/javascript">
|
<div id="chart"></div>
|
||||||
|
<script type="text/javascript" src="vix.js"></script>
|
||||||
d3.csv("vix.csv", function(csv) {
|
|
||||||
var data = d3.nest()
|
|
||||||
.key(function(d) { return d.Date; })
|
|
||||||
.rollup(function(d) { return d[0].Open; })
|
|
||||||
.map(csv);
|
|
||||||
|
|
||||||
var color = d3.scale.quantile()
|
|
||||||
.domain(d3.values(data))
|
|
||||||
.range(d3.range(9).reverse());
|
|
||||||
|
|
||||||
var w = 960,
|
|
||||||
pw = 14,
|
|
||||||
z = ~~((w - pw * 2) / 53),
|
|
||||||
ph = z >> 1,
|
|
||||||
h = z * 7 + ph * 2;
|
|
||||||
|
|
||||||
var vis = d3.select("body")
|
|
||||||
.selectAll("svg")
|
|
||||||
.data(d3.range(1993, 2011))
|
|
||||||
.enter("svg:svg")
|
|
||||||
.attr("width", w)
|
|
||||||
.attr("height", h)
|
|
||||||
.attr("class", "RdYlGn")
|
|
||||||
.append("svg:g")
|
|
||||||
.attr("transform", "translate(" + pw + "," + ph + ")");
|
|
||||||
|
|
||||||
vis.append("svg:text")
|
|
||||||
.attr("transform", "translate(-6," + h / 2 + ")rotate(-90)")
|
|
||||||
.text(function(d) { return d; });
|
|
||||||
|
|
||||||
vis.selectAll("rect.day")
|
|
||||||
.data(dates)
|
|
||||||
.enter("svg:rect")
|
|
||||||
.attr("x", function(d) { return d.week * z; })
|
|
||||||
.attr("y", function(d) { return d.day * z; })
|
|
||||||
.attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; })
|
|
||||||
.attr("width", z)
|
|
||||||
.attr("height", z)
|
|
||||||
.append("svg:title")
|
|
||||||
.text(function(d) { return d.Date + ": " + data[d.Date]; });
|
|
||||||
|
|
||||||
vis.selectAll("path.month")
|
|
||||||
.data(months)
|
|
||||||
.enter("svg:path")
|
|
||||||
.attr("class", "month")
|
|
||||||
.attr("d", function(d) {
|
|
||||||
return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z
|
|
||||||
+ "H" + d.firstWeek * z
|
|
||||||
+ "V" + 7 * z
|
|
||||||
+ "H" + d.lastWeek * z
|
|
||||||
+ "V" + (d.lastDay + 1) * z
|
|
||||||
+ "H" + (d.lastWeek + 1) * z
|
|
||||||
+ "V" + 0
|
|
||||||
+ "H" + (d.firstWeek + 1) * z
|
|
||||||
+ "Z";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function pad(n) {
|
|
||||||
return n < 10 ? "0" + n : n;
|
|
||||||
}
|
|
||||||
|
|
||||||
function format(d) {
|
|
||||||
var month = d.getMonth() + 1,
|
|
||||||
date = d.getDate();
|
|
||||||
return d.getFullYear() + "-" + pad(month) + "-" + pad(date);
|
|
||||||
}
|
|
||||||
|
|
||||||
function dates(year) {
|
|
||||||
var dates = [],
|
|
||||||
date = new Date(year, 0, 1),
|
|
||||||
week = 0,
|
|
||||||
day;
|
|
||||||
do {
|
|
||||||
dates.push({
|
|
||||||
day: day = date.getDay(),
|
|
||||||
week: week,
|
|
||||||
month: date.getMonth(),
|
|
||||||
Date: format(date)
|
|
||||||
});
|
|
||||||
date.setDate(date.getDate() + 1);
|
|
||||||
if (day == 6) week++;
|
|
||||||
} while (date.getFullYear() == year);
|
|
||||||
return dates;
|
|
||||||
}
|
|
||||||
|
|
||||||
function months(year) {
|
|
||||||
var months = [],
|
|
||||||
date = new Date(year, 0, 1),
|
|
||||||
month,
|
|
||||||
firstDay,
|
|
||||||
firstWeek,
|
|
||||||
day,
|
|
||||||
week = 0;
|
|
||||||
do {
|
|
||||||
firstDay = date.getDay();
|
|
||||||
firstWeek = week;
|
|
||||||
month = date.getMonth();
|
|
||||||
do {
|
|
||||||
day = date.getDay();
|
|
||||||
if (day == 6) week++;
|
|
||||||
date.setDate(date.getDate() + 1);
|
|
||||||
} while (date.getMonth() == month);
|
|
||||||
months.push({
|
|
||||||
firstDay: firstDay,
|
|
||||||
firstWeek: firstWeek,
|
|
||||||
lastDay: day,
|
|
||||||
lastWeek: day == 6 ? week - 1 : week
|
|
||||||
});
|
|
||||||
} while (date.getFullYear() == year);
|
|
||||||
return months;
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
d3.csv("vix.csv", function(csv) {
|
||||||
|
var data = d3.nest()
|
||||||
|
.key(function(d) { return d.Date; })
|
||||||
|
.rollup(function(d) { return d[0].Open; })
|
||||||
|
.map(csv);
|
||||||
|
|
||||||
|
var color = d3.scale.quantile()
|
||||||
|
.domain(d3.values(data))
|
||||||
|
.range(d3.range(9).reverse());
|
||||||
|
|
||||||
|
var w = 710,
|
||||||
|
pw = 14,
|
||||||
|
z = ~~((w - pw * 2) / 53),
|
||||||
|
ph = z >> 1,
|
||||||
|
h = z * 7 + ph * 2;
|
||||||
|
|
||||||
|
var vis = d3.select("#chart")
|
||||||
|
.selectAll("svg")
|
||||||
|
.data(d3.range(1993, 2011))
|
||||||
|
.enter("svg:svg")
|
||||||
|
.attr("width", w)
|
||||||
|
.attr("height", h)
|
||||||
|
.attr("class", "RdYlGn")
|
||||||
|
.append("svg:g")
|
||||||
|
.attr("transform", "translate(" + pw + "," + ph + ")");
|
||||||
|
|
||||||
|
vis.append("svg:text")
|
||||||
|
.attr("transform", "translate(-6," + h / 2 + ")rotate(-90)")
|
||||||
|
.text(function(d) { return d; });
|
||||||
|
|
||||||
|
vis.selectAll("rect.day")
|
||||||
|
.data(calendar.dates)
|
||||||
|
.enter("svg:rect")
|
||||||
|
.attr("x", function(d) { return d.week * z; })
|
||||||
|
.attr("y", function(d) { return d.day * z; })
|
||||||
|
.attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; })
|
||||||
|
.attr("width", z)
|
||||||
|
.attr("height", z)
|
||||||
|
.append("svg:title")
|
||||||
|
.text(function(d) { return d.Date + ": " + data[d.Date]; });
|
||||||
|
|
||||||
|
vis.selectAll("path.month")
|
||||||
|
.data(calendar.months)
|
||||||
|
.enter("svg:path")
|
||||||
|
.attr("class", "month")
|
||||||
|
.attr("d", function(d) {
|
||||||
|
return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z
|
||||||
|
+ "H" + d.firstWeek * z
|
||||||
|
+ "V" + 7 * z
|
||||||
|
+ "H" + d.lastWeek * z
|
||||||
|
+ "V" + (d.lastDay + 1) * z
|
||||||
|
+ "H" + (d.lastWeek + 1) * z
|
||||||
|
+ "V" + 0
|
||||||
|
+ "H" + (d.firstWeek + 1) * z
|
||||||
|
+ "Z";
|
||||||
|
});
|
||||||
|
});
|
||||||
Загрузка…
Ссылка в новой задаче