diff --git a/d3/d3-tests.ts b/d3/d3-tests.ts index 389eaa4c4..bf500d409 100644 --- a/d3/d3-tests.ts +++ b/d3/d3-tests.ts @@ -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)"); + }); +} diff --git a/d3/d3.d.ts b/d3/d3.d.ts index 64e4b6f84..939ea0df4 100644 --- a/d3/d3.d.ts +++ b/d3/d3.d.ts @@ -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;