Skip to content
GitLab
Commit c9629d47 authored by Mike Bostock's avatar Mike Bostock
Browse files

Remove calendar examples. 

Replaced by <http://bl.ocks.org/4063318>.
parent 96f1be94
Expand all Hide whitespace changes
Inline Side-by-side
examples/calendar/calendar.css deleted 100644 → 0
View file @ 96f1be94
#chart {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.day {
fill: #fff;
stroke: #ccc;
}
.month {
fill: none;
stroke: #000;
stroke-width: 2px;
}
examples/calendar/dji-area.html deleted 100644 → 0
View file @ 96f1be94
<!DOCTYPE html>
<meta charset="utf-8">
<title>DJI</title>
<style>
body {
font: 10px sans-serif;
}
rect {
fill: #ddd;
}
path.area {
fill: #000;
fill-opacity: .75;
}
.axis, .grid {
shape-rendering: crispEdges;
}
.grid line {
stroke: #fff;
}
.grid line.minor {
stroke-opacity: .5;
}
.grid text {
display: none;
}
.axis line {
stroke: #000;
}
.grid path, .axis path {
display: none;
}
</style>
<body>
<script src="../../d3.js"></script>
<script>
var margin = {top: 10, right: 50, bottom: 20, left: 10},
width = 960 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom,
parse = d3.time.format("%Y-%m-%d").parse;
// Scales. Note the inverted range for the y-scale: bigger is up!
var x = d3.time.scale()
.range([20, width - 20]);
var y = d3.scale.linear()
.range([height - 20, 20]);
// Axes.
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("right");
// An area generator.
var area = d3.svg.area()
.x(function(d) { return x(d.Date); })
.y0(y(0))
.y1(function(d) { return y(d.Close); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("rect")
.attr("width", width)
.attr("height", height);
d3.csv("dji.csv", function(error, data) {
// Parse dates and numbers.
data.reverse().forEach(function(d) {
d.Date = parse(d.Date);
d.Close = +d.Close;
});
// Compute the minimum and maximum date, and the maximum price.
x.domain([data[0].Date, data[data.length - 1].Date]);
y.domain([0, d3.max(data, function(d) { return d.Close; })]);
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + height + ")")
.call(xAxis.tickSubdivide(1).tickSize(-height));
svg.append("g")
.attr("class", "y grid")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis.tickSubdivide(1).tickSize(-width));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis.tickSubdivide(0).tickSize(6));
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis.tickSubdivide(0).tickSize(6));
svg.append("path")
.attr("class", "area")
.attr("d", area(data));
});
</script>
examples/calendar/dji.csv deleted 100644 → 0
View file @ 96f1be94
This diff is collapsed.
examples/calendar/dji.html deleted 100644 → 0
View file @ 96f1be94
<!DOCTYPE html>
<meta charset="utf-8">
<title>DJI</title>
<style>
@import url(../../lib/colorbrewer/colorbrewer.css);
body {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.day {
fill: #fff;
stroke: #ccc;
}
.month {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
<body>
<script src="../../d3.js"></script>
<script>
var margin = {top: 19, right: 20, bottom: 20, left: 19},
width = 960 - margin.right - margin.left, // width
height = 136 - margin.top - margin.bottom, // height
cellSize = 17; // cell size
var day = d3.time.format("%w"),
week = d3.time.format("%U"),
percent = d3.format(".1%"),
format = d3.time.format("%Y-%m-%d");
var color = d3.scale.quantize()
.domain([-.05, .05])
.range(d3.range(9));
var svg = d3.select("body").selectAll("svg")
.data(d3.range(1990, 2011))
.enter().append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "RdYlGn")
.append("g")
.attr("transform", "translate(" + (margin.left + (width - cellSize * 53) / 2) + "," + (margin.top + (height - cellSize * 7) / 2) + ")");
svg.append("text")
.attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
.attr("text-anchor", "middle")
.text(String);
var rect = svg.selectAll("rect.day")
.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function(d) { return week(d) * cellSize; })
.attr("y", function(d) { return day(d) * cellSize; })
.datum(format);
rect.append("title")
.text(function(d) { return d; });
svg.selectAll("path.month")
.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("path")
.attr("class", "month")
.attr("d", monthPath);
d3.csv("dji.csv", function(error, 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);
rect.filter(function(d) { return d in data; })
.attr("class", function(d) { return "day q" + color(data[d]) + "-9"; })
.select("title")
.text(function(d) { return d + ": " + percent(data[d]); });
});
function monthPath(t0) {
var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
d0 = +day(t0), w0 = +week(t0),
d1 = +day(t1), w1 = +week(t1);
return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
+ "H" + w0 * cellSize + "V" + 7 * cellSize
+ "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
+ "H" + (w1 + 1) * cellSize + "V" + 0
+ "H" + (w0 + 1) * cellSize + "Z";
}
</script>
examples/calendar/vix.csv deleted 100644 → 0
View file @ 96f1be94
This diff is collapsed.
examples/calendar/vix.html deleted 100644 → 0
View file @ 96f1be94
<!DOCTYPE html>
<meta charset="utf-8">
<title>VIX</title>
<style>
@import url(../../lib/colorbrewer/colorbrewer.css);
body {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.day {
fill: #fff;
stroke: #ccc;
}
.month {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
<body>
<script src="../../d3.js"></script>
<script>
var margin = {top: 19, right: 20, bottom: 20, left: 19},
width = 960 - margin.right - margin.left, // width
height = 136 - margin.top - margin.bottom, // height
cellSize = 17; // cell size
var day = d3.time.format("%w"),
week = d3.time.format("%U"),
format = d3.time.format("%Y-%m-%d");
var color = d3.scale.quantile()
.range(d3.range(9).reverse());
var svg = d3.select("body").selectAll("svg")
.data(d3.range(1993, 2011))
.enter().append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "RdYlGn")
.append("g")
.attr("transform", "translate(" + (margin.left + (width - cellSize * 53) / 2) + "," + (margin.top + (height - cellSize * 7) / 2) + ")");
svg.append("text")
.attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
.attr("text-anchor", "middle")
.text(function(d) { return d; });
var rect = svg.selectAll("rect.day")
.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function(d) { return week(d) * cellSize; })
.attr("y", function(d) { return day(d) * cellSize; })
.datum(format);
rect.append("title")
.text(function(d) { return d; });
svg.selectAll("path.month")
.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("path")
.attr("class", "month")
.attr("d", monthPath);
d3.csv("vix.csv", function(error, csv) {
var data = d3.nest()
.key(function(d) { return d.Date; })
.rollup(function(d) { return d[0].Open; })
.map(csv);
color.domain(d3.values(data));
rect.filter(function(d) { return d in data; })
.attr("class", function(d) { return "day q" + color(data[d]) + "-9"; })
.select("title")
.text(function(d) { return d + ": " + data[d]; });
});
function monthPath(t0) {
var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
d0 = +day(t0), w0 = +week(t0),
d1 = +day(t1), w1 = +week(t1);
return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
+ "H" + w0 * cellSize + "V" + 7 * cellSize
+ "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
+ "H" + (w1 + 1) * cellSize + "V" + 0
+ "H" + (w0 + 1) * cellSize + "Z";
}
</script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment