diff --git a/d3/d3-tests.ts b/d3/d3-tests.ts index 5990b92d8a..36ac355fe8 100644 --- a/d3/d3-tests.ts +++ b/d3/d3-tests.ts @@ -26,4 +26,104 @@ d3.select("body").transition() d3.selectAll("circle").transition() .duration(750) .delay(function (d, i) { return i * 10; }) - .attr("r", function (d) { return Math.sqrt(d * scale); }); \ No newline at end of file + .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; }); + + }); +} diff --git a/d3/d3.d.ts b/d3/d3.d.ts index 081ae2d511..10b084d8c6 100644 --- a/d3/d3.d.ts +++ b/d3/d3.d.ts @@ -53,7 +53,7 @@ interface ID3Base extends ID3Selectors { }; html: (url: string, callback: (response: DocumentFragment) => void) => void; csv: { - (url: string, callback: (response: any[]) => void); + (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; @@ -62,6 +62,11 @@ interface ID3Base extends ID3Selectors { time: ID3Time; scale: { linear(): ID3LinearScale; + ordinal(): ID3OrdinalScale; + category10(): ID3OrdinalScale; + category20(): ID3OrdinalScale; + category20b(): ID3OrdinalScale; + category20c(): ID3OrdinalScale; }; interpolate: ID3BaseInterpolate; interpolateNumber: ID3BaseInterpolate; @@ -75,6 +80,7 @@ interface ID3Base extends ID3Selectors { layout: ID3Layout; svg: ID3Svg; random: ID3Random; + keys(map: Object): any[]; } interface ID3Selection extends ID3Selectors { @@ -220,6 +226,21 @@ interface ID3LinearScale { 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; @@ -255,6 +276,7 @@ interface ID3Interpolate { interface ID3Layout { stack(): ID3StackLayout; + pie(): ID3PieLayout; } interface ID3StackLayout { @@ -263,7 +285,34 @@ interface 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 { @@ -274,6 +323,7 @@ interface ID3SVGSymbol interface ID3Svg { symbol: ()=> ID3SVGSymbol; axis(): ID3SvgAxis; + arc(): ID3SvgArc; } interface ID3SvgAxis { @@ -298,6 +348,38 @@ interface 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; }