Update d3 definition

This commit is contained in:
Neil Stalker
2013-02-14 19:57:14 +00:00
parent 7acebd77bb
commit a259b8ee66
2 changed files with 392 additions and 1 deletions
+128
View File
@@ -485,3 +485,131 @@ function callenderView() {
d3.select(self.frameElement).style("height", "2910px");
}
// example from http://bl.ocks.org/3883245
function lineChart {
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var x = d3.time.scale()
.range([0, width]);
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");
var line = d3.svg.line()
.x(function (d) { return x(d.date); })
.y(function (d) { return y(d.close); });
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.date = parseDate(d.date);
d.close = +d.close;
});
x.domain(d3.extent(data, function (d) { return d.date; }));
y.domain(d3.extent(data, function (d) { return d.close; }));
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("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
}
//example from http://bl.ocks.org/3884914
function bivariateAreaChart {
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
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");
var area = d3.svg.area()
.x(function (d) { return x(d.date); })
.y0(function (d) { return y(d.low); })
.y1(function (d) { return y(d.high); });
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.date = parseDate(d.date);
d.low = +d.low;
d.high = +d.high;
});
x.domain(d3.extent(data, function (d) { return d.date; }));
y.domain([d3.min(data, function (d) { return d.low; }), d3.max(data, function (d) { return d.high; })]);
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
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("Temperature (ºF)");
});
}
Vendored
+264 -1
View File
@@ -398,9 +398,26 @@ interface ID3SVGSymbol
}
interface ID3Svg {
symbol: ()=> ID3SVGSymbol;
/**
* Create a new symbol generator
*/
symbol: () => ID3SVGSymbol;
/**
* Create a new axis generator
*/
axis(): ID3SvgAxis;
/**
* Create a new arc generator
*/
arc(): ID3SvgArc;
/**
* Create a new line generator
*/
line(): ID3SvgLine;
/**
* Create a new area generator
*/
area(): ID3SvgArea;
}
interface ID3SvgAxis {
@@ -457,8 +474,254 @@ interface ID3SvgArcOptions {
endAngle?: number;
}
interface ID3SvgLine {
/**
* Returns the path data string
*
* @param data Array of data elements
* @param index Optional index
*/
(data: any[], index?: number): string;
/**
* Get or set the x-coordinate accessor.
*/
x: {
/**
* Get the x-coordinate accessor.
*/
(): (data: any) => any;
/**
* Set the x-coordinate accessor.
*
* @param accessor The new accessor function
*/
(accessor: (data: any) => any): ID3SvgLine;
};
/**
* Get or set the y-coordinate accessor.
*/
y: {
/**
* Get the y-coordinate accessor.
*/
(): (data: any) => any;
/**
* Set the y-coordinate accessor.
*
* @param accessor The new accessor function
*/
(accessor: (data: any) => any): ID3SvgLine;
};
/**
* Get or set the interpolation mode.
*/
interpolate: {
/**
* Get the interpolation accessor.
*/
(): string;
/**
* Set the interpolation accessor.
*
* @param interpolate The interpolation mode
*/
(interpolate: string): ID3SvgLine;
};
/**
* Get or set the cardinal spline tension.
*/
tension: {
/**
* Get the cardinal spline accessor.
*/
(): number;
/**
* Set the cardinal spline accessor.
*
* @param tension The Cardinal spline interpolation tension
*/
(tension: number): ID3SvgLine;
};
/**
* Control whether the line is defined at a given point.
*/
defined: {
/**
* Get the accessor function that controls where the line is defined.
*/
(): (data: any) => any;
/**
* Set the accessor function that controls where the area is defined.
*
* @param defined The new accessor function
*/
(defined: (data: any) => any): ID3SvgLine;
};
}
interface ID3SvgArea {
/**
* Generate a piecewise linear area, as in an area chart.
*/
(data: any[], index?: number): string;
/**
* Get or set the x-coordinate accessor.
*/
x: {
/**
* Get the x-coordinate accessor.
*/
(): (data: any) => any;
/**
* Set the x-coordinate accessor.
*
* @param accessor The new accessor function
*/
(accessor: (data: any) => any): ID3SvgArea;
};
/**
* Get or set the x0-coordinate (baseline) accessor.
*/
x0: {
/**
* Get the x0-coordinate (baseline) accessor.
*/
(): (data: any) => any;
/**
* Set the x0-coordinate (baseline) accessor.
*
* @param accessor The new accessor function
*/
(accessor: (data: any) => any): ID3SvgArea;
};
/**
* Get or set the x1-coordinate (topline) accessor.
*/
x1: {
/**
* Get the x1-coordinate (topline) accessor.
*/
(): (data: any) => any;
/**
* Set the x1-coordinate (topline) accessor.
*
* @param accessor The new accessor function
*/
(accessor: (data: any) => any): ID3SvgArea;
};
/**
* Get or set the y-coordinate accessor.
*/
y: {
/**
* Get the y-coordinate accessor.
*/
(): (data: any) => any;
/**
* Set the y-coordinate accessor.
*
* @param accessor The new accessor function
*/
(accessor: (data: any) => any): ID3SvgArea;
};
/**
* Get or set the y0-coordinate (baseline) accessor.
*/
y0: {
/**
* Get the y0-coordinate (baseline) accessor.
*/
(): (data: any) => any;
/**
* Set the y0-coordinate (baseline) accessor.
*
* @param accessor The new accessor function
*/
(accessor: (data: any) => any): ID3SvgArea;
};
/**
* Get or set the y1-coordinate (topline) accessor.
*/
y1: {
/**
* Get the y1-coordinate (topline) accessor.
*/
(): (data: any) => any;
/**
* Set the y1-coordinate (topline) accessor.
*
* @param accessor The new accessor function
*/
(accessor: (data: any) => any): ID3SvgArea;
};
/**
* Get or set the interpolation mode.
*/
interpolate: {
/**
* Get the interpolation accessor.
*/
(): string;
/**
* Set the interpolation accessor.
*
* @param interpolate The interpolation mode
*/
(interpolate: string): ID3SvgArea;
};
/**
* Get or set the cardinal spline tension.
*/
tension: {
/**
* Get the cardinal spline accessor.
*/
(): number;
/**
* Set the cardinal spline accessor.
*
* @param tension The Cardinal spline interpolation tension
*/
(tension: number): ID3SvgArea;
};
/**
* Control whether the area is defined at a given point.
*/
defined: {
/**
* Get the accessor function that controls where the area is defined.
*/
(): (data: any) => any;
/**
* Set the accessor function that controls where the area is defined.
*
* @param defined The new accessor function
*/
(defined: (data: any) => any): ID3SvgArea;
};
}
interface ID3Random {
/**
* Returns a function for generating random numbers with a normal distribution
*
* @param mean The expected value of the generated pseudorandom numbers
* @param deviation The given standard deviation
*/
normal(mean?: number, deviation?: number): () => number;
/**
* Returns a function for generating random numbers with a log-normal distribution
*
* @param mean The expected value of the generated pseudorandom numbers
* @param deviation The given standard deviation
*/
logNormal(mean?: number, deviation?: number): () => number;
/**
* Returns a function for generating random numbers with an Irwin-Hall distribution
*
* @param count The number of independent variables
*/
irwinHall(count: number): () => number;
}
declare var d3: ID3Base;