mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-16 23:10:29 +00:00
Diullei Gomes
+487
-129
@@ -1,129 +1,487 @@
|
||||
/// <reference path="d3.d.ts" />
|
||||
|
||||
d3.selectAll("p").style("color", "white");
|
||||
d3.select("body").style("background-color", "black");
|
||||
d3.selectAll("p").style("color", function () {
|
||||
return "hsl(" + Math.random() * 360 + ",100%,50%)";
|
||||
});
|
||||
d3.selectAll("p").style("color", function (d, i) {
|
||||
return i % 2 ? "#fff" : "#eee";
|
||||
});
|
||||
d3.selectAll("p")
|
||||
.data([4, 8, 15, 16, 23, 42])
|
||||
.style("font-size", function (d) { return d + "px"; });
|
||||
d3.select("body").selectAll("p")
|
||||
.data([4, 8, 15, 16, 23, 42])
|
||||
.enter().append("p")
|
||||
.text(function (d) { return "I’m number " + d + "!"; });
|
||||
var p = d3.select("body").selectAll("p")
|
||||
.data([4, 8, 15, 16, 23, 42])
|
||||
.text(String);
|
||||
p.enter().append("p")
|
||||
.text(String);
|
||||
p.exit().remove();
|
||||
d3.select("body").transition()
|
||||
.style("background-color", "black");
|
||||
d3.selectAll("circle").transition()
|
||||
.duration(750)
|
||||
.delay(function (d, i) { return i * 10; })
|
||||
.attr("r", function (d) { return Math.sqrt(d * scale); });
|
||||
|
||||
function testOrdinalScale() {
|
||||
var x = d3.scale.ordinal().range(["foo", "bar"]);
|
||||
x.domain([0, 1]);
|
||||
var result = x(0);
|
||||
|
||||
var x = d3.scale.ordinal().domain(["a", "b", "c"]).rangePoints([120, 0]);
|
||||
var x = d3.scale.ordinal().domain(["a", "b", "c"]).rangePoints([120, 0], 1);
|
||||
|
||||
var x = d3.scale.ordinal().domain(["a", "b", "c"]).rangeBands([120, 0]);
|
||||
var x = d3.scale.ordinal().domain(["a", "b", "c"]).rangeBands([120, 0], .2);
|
||||
var x = d3.scale.ordinal().domain(["a", "b", "c"]).rangeBands([120, 0], .2, .1);
|
||||
|
||||
var x = d3.scale.ordinal().domain(["a", "b", "c"]).rangeRoundBands([0, 100]);
|
||||
var x = d3.scale.ordinal().domain(["a", "b", "c"]).rangeRoundBands([0, 100], .2);
|
||||
var x = d3.scale.ordinal().domain(["a", "b", "c"]).rangeRoundBands([120, 0], .2, .1);
|
||||
}
|
||||
|
||||
|
||||
function testKeys() {
|
||||
var x = d3.keys({ a: 1, b: 1 });
|
||||
|
||||
function abc() {
|
||||
this.a = 1;
|
||||
this.b = 2;
|
||||
}
|
||||
var x = d3.keys(new abc());
|
||||
}
|
||||
|
||||
function testSVGArc() {
|
||||
var a = d3.svg.arc().innerRadius(100).outerRadius(200);
|
||||
var a = d3.svg.arc().outerRadius(100).startAngle(0).endAngle(Math.PI);
|
||||
|
||||
var f = function () => {
|
||||
return 42;
|
||||
}
|
||||
var a = d3.svg.arc().innerRadius(0).outerRadius(f).startAngle(f).endAngle(f() * 2)
|
||||
|
||||
var str = a();
|
||||
var str = a({ outerRadius: 50 });
|
||||
var str = a.outerRadius(100)();
|
||||
var str = a.endAngle(Math.PI / 2)()
|
||||
var str = a({ startAngle: Math.PI / 2 });
|
||||
|
||||
var c = d3.svg.arc().innerRadius(0).outerRadius(100).startAngle(0).endAngle(2 * Math.PI).centroid();
|
||||
var num = c[0];
|
||||
}
|
||||
|
||||
function testPieLayout() {
|
||||
var p = d3.layout.pie().sort(null).value(function (d) { return d.value; });
|
||||
var data = [1, 2, 3, 4];
|
||||
var arcs = p(data);
|
||||
}
|
||||
|
||||
//Example from http://bl.ocks.org/3887235
|
||||
function testPieChart() {
|
||||
var width = 960,
|
||||
height = 500,
|
||||
radius = Math.min(width, height) / 2;
|
||||
|
||||
var color = d3.scale.ordinal()
|
||||
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
|
||||
|
||||
var arc = d3.svg.arc()
|
||||
.outerRadius(radius - 10)
|
||||
.innerRadius(0);
|
||||
|
||||
var pie = d3.layout.pie()
|
||||
.sort(null)
|
||||
.value(function (d) { return d.population; });
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
||||
|
||||
d3.csv("data.csv", function (error, data) {
|
||||
|
||||
data.forEach(function (d) {
|
||||
d.population = +d.population;
|
||||
});
|
||||
|
||||
var g = svg.selectAll(".arc")
|
||||
.data(pie(data))
|
||||
.enter().append("g")
|
||||
.attr("class", "arc");
|
||||
|
||||
g.append("path")
|
||||
.attr("d", arc)
|
||||
.style("fill", function (d) { return color(d.data.age); });
|
||||
|
||||
g.append("text")
|
||||
.attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; })
|
||||
.attr("dy", ".35em")
|
||||
.style("text-anchor", "middle")
|
||||
.text(function (d) { return d.data.age; });
|
||||
|
||||
});
|
||||
}
|
||||
/// <reference path="d3.d.ts" />
|
||||
|
||||
//Example from http://bl.ocks.org/3887235
|
||||
function testPieChart() {
|
||||
var width = 960,
|
||||
height = 500,
|
||||
radius = Math.min(width, height) / 2;
|
||||
|
||||
var color = d3.scale.ordinal()
|
||||
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
|
||||
|
||||
var arc = d3.svg.arc()
|
||||
.outerRadius(radius - 10)
|
||||
.innerRadius(0);
|
||||
|
||||
var pie = d3.layout.pie()
|
||||
.sort(null)
|
||||
.value(function (d) { return d.population; });
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
||||
|
||||
d3.csv("data.csv", function (error, data) {
|
||||
|
||||
data.forEach(function (d) {
|
||||
d.population = +d.population;
|
||||
});
|
||||
|
||||
var g = svg.selectAll(".arc")
|
||||
.data(pie(data))
|
||||
.enter().append("g")
|
||||
.attr("class", "arc");
|
||||
|
||||
g.append("path")
|
||||
.attr("d", arc)
|
||||
.style("fill", function (d) { return color(d.data.age); });
|
||||
|
||||
g.append("text")
|
||||
.attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; })
|
||||
.attr("dy", ".35em")
|
||||
.style("text-anchor", "middle")
|
||||
.text(function (d) { return d.data.age; });
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
//Example from http://bl.ocks.org/3887051
|
||||
function groupedBarChart() => {
|
||||
var margin = { top: 20, right: 20, bottom: 30, left: 40 },
|
||||
width = 960 - margin.left - margin.right,
|
||||
height = 500 - margin.top - margin.bottom;
|
||||
|
||||
var x0 = d3.scale.ordinal()
|
||||
.rangeRoundBands([0, width], .1);
|
||||
|
||||
var x1 = d3.scale.ordinal();
|
||||
|
||||
var y = d3.scale.linear()
|
||||
.range([height, 0]);
|
||||
|
||||
var color = d3.scale.ordinal()
|
||||
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
|
||||
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x0)
|
||||
.orient("bottom");
|
||||
|
||||
var yAxis = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
.tickFormat(d3.format(".2s"));
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
d3.csv("data.csv", function (error, data) {
|
||||
var ageNames = d3.keys(data[0]).filter(function (key) { return key !== "State"; });
|
||||
|
||||
data.forEach(function (d) {
|
||||
d.ages = ageNames.map(function (name) { return { name: name, value: +d[name] }; });
|
||||
});
|
||||
|
||||
x0.domain(data.map(function (d) { return d.State; }));
|
||||
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
|
||||
y.domain([0, d3.max(data, function (d) { return d3.max(d.ages, function (d) { return d.value; }); })]);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(yAxis)
|
||||
.append("text")
|
||||
.attr("transform", "rotate(-90)")
|
||||
.attr("y", 6)
|
||||
.attr("dy", ".71em")
|
||||
.style("text-anchor", "end")
|
||||
.text("Population");
|
||||
|
||||
var state = svg.selectAll(".state")
|
||||
.data(data)
|
||||
.enter().append("g")
|
||||
.attr("class", "g")
|
||||
.attr("transform", function (d) { return "translate(" + x0(d.State) + ",0)"; });
|
||||
|
||||
state.selectAll("rect")
|
||||
.data(function (d) { return d.ages; })
|
||||
.enter().append("rect")
|
||||
.attr("width", x1.rangeBand())
|
||||
.attr("x", function (d) { return x1(d.name); })
|
||||
.attr("y", function (d) { return y(d.value); })
|
||||
.attr("height", function (d) { return height - y(d.value); })
|
||||
.style("fill", function (d) { return color(d.name); });
|
||||
|
||||
var legend = svg.selectAll(".legend")
|
||||
.data(ageNames.reverse())
|
||||
.enter().append("g")
|
||||
.attr("class", "legend")
|
||||
.attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });
|
||||
|
||||
legend.append("rect")
|
||||
.attr("x", width - 18)
|
||||
.attr("width", 18)
|
||||
.attr("height", 18)
|
||||
.style("fill", color);
|
||||
|
||||
legend.append("text")
|
||||
.attr("x", width - 24)
|
||||
.attr("y", 9)
|
||||
.attr("dy", ".35em")
|
||||
.style("text-anchor", "end")
|
||||
.text(function (d) { return d; });
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
//Example from http://bl.ocks.org/3886208
|
||||
function stackedBarChart() {
|
||||
var margin = { top: 20, right: 20, bottom: 30, left: 40 },
|
||||
width = 960 - margin.left - margin.right,
|
||||
height = 500 - margin.top - margin.bottom;
|
||||
|
||||
var x = d3.scale.ordinal()
|
||||
.rangeRoundBands([0, width], .1);
|
||||
|
||||
var y = d3.scale.linear()
|
||||
.rangeRound([height, 0]);
|
||||
|
||||
var color = d3.scale.ordinal()
|
||||
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
|
||||
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom");
|
||||
|
||||
var yAxis = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
.tickFormat(d3.format(".2s"));
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
d3.csv("data.csv", function (error, data) {
|
||||
color.domain(d3.keys(data[0]).filter(function (key) { return key !== "State"; }));
|
||||
|
||||
data.forEach(function (d) {
|
||||
var y0 = 0;
|
||||
d.ages = color.domain().map(function (name) { return { name: name, y0: y0, y1: y0 += +d[name] }; });
|
||||
d.total = d.ages[d.ages.length - 1].y1;
|
||||
});
|
||||
|
||||
data.sort(function (a, b) { return b.total - a.total; });
|
||||
|
||||
x.domain(data.map(function (d) { return d.State; }));
|
||||
y.domain([0, d3.max(data, function (d) { return d.total; })]);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(yAxis)
|
||||
.append("text")
|
||||
.attr("transform", "rotate(-90)")
|
||||
.attr("y", 6)
|
||||
.attr("dy", ".71em")
|
||||
.style("text-anchor", "end")
|
||||
.text("Population");
|
||||
|
||||
var state = svg.selectAll(".state")
|
||||
.data(data)
|
||||
.enter().append("g")
|
||||
.attr("class", "g")
|
||||
.attr("transform", function (d) { return "translate(" + x(d.State) + ",0)"; });
|
||||
|
||||
state.selectAll("rect")
|
||||
.data(function (d) { return d.ages; })
|
||||
.enter().append("rect")
|
||||
.attr("width", x.rangeBand())
|
||||
.attr("y", function (d) { return y(d.y1); })
|
||||
.attr("height", function (d) { return y(d.y0) - y(d.y1); })
|
||||
.style("fill", function (d) { return color(d.name); });
|
||||
|
||||
var legend = svg.selectAll(".legend")
|
||||
.data(color.domain().reverse())
|
||||
.enter().append("g")
|
||||
.attr("class", "legend")
|
||||
.attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });
|
||||
|
||||
legend.append("rect")
|
||||
.attr("x", width - 18)
|
||||
.attr("width", 18)
|
||||
.attr("height", 18)
|
||||
.style("fill", color);
|
||||
|
||||
legend.append("text")
|
||||
.attr("x", width - 24)
|
||||
.attr("y", 9)
|
||||
.attr("dy", ".35em")
|
||||
.style("text-anchor", "end")
|
||||
.text(function (d) { return d; });
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// example from http://bl.ocks.org/3886394
|
||||
function normalizedBarChart() {
|
||||
var margin = { top: 20, right: 100, bottom: 30, left: 40 },
|
||||
width = 960 - margin.left - margin.right,
|
||||
height = 500 - margin.top - margin.bottom;
|
||||
|
||||
var x = d3.scale.ordinal()
|
||||
.rangeRoundBands([0, width], .1);
|
||||
|
||||
var y = d3.scale.linear()
|
||||
.rangeRound([height, 0]);
|
||||
|
||||
var color = d3.scale.ordinal()
|
||||
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
|
||||
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom");
|
||||
|
||||
var yAxis = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
.tickFormat(d3.format(".0%"));
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
d3.csv("data.csv", function (error, data) {
|
||||
color.domain(d3.keys(data[0]).filter(function (key) { return key !== "State"; }));
|
||||
|
||||
data.forEach(function (d) {
|
||||
var y0 = 0;
|
||||
d.ages = color.domain().map(function (name) { return { name: name, y0: y0, y1: y0 += +d[name] }; });
|
||||
d.ages.forEach(function (d) { d.y0 /= y0; d.y1 /= y0; });
|
||||
});
|
||||
|
||||
data.sort(function (a, b) { return b.ages[0].y1 - a.ages[0].y1; });
|
||||
|
||||
x.domain(data.map(function (d) { return d.State; }));
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(yAxis);
|
||||
|
||||
var state = svg.selectAll(".state")
|
||||
.data(data)
|
||||
.enter().append("g")
|
||||
.attr("class", "state")
|
||||
.attr("transform", function (d) { return "translate(" + x(d.State) + ",0)"; });
|
||||
|
||||
state.selectAll("rect")
|
||||
.data(function (d) { return d.ages; })
|
||||
.enter().append("rect")
|
||||
.attr("width", x.rangeBand())
|
||||
.attr("y", function (d) { return y(d.y1); })
|
||||
.attr("height", function (d) { return y(d.y0) - y(d.y1); })
|
||||
.style("fill", function (d) { return color(d.name); });
|
||||
|
||||
var legend = svg.select(".state:last-child").selectAll(".legend")
|
||||
.data(function (d) { return d.ages; })
|
||||
.enter().append("g")
|
||||
.attr("class", "legend")
|
||||
.attr("transform", function (d) { return "translate(" + x.rangeBand() / 2 + "," + y((d.y0 + d.y1) / 2) + ")"; });
|
||||
|
||||
legend.append("line")
|
||||
.attr("x2", 10);
|
||||
|
||||
legend.append("text")
|
||||
.attr("x", 13)
|
||||
.attr("dy", ".35em")
|
||||
.text(function (d) { return d.name; });
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// example from http://bl.ocks.org/3885705
|
||||
function sortablebarChart() {
|
||||
var margin = { top: 20, right: 20, bottom: 30, left: 40 },
|
||||
width = 960 - margin.left - margin.right,
|
||||
height = 500 - margin.top - margin.bottom;
|
||||
|
||||
var formatPercent = d3.format(".0%");
|
||||
|
||||
var x = d3.scale.ordinal()
|
||||
.rangeRoundBands([0, width], .1, 1);
|
||||
|
||||
var y = d3.scale.linear()
|
||||
.range([height, 0]);
|
||||
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom");
|
||||
|
||||
var yAxis = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
.tickFormat(formatPercent);
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
d3.tsv("data.tsv", function (error, data) {
|
||||
|
||||
data.forEach(function (d) {
|
||||
d.frequency = +d.frequency;
|
||||
});
|
||||
|
||||
x.domain(data.map(function (d) { return d.letter; }));
|
||||
y.domain([0, d3.max(data, function (d) { return d.frequency; })]);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(yAxis)
|
||||
.append("text")
|
||||
.attr("transform", "rotate(-90)")
|
||||
.attr("y", 6)
|
||||
.attr("dy", ".71em")
|
||||
.style("text-anchor", "end")
|
||||
.text("Frequency");
|
||||
|
||||
svg.selectAll(".bar")
|
||||
.data(data)
|
||||
.enter().append("rect")
|
||||
.attr("class", "bar")
|
||||
.attr("x", function (d) { return x(d.letter); })
|
||||
.attr("width", x.rangeBand())
|
||||
.attr("y", function (d) { return y(d.frequency); })
|
||||
.attr("height", function (d) { return height - y(d.frequency); });
|
||||
|
||||
d3.select("input").on("change", change);
|
||||
|
||||
var sortTimeout = setTimeout(function () {
|
||||
d3.select("input").property("checked", true).each(change);
|
||||
}, 2000);
|
||||
|
||||
function change() {
|
||||
clearTimeout(sortTimeout);
|
||||
|
||||
var x0 = x.domain(data.sort(this.checked
|
||||
? function (a, b) { return b.frequency - a.frequency; }
|
||||
: function (a, b) { return d3.ascending(a.letter, b.letter); })
|
||||
.map(function (d) { return d.letter; }))
|
||||
.copy();
|
||||
|
||||
var transition = svg.transition().duration(750),
|
||||
delay = function (d, i) { return i * 50; };
|
||||
|
||||
transition.selectAll(".bar")
|
||||
.delay(delay)
|
||||
.attr("x", function (d) { return x0(d.letter); });
|
||||
|
||||
transition.select(".x.axis")
|
||||
.call(xAxis)
|
||||
.selectAll("g")
|
||||
.delay(delay);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//example from http://bl.ocks.org/4063318
|
||||
function callenderView() {
|
||||
var width = 960,
|
||||
height = 136,
|
||||
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(11).map(function (d) { return "q" + d + "-11"; }));
|
||||
|
||||
var svg = d3.select("body").selectAll("svg")
|
||||
.data(d3.range(1990, 2011))
|
||||
.enter().append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("class", "RdYlGn")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
|
||||
|
||||
svg.append("text")
|
||||
.attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
|
||||
.style("text-anchor", "middle")
|
||||
.text(function (d) { return d; });
|
||||
|
||||
var rect = svg.selectAll(".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 parseInt(week(d)) * cellSize; })
|
||||
.attr("y", function (d) { return parseInt(day(d)) * cellSize; })
|
||||
.datum(format);
|
||||
|
||||
rect.append("title")
|
||||
.text(function (d) { return d; });
|
||||
|
||||
svg.selectAll(".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 " + color(data[d]); })
|
||||
.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";
|
||||
}
|
||||
|
||||
d3.select(self.frameElement).style("height", "2910px");
|
||||
}
|
||||
|
||||
Vendored
+464
-387
@@ -1,387 +1,464 @@
|
||||
interface ID3Selectors {
|
||||
select: (selector: string) => ID3Selection;
|
||||
selectAll: (selector: string) => ID3Selection;
|
||||
}
|
||||
|
||||
interface ID3behavior
|
||||
{
|
||||
drag: () => any;
|
||||
zoom: () => any;
|
||||
}
|
||||
|
||||
interface ID3event
|
||||
{
|
||||
dx: number;
|
||||
dy: number;
|
||||
clientX: number;
|
||||
clientY: number;
|
||||
translate:number[];
|
||||
scale: number;
|
||||
sourceEvent: ID3event;
|
||||
}
|
||||
|
||||
interface ID3Base extends ID3Selectors {
|
||||
// behavior
|
||||
behavior: ID3behavior;
|
||||
event: ID3event;
|
||||
// Array Helpers
|
||||
ascending: (a: number, b: number) => number;
|
||||
descending: (a: number, b: number) => number;
|
||||
min: (arr: any[], map?: (v: any) => any ) => any;
|
||||
max: (arr: any[], map?: (v: any) => any ) => any;
|
||||
extent: (arr: any[], map?: (v: any) => any ) => any[];
|
||||
quantile: (arr: number[], p: number) => number;
|
||||
bisectLeft: (arr: any[], x: any, low?: number, high?: number) => number;
|
||||
bisect: (arr: any[], x: any, low?: number, high?: number) => number;
|
||||
bisectRight: (arr: any[], x: any, low?: number, high?: number) => number;
|
||||
first: (arr: any[], comparator: (a: any, b: any) => any ) => any;
|
||||
last: (arr: any[], comparator: (a: any, b:any) => any ) => any;
|
||||
|
||||
// Loading resources
|
||||
xhr: {
|
||||
(url: string, callback: (xhr: XMLHttpRequest) => void): void;
|
||||
(url: string, mime: string, callback: (xhr: XMLHttpRequest) => void): void;
|
||||
};
|
||||
text: {
|
||||
(url: string, callback: (response: string) => void): void;
|
||||
(url: string, mime: string, callback: (response: string) => void): void;
|
||||
};
|
||||
json: (url: string, callback: (response: any) => void) => void;
|
||||
xml: {
|
||||
(url: string, callback: (response: Document) => void): void;
|
||||
(url: string, mime: string, callback: (response: Document) => void): void;
|
||||
};
|
||||
html: (url: string, callback: (response: DocumentFragment) => void) => void;
|
||||
csv: {
|
||||
(url: string, callback: (error: any, response: any[]) => void);
|
||||
parse(string: string): any[];
|
||||
parseRows(string: string, accessor: (row: any[], index: number) => any): any;
|
||||
format(rows: any[]): string;
|
||||
};
|
||||
|
||||
time: ID3Time;
|
||||
scale: {
|
||||
linear(): ID3LinearScale;
|
||||
ordinal(): ID3OrdinalScale;
|
||||
category10(): ID3OrdinalScale;
|
||||
category20(): ID3OrdinalScale;
|
||||
category20b(): ID3OrdinalScale;
|
||||
category20c(): ID3OrdinalScale;
|
||||
};
|
||||
interpolate: ID3BaseInterpolate;
|
||||
interpolateNumber: ID3BaseInterpolate;
|
||||
interpolateRound: ID3BaseInterpolate;
|
||||
interpolateString: ID3BaseInterpolate;
|
||||
interpolateRgb: ID3BaseInterpolate;
|
||||
interpolateHsl: ID3BaseInterpolate;
|
||||
interpolateArray: ID3BaseInterpolate;
|
||||
interpolateObject: ID3BaseInterpolate;
|
||||
interpolateTransform: ID3BaseInterpolate;
|
||||
layout: ID3Layout;
|
||||
svg: ID3Svg;
|
||||
random: ID3Random;
|
||||
keys(map: Object): any[];
|
||||
}
|
||||
|
||||
interface ID3Selection extends ID3Selectors {
|
||||
attr: {
|
||||
(name: string): string;
|
||||
(name: string, value: any): ID3Selection;
|
||||
(name: string, valueFunction: (data: any, index: number) => any): ID3Selection;
|
||||
};
|
||||
|
||||
classed: {
|
||||
(name: string): string;
|
||||
(name: string, value: any): ID3Selection;
|
||||
(name: string, valueFunction: (data: any, index: number) => any): ID3Selection;
|
||||
};
|
||||
|
||||
style: {
|
||||
(name: string): string;
|
||||
(name: string, value: any, priority?: string): ID3Selection;
|
||||
(name: string, valueFunction: (data: any, index: number) => any, priority?: string): ID3Selection;
|
||||
};
|
||||
|
||||
property: {
|
||||
(name: string): void;
|
||||
(name: string, value: any): ID3Selection;
|
||||
(name: string, valueFunction: (data: any, index: number) => any): ID3Selection;
|
||||
};
|
||||
|
||||
text: {
|
||||
(): string;
|
||||
(value: any): ID3Selection;
|
||||
(valueFunction: (data: any, index: number) => any): ID3Selection;
|
||||
};
|
||||
|
||||
html: {
|
||||
(): string;
|
||||
(value: any): ID3Selection;
|
||||
(valueFunction: (data: any, index: number) => any): ID3Selection;
|
||||
};
|
||||
|
||||
append: (name: string) => ID3Selection;
|
||||
insert: (name: string, before: string) => ID3Selection;
|
||||
remove: () => ID3Selection;
|
||||
|
||||
data: {
|
||||
(values: (data: any, index: number) => any) : any;
|
||||
(values: any[], key?: (data: any, index: number) => any): ID3UpdateSelection;
|
||||
};
|
||||
|
||||
call(callback: (selection: ID3Selection) => void): ID3Selection;
|
||||
}
|
||||
|
||||
interface ID3EnterSelection {
|
||||
append: (name: string) => ID3Selection;
|
||||
insert: (name: string, before: string) => ID3Selection;
|
||||
select: (selector: string) => ID3Selection;
|
||||
empty: () => bool;
|
||||
node: () => Node;
|
||||
}
|
||||
|
||||
interface ID3UpdateSelection extends ID3Selection {
|
||||
enter: () => ID3EnterSelection;
|
||||
update: () => ID3Selection;
|
||||
exit: () => ID3Selection;
|
||||
}
|
||||
|
||||
interface ID3Time {
|
||||
second: ID3Interval;
|
||||
minute: ID3Interval;
|
||||
hour: ID3Interval;
|
||||
day: ID3Interval;
|
||||
week: ID3Interval;
|
||||
sunday: ID3Interval;
|
||||
monday: ID3Interval;
|
||||
tuesday: ID3Interval;
|
||||
wednesday: ID3Interval;
|
||||
thursday: ID3Interval;
|
||||
friday: ID3Interval;
|
||||
saturday: ID3Interval;
|
||||
month: ID3Interval;
|
||||
year: ID3Interval;
|
||||
|
||||
seconds: ID3Range;
|
||||
minutes: ID3Range;
|
||||
hours: ID3Range;
|
||||
days: ID3Range;
|
||||
weeks: ID3Range;
|
||||
months: ID3Range;
|
||||
years: ID3Range;
|
||||
|
||||
sundays: ID3Range;
|
||||
mondays: ID3Range;
|
||||
tuesdays: ID3Range;
|
||||
wednesdays: ID3Range;
|
||||
thursdays: ID3Range;
|
||||
fridays: ID3Range;
|
||||
saturdays: ID3Range;
|
||||
format: {
|
||||
|
||||
(specifier: string): ID3TimeFormat;
|
||||
utc: (specifier: string) => ID3TimeFormat;
|
||||
iso: ID3TimeFormat;
|
||||
};
|
||||
|
||||
scale(): ID3TimeScale;
|
||||
}
|
||||
|
||||
interface ID3Range {
|
||||
(start: Date, end: Date, step?: number): Date[];
|
||||
}
|
||||
|
||||
interface ID3Interval {
|
||||
(date: Date): Date;
|
||||
floor: (date: Date) => Date;
|
||||
round: (date: Date) => Date;
|
||||
ceil: (date: Date) => Date;
|
||||
range: ID3Range;
|
||||
offset: (date: Date, step: number) => Date;
|
||||
utc: ID3Interval;
|
||||
}
|
||||
|
||||
interface ID3TimeFormat {
|
||||
(date: Date): string;
|
||||
parse: (string: string) => Date;
|
||||
}
|
||||
|
||||
interface ID3LinearScale {
|
||||
(value: number): number;
|
||||
invert(value: number): number;
|
||||
domain(numbers: any[]): ID3LinearScale;
|
||||
range: {
|
||||
(values: any[]): ID3LinearScale;
|
||||
(): any[];
|
||||
};
|
||||
rangeRound: (values: any[]) => ID3LinearScale;
|
||||
interpolate: {
|
||||
(): ID3Interpolate;
|
||||
(factory: ID3Interpolate): ID3LinearScale;
|
||||
};
|
||||
clamp(clamp: bool): ID3LinearScale;
|
||||
nice(): ID3LinearScale;
|
||||
ticks(count: number): any[];
|
||||
tickFormat(count: number): (n: number) => string;
|
||||
copy: ID3LinearScale;
|
||||
}
|
||||
|
||||
interface ID3OrdinalScale {
|
||||
(value: any): any;
|
||||
domain(values: any[]): ID3OrdinalScale;
|
||||
range: {
|
||||
(values: any[]): ID3OrdinalScale;
|
||||
(): any[];
|
||||
};
|
||||
rangePoints(interval: any[], padding?: number): ID3OrdinalScale;
|
||||
rangeBands(interval: any[], padding?: number, outerPadding?: number): ID3OrdinalScale;
|
||||
rangeRoundBands(interval: any[], padding?: number, outerPadding?: number): ID3OrdinalScale;
|
||||
rangeBand(): any[];
|
||||
rangeExtent(): any[];
|
||||
copy: ID3OrdinalScale;
|
||||
}
|
||||
|
||||
interface ID3TimeScale {
|
||||
(value: Date): number;
|
||||
invert(value: number): Date;
|
||||
domain(numbers: any[]): ID3TimeScale;
|
||||
range: {
|
||||
(values: any[]): ID3TimeScale;
|
||||
(): any[];
|
||||
};
|
||||
rangeRound: (values: any[]) => ID3TimeScale;
|
||||
interpolate: {
|
||||
(): ID3Interpolate;
|
||||
(factory: ID3InterpolateFactory): ID3TimeScale;
|
||||
};
|
||||
clamp(clamp: bool): ID3TimeScale;
|
||||
ticks: {
|
||||
(count: number): any[];
|
||||
(range: ID3Range, count: number): any[];
|
||||
};
|
||||
tickFormat(count: number): (n: number) => string;
|
||||
copy(): ID3TimeScale;
|
||||
}
|
||||
|
||||
interface ID3InterpolateFactory {
|
||||
(a: any, b: any): ID3BaseInterpolate;
|
||||
}
|
||||
interface ID3BaseInterpolate {
|
||||
(a: any, b: any): ID3Interpolate;
|
||||
}
|
||||
|
||||
interface ID3Interpolate {
|
||||
(t: number): number;
|
||||
}
|
||||
|
||||
interface ID3Layout {
|
||||
stack(): ID3StackLayout;
|
||||
pie(): ID3PieLayout;
|
||||
}
|
||||
|
||||
interface ID3StackLayout {
|
||||
(layers: any[], index?: number): any[];
|
||||
values(accessor?: (d: any) => any): ID3StackLayout;
|
||||
offset(offset: string): ID3StackLayout;
|
||||
}
|
||||
|
||||
interface ID3PieLayout {
|
||||
(values: any[], index?: number): ID3ArcDescriptor[];
|
||||
value: {
|
||||
(): (d: any, index: number) => number;
|
||||
(accessor: (d: any, index: number) => number): ID3PieLayout;
|
||||
};
|
||||
sort: {
|
||||
(): (d1: any, d2: any) => number;
|
||||
(comparator: (d1: any, d2: any) => number): ID3PieLayout;
|
||||
};
|
||||
startAngle: {
|
||||
(): number;
|
||||
(angle: number): ID3SvgArc;
|
||||
(angle: () => number): ID3SvgArc;
|
||||
};
|
||||
endAngle: {
|
||||
(): number;
|
||||
(angle: number): ID3SvgArc;
|
||||
(angle: () => number): ID3SvgArc;
|
||||
};
|
||||
}
|
||||
|
||||
interface ID3ArcDescriptor {
|
||||
value: any;
|
||||
data: any;
|
||||
startAngle: number;
|
||||
endAngle: number;
|
||||
}
|
||||
|
||||
interface ID3SVGSymbol
|
||||
{
|
||||
type: (string) => ID3SVGSymbol;
|
||||
size: (number) => ID3SVGSymbol;
|
||||
}
|
||||
|
||||
interface ID3Svg {
|
||||
symbol: ()=> ID3SVGSymbol;
|
||||
axis(): ID3SvgAxis;
|
||||
arc(): ID3SvgArc;
|
||||
}
|
||||
|
||||
interface ID3SvgAxis {
|
||||
(selection: ID3Selection): void;
|
||||
scale: {
|
||||
(): any;
|
||||
(scale: any): ID3SvgAxis;
|
||||
};
|
||||
|
||||
orient: {
|
||||
(): string;
|
||||
(orientation: string): ID3SvgAxis;
|
||||
};
|
||||
|
||||
ticks: {
|
||||
(count: number): ID3SvgAxis;
|
||||
(range: ID3Range, count?: number): ID3SvgAxis;
|
||||
};
|
||||
|
||||
tickSubdivide(count: number): ID3SvgAxis;
|
||||
tickSize(major?: number, minor?: number, end?: number): ID3SvgAxis;
|
||||
tickFormat(formatter: (value: any) => string): ID3SvgAxis;
|
||||
}
|
||||
|
||||
interface ID3SvgArc {
|
||||
(options?: ID3SvgArcOptions): string;
|
||||
innerRadius: {
|
||||
(): number;
|
||||
(radius: number): ID3SvgArc;
|
||||
(radius: () => number): ID3SvgArc;
|
||||
};
|
||||
outerRadius: {
|
||||
(): number;
|
||||
(radius: number): ID3SvgArc;
|
||||
(radius: () => number): ID3SvgArc;
|
||||
};
|
||||
startAngle: {
|
||||
(): number;
|
||||
(angle: number): ID3SvgArc;
|
||||
(angle: () => number): ID3SvgArc;
|
||||
};
|
||||
endAngle: {
|
||||
(): number;
|
||||
(angle: number): ID3SvgArc;
|
||||
(angle: () => number): ID3SvgArc;
|
||||
};
|
||||
centroid(options?: ID3SvgArcOptions): number[];
|
||||
}
|
||||
|
||||
interface ID3SvgArcOptions {
|
||||
innerRadius?: number;
|
||||
outerRadius?: number;
|
||||
startAngle?: number;
|
||||
endAngle?: number;
|
||||
}
|
||||
|
||||
interface ID3Random {
|
||||
normal(mean?: number, deviation?: number): () => number;
|
||||
}
|
||||
|
||||
declare var d3: ID3Base;
|
||||
interface ID3Selectors {
|
||||
select: {
|
||||
(selector: string): ID3Selection;
|
||||
(element: Element): ID3Selection;
|
||||
};
|
||||
selectAll: {
|
||||
(selector: string): ID3Selection;
|
||||
(elements: Element[]): ID3Selection;
|
||||
};
|
||||
}
|
||||
|
||||
interface ID3behavior
|
||||
{
|
||||
drag: () => any;
|
||||
zoom: () => any;
|
||||
}
|
||||
|
||||
interface ID3event
|
||||
{
|
||||
dx: number;
|
||||
dy: number;
|
||||
clientX: number;
|
||||
clientY: number;
|
||||
translate:number[];
|
||||
scale: number;
|
||||
sourceEvent: ID3event;
|
||||
}
|
||||
|
||||
interface ID3Base extends ID3Selectors {
|
||||
// behavior
|
||||
behavior: ID3behavior;
|
||||
event: ID3event;
|
||||
// Array Helpers
|
||||
ascending: (a: number, b: number) => number;
|
||||
descending: (a: number, b: number) => number;
|
||||
min: (arr: any[], map?: (v: any) => any ) => any;
|
||||
max: (arr: any[], map?: (v: any) => any ) => any;
|
||||
extent: (arr: any[], map?: (v: any) => any ) => any[];
|
||||
quantile: (arr: number[], p: number) => number;
|
||||
bisectLeft: (arr: any[], x: any, low?: number, high?: number) => number;
|
||||
bisect: (arr: any[], x: any, low?: number, high?: number) => number;
|
||||
bisectRight: (arr: any[], x: any, low?: number, high?: number) => number;
|
||||
first: (arr: any[], comparator: (a: any, b: any) => any ) => any;
|
||||
last: (arr: any[], comparator: (a: any, b: any) => any) => any;
|
||||
range:(start: number, stop?: number, step?: number) => number[];
|
||||
|
||||
// Loading resources
|
||||
xhr: {
|
||||
(url: string, callback: (xhr: XMLHttpRequest) => void): void;
|
||||
(url: string, mime: string, callback: (xhr: XMLHttpRequest) => void): void;
|
||||
};
|
||||
text: {
|
||||
(url: string, callback: (response: string) => void): void;
|
||||
(url: string, mime: string, callback: (response: string) => void): void;
|
||||
};
|
||||
json: (url: string, callback: (response: any) => void) => void;
|
||||
xml: {
|
||||
(url: string, callback: (response: Document) => void): void;
|
||||
(url: string, mime: string, callback: (response: Document) => void): void;
|
||||
};
|
||||
html: (url: string, callback: (response: DocumentFragment) => void) => void;
|
||||
csv: {
|
||||
(url: string, callback: (error: any, response: any[]) => void);
|
||||
parse(string: string): any[];
|
||||
parseRows(string: string, accessor: (row: any[], index: number) => any): any;
|
||||
format(rows: any[]): string;
|
||||
};
|
||||
tsv: {
|
||||
(url: string, callback: (error: any, response: any[]) => void );
|
||||
parse(string: string): any[];
|
||||
parseRows(string: string, accessor: (row: any[], index: number) => any): any;
|
||||
format(rows: any[]): string;
|
||||
};
|
||||
|
||||
time: ID3Time;
|
||||
scale: {
|
||||
linear(): ID3LinearScale;
|
||||
ordinal(): ID3OrdinalScale;
|
||||
quantize(): ID3QuantizeScale;
|
||||
category10(): ID3OrdinalScale;
|
||||
category20(): ID3OrdinalScale;
|
||||
category20b(): ID3OrdinalScale;
|
||||
category20c(): ID3OrdinalScale;
|
||||
};
|
||||
interpolate: ID3BaseInterpolate;
|
||||
interpolateNumber: ID3BaseInterpolate;
|
||||
interpolateRound: ID3BaseInterpolate;
|
||||
interpolateString: ID3BaseInterpolate;
|
||||
interpolateRgb: ID3BaseInterpolate;
|
||||
interpolateHsl: ID3BaseInterpolate;
|
||||
interpolateArray: ID3BaseInterpolate;
|
||||
interpolateObject: ID3BaseInterpolate;
|
||||
interpolateTransform: ID3BaseInterpolate;
|
||||
layout: ID3Layout;
|
||||
svg: ID3Svg;
|
||||
random: ID3Random;
|
||||
keys(map: Object): any[];
|
||||
|
||||
format(specifier: string): (value: number) => string;
|
||||
|
||||
nest(): ID3Nest;
|
||||
}
|
||||
|
||||
interface ID3Selection extends ID3Selectors {
|
||||
attr: {
|
||||
(name: string): string;
|
||||
(name: string, value: any): ID3Selection;
|
||||
(name: string, valueFunction: (data: any, index: number) => any): ID3Selection;
|
||||
};
|
||||
|
||||
classed: {
|
||||
(name: string): string;
|
||||
(name: string, value: any): ID3Selection;
|
||||
(name: string, valueFunction: (data: any, index: number) => any): ID3Selection;
|
||||
};
|
||||
|
||||
style: {
|
||||
(name: string): string;
|
||||
(name: string, value: any, priority?: string): ID3Selection;
|
||||
(name: string, valueFunction: (data: any, index: number) => any, priority?: string): ID3Selection;
|
||||
};
|
||||
|
||||
property: {
|
||||
(name: string): void;
|
||||
(name: string, value: any): ID3Selection;
|
||||
(name: string, valueFunction: (data: any, index: number) => any): ID3Selection;
|
||||
};
|
||||
|
||||
text: {
|
||||
(): string;
|
||||
(value: any): ID3Selection;
|
||||
(valueFunction: (data: any, index: number) => any): ID3Selection;
|
||||
};
|
||||
|
||||
html: {
|
||||
(): string;
|
||||
(value: any): ID3Selection;
|
||||
(valueFunction: (data: any, index: number) => any): ID3Selection;
|
||||
};
|
||||
|
||||
append: (name: string) => ID3Selection;
|
||||
insert: (name: string, before: string) => ID3Selection;
|
||||
remove: () => ID3Selection;
|
||||
|
||||
data: {
|
||||
(values: (data: any, index: number) => any): ID3UpdateSelection;
|
||||
(values: any[], key?: (data: any, index: number) => any): ID3UpdateSelection;
|
||||
};
|
||||
|
||||
datum: {
|
||||
(values: (data: any, index: number) => any): ID3UpdateSelection;
|
||||
(values: any): ID3UpdateSelection;
|
||||
};
|
||||
|
||||
filter: {
|
||||
(filter: (data: any, index: number) => bool): ID3UpdateSelection;
|
||||
(filter: string): ID3UpdateSelection;
|
||||
};
|
||||
|
||||
call(callback: (selection: ID3Selection) => void ): ID3Selection;
|
||||
each(eachFunction: (data: any, index: number) => any): ID3Selection;
|
||||
on: {
|
||||
(type: string): (data: any, index: number) => any;
|
||||
(type: string, listener: (data: any, index: number) => any, capture?: bool): ID3Selection;
|
||||
};
|
||||
|
||||
transition: () => ID3Transition;
|
||||
}
|
||||
|
||||
interface ID3EnterSelection {
|
||||
append: (name: string) => ID3Selection;
|
||||
insert: (name: string, before: string) => ID3Selection;
|
||||
select: (selector: string) => ID3Selection;
|
||||
empty: () => bool;
|
||||
node: () => Node;
|
||||
}
|
||||
|
||||
interface ID3UpdateSelection extends ID3Selection {
|
||||
enter: () => ID3EnterSelection;
|
||||
update: () => ID3Selection;
|
||||
exit: () => ID3Selection;
|
||||
}
|
||||
|
||||
interface ID3Transition {
|
||||
duration: {
|
||||
(duration: number): ID3Transition;
|
||||
(duration: (data: any, index: number) => any): ID3Transition;
|
||||
};
|
||||
delay: {
|
||||
(delay: number): ID3Transition;
|
||||
(delay: (data: any, index: number) => any): ID3Transition;
|
||||
};
|
||||
attr: {
|
||||
(name: string): string;
|
||||
(name: string, value: any): ID3Transition;
|
||||
(name: string, valueFunction: (data: any, index: number) => any): ID3Transition;
|
||||
};
|
||||
call(callback: (selection: ID3Selection) => void ): ID3Transition;
|
||||
|
||||
select: (selector: string) => ID3Transition;
|
||||
selectAll: (selector: string) => ID3Transition;
|
||||
}
|
||||
|
||||
interface ID3Nest {
|
||||
key(keyFunction: (data: any, index: number) => any): ID3Nest;
|
||||
rollup(rollupFunction: (data: any, index: number) => any): ID3Nest;
|
||||
map(values: any[]): ID3Nest;
|
||||
}
|
||||
|
||||
interface ID3Time {
|
||||
second: ID3Interval;
|
||||
minute: ID3Interval;
|
||||
hour: ID3Interval;
|
||||
day: ID3Interval;
|
||||
week: ID3Interval;
|
||||
sunday: ID3Interval;
|
||||
monday: ID3Interval;
|
||||
tuesday: ID3Interval;
|
||||
wednesday: ID3Interval;
|
||||
thursday: ID3Interval;
|
||||
friday: ID3Interval;
|
||||
saturday: ID3Interval;
|
||||
month: ID3Interval;
|
||||
year: ID3Interval;
|
||||
|
||||
seconds: ID3Range;
|
||||
minutes: ID3Range;
|
||||
hours: ID3Range;
|
||||
days: ID3Range;
|
||||
weeks: ID3Range;
|
||||
months: ID3Range;
|
||||
years: ID3Range;
|
||||
|
||||
sundays: ID3Range;
|
||||
mondays: ID3Range;
|
||||
tuesdays: ID3Range;
|
||||
wednesdays: ID3Range;
|
||||
thursdays: ID3Range;
|
||||
fridays: ID3Range;
|
||||
saturdays: ID3Range;
|
||||
format: {
|
||||
|
||||
(specifier: string): ID3TimeFormat;
|
||||
utc: (specifier: string) => ID3TimeFormat;
|
||||
iso: ID3TimeFormat;
|
||||
};
|
||||
|
||||
scale(): ID3TimeScale;
|
||||
}
|
||||
|
||||
interface ID3Range {
|
||||
(start: Date, end: Date, step?: number): Date[];
|
||||
}
|
||||
|
||||
interface ID3Interval {
|
||||
(date: Date): Date;
|
||||
floor: (date: Date) => Date;
|
||||
round: (date: Date) => Date;
|
||||
ceil: (date: Date) => Date;
|
||||
range: ID3Range;
|
||||
offset: (date: Date, step: number) => Date;
|
||||
utc: ID3Interval;
|
||||
}
|
||||
|
||||
interface ID3TimeFormat {
|
||||
(date: Date): string;
|
||||
parse: (string: string) => Date;
|
||||
}
|
||||
|
||||
interface ID3LinearScale {
|
||||
(value: number): number;
|
||||
invert(value: number): number;
|
||||
domain(numbers: any[]): ID3LinearScale;
|
||||
range: {
|
||||
(values: any[]): ID3LinearScale;
|
||||
(): any[];
|
||||
};
|
||||
rangeRound: (values: any[]) => ID3LinearScale;
|
||||
interpolate: {
|
||||
(): ID3Interpolate;
|
||||
(factory: ID3Interpolate): ID3LinearScale;
|
||||
};
|
||||
clamp(clamp: bool): ID3LinearScale;
|
||||
nice(): ID3LinearScale;
|
||||
ticks(count: number): any[];
|
||||
tickFormat(count: number): (n: number) => string;
|
||||
copy: ID3LinearScale;
|
||||
}
|
||||
|
||||
interface ID3OrdinalScale {
|
||||
(value: any): any;
|
||||
domain: {
|
||||
(values: any[]): ID3OrdinalScale;
|
||||
(): any[];
|
||||
};
|
||||
range: {
|
||||
(values: any[]): ID3OrdinalScale;
|
||||
(): any[];
|
||||
};
|
||||
rangePoints(interval: any[], padding?: number): ID3OrdinalScale;
|
||||
rangeBands(interval: any[], padding?: number, outerPadding?: number): ID3OrdinalScale;
|
||||
rangeRoundBands(interval: any[], padding?: number, outerPadding?: number): ID3OrdinalScale;
|
||||
rangeBand(): number;
|
||||
rangeExtent(): any[];
|
||||
copy: ID3OrdinalScale;
|
||||
}
|
||||
|
||||
interface ID3QuantizeScale {
|
||||
(value: any): any;
|
||||
domain: {
|
||||
(values: number[]): ID3QuantizeScale;
|
||||
(): any[];
|
||||
};
|
||||
range: {
|
||||
(values: any[]): ID3QuantizeScale;
|
||||
(): any[];
|
||||
};
|
||||
copy: ID3QuantizeScale;
|
||||
}
|
||||
|
||||
interface ID3TimeScale {
|
||||
(value: Date): number;
|
||||
invert(value: number): Date;
|
||||
domain(numbers: any[]): ID3TimeScale;
|
||||
range: {
|
||||
(values: any[]): ID3TimeScale;
|
||||
(): any[];
|
||||
};
|
||||
rangeRound: (values: any[]) => ID3TimeScale;
|
||||
interpolate: {
|
||||
(): ID3Interpolate;
|
||||
(factory: ID3InterpolateFactory): ID3TimeScale;
|
||||
};
|
||||
clamp(clamp: bool): ID3TimeScale;
|
||||
ticks: {
|
||||
(count: number): any[];
|
||||
(range: ID3Range, count: number): any[];
|
||||
};
|
||||
tickFormat(count: number): (n: number) => string;
|
||||
copy(): ID3TimeScale;
|
||||
}
|
||||
|
||||
interface ID3InterpolateFactory {
|
||||
(a: any, b: any): ID3BaseInterpolate;
|
||||
}
|
||||
interface ID3BaseInterpolate {
|
||||
(a: any, b: any): ID3Interpolate;
|
||||
}
|
||||
|
||||
interface ID3Interpolate {
|
||||
(t: number): number;
|
||||
}
|
||||
|
||||
interface ID3Layout {
|
||||
stack(): ID3StackLayout;
|
||||
pie(): ID3PieLayout;
|
||||
}
|
||||
|
||||
interface ID3StackLayout {
|
||||
(layers: any[], index?: number): any[];
|
||||
values(accessor?: (d: any) => any): ID3StackLayout;
|
||||
offset(offset: string): ID3StackLayout;
|
||||
}
|
||||
|
||||
interface ID3PieLayout {
|
||||
(values: any[], index?: number): ID3ArcDescriptor[];
|
||||
value: {
|
||||
(): (d: any, index: number) => number;
|
||||
(accessor: (d: any, index: number) => number): ID3PieLayout;
|
||||
};
|
||||
sort: {
|
||||
(): (d1: any, d2: any) => number;
|
||||
(comparator: (d1: any, d2: any) => number): ID3PieLayout;
|
||||
};
|
||||
startAngle: {
|
||||
(): number;
|
||||
(angle: number): ID3SvgArc;
|
||||
(angle: () => number): ID3SvgArc;
|
||||
};
|
||||
endAngle: {
|
||||
(): number;
|
||||
(angle: number): ID3SvgArc;
|
||||
(angle: () => number): ID3SvgArc;
|
||||
};
|
||||
}
|
||||
|
||||
interface ID3ArcDescriptor {
|
||||
value: any;
|
||||
data: any;
|
||||
startAngle: number;
|
||||
endAngle: number;
|
||||
}
|
||||
|
||||
interface ID3SVGSymbol
|
||||
{
|
||||
type: (string) => ID3SVGSymbol;
|
||||
size: (number) => ID3SVGSymbol;
|
||||
}
|
||||
|
||||
interface ID3Svg {
|
||||
symbol: ()=> ID3SVGSymbol;
|
||||
axis(): ID3SvgAxis;
|
||||
arc(): ID3SvgArc;
|
||||
}
|
||||
|
||||
interface ID3SvgAxis {
|
||||
(selection: ID3Selection): void;
|
||||
scale: {
|
||||
(): any;
|
||||
(scale: any): ID3SvgAxis;
|
||||
};
|
||||
|
||||
orient: {
|
||||
(): string;
|
||||
(orientation: string): ID3SvgAxis;
|
||||
};
|
||||
|
||||
ticks: {
|
||||
(count: number): ID3SvgAxis;
|
||||
(range: ID3Range, count?: number): ID3SvgAxis;
|
||||
};
|
||||
|
||||
tickSubdivide(count: number): ID3SvgAxis;
|
||||
tickSize(major?: number, minor?: number, end?: number): ID3SvgAxis;
|
||||
tickFormat(formatter: (value: any) => string): ID3SvgAxis;
|
||||
}
|
||||
|
||||
interface ID3SvgArc {
|
||||
(options?: ID3SvgArcOptions): string;
|
||||
innerRadius: {
|
||||
(): number;
|
||||
(radius: number): ID3SvgArc;
|
||||
(radius: () => number): ID3SvgArc;
|
||||
};
|
||||
outerRadius: {
|
||||
(): number;
|
||||
(radius: number): ID3SvgArc;
|
||||
(radius: () => number): ID3SvgArc;
|
||||
};
|
||||
startAngle: {
|
||||
(): number;
|
||||
(angle: number): ID3SvgArc;
|
||||
(angle: () => number): ID3SvgArc;
|
||||
};
|
||||
endAngle: {
|
||||
(): number;
|
||||
(angle: number): ID3SvgArc;
|
||||
(angle: () => number): ID3SvgArc;
|
||||
};
|
||||
centroid(options?: ID3SvgArcOptions): number[];
|
||||
}
|
||||
|
||||
interface ID3SvgArcOptions {
|
||||
innerRadius?: number;
|
||||
outerRadius?: number;
|
||||
startAngle?: number;
|
||||
endAngle?: number;
|
||||
}
|
||||
|
||||
interface ID3Random {
|
||||
normal(mean?: number, deviation?: number): () => number;
|
||||
}
|
||||
|
||||
declare var d3: ID3Base;
|
||||
|
||||
Reference in New Issue
Block a user