diff --git a/d3/d3-tests.ts b/d3/d3-tests.ts index 1581cdb71b..872432f34e 100644 --- a/d3/d3-tests.ts +++ b/d3/d3-tests.ts @@ -48,7 +48,7 @@ function testPieChart() { } //Example from http://bl.ocks.org/3887051 -function groupedBarChart() => { +function groupedBarChart() { var margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; @@ -105,7 +105,7 @@ function groupedBarChart() => { .style("text-anchor", "end") .text("Population"); - var state = svg.selectAll(".state") + var state = svg.selectAll(".state") .data(data) .enter().append("g") .attr("class", "g") @@ -487,7 +487,7 @@ function callenderView() { } // example from http://bl.ocks.org/3883245 -function lineChart { +function lineChart() { var margin = { top: 20, right: 20, bottom: 30, left: 50 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; @@ -550,7 +550,7 @@ function lineChart { } //example from http://bl.ocks.org/3884914 -function bivariateAreaChart { +function bivariateAreaChart() { var margin = { top: 20, right: 20, bottom: 30, left: 50 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; @@ -590,7 +590,7 @@ function bivariateAreaChart { }); 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; })]); + y.domain([d3.min(data, function (d) { return d.low; }), d3.max(data, function (d) { return d.high; })]); svg.append("path") .datum(data) @@ -610,12 +610,12 @@ function bivariateAreaChart { .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") - .text("Temperature (şF)"); + .text("Temperature (ÂşF)"); }); } //Example from http://bl.ocks.org/mbostock/1557377 -function dragMultiples { +function dragMultiples() { var width = 238, height = 123, radius = 20; @@ -644,7 +644,7 @@ function dragMultiples { } //Example from http://bl.ocks.org/mbostock/3892919 -function panAndZoom { +function panAndZoom() { var margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; @@ -729,3 +729,1331 @@ function chainedTransitions() { }; } } + +//Example from http://bl.ocks.org/mbostock/4062085 +function populationPyramid() { + var margin = { top: 20, right: 40, bottom: 30, left: 20 }, + width = 960 - margin.left - margin.right, + height = 500 - margin.top - margin.bottom, + barWidth = Math.floor(width / 19) - 1; + + var x = d3.scale.linear() + .range([barWidth / 2, width - barWidth / 2]); + + var y = d3.scale.linear() + .range([height, 0]); + + var yAxis = d3.svg.axis() + .scale(y) + .orient("right") + .tickSize(-width) + .tickFormat(function (d) { return Math.round(d / 1e6) + "M"; } ); + + // An SVG element with a bottom-right origin. + 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 + ")"); + + // A sliding container to hold the bars by birthyear. + var birthyears = svg.append("g") + .attr("class", "birthyears"); + + // A label for the current year. + var title = svg.append("text") + .attr("class", "title") + .attr("dy", ".71em") + .text(2000); + + d3.csv("population.csv", function (error, data) { + + // Convert strings to numbers. + data.forEach(function (d) { + d.people = +d.people; + d.year = +d.year; + d.age = +d.age; + } ); + + // Compute the extent of the data set in age and years. + var age1 = d3.max(data, function (d) { return d.age; } ), + year0 = d3.min(data, function (d) { return d.year; } ), + year1 = d3.max(data, function (d) { return d.year; } ), + year = year1; + + // Update the scale domains. + x.domain([year1 - age1, year1]); + y.domain([0, d3.max(data, function (d) { return d.people; } )]); + + // Produce a map from year and birthyear to [male, female]. + data = d3.nest() + .key(function (d) { return d.year; } ) + .key(function (d) { return d.year - d.age; } ) + .rollup(function (v) { return v.map(function (d) { return d.people; } ); } ) + .map(data); + + // Add an axis to show the population values. + svg.append("g") + .attr("class", "y axis") + .attr("transform", "translate(" + width + ",0)") + .call(yAxis) + .selectAll("g") + .filter(function (value) { return !value; } ) + .classed("zero", true); + + // Add labeled rects for each birthyear (so that no enter or exit is required). + var birthyear = birthyears.selectAll(".birthyear") + .data(d3.range(year0 - age1, year1 + 1, 5)) + .enter().append("g") + .attr("class", "birthyear") + .attr("transform", function (birthyear) { return "translate(" + x(birthyear) + ",0)"; } ); + + birthyear.selectAll("rect") + .data(function (birthyear) { return data[year][birthyear] || [0, 0]; } ) + .enter().append("rect") + .attr("x", -barWidth / 2) + .attr("width", barWidth) + .attr("y", y) + .attr("height", function (value) { return height - y(value); } ); + + // Add labels to show birthyear. + birthyear.append("text") + .attr("y", height - 4) + .text(function (birthyear) { return birthyear; } ); + + // Add labels to show age (separate; not animated). + svg.selectAll(".age") + .data(d3.range(0, age1 + 1, 5)) + .enter().append("text") + .attr("class", "age") + .attr("x", function (age) { return x(year - age); } ) + .attr("y", height + 4) + .attr("dy", ".71em") + .text(function (age) { return age; } ); + + // Allow the arrow keys to change the displayed year. + window.focus(); + d3.select(window).on("keydown", function () { + switch (d3.event.keyCode) { + case 37: year = Math.max(year0, year - 10); break; + case 39: year = Math.min(year1, year + 10); break; + } + update(); + } ); + + function update() { + if (!(year in data)) return; + title.text(year); + + birthyears.transition() + .duration(750) + .attr("transform", "translate(" + (x(year1) - x(year)) + ",0)"); + + birthyear.selectAll("rect") + .data(function (birthyear) { return data[year][birthyear] || [0, 0]; } ) + .transition() + .duration(750) + .attr("y", y) + .attr("height", function (value) { return height - y(value); } ); + } + } ); +} + +//Example from http://bl.ocks.org/MoritzStefaner/1377729 +function forcedBasedLabelPlacemant() { + var w = 960, h = 500; + + var labelDistance = 0; + + var vis = d3.select("body").append("svg:svg").attr("width", w).attr("height", h); + + var nodes = []; + var labelAnchors = []; + var labelAnchorLinks = []; + var links = []; + + for (var i = 0; i < 30; i++) { + var nodeLabel = { + label: "node " + i + }; + nodes.push(nodeLabel); + labelAnchors.push({ + node: nodeLabel + }); + labelAnchors.push({ + node: nodeLabel + }); + }; + + for (var i = 0; i < nodes.length; i++) { + for (var j = 0; j < i; j++) { + if (Math.random() > .95) + links.push({ + source: i, + target: j, + weight: Math.random() + }); + } + labelAnchorLinks.push({ + source: i * 2, + target: i * 2 + 1, + weight: 1 + }); + }; + + var force = d3.layout.force().size([w, h]).nodes(nodes).links(links).gravity(1).linkDistance(50).charge(-3000).linkStrength(function (x) { + return x.weight * 10 + } ); + + + force.start(); + + var force2 = d3.layout.force().nodes(labelAnchors).links(labelAnchorLinks).gravity(0).linkDistance(0).linkStrength(8).charge(-100).size([w, h]); + force2.start(); + + var link = vis.selectAll("line.link").data(links).enter().append("svg:line").attr("class", "link").style("stroke", "#CCC"); + + var node = vis.selectAll("g.node").data(force.nodes()).enter().append("svg:g").attr("class", "node"); + node.append("svg:circle").attr("r", 5).style("fill", "#555").style("stroke", "#FFF").style("stroke-width", 3); + node.call(force.drag); + + + var anchorLink = vis.selectAll("line.anchorLink").data(labelAnchorLinks)//.enter().append("svg:line").attr("class", "anchorLink").style("stroke", "#999"); + + var anchorNode = vis.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode"); + anchorNode.append("svg:circle").attr("r", 0).style("fill", "#FFF"); + anchorNode.append("svg:text").text(function (d, i) { + return i % 2 == 0 ? "" : d.node.label + } ).style("fill", "#555").style("font-family", "Arial").style("font-size", 12); + + var updateLink = function () { + this.attr("x1", function (d) { + return d.source.x; + } ).attr("y1", function (d) { + return d.source.y; + } ).attr("x2", function (d) { + return d.target.x; + } ).attr("y2", function (d) { + return d.target.y; + } ); + + } + + var updateNode = function () { + this.attr("transform", function (d) { + return "translate(" + d.x + "," + d.y + ")"; + } ); + + } + + force.on("tick", function () { + + force2.start(); + + node.call(updateNode); + + anchorNode.each(function (d, i) { + if (i % 2 == 0) { + d.x = d.node.x; + d.y = d.node.y; + } else { + var b = this.childNodes[1].getBBox(); + + var diffX = d.x - d.node.x; + var diffY = d.y - d.node.y; + + var dist = Math.sqrt(diffX * diffX + diffY * diffY); + + var shiftX = b.width * (diffX - dist) / (dist * 2); + shiftX = Math.max(-b.width, Math.min(0, shiftX)); + var shiftY = 5; + this.childNodes[1].setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")"); + } + } ); + + + anchorNode.call(updateNode); + + link.call(updateLink); + anchorLink.call(updateLink); + + } ); +} + +//Example from http://bl.ocks.org/mbostock/1125997 +function forceCollapsable() { + var w = 1280, + h = 800, + node, + link, + root; + + var force = d3.layout.force() + .on("tick", tick) + .charge(function (d) { return d._children ? -d.size / 100 : -30; } ) + .linkDistance(function (d) { return d.target._children ? 80 : 30; } ) + .size([w, h - 160]); + + var vis = d3.select("body").append("svg:svg") + .attr("width", w) + .attr("height", h); + + d3.json("flare.json", function (json) { + root = json; + root.fixed = true; + root.x = w / 2; + root.y = h / 2 - 80; + update(); + } ); + + function update() { + var nodes = flatten(root), + links = d3.layout.tree().links(nodes); + + // Restart the force layout. + force + .nodes(nodes) + .links(links) + .start(); + + // Update the links… + link = vis.selectAll("line.link") + .data(links, function (d) { return d.target.id; } ); + + // Enter any new links. + link.enter().insert("svg:line", ".node") + .attr("class", "link") + .attr("x1", function (d) { return d.source.x; } ) + .attr("y1", function (d) { return d.source.y; } ) + .attr("x2", function (d) { return d.target.x; } ) + .attr("y2", function (d) { return d.target.y; } ); + + // Exit any old links. + link.exit().remove(); + + // Update the nodes… + node = vis.selectAll("circle.node") + .data(nodes, function (d) { return d.id; } ) + .style("fill", color); + + node.transition() + .attr("r", function (d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; } ); + + // Enter any new nodes. + node.enter().append("svg:circle") + .attr("class", "node") + .attr("cx", function (d) { return d.x; } ) + .attr("cy", function (d) { return d.y; } ) + .attr("r", function (d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; } ) + .style("fill", color) + .on("click", click) + .call(force.drag); + + // Exit any old nodes. + node.exit().remove(); + } + + function tick() { + link.attr("x1", function (d) { return d.source.x; } ) + .attr("y1", function (d) { return d.source.y; } ) + .attr("x2", function (d) { return d.target.x; } ) + .attr("y2", function (d) { return d.target.y; } ); + + node.attr("cx", function (d) { return d.x; } ) + .attr("cy", function (d) { return d.y; } ); + } + + // Color leaf nodes orange, and packages white or blue. + function color(d) { + return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c"; + } + + // Toggle children on click. + function click(d) { + if (d.children) { + d._children = d.children; + d.children = null; + } else { + d.children = d._children; + d._children = null; + } + update(); + } + + // Returns a list of all nodes under the root. + function flatten(root) { + var nodes = [], i = 0; + + function recurse(node) { + if (node.children) node.size = node.children.reduce(function (p, v) { return p + recurse(v); } , 0); + if (!node.id) node.id = ++i; + nodes.push(node); + return node.size; + } + + root.size = recurse(root); + return nodes; + } +} + +//Example from http://bl.ocks.org/mbostock/3757110 +function azimuthalEquidistant() { + var width = 960, + height = 960; + var topojson: any; + + var projection = d3.geo.azimuthalEquidistant() + .scale(150) + .translate([width / 2, height / 2]) + .clipAngle(180 - 1e-3) + .precision(.1); + + var path = d3.geo.path() + .projection(projection); + + var graticule = d3.geo.graticule(); + + var svg = d3.select("body").append("svg") + .attr("width", width) + .attr("height", height); + + svg.append("defs").append("path") + .datum({ type: "Sphere" }) + .attr("id", "sphere") + .attr("d", path); + + svg.append("use") + .attr("class", "stroke") + .attr("xlink:href", "#sphere"); + + svg.append("use") + .attr("class", "fill") + .attr("xlink:href", "#sphere"); + + svg.append("path") + .datum(graticule) + .attr("class", "graticule") + .attr("d", path); + + d3.json("/mbostock/raw/4090846/world-50m.json", function (error, world) { + svg.insert("path", ".graticule") + .datum(topojson.feature(world, world.objects.land)) + .attr("class", "land") + .attr("d", path); + + svg.insert("path", ".graticule") + .datum(topojson.mesh(world, world.objects.countries, function (a, b) { return a !== b; } )) + .attr("class", "boundary") + .attr("d", path); + } ); + + d3.select(self.frameElement).style("height", height + "px"); +} + +//Example from http://bl.ocks.org/mbostock/4060366 +function voroniTesselation() { + var width = 960, + height = 500; + + var vertices = >d3.range(100).map(function (d) { + return [Math.random() * width, Math.random() * height]; + } ); + + var svg = d3.select("body").append("svg") + .attr("width", width) + .attr("height", height) + .attr("class", "PiYG") + .on("mousemove", function () { vertices[0] = d3.mouse(this); redraw(); } ); + + var path = svg.append("g").selectAll("path"); + + svg.selectAll("circle") + .data(vertices.slice(1)) + .enter().append("circle") + .attr("transform", function (d) { return "translate(" + d + ")"; } ) + .attr("r", 2); + + redraw(); + + function redraw() { + path = path.data(d3.geom.voronoi(vertices).map(function (d) { return "M" + d.join("L") + "Z"; } ), String); + path.exit().remove(); + path.enter().append("path").attr("class", function (d, i) { return "q" + (i % 9) + "-9"; } ).attr("d", String); + path.order(); + } +} + +//Example from http://bl.ocks.org/mbostock/4341156 +function delaunayTesselation() { + var width = 960, + height = 500; + + var vertices = >d3.range(100).map(function (d) { + return [Math.random() * width, Math.random() * height]; + } ); + + var svg = d3.select("body").append("svg") + .attr("width", width) + .attr("height", height) + .attr("class", "PiYG") + .on("mousemove", function () { vertices[0] = d3.mouse(this); redraw(); } ); + + var path = svg.append("g").selectAll("path"); + + svg.selectAll("circle") + .data(vertices.slice(1)) + .enter().append("circle") + .attr("transform", function (d) { return "translate(" + d + ")"; } ) + .attr("r", 2); + + redraw(); + + function redraw() { + path = path.data(d3.geom.delaunay(vertices).map(function (d) { return "M" + d.join("L") + "Z"; } ), String); + path.exit().remove(); + path.enter().append("path").attr("class", function (d, i) { return "q" + (i % 9) + "-9"; } ).attr("d", String); + } +} + +//Example from http://bl.ocks.org/mbostock/4343214 +function quadtree() { + var width = 960, + height = 500; + + var data = d3.range(5000).map(function () { + return { x: Math.random() * width, y: Math.random() * width }; + } ); + + var quadtree = d3.geom.quadtree(data, -1, -1, width + 1, height + 1); + + var brush = d3.svg.brush() + .x(d3.scale.identity().domain([0, width])) + .y(d3.scale.identity().domain([0, height])) + .on("brush", brushed) + .extent([[100, 100], [200, 200]]); + + var svg = d3.select("body").append("svg") + .attr("width", width) + .attr("height", height); + + svg.selectAll(".node") + .data(nodes(quadtree)) + .enter().append("rect") + .attr("class", "node") + .attr("x", function (d) { return d.x; } ) + .attr("y", function (d) { return d.y; } ) + .attr("width", function (d) { return d.width; } ) + .attr("height", function (d) { return d.height; } ); + + var point = svg.selectAll(".point") + .data(data) + .enter().append("circle") + .attr("class", "point") + .attr("cx", function (d) { return d.x; } ) + .attr("cy", function (d) { return d.y; } ) + .attr("r", 4); + + svg.append("g") + .attr("class", "brush") + .call(brush); + + brushed(); + + function brushed() { + var extent = brush.extent(); + point.each(function (d) { d.scanned = d.selected = false; } ); + search(quadtree, extent[0][0], extent[0][1], extent[1][0], extent[1][1]); + point.classed("scanned", function (d) { return d.scanned; } ); + point.classed("selected", function (d) { return d.selected; } ); + } + + // Collapse the quadtree into an array of rectangles. + function nodes(quadtree) { + var nodes = []; + quadtree.visit(function (node, x1, y1, x2, y2) { + nodes.push({ x: x1, y: y1, width: x2 - x1, height: y2 - y1 }); + } ); + return nodes; + } + + // Find the nodes within the specified rectangle. + function search(quadtree, x0, y0, x3, y3) { + quadtree.visit(function (node, x1, y1, x2, y2) { + var p = node.point; + if (p) { + p.scanned = true; + p.selected = (p.x >= x0) && (p.x < x3) && (p.y >= y0) && (p.y < y3); + } + return x1 >= x3 || y1 >= y3 || x2 < x0 || y2 < y0; + } ); + } +} + +//Example from http://bl.ocks.org/mbostock/4341699 +function convexHull() { + var width = 960, + height = 500; + + var randomX = d3.random.normal(width / 2, 60), + randomY = d3.random.normal(height / 2, 60), + vertices = d3.range(100).map(function () { return [randomX(), randomY()]; } ); + + var svg = d3.select("body").append("svg") + .attr("width", width) + .attr("height", height) + .on("mousemove", function () { vertices[0] = d3.mouse(this); redraw(); } ) + .on("click", function () { vertices.push(d3.mouse(this)); redraw(); } ); + + svg.append("rect") + .attr("width", width) + .attr("height", height); + + var hull = svg.append("path") + .attr("class", "hull"); + + var circle = svg.selectAll("circle"); + + redraw(); + + function redraw() { + hull.datum(d3.geom.hull(vertices)).attr("d", function (d) { return "M" + d.join("L") + "Z"; } ); + circle = circle.data(vertices); + circle.enter().append("circle").attr("r", 3); + circle.attr("transform", function (d) { return "translate(" + d + ")"; } ); + } +} + +// example from http://bl.ocks.org/mbostock/1044242 +function hierarchicalEdgeBundling() { + var diameter = 960, + radius = diameter / 2, + innerRadius = radius - 120; + + var cluster = d3.layout.cluster() + .size([360, innerRadius]) + .sort(null) + .value(function (d) { return d.size; } ); + + var bundle = d3.layout.bundle(); + + var line = d3.svg.line.radial() + .interpolate("bundle") + .tension(.85) + .radius(function (d) { return d.y; } ) + .angle(function (d) { return d.x / 180 * Math.PI; } ); + + var svg = d3.select("body").append("svg") + .attr("width", diameter) + .attr("height", diameter) + .append("g") + .attr("transform", "translate(" + radius + "," + radius + ")"); + + d3.json("readme-flare-imports.json", function (error, classes) { + var nodes = cluster.nodes(packages.root(classes)), + links = packages.imports(nodes); + + svg.selectAll(".link") + .data(bundle(links)) + .enter().append("path") + .attr("class", "link") + .attr("d", line); + + svg.selectAll(".node") + .data(nodes.filter(function (n) { return !n.children; } )) + .enter().append("g") + .attr("class", "node") + .attr("transform", function (d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; } ) + .append("text") + .attr("dx", function (d) { return d.x < 180 ? 8 : -8; } ) + .attr("dy", ".31em") + .attr("text-anchor", function (d) { return d.x < 180 ? "start" : "end"; } ) + .attr("transform", function (d) { return d.x < 180 ? null : "rotate(180)"; } ) + .text(function (d) { return d.key; } ); + } ); + + d3.select(self.frameElement).style("height", diameter + "px"); + + var packages = { + + // Lazily construct the package hierarchy from class names. + root: function (classes) { + var map = {}; + + function find(name, data?) { + var node = map[name], i; + if (!node) { + node = map[name] = data || { name: name, children: [] }; + if (name.length) { + node.parent = find(name.substring(0, i = name.lastIndexOf("."))); + node.parent.children.push(node); + node.key = name.substring(i + 1); + } + } + return node; + } + + classes.forEach(function (d) { + find(d.name, d); + } ); + + return map[""]; + } , + + // Return a list of imports for the given array of nodes. + imports: function (nodes) { + var map = {}, + imports = []; + + // Compute a map from name to node. + nodes.forEach(function (d) { + map[d.name] = d; + } ); + + // For each import, construct a link from the source to target node. + nodes.forEach(function (d) { + if (d.imports) d.imports.forEach(function (i) { + imports.push({ source: map[d.name], target: map[i] }); + } ); + } ); + + return imports; + } + }; +} + +// example from http://bl.ocks.org/mbostock/1123639 +function roundedRectangles() { + var mouse = [480, 250], + count = 0; + + var svg = d3.select("body").append("svg:svg") + .attr("width", 960) + .attr("height", 500); + + var g = svg.selectAll("g") + .data(d3.range(25)) + .enter().append("svg:g") + .attr("transform", "translate(" + mouse + ")"); + + g.append("svg:rect") + .attr("rx", 6) + .attr("ry", 6) + .attr("x", -12.5) + .attr("y", -12.5) + .attr("width", 25) + .attr("height", 25) + .attr("transform", function (d, i) { return "scale(" + (1 - d / 25) * 20 + ")"; } ) + .style("fill", d3.scale.category20c()); + + g.map(function (d) { + return { center: [0, 0], angle: 0 }; + } ); + + svg.on("mousemove", function () { + mouse = d3.mouse(this); + } ); + + d3.timer(function () { + count++; + g.attr("transform", function (d, i) { + d.center[0] += (mouse[0] - d.center[0]) / (i + 5); + d.center[1] += (mouse[1] - d.center[1]) / (i + 5); + d.angle += Math.sin((count + i) / 10) * 7; + return "translate(" + d.center + ")rotate(" + d.angle + ")"; + } ); + return true; + } ); +} + +// example from http://bl.ocks.org/mbostock/4060954 +function streamGraph() { + var n = 20, // number of layers + m = 200, // number of samples per layer + stack = d3.layout.stack().offset("wiggle"), + layers0 = stack(d3.range(n).map(function () { return bumpLayer(m); } )), + layers1 = stack(d3.range(n).map(function () { return bumpLayer(m); } )); + + var width = 960, + height = 500; + + var x = d3.scale.linear() + .domain([0, m - 1]) + .range([0, width]); + + var y = d3.scale.linear() + .domain([0, d3.max(layers0.concat(layers1), function (layer) { return d3.max(layer, function (d) { return d.y0 + d.y; } ); } )]) + .range([height, 0]); + + var color = d3.scale.linear() + .range(["#aad", "#556"]); + + var area = d3.svg.area() + .x(function (d) { return x(d.x); } ) + .y0(function (d) { return y(d.y0); } ) + .y1(function (d) { return y(d.y0 + d.y); } ); + + var svg = d3.select("body").append("svg") + .attr("width", width) + .attr("height", height); + + svg.selectAll("path") + .data(layers0) + .enter().append("path") + .attr("d", area) + .style("fill", function () { return color(Math.random()); } ); + + function transition() { + d3.selectAll("path") + .data(function () { + var d = layers1; + layers1 = layers0; + return layers0 = d; + } ) + .transition() + .duration(2500) + .attr("d", area); + } + + // Inspired by Lee Byron's test data generator. + function bumpLayer(n) { + + function bump(a) { + var x = 1 / (.1 + Math.random()), + y = 2 * Math.random() - .5, + z = 10 / (.1 + Math.random()); + for (var i = 0; i < n; i++) { + var w = (i / n - y) * z; + a[i] += x * Math.exp(-w * w); + } + } + + var a = [], i; + for (i = 0; i < n; ++i) a[i] = 0; + for (i = 0; i < 5; ++i) bump(a); + return a.map(function (d, i) { return { x: i, y: Math.max(0, d) }; } ); + } +} + +// example from http://mbostock.github.io/d3/talk/20111116/force-collapsible.html +function forceCollapsable2() { + var w = 1280, + h = 800, + node, + link, + root; + + var force = d3.layout.force() + .on("tick", tick) + .charge(function (d) { return d._children ? -d.size / 100 : -30; } ) + .linkDistance(function (d) { return d.target._children ? 80 : 30; } ) + .size([w, h - 160]); + + var vis = d3.select("body").append("svg:svg") + .attr("width", w) + .attr("height", h); + + d3.json("flare.json", function (json) { + root = json; + root.fixed = true; + root.x = w / 2; + root.y = h / 2 - 80; + update(); + } ); + + function update() { + var nodes = flatten(root), + links = d3.layout.tree().links(nodes); + + // Restart the force layout. + force + .nodes(nodes) + .links(links) + .start(); + + // Update the links… + link = vis.selectAll("line.link") + .data(links, function (d) { return d.target.id; } ); + + // Enter any new links. + link.enter().insert("svg:line", ".node") + .attr("class", "link") + .attr("x1", function (d) { return d.source.x; } ) + .attr("y1", function (d) { return d.source.y; } ) + .attr("x2", function (d) { return d.target.x; } ) + .attr("y2", function (d) { return d.target.y; } ); + + // Exit any old links. + link.exit().remove(); + + // Update the nodes… + node = vis.selectAll("circle.node") + .data(nodes, function (d) { return d.id; } ) + .style("fill", color); + + node.transition() + .attr("r", function (d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; } ); + + // Enter any new nodes. + node.enter().append("svg:circle") + .attr("class", "node") + .attr("cx", function (d) { return d.x; } ) + .attr("cy", function (d) { return d.y; } ) + .attr("r", function (d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; } ) + .style("fill", color) + .on("click", click) + .call(force.drag); + + // Exit any old nodes. + node.exit().remove(); + } + + function tick() { + link.attr("x1", function (d) { return d.source.x; } ) + .attr("y1", function (d) { return d.source.y; } ) + .attr("x2", function (d) { return d.target.x; } ) + .attr("y2", function (d) { return d.target.y; } ); + + node.attr("cx", function (d) { return d.x; } ) + .attr("cy", function (d) { return d.y; } ); + } + + // Color leaf nodes orange, and packages white or blue. + function color(d) { + return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c"; + } + + // Toggle children on click. + function click(d) { + if (d.children) { + d._children = d.children; + d.children = null; + } else { + d.children = d._children; + d._children = null; + } + update(); + } + + // Returns a list of all nodes under the root. + function flatten(root) { + var nodes = [], i = 0; + + function recurse(node) { + if (node.children) node.size = node.children.reduce(function (p, v) { return p + recurse(v); } , 0); + if (!node.id) node.id = ++i; + nodes.push(node); + return node.size; + } + + root.size = recurse(root); + return nodes; + } +} + +//exapmle from http://bl.ocks.org/mbostock/4062006 +function chordDiagram() { + var matrix = [ + [11975, 5871, 8916, 2868], + [1951, 10048, 2060, 6171], + [8010, 16145, 8090, 8045], + [1013, 990, 940, 6907] + ]; + + var chord = d3.layout.chord() + .padding(.05) + .sortSubgroups(d3.descending) + .matrix(matrix); + + var width = 960, + height = 500, + innerRadius = Math.min(width, height) * .41, + outerRadius = innerRadius * 1.1; + + var fill = d3.scale.ordinal() + .domain(d3.range(4)) + .range(["#000000", "#FFDD89", "#957244", "#F26223"]); + + var svg = d3.select("body").append("svg") + .attr("width", width) + .attr("height", height) + .append("g") + .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); + + svg.append("g").selectAll("path") + .data(chord.groups) + .enter().append("path") + .style("fill", function (d) { return fill(d.index); } ) + .style("stroke", function (d) { return fill(d.index); } ) + .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius)) + .on("mouseover", fade(.1)) + .on("mouseout", fade(1)); + + var ticks = svg.append("g").selectAll("g") + .data(chord.groups) + .enter().append("g").selectAll("g") + .data(groupTicks) + .enter().append("g") + .attr("transform", function (d) { + return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" + + "translate(" + outerRadius + ",0)"; + } ); + + ticks.append("line") + .attr("x1", 1) + .attr("y1", 0) + .attr("x2", 5) + .attr("y2", 0) + .style("stroke", "#000"); + + ticks.append("text") + .attr("x", 8) + .attr("dy", ".35em") + .attr("transform", function (d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; } ) + .style("text-anchor", function (d) { return d.angle > Math.PI ? "end" : null; } ) + .text(function (d) { return d.label; } ); + + svg.append("g") + .attr("class", "chord") + .selectAll("path") + .data(chord.chords) + .enter().append("path") + .attr("d", d3.svg.chord().radius(innerRadius)) + .style("fill", function (d) { return fill(d.target.index); } ) + .style("opacity", 1); + + // Returns an array of tick angles and labels, given a group. + function groupTicks(d) { + var k = (d.endAngle - d.startAngle) / d.value; + return d3.range(0, d.value, 1000).map(function (v, i) { + return { + angle: v * k + d.startAngle, + label: i % 5 ? null : v / 1000 + "k" + }; + } ); + } + + // Returns an event handler for fading a given chord group. + function fade(opacity) { + return function (g, i) { + svg.selectAll(".chord path") + .filter(function (d) { return d.source.index != i && d.target.index != i; } ) + .transition() + .style("opacity", opacity); + }; + } +} + +//example from http://mbostock.github.io/d3/talk/20111116/iris-parallel.html +function irisParallel() { + var species = ["setosa", "versicolor", "virginica"], + traits = ["sepal length", "petal length", "sepal width", "petal width"]; + + var m = [80, 160, 200, 160], + w = 1280 - m[1] - m[3], + h = 800 - m[0] - m[2]; + + var x = d3.scale.ordinal().domain(traits).rangePoints([0, w]), + y = {}; + + var line = d3.svg.line(), + axis = d3.svg.axis().orient("left"), + foreground; + + var svg = d3.select("body").append("svg:svg") + .attr("width", w + m[1] + m[3]) + .attr("height", h + m[0] + m[2]) + .append("svg:g") + .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); + + d3.csv("iris.csv", function (flowers) { + + // Create a scale and brush for each trait. + traits.forEach(function (d) { + // Coerce values to numbers. + flowers.forEach(function (p) { p[d] = +p[d]; } ); + + y[d] = d3.scale.linear() + .domain(d3.extent(flowers, function (p) { return p[d]; } )) + .range([h, 0]); + + y[d].brush = d3.svg.brush() + .y(y[d]) + .on("brush", brush); + } ); + + // Add a legend. + var legend = svg.selectAll("g.legend") + .data(species) + .enter().append("svg:g") + .attr("class", "legend") + .attr("transform", function (d, i) { return "translate(0," + (i * 20 + 584) + ")"; } ); + + legend.append("svg:line") + .attr("class", String) + .attr("x2", 8); + + legend.append("svg:text") + .attr("x", 12) + .attr("dy", ".31em") + .text(function (d) { return "Iris " + d; } ); + + // Add foreground lines. + foreground = svg.append("svg:g") + .attr("class", "foreground") + .selectAll("path") + .data(flowers) + .enter().append("svg:path") + .attr("d", path) + .attr("class", function (d) { return d.species; } ); + + // Add a group element for each trait. + var g = svg.selectAll(".trait") + .data(traits) + .enter().append("svg:g") + .attr("class", "trait") + .attr("transform", function (d) { return "translate(" + x(d) + ")"; } ) + .call(d3.behavior.drag() + .origin(function (d) { return { x: x(d) }; } ) + .on("dragstart", dragstart) + .on("drag", drag) + .on("dragend", dragend)); + + // Add an axis and title. + g.append("svg:g") + .attr("class", "axis") + .each(function (d) { d3.select(this).call(axis.scale(y[d])); } ) + .append("svg:text") + .attr("text-anchor", "middle") + .attr("y", -9) + .text(String); + + // Add a brush for each axis. + g.append("svg:g") + .attr("class", "brush") + .each(function (d) { d3.select(this).call(y[d].brush); } ) + .selectAll("rect") + .attr("x", -8) + .attr("width", 16); + + function dragstart(d, i?) { + i = traits.indexOf(d); + } + + function drag(d, i?) { + x.range()[i] = d3.event.x; + traits.sort(function (a, b) { return x(a) - x(b); } ); + g.attr("transform", function (d) { return "translate(" + x(d) + ")"; } ); + foreground.attr("d", path); + } + + function dragend(d) { + x.domain(traits).rangePoints([0, w]); + var t = d3.transition().duration(500); + t.selectAll(".trait").attr("transform", function (d) { return "translate(" + x(d) + ")"; } ); + t.selectAll(".foreground path").attr("d", path); + } + } ); + + // Returns the path for a given data point. + function path(d) { + return line(traits.map(function (p) { return [x(p), y[p](d[p])]; } )); + } + + // Handles a brush event, toggling the display of foreground lines. + function brush() { + var actives = traits.filter(function (p) { return !y[p].brush.empty(); } ), + extents = actives.map(function (p) { return y[p].brush.extent(); } ); + foreground.classed("fade", function (d) { + return !actives.every(function (p, i) { + return extents[i][0] <= d[p] && d[p] <= extents[i][1]; + } ); + } ); + } +} + +//example from +function healthAndWealth() { + // Various accessors that specify the four dimensions of data to visualize. + function x(d) { return d.income; } + function y(d) { return d.lifeExpectancy; } + function radius(d) { return d.population; } + function color(d) { return d.region; } + function key(d) { return d.name; } + + // Chart dimensions. + var margin = { top: 19.5, right: 19.5, bottom: 19.5, left: 39.5 }, + width = 960 - margin.right, + height = 500 - margin.top - margin.bottom; + + // Various scales. These domains make assumptions of data, naturally. + var xScale = d3.scale.log().domain([300, 1e5]).range([0, width]), + yScale = d3.scale.linear().domain([10, 85]).range([height, 0]), + radiusScale = d3.scale.sqrt().domain([0, 5e8]).range([0, 40]), + colorScale = d3.scale.category10(); + + // The x & y axes. + var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")), + yAxis = d3.svg.axis().scale(yScale).orient("left"); + + // Create the SVG container and set the origin. + var svg = d3.select("#chart").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 + ")"); + + // Add the x-axis. + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + height + ")") + .call(xAxis); + + // Add the y-axis. + svg.append("g") + .attr("class", "y axis") + .call(yAxis); + + // Add an x-axis label. + svg.append("text") + .attr("class", "x label") + .attr("text-anchor", "end") + .attr("x", width) + .attr("y", height - 6) + .text("income per capita, inflation-adjusted (dollars)"); + + // Add a y-axis label. + svg.append("text") + .attr("class", "y label") + .attr("text-anchor", "end") + .attr("y", 6) + .attr("dy", ".75em") + .attr("transform", "rotate(-90)") + .text("life expectancy (years)"); + + // Add the year label; the value is set on transition. + var label = svg.append("text") + .attr("class", "year label") + .attr("text-anchor", "end") + .attr("y", height - 24) + .attr("x", width) + .text(1800); + + // Load the data. + d3.json("nations.json", function (nations) { + + // A bisector since many nation's data is sparsely-defined. + var bisect = d3.bisector(function (d) { return d[0]; } ); + + // Add a dot per nation. Initialize the data at 1800, and set the colors. + var dot = svg.append("g") + .attr("class", "dots") + .selectAll(".dot") + .data(interpolateData(1800)) + .enter().append("circle") + .attr("class", "dot") + .style("fill", function (d) { return colorScale(color(d)); } ) + .call(position) + .sort(order); + + // Add a title. + dot.append("title") + .text(function (d) { return d.name; } ); + + // Add an overlay for the year label. + var box = label.node().getBBox(); + + var overlay = svg.append("rect") + .attr("class", "overlay") + .attr("x", box.x) + .attr("y", box.y) + .attr("width", box.width) + .attr("height", box.height) + .on("mouseover", enableInteraction); + + // Start a transition that interpolates the data based on year. + svg.transition() + .duration(30000) + .ease("linear") + .tween("year", tweenYear) + .each("end", enableInteraction); + + // Positions the dots based on data. + function position(dot) { + dot.attr("cx", function (d) { return xScale(x(d)); } ) + .attr("cy", function (d) { return yScale(y(d)); } ) + .attr("r", function (d) { return radiusScale(radius(d)); } ); + } + + // Defines a sort order so that the smallest dots are drawn on top. + function order(a, b) { + return radius(b) - radius(a); + } + + // After the transition finishes, you can mouseover to change the year. + function enableInteraction() { + var yearScale = d3.scale.linear() + .domain([1800, 2009]) + .range([box.x + 10, box.x + box.width - 10]) + .clamp(true); + + // Cancel the current transition, if any. + svg.transition().duration(0); + + overlay + .on("mouseover", mouseover) + .on("mouseout", mouseout) + .on("mousemove", mousemove) + .on("touchmove", mousemove); + + function mouseover() { + label.classed("active", true); + } + + function mouseout() { + label.classed("active", false); + } + + function mousemove() { + displayYear(yearScale.invert(d3.mouse(this)[0])); + } + } + + // Tweens the entire chart by first tweening the year, and then the data. + // For the interpolated data, the dots and label are redrawn. + function tweenYear() { + var year = d3.interpolateNumber(1800, 2009); + return function (t) { displayYear(year(t)); }; + } + + // Updates the display to show the specified year. + function displayYear(year) { + dot.data(interpolateData(year), key).call(position).sort(order); + label.text(Math.round(year)); + } + + // Interpolates the dataset for the given (fractional) year. + function interpolateData(year) { + return nations.map(function (d) { + return { + name: d.name, + region: d.region, + income: interpolateValues(d.income, year), + population: interpolateValues(d.population, year), + lifeExpectancy: interpolateValues(d.lifeExpectancy, year) + }; + } ); + } + + // Finds (and possibly interpolates) the value for the specified year. + function interpolateValues(values, year) { + var i = bisect.left(values, year, 0, values.length - 1), + a = values[i]; + if (i > 0) { + var b = values[i - 1], + t = (year - a[0]) / (b[0] - a[0]); + return a[1] * (1 - t) + b[1] * t; + } + return a[1]; + } + } ); +} diff --git a/d3/d3.d.ts b/d3/d3.d.ts index 2f60ad1dcc..a79bbd8e9b 100644 --- a/d3/d3.d.ts +++ b/d3/d3.d.ts @@ -4,7 +4,7 @@ // Definitions: https://github.com/borisyankov/DefinitelyTyped declare module D3 { - interface Selectors { + export interface Selectors { /** * Select an element from the current document */ @@ -42,145 +42,7 @@ declare module D3 { }; } - interface Behavior { - /** - * Constructs a new drag behaviour - */ - drag: () => Drag; - /** - * Constructs a new zoom behaviour - */ - zoom: () => Zoom; - } - - interface Zoom { - /** - * Execute zoom method - */ - (): any; - - /** - * Registers a listener to receive events - * - * @param type Enent name to attach the listener to - * @param listener Function to attach to event - */ - on: (type: string, listener: (data: any, index?: number) => any) => Zoom; - - /** - * Gets or set the current zoom scale - */ - scale: { - /** - * Get the current current zoom scale - */ - (): number; - /** - * Set the current current zoom scale - * - * @param origin Zoom scale - */ - (scale: number): Zoom; - }; - - /** - * Gets or set the current zoom translation vector - */ - translate: { - /** - * Get the current zoom translation vector - */ - (): number[]; - /** - * Set the current zoom translation vector - * - * @param translate Tranlation vector - */ - (translate: number[]): Zoom; - }; - - /** - * Gets or set the allowed scale range - */ - scaleExtent: { - /** - * Get the current allowed zoom range - */ - (): number[]; - /** - * Set the allowable zoom range - * - * @param extent Allowed zoom range - */ - (extent: number[]): Zoom; - }; - - /** - * Gets or set the X-Scale that should be adjusted when zooming - */ - x: { - /** - * Get the X-Scale - */ - (): Scale; - /** - * Set the X-Scale to be adjusted - * - * @param x The X Scale - */ - (x: Scale): Zoom; - - }; - - /** - * Gets or set the Y-Scale that should be adjusted when zooming - */ - y: { - /** - * Get the Y-Scale - */ - (): Scale; - /** - * Set the Y-Scale to be adjusted - * - * @param y The Y Scale - */ - (y: Scale): Zoom; - }; - } - - interface Drag { - /** - * Execute drag method - */ - (): any; - - /** - * Registers a listener to receive events - * - * @param type Enent name to attach the listener to - * @param listener Function to attach to event - */ - on: (type: string, listener: (data: any, index?: number) => any) => Drag; - - /** - * Gets or set the current origin accessor function - */ - origin: { - /** - * Get the current origin accessor function - */ - (): any; - /** - * Set the origin accessor function - * - * @param origin Accessor function - */ - (origin?: any): Drag; - }; - } - - interface Event { + export interface Event { dx: number; dy: number; clientX: number; @@ -190,79 +52,78 @@ declare module D3 { sourceEvent: Event; x: number; y: number; + keyCode: number; altKey: any; } - interface Base extends Selectors { + export interface Base extends Selectors { /** * Create a behaviour */ - behavior: Behavior; + behavior: Behaviour.Behavior; /** * Access the current user event for interaction */ event: Event; - + /** * Compare two values for sorting. * Returns -1 if a is less than b, or 1 if a is greater than b, or 0 * - * @param a First number - * @param b Second number + * @param a First value + * @param b Second value */ - ascending: (a: number, b: number) => number; + ascending(a: T, b: T): number; /** * Compare two values for sorting. * Returns -1 if a is greater than b, or 1 if a is less than b, or 0 * - * @param a First number - * @param b Second number + * @param a First value + * @param b Second value */ - descending: (a: number, b: number) => number; + descending(a: T, b: T): number; /** * Find the minimum value in an array * * @param arr Array to search * @param map Accsessor function */ - min: (arr: number[], map?: (v: any) => any) => number; + min(arr: T[], map?: (v: T) => number): number; /** * Find the maximum value in an array * * @param arr Array to search * @param map Accsessor function */ - max: (arr: any[], map?: (v: any) => number) => number; - - + max(arr: T[], map?: (v: T) => number): number; /** * Find the minimum and maximum value in an array * * @param arr Array to search * @param map Accsessor function */ - extent: (arr: number[], map?: (v: any) => any) => number[]; + extent(arr: T[], map?: (v: T) => number): number[]; /** * Compute the sum of an array of numbers * * @param arr Array to search * @param map Accsessor function */ - sum: (arr: number[], map?: (v: any) => any) => number; + sum(arr: T[], map?: (v: T) => number): number; /** * Compute the arithmetic mean of an array of numbers * * @param arr Array to search * @param map Accsessor function */ - mean: (arr: number[], map?: (v: any) => any) => number; + mean(arr: T[], map?: (v: T) => number): number; /** * Compute the median of an array of numbers (the 0.5-quantile). * * @param arr Array to search * @param map Accsessor function */ - median: (arr: number[], map?: (v: any) => any) => number; + median(arr: T[], map?: (v: T) => number): number; /** * Compute a quantile for a sorted array of numbers. * @@ -278,7 +139,7 @@ declare module D3 { * @param low Minimum value of array subset * @param hihg Maximum value of array subset */ - bisect: (arr: any[], x: any, low?: number, high?: number) => number; + bisect(arr: T[], x: T, low?: number, high?: number): number; /** * Locate the insertion point for x in array to maintain sorted order * @@ -287,7 +148,7 @@ declare module D3 { * @param low Minimum value of array subset * @param high Maximum value of array subset */ - bisectLeft: (arr: any[], x: any, low?: number, high?: number) => number; + bisectLeft(arr: T[], x: T, low?: number, high?: number): number; /** * Locate the insertion point for x in array to maintain sorted order * @@ -296,7 +157,7 @@ declare module D3 { * @param low Minimum value of array subset * @param high Maximum value of array subset */ - bisectRight: (arr: any[], x: any, low?: number, high?: number) => number; + bisectRight(arr: T[], x: T, low?: number, high?: number): number; /** * Bisect using an accessor. * @@ -308,7 +169,7 @@ declare module D3 { * * @param arr Array to randomise */ - shuffle(arr: any[]): any[]; + shuffle(arr: T[]): T[]; /** * Reorder an array of elements according to an array of indexes * @@ -376,7 +237,6 @@ declare module D3 { * Create new nest operator */ nest(): Nest; - /** * Request a resource using XMLHttpRequest. */ @@ -423,7 +283,7 @@ declare module D3 { * @param url Url to request * @param callback Function to invoke when resource is loaded or the request fails */ - json: (url: string, callback?: (response: any) => void ) => Xhr; + json: (url: string, callback?: (error: any, data: any) => void ) => Xhr; /** * Request an HTML document fragment. */ @@ -454,163 +314,213 @@ declare module D3 { /** * Request a comma-separated values (CSV) file. */ - csv: { - /** - * Request a comma-separated values (CSV) file. - * - * @param url Url to request - * @param callback Function to invoke when resource is loaded or the request fails - */ - (url: string, callback?: (error: any, response: any[]) => void ): Xhr; - /** - * Parse a CSV string into objects using the header row. - * - * @param string CSV formatted string to parse - */ - parse(string: string): any[]; - /** - * Parse a CSV string into tuples, ignoring the header row. - * - * @param string CSV formatted string to parse - */ - parseRows(string: string, accessor: (row: any[], index: number) => any): any; - /** - * Format an array of tuples into a CSV string. - * - * @param rows Array to convert to a CSV string - */ - format(rows: any[]): string; - }; + csv: Dsv; /** * Request a tab-separated values (TSV) file */ - tsv: { - /** - * Request a tab-separated values (TSV) file - * - * @param url Url to request - * @param callback Function to invoke when resource is loaded or the request fails - */ - (url: string, callback?: (error: any, response: any[]) => void ): Xhr; - /** - * Parse a TSV string into objects using the header row. - * - * @param string TSV formatted string to parse - */ - parse(string: string): any[]; - /** - * Parse a TSV string into tuples, ignoring the header row. - * - * @param string TSV formatted string to parse - */ - parseRows(string: string, accessor: (row: any[], index: number) => any): any; - /** - * Format an array of tuples into a TSV string. - * - * @param rows Array to convert to a TSV string - */ - format(rows: any[]): string; - }; - + tsv: Dsv; /** * Time Functions */ - time: Time; - + time: Time.Time; /** * Scales */ - scale: { - /** - * Construct a linear quantitative scale. - */ - linear(): LinearScale; - /* - * Construct an ordinal scale. - */ - ordinal(): OrdinalScale; - /** - * Construct a linear quantitative scale with a discrete output range. - */ - quantize(): QuantizeScale; - /* - * Construct an ordinal scale with ten categorical colors. - */ - category10(): OrdinalScale; - /* - * Construct an ordinal scale with twenty categorical colors - */ - category20(): OrdinalScale; - /* - * Construct an ordinal scale with twenty categorical colors - */ - category20b(): OrdinalScale; - /* - * Construct an ordinal scale with twenty categorical colors - */ - category20c(): OrdinalScale; - }; + scale: Scale.ScaleBase; /* * Interpolate two values */ - interpolate: BaseInterpolate; + interpolate: Transition.BaseInterpolate; /* * Interpolate two numbers */ - interpolateNumber: BaseInterpolate; + interpolateNumber: Transition.BaseInterpolate; /* * Interpolate two integers */ - interpolateRound: BaseInterpolate; + interpolateRound: Transition.BaseInterpolate; /* * Interpolate two strings */ - interpolateString: BaseInterpolate; + interpolateString: Transition.BaseInterpolate; /* * Interpolate two RGB colours */ - interpolateRgb: BaseInterpolate; + interpolateRgb: Transition.BaseInterpolate; /* * Interpolate two HSL colours */ - interpolateHsl: BaseInterpolate; + interpolateHsl: Transition.BaseInterpolate; + /* + * Interpolate two HCL colours + */ + interpolateHcl: Transition.BaseInterpolate; + /* + * Interpolate two L*a*b* colors + */ + interpolateLab: Transition.BaseInterpolate; /* * Interpolate two arrays of values */ - interpolateArray: BaseInterpolate; + interpolateArray: Transition.BaseInterpolate; /* * Interpolate two arbitary objects */ - interpolateObject: BaseInterpolate; + interpolateObject: Transition.BaseInterpolate; /* * Interpolate two 2D matrix transforms */ - interpolateTransform: BaseInterpolate; - + interpolateTransform: Transition.BaseInterpolate; + /* + * The array of built-in interpolator factories + */ + interpolators: Array; /** * Layouts */ - layout: Layout; - + layout: Layout.Layout; /** * Svg's */ - svg: Svg; - + svg: Svg.Svg; /** * Random number generators */ random: Random; - /** * Create a function to format a number as a string * * @param specifier The format specifier to use */ format(specifier: string): (value: number) => string; + /** + * Returns the SI prefix for the specified value at the specified precision + */ + formatPrefix(value: number, precision?: number): MetricPrefix; + /** + * The version of the d3 library + */ + version: string; + /** + * Returns the root selection + */ + selection(): Selection; + ns: { + /** + * The map of registered namespace prefixes + */ + prefix: { + svg: string; + xhtml: string; + xlink: string; + xml: string; + xmlns: string; + }; + /** + * Qualifies the specified name + */ + qualify(name: string): { space: string; local: string; }; + }; + /** + * Returns a built-in easing function of the specified type + */ + ease: (type: string, ...arrs: any[]) => Transition; + /** + * Constructs a new RGB color. + */ + rgb: { + /** + * Constructs a new RGB color with the specified r, g and b channel values + */ + (r: number, g: number, b: number): D3.Color.RGBColor; + /** + * Constructs a new RGB color by parsing the specified color string + */ + (color: string): D3.Color.RGBColor; + }; + /** + * Constructs a new HCL color. + */ + hcl: { + /** + * Constructs a new HCL color. + */ + (h: number, c: number, l: number): Color.HCLColor; + /** + * Constructs a new HCL color by parsing the specified color string + */ + (color: string): Color.HCLColor; + }; + /** + * Constructs a new HSL color. + */ + hsl: { + /** + * Constructs a new HSL color with the specified hue h, saturation s and lightness l + */ + (h: number, s: number, l: number): Color.HSLColor; + /** + * Constructs a new HSL color by parsing the specified color string + */ + (color: string): Color.HSLColor; + }; + /** + * Constructs a new RGB color. + */ + lab: { + /** + * Constructs a new LAB color. + */ + (l: number, a: number, b: number): Color.LABColor; + /** + * Constructs a new LAB color by parsing the specified color string + */ + (color: string): Color.LABColor; + }; + geo: Geo.Geo; + geom: Geom.Geom; + /** + * gets the mouse position relative to a specified container. + */ + mouse(container: any): Array; + /** + * gets the touch positions relative to a specified container. + */ + touches(container: any): Array; + functor(value: T): T; + functor(value: () => T): T; + map(object?: any): Map; + set(array?: Array): Set; + dispatch(...types: Array): Dispatch; + rebind(target: any, source: any, ...names: Array): any; + requote(str: string): string; + timer: { + (funct: () => boolean, delay?: number, mark?: number): void; + flush(): void; + } + transition(): Transition.Transition; } - interface Xhr { + export interface Dispatch { + [event: string]: any; + on: { + (type: string): any; + (type: string, listener: any): any; + } + } + + export interface MetricPrefix { + /** + * the scale function, for converting numbers to the appropriate prefixed scale. + */ + scale: (d: number) => number; + /** + * the prefix symbol + */ + symbol: string; + } + + export interface Xhr { /** * Get or set request header */ @@ -657,14 +567,14 @@ declare module D3 { * * @param value The function used to map the response to a data value */ - (value: (xhr: XMLHttpRequest) => any ): Xhr; + (value: (xhr: XMLHttpRequest) => any): Xhr; }; /** * Issue the request using the GET method * * @param callback Function to invoke on completion of request */ - get (callback?: (xhr: XMLHttpRequest) => void ): Xhr; + get(callback?: (xhr: XMLHttpRequest) => void ): Xhr; /** * Issue the request using the POST method */ @@ -716,7 +626,35 @@ declare module D3 { on: (type: string, listener: (data: any, index?: number) => any) => Xhr; } - interface Selection extends Selectors { + export interface Dsv { + /** + * Request a delimited values file + * + * @param url Url to request + * @param callback Function to invoke when resource is loaded or the request fails + */ + (url: string, callback?: (error: any, response: any[]) => void ): Xhr; + /** + * Parse a delimited string into objects using the header row. + * + * @param string delimited formatted string to parse + */ + parse(string: string): any[]; + /** + * Parse a delimited string into tuples, ignoring the header row. + * + * @param string delimited formatted string to parse + */ + parseRows(string: string, accessor: (row: any[], index: number) => any): any; + /** + * Format an array of tuples into a delimited string. + * + * @param rows Array to convert to a delimited string + */ + format(rows: any[]): string; + } + + export interface Selection extends Selectors, Array { attr: { (name: string): string; (name: string, value: any): Selection; @@ -768,617 +706,68 @@ declare module D3 { }; filter: { - (filter: (data: any, index: number) => bool): UpdateSelection; - (filter: string): UpdateSelection; + (filter: (data: any, index: number) => boolean, thisArg?: any): UpdateSelection; + //(filter: string): UpdateSelection; }; call(callback: (selection: Selection) => void ): Selection; each(eachFunction: (data: any, index: number) => any): Selection; on: { (type: string): (data: any, index: number) => any; - (type: string, listener: (data: any, index: number) => any, capture?: bool): Selection; + (type: string, listener: (data: any, index: number) => any, capture?: boolean): Selection; }; - transition: () => Transition; + transition(): Transition.Transition; + /** + * sort elements in the document based on data. + * + * params comparator the specified comparator function + */ + sort(comparator?: (a: T, b: T) => number): Selection; + order: () => Selection; + node: () => SVGLocatable; } - interface EnterSelection { + export interface EnterSelection { append: (name: string) => Selection; insert: (name: string, before: string) => Selection; select: (selector: string) => Selection; empty: () => bool; - node: () => Node; + node: () => HTMLElementSVGLocatable; } - interface UpdateSelection extends Selection { + export interface UpdateSelection extends Selection { enter: () => EnterSelection; update: () => Selection; exit: () => Selection; } - interface Transition { - duration: { - (duration: number): Transition; - (duration: (data: any, index: number) => any): Transition; - }; - delay: { - (delay: number): Transition; - (delay: (data: any, index: number) => any): Transition; - }; - attr: { - (name: string): string; - (name: string, value: any): Transition; - (name: string, valueFunction: (data: any, index: number) => any): Transition; - }; - - style: { - (name: string): string; - (name: string, value: any, priority?: string): Transition; - (name: string, valueFunction: (data: any, index: number) => any, priority?: string): Transition; - }; - - call(callback: (selection: Selection) => void ): Transition; - - select: (selector: string) => Transition; - selectAll: (selector: string) => Transition; - - each: (type?: string, eachFunction?: (data: any, index: number) => any) => Transition; - transition: () => Transition; - ease: (value: string, ...arrs: any[]) => Transition; - remove: () => Transition; - } - - interface Nest { + export interface Nest { key(keyFunction: (data: any, index: number) => any): Nest; rollup(rollupFunction: (data: any, index: number) => any): Nest; map(values: any[]): Nest; } - interface Time { - second: Interval; - minute: Interval; - hour: Interval; - day: Interval; - week: Interval; - sunday: Interval; - monday: Interval; - tuesday: Interval; - wednesday: Interval; - thursday: Interval; - friday: Interval; - saturday: Interval; - month: Interval; - year: Interval; - - seconds: Range; - minutes: Range; - hours: Range; - days: Range; - weeks: Range; - months: Range; - years: Range; - - sundays: Range; - mondays: Range; - tuesdays: Range; - wednesdays: Range; - thursdays: Range; - fridays: Range; - saturdays: Range; - format: { - - (specifier: string): TimeFormat; - utc: (specifier: string) => TimeFormat; - iso: TimeFormat; - }; - - scale(): TimeScale; + export interface Map{ + has(key: string): boolean; + get(key: string): any; + set(key: string, value: T): T; + remove(key: string): boolean; + keys(): Array; + values(): Array; + entries(): Array; + forEach(func: (key: string, value: any) => void ): void; } - interface Range { - (start: Date, end: Date, step?: number): Date[]; + export interface Set{ + has(value: any): boolean; + Add(value: any): any; + remove(value: any): boolean; + values(): Array; + forEach(func: (value: any) => void ): void; } - interface Interval { - (date: Date): Date; - floor: (date: Date) => Date; - round: (date: Date) => Date; - ceil: (date: Date) => Date; - range: Range; - offset: (date: Date, step: number) => Date; - utc: Interval; - } - - interface TimeFormat { - (date: Date): string; - parse: (string: string) => Date; - } - - interface Scale { - (value: any): any; - domain: { - (values: any[]): Scale; - (): any[]; - }; - range: { - (values: any[]): Scale; - (): any[]; - }; - copy(): Scale; - } - - interface LinearScale extends Scale { - (value: number): number; - invert(value: number): number; - domain: { - (values: any[]): LinearScale; - (): any[]; - }; - range: { - (values: any[]): LinearScale; - (): any[]; - }; - rangeRound: (values: any[]) => LinearScale; - interpolate: { - (): Interpolate; - (factory: Interpolate): LinearScale; - }; - clamp(clamp: bool): LinearScale; - nice(): LinearScale; - ticks(count: number): any[]; - tickFormat(count: number): (n: number) => string; - copy(): LinearScale; - } - - interface OrdinalScale extends Scale { - (value: any): any; - domain: { - (values: any[]): OrdinalScale; - (): any[]; - }; - range: { - (values: any[]): OrdinalScale; - (): any[]; - }; - rangePoints(interval: any[], padding?: number): OrdinalScale; - rangeBands(interval: any[], padding?: number, outerPadding?: number): OrdinalScale; - rangeRoundBands(interval: any[], padding?: number, outerPadding?: number): OrdinalScale; - rangeBand(): number; - rangeExtent(): any[]; - copy(): OrdinalScale; - } - - interface QuantizeScale extends Scale { - (value: any): any; - domain: { - (values: number[]): QuantizeScale; - (): any[]; - }; - range: { - (values: any[]): QuantizeScale; - (): any[]; - }; - copy(): QuantizeScale; - } - - interface TimeScale extends Scale { - (value: Date): number; - invert(value: number): Date; - domain: { - (values: any[]): TimeScale; - (): any[]; - }; - range: { - (values: any[]): TimeScale; - (): any[]; - }; - rangeRound: (values: any[]) => TimeScale; - interpolate: { - (): Interpolate; - (factory: InterpolateFactory): TimeScale; - }; - clamp(clamp: bool): TimeScale; - ticks: { - (count: number): any[]; - (range: Range, count: number): any[]; - }; - tickFormat(count: number): (n: number) => string; - copy(): TimeScale; - } - - interface InterpolateFactory { - (a: any, b: any): BaseInterpolate; - } - interface BaseInterpolate { - (a: any, b: any): Interpolate; - } - - interface Interpolate { - (t: number): number; - } - - interface Layout { - stack(): StackLayout; - pie(): PieLayout; - force(): ForceLayout; - tree(): TreeLayout; - } - - interface StackLayout { - (layers: any[], index?: number): any[]; - values(accessor?: (d: any) => any): StackLayout; - offset(offset: string): StackLayout; - } - - interface PieLayout { - (values: any[], index?: number): ArcDescriptor[]; - value: { - (): (d: any, index: number) => number; - (accessor: (d: any, index: number) => number): PieLayout; - }; - sort: { - (): (d1: any, d2: any) => number; - (comparator: (d1: any, d2: any) => number): PieLayout; - }; - startAngle: { - (): number; - (angle: number): Arc; - (angle: () => number): Arc; - }; - endAngle: { - (): number; - (angle: number): Arc; - (angle: () => number): Arc; - }; - } - - interface ArcDescriptor { - value: any; - data: any; - startAngle: number; - endAngle: number; - } - - interface Symbol { - type: (string) => Symbol; - size: (number) => Symbol; - } - - - - interface ProjectionPoint - { - x: number; - y: number; - } - - interface Projector - { - (d: ProjectionPoint): ProjectionPoint; - } - - interface Diagonal - { - (): () => Diagonal; - (projectionPoint): Diagonal; - projection: - { - (projector): Diagonal; - (): Projector; - }; - - } - - interface Svg { - /** - * Create a new symbol generator - */ - symbol: () => Symbol; - /** - * Create a new axis generator - */ - axis(): Axis; - /** - * Create a new arc generator - */ - arc(): Arc; - /** - * Create a new line generator - */ - line(): Line; - /** - * Create a new area generator - */ - area(): Area; - /** - * Constructs a new diagonal generator with the default accessor functions - */ - diagonal(): Diagonal; - - } - - interface Axis { - (selection: Selection): void; - scale: { - (): any; - (scale: any): Axis; - }; - - orient: { - (): string; - (orientation: string): Axis; - }; - - ticks: { - (count: number): Axis; - (range: Range, count?: number): Axis; - }; - - tickSubdivide(count: number): Axis; - tickSize(major?: number, minor?: number, end?: number): Axis; - tickFormat(formatter: (value: any) => string): Axis; - } - - interface Arc { - (options?: ArcOptions): string; - innerRadius: { - (): number; - (radius: number): Arc; - (radius: () => number): Arc; - }; - outerRadius: { - (): number; - (radius: number): Arc; - (radius: () => number): Arc; - }; - startAngle: { - (): number; - (angle: number): Arc; - (angle: () => number): Arc; - }; - endAngle: { - (): number; - (angle: number): Arc; - (angle: () => number): Arc; - }; - centroid(options?: ArcOptions): number[]; - } - - interface ArcOptions { - innerRadius?: number; - outerRadius?: number; - startAngle?: number; - endAngle?: number; - } - - interface Line { - /** - * 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): Line; - }; - /** - * 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): Line; - }; - /** - * Get or set the interpolation mode. - */ - interpolate: { - /** - * Get the interpolation accessor. - */ - (): string; - /** - * Set the interpolation accessor. - * - * @param interpolate The interpolation mode - */ - (interpolate: string): Line; - }; - /** - * 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): Line; - }; - /** - * 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): Line; - }; - } - - interface Area { - /** - * 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): Area; - }; - /** - * 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): Area; - }; - /** - * 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): Area; - }; - /** - * 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): Area; - }; - /** - * 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): Area; - }; - /** - * 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): Area; - }; - /** - * Get or set the interpolation mode. - */ - interpolate: { - /** - * Get the interpolation accessor. - */ - (): string; - /** - * Set the interpolation accessor. - * - * @param interpolate The interpolation mode - */ - (interpolate: string): Area; - }; - /** - * 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): Area; - }; - /** - * 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): Area; - }; - } - - interface Random { + export interface Random { /** * Returns a function for generating random numbers with a normal distribution * @@ -1400,167 +789,2234 @@ declare module D3 { */ irwinHall(count: number): () => number; } - - // force layout definitions - export interface TwoDGraphPoint { - id: number; - index: number; - name: string; - px: number; - py: number; - size: number; - weight: number; - x: number; - y: number; - x0: number; - y0: number; + + // Transitions + export module Transition { + export interface Transition { + duration: { + (duration: number): Transition; + (duration: (data: any, index: number) => any): Transition; + }; + delay: { + (delay: number): Transition; + (delay: (data: any, index: number) => any): Transition; + }; + attr: { + (name: string): string; + (name: string, value: any): Transition; + (name: string, valueFunction: (data: any, index: number) => any): Transition; + }; + style: { + (name: string): string; + (name: string, value: any, priority?: string): Transition; + (name: string, valueFunction: (data: any, index: number) => any, priority?: string): Transition; + }; + call(callback: (selection: Selection) => void ): Transition; + /** + * Select an element from the current document + */ + select: { + /** + * Selects the first element that matches the specified selector string + * + * @param selector Selection String to match + */ + (selector: string): Transition; + /** + * Selects the specified node + * + * @param element Node element to select + */ + (element: EventTarget): Transition; + }; + + /** + * Select multiple elements from the current document + */ + selectAll: { + /** + * Selects all elements that match the specified selector + * + * @param selector Selection String to match + */ + (selector: string): Transition; + /** + * Selects the specified array of elements + * + * @param elements Array of node elements to select + */ + (elements: EventTarget[]): Transition; + } + each: (type?: string, eachFunction?: (data: any, index: number) => any) => Transition; + transition: () => Transition; + ease: (value: string, ...arrs: any[]) => Transition; + attrTween(name: string, tween: (d: any, i: number, a: any) => BaseInterpolate): Transition; + styleTween(name: string, tween: (d: any, i: number, a: any) => BaseInterpolate, priority?: string): Transition; + text: { + (text: string): Transition; + (text: (d: any, i: number) => string): Transition; + } + tween(name: string, factory: InterpolateFactory): Transition; + filter: { + (selector: string): Transition; + (selector: (data: any, index: number) => boolean): Transition; + }; + remove(): Transition; + } + + export interface InterpolateFactory { + (a?: any, b?: any): BaseInterpolate; + } + + export interface BaseInterpolate { + (a: any, b?: any): any; + } + + export interface Interpolate { + (t: any): any; + } } - export interface LayoutNode extends TwoDGraphPoint { - fixed: bool; - parent: LayoutNode; - depth: number; - children: LayoutNode[]; - _children: LayoutNode[]; + //Time + export module Time { + export interface Time { + second: Interval; + minute: Interval; + hour: Interval; + day: Interval; + week: Interval; + sunday: Interval; + monday: Interval; + tuesday: Interval; + wednesday: Interval; + thursday: Interval; + friday: Interval; + saturday: Interval; + month: Interval; + year: Interval; + + seconds: Range; + minutes: Range; + hours: Range; + days: Range; + weeks: Range; + months: Range; + years: Range; + + sundays: Range; + mondays: Range; + tuesdays: Range; + wednesdays: Range; + thursdays: Range; + fridays: Range; + saturdays: Range; + format: { + + (specifier: string): TimeFormat; + utc: (specifier: string) => TimeFormat; + iso: TimeFormat; + }; + + scale(): Scale.TimeScale; + } + + export interface Range { + (start: Date, end: Date, step?: number): Date[]; + } + + export interface Interval { + (date: Date): Date; + floor: (date: Date) => Date; + round: (date: Date) => Date; + ceil: (date: Date) => Date; + range: Range; + offset: (date: Date, step: number) => Date; + utc: Interval; + } + + export interface TimeFormat { + (date: Date): string; + parse: (string: string) => Date; + } } - export interface LayoutLink { - source: LayoutNode; - target: LayoutNode; - } + // Layout + export module Layout { + export interface Layout { + /** + * Creates a new Stack layout + */ + stack(): StackLayout; + /** + * Creates a new pie layout + */ + pie(): PieLayout; + /** + * Creates a new force layout + */ + force(): ForceLayout; + /** + * Creates a new tree layout + */ + tree(): TreeLayout; + bundle(): BundleLayout; + chord(): ChordLayout; + cluster(): ClusterLayout; + hierarchy(): HierarchyLayout; + histogram(): HistogramLayout; + pack(): PackLayout; + partition(): PartitionLayout; + treeMap(): TreeMapLayout; + } + export interface StackLayout { + (layers: any[], index?: number): any[]; + values(accessor?: (d: any) => any): StackLayout; + offset(offset: string): StackLayout; + } - export interface ForceLayout { - (): ForceLayout; - size: { - (): number; - (mysize: number[]): ForceLayout; - (accessor: (d: any, index: number) => {}): ForceLayout; + export interface TreeLayout { + /** + * Gets or sets the sort order of sibling nodes for the layout using the specified comparator function + */ + sort: { + /** + * Gets the sort order function of sibling nodes for the layout + */ + (): (d1: any, d2: any) => number; + /** + * Sets the sort order of sibling nodes for the layout using the specified comparator function + */ + (comparator: (d1: any, d2: any) => number): TreeLayout; + }; + /** + * Gets or sets the specified children accessor function + */ + children: { + /** + * Gets the children accessor function + */ + (): (d: any) => any; + /** + * Sets the specified children accessor function + */ + (children: (d: any) => any): TreeLayout; + }; + /** + * Runs the tree layout + */ + nodes(root: GraphNode): TreeLayout; + /** + * Given the specified array of nodes, such as those returned by nodes, returns an array of objects representing the links from parent to child for each node + */ + links(nodes: Array): Array; + /** + * If separation is specified, uses the specified function to compute separation between neighboring nodes. If separation is not specified, returns the current separation function + */ + seperation: { + /** + * Gets the current separation function + */ + (): (a: GraphNode, b: GraphNode) => number; + /** + * Sets the specified function to compute separation between neighboring nodes + */ + (seperation: (a: GraphNode, b: GraphNode) => number): TreeLayout; + }; + /** + * Gets or sets the available layout size + */ + size: { + /** + * Gets the available layout size + */ + (): Array; + /** + * Sets the available layout size + */ + (size: Array): TreeLayout; + }; + } - }; + export interface PieLayout { + (values: any[], index?: number): ArcDescriptor[]; + value: { + (): (d: any, index: number) => number; + (accessor: (d: any, index: number) => number): PieLayout; + }; + sort: { + (): (d1: any, d2: any) => number; + (comparator: (d1: any, d2: any) => number): PieLayout; + }; + startAngle: { + (): number; + (angle: number): D3.Svg.Arc; + (angle: () => number): D3.Svg.Arc; + }; + endAngle: { + (): number; + (angle: number): D3.Svg.Arc; + (angle: () => number): D3.Svg.Arc; + }; + } - linkDistance: { - (): number; - (number): ForceLayout; - (accessor: (d: any, index: number) => number): ForceLayout; - }; + export interface ArcDescriptor { + value: any; + data: any; + startAngle: number; + endAngle: number; + index: number; + } - linkStrength: + export interface GraphNode { + id: number; + index: number; + name: string; + px: number; + py: number; + size: number; + weight: number; + x: number; + y: number; + subindex: number; + startAngle: number; + endAngle: number; + value: number; + fixed: bool; + children: GraphNode[]; + _children: GraphNode[]; + parent: GraphNode; + depth: number; + } + + export interface GraphLink { + source: GraphNode; + target: GraphNode; + } + + export interface ForceLayout { + (): ForceLayout; + size: { + (): number; + (mysize: number[]): ForceLayout; + (accessor: (d: any, index: number) => {}): ForceLayout; + + }; + linkDistance: { + (): number; + (number): ForceLayout; + (accessor: (d: any, index: number) => number): ForceLayout; + }; + linkStrength: { (): number; (number): ForceLayout; (accessor: (d: any, index: number) => number): ForceLayout; }; - - friction: - { - (): number; - (number): ForceLayout; - (accessor: (d: any, index: number) => number): ForceLayout; - }; - - - alpha: { - (): number; - (number): ForceLayout; - (accessor: (d: any, index: number) => number): ForceLayout; - }; - charge: { - (): number; - (number): ForceLayout; - (accessor: (d: any, index: number) => number): ForceLayout; - }; - - theta: { - (): number; - (number): ForceLayout; - (accessor: (d: any, index: number) => number): ForceLayout; - }; - - gravity: { - (): number; - (number): ForceLayout; - (accessor: (d: any, index: number) => number): ForceLayout; - }; - - links: { - (): LayoutLink[]; - (arLinks: LayoutLink[]): ForceLayout; - - }; - nodes: - { - (): LayoutNode[]; - (arNodes: LayoutNode[]): ForceLayout; - - }; - start(): ForceLayout; - resume(): ForceLayout; - stop(): ForceLayout; - tick(): ForceLayout; - on(type: string, listener: () => void ): ForceLayout; - drag(): ForceLayout; - } - - // tree layout - - - interface Comparator - { - (a: LayoutNode, b: LayoutNode): () => any; - - } - - interface ObjectWithChildrenArray - { - children: ObjectWithChildrenArray[]; - } - - interface ChildrenAccessorFunction - { - (d: ObjectWithChildrenArray): ()=> any; - } - - interface CalculateSeparation - { - (a: any, b: any): () => number; - - } - - - export interface TreeLayout - { - (): TreeLayout; - size: { - (): number; - (mysize: number[]): TreeLayout; - (accessor: (d: any, index: number) => {}): TreeLayout; - - }; - nodes: (LayoutNode) => LayoutNode[]; - links: (nodes: LayoutNode[]) => LayoutLink[]; - - - sort: + friction: { - (): () => Comparator; - (Comparator): (comp) => Comparator; + (): number; + (number): ForceLayout; + (accessor: (d: any, index: number) => number): ForceLayout; + }; + alpha: { + (): number; + (number): ForceLayout; + (accessor: (d: any, index: number) => number): ForceLayout; + }; + charge: { + (): number; + (number): ForceLayout; + (accessor: (d: any, index: number) => number): ForceLayout; }; - - children: - { - (): () => ChildrenAccessorFunction; - (ObjectWithChildrenArray): () => ObjectWithChildrenArray; + theta: { + (): number; + (number): ForceLayout; + (accessor: (d: any, index: number) => number): ForceLayout; }; - separation: - { - (): CalculateSeparation; - (CalculateSeparation): () => number; - }; + gravity: { + (): number; + (number): ForceLayout; + (accessor: (d: any, index: number) => number): ForceLayout; + }; + + links: { + (): GraphLink[]; + (arLinks: GraphLink[]): ForceLayout; + + }; + nodes: + { + (): GraphNode[]; + (arNodes: GraphNode[]): ForceLayout; + + }; + start(): ForceLayout; + resume(): ForceLayout; + stop(): ForceLayout; + tick(): ForceLayout; + on(type: string, listener: () => void ): ForceLayout; + drag(): ForceLayout; + } + + export interface BundleLayout{ + (links: Array): Array; + } + + export interface ChordLayout { + matrix: { + (): Array>; + (matrix: Array>): ChordLayout; + } + padding: { + (): number; + (padding: number): ChordLayout; + } + sortGroups: { + (): Array; + (comparator: (a: number, b: number) => number): ChordLayout; + } + sortSubgroups: { + (): Array; + (comparator: (a: number, b: number) => number): ChordLayout; + } + sortChords: { + (): Array; + (comparator: (a: number, b: number) => number): ChordLayout; + } + chords(): Array; + groups(): Array; + } + + export interface ClusterLayout{ + sort: { + (): (a: GraphNode, b: GraphNode) => number; + (comparator: (a: GraphNode, b: GraphNode) => number): ClusterLayout; + } + children: { + (): (d: any, i?: number) => Array; + (children: (d: any, i?: number) => Array): ClusterLayout; + } + nodes(root: GraphNode): Array; + links(nodes: Array): Array; + seperation: { + (): (a: GraphNode, b: GraphNode) => number; + (seperation: (a: GraphNode, b: GraphNode) => number): ClusterLayout; + } + size: { + (): Array; + (size: Array): ClusterLayout; + } + value: { + (): (node: GraphNode) => number; + (value: (node: GraphNode) => number): ClusterLayout; + } + } + + export interface HierarchyLayout { + sort: { + (): (a: GraphNode, b: GraphNode) => number; + (comparator: (a: GraphNode, b: GraphNode) => number): HierarchyLayout; + } + children: { + (): (d: any, i?: number) => Array; + (children: (d: any, i?: number) => Array): HierarchyLayout; + } + nodes(root: GraphNode): Array; + links(nodes: Array): Array; + value: { + (): (node: GraphNode) => number; + (value: (node: GraphNode) => number): HierarchyLayout; + } + reValue(root: GraphNode): HierarchyLayout; + } + + export interface Bin extends Array { + x: number; + dx: number; + y: number; + } + + export interface HistogramLayout { + (values: Array, index?: number): Array; + value: { + (): (value: any) => any; + (accessor: (value: any) => any): HistogramLayout + } + range: { + (): (value: any, index: number) => Array; + (range: (value: any, index: number) => Array): HistogramLayout; + (range: Array): HistogramLayout; + } + bins: { + (): (range: Array, index: number) => Array; + (bins: (range: Array, index: number) => Array): HistogramLayout; + (bins: number): HistogramLayout; + (bins: Array): HistogramLayout; + } + frequency: { + (): boolean; + (frequency: boolean): HistogramLayout; + } + } + + export interface PackLayout { + sort: { + (): (a: GraphNode, b: GraphNode) => number; + (comparator: (a: GraphNode, b: GraphNode) => number): PackLayout; + } + children: { + (): (d: any, i?: number) => Array; + (children: (d: any, i?: number) => Array): PackLayout; + } + nodes(root: GraphNode): Array; + links(nodes: Array): Array; + value: { + (): (node: GraphNode) => number; + (value: (node: GraphNode) => number): PackLayout; + } + size: { + (): Array; + (size: Array): PackLayout; + } + padding: { + (): number; + (padding: number): PackLayout; + } + } + + export interface PartitionLayout { + sort: { + (): (a: GraphNode, b: GraphNode) => number; + (comparator: (a: GraphNode, b: GraphNode) => number): PackLayout; + } + children: { + (): (d: any, i?: number) => Array; + (children: (d: any, i?: number) => Array): PackLayout; + } + nodes(root: GraphNode): Array; + links(nodes: Array): Array; + value: { + (): (node: GraphNode) => number; + (value: (node: GraphNode) => number): PackLayout; + } + size: { + (): Array; + (size: Array): PackLayout; + } + } + + export interface TreeMapLayout { + sort: { + (): (a: GraphNode, b: GraphNode) => number; + (comparator: (a: GraphNode, b: GraphNode) => number): TreeMapLayout; + } + children: { + (): (d: any, i?: number) => Array; + (children: (d: any, i?: number) => Array): TreeMapLayout; + } + nodes(root: GraphNode): Array; + links(nodes: Array): Array; + value: { + (): (node: GraphNode) => number; + (value: (node: GraphNode) => number): TreeMapLayout; + } + size: { + (): Array; + (size: Array): TreeMapLayout; + } + padding: { + (): number; + (padding: number): TreeMapLayout; + } + round: { + (): boolean; + (round: boolean): TreeMapLayout; + } + sticky: { + (): boolean; + (sticky: boolean): TreeMapLayout; + } + mode: { + (): string; + (mode: string): TreeMapLayout; + } + } } + // Colour + export module Color { + export interface Color { + /** + * increase lightness by some exponential factor (gamma) + */ + brighter(k: number): Color; + /** + * decrease lightness by some exponential factor (gamma) + */ + darker(k: number): Color; + /** + * convert the color to a string. + */ + toString(): Color; + } + + export interface RGBColor extends Color{ + /** + * convert from RGB to HSL. + */ + hsl(): HSLColor; + } + + export interface HSLColor extends Color{ + /** + * convert from HSL to RGB. + */ + rgb(): RGBColor; + } + + export interface LABColor extends Color{ + /** + * convert from LAB to RGB. + */ + rgb(): RGBColor; + } + + export interface HCLColor extends Color{ + /** + * convert from HCL to RGB. + */ + rgb(): RGBColor; + } + } + + // SVG + export module Svg { + export interface Svg { + /** + * Create a new symbol generator + */ + symbol(): Symbol; + /** + * Create a new axis generator + */ + axis(): Axis; + /** + * Create a new arc generator + */ + arc(): Arc; + /** + * Create a new line generator + */ + line: { + (): Line; + radial(): LineRadial; + } + /** + * Create a new area generator + */ + area: { + (): Area; + radial(): AreaRadial; + } + /** + * Create a new brush generator + */ + brush(): Brush; + /** + * Create a new chord generator + */ + chord(): Chord; + /** + * Create a new diagonal generator + */ + diagonal: { + (): Diagonal; + radial(): Diagonal; + } + /** + * The array of supported symbol types. + */ + symbolTypes: Array; + } + + export interface Symbol { + type: (string) => Symbol; + size: (number) => Symbol; + } + + export interface Brush { + /** + * Draws or redraws this brush into the specified selection of elements + */ + (selection: Selection): void; + /** + * Gets or sets the x-scale associated with the brush + */ + x: { + /** + * Gets the x-scale associated with the brush + */ + (): D3.Scale.Scale; + /** + * Sets the x-scale associated with the brush + * + * @param accessor The new Scale + */ + (scale: D3.Scale.Scale): Brush; + }; + /** + * Gets or sets the x-scale associated with the brush + */ + y: { + /** + * Gets the x-scale associated with the brush + */ + (): D3.Scale.Scale; + /** + * Sets the x-scale associated with the brush + * + * @param accessor The new Scale + */ + (scale: D3.Scale.Scale): Brush; + }; + /** + * Gets or sets the current brush extent + */ + extent: { + /** + * Gets the current brush extent + */ + (): Array>; + /** + * Sets the current brush extent + */ + (values: Array>): Brush; + }; + /** + * Clears the extent, making the brush extent empty. + */ + clear(): Brush; + /** + * Returns true if and only if the brush extent is empty + */ + empty(): boolean; + /** + * Gets or sets the listener for the specified event type + */ + on: { + /** + * Gets the listener for the specified event type + */ + (type: string): (data: any, index: number) => any; + /** + * Sets the listener for the specified event type + */ + (type: string, listener: (data: any, index: number) => any, capture?: boolean): Brush; + }; + } + + export interface Axis { + (selection: Selection): void; + scale: { + (): any; + (scale: any): Axis; + }; + + orient: { + (): string; + (orientation: string): Axis; + }; + + ticks: { + (): any[]; + (...arguments: any[]): Axis; + }; + + tickSubdivide(count: number): Axis; + tickSize(major?: number, minor?: number, end?: number): Axis; + tickFormat(formatter: (value: any) => string): Axis; + } + + export interface Arc { + (options?: ArcOptions): string; + innerRadius: { + (): number; + (radius: number): Arc; + (radius: () => number): Arc; + }; + outerRadius: { + (): number; + (radius: number): Arc; + (radius: () => number): Arc; + }; + startAngle: { + (): number; + (angle: number): Arc; + (angle: () => number): Arc; + }; + endAngle: { + (): number; + (angle: number): Arc; + (angle: () => number): Arc; + }; + centroid(options?: ArcOptions): number[]; + } + + export interface ArcOptions { + innerRadius?: number; + outerRadius?: number; + startAngle?: number; + endAngle?: number; + } + + export interface Line { + /** + * 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): Line; + }; + /** + * 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): Line; + }; + /** + * Get or set the interpolation mode. + */ + interpolate: { + /** + * Get the interpolation accessor. + */ + (): string; + /** + * Set the interpolation accessor. + * + * @param interpolate The interpolation mode + */ + (interpolate: string): Line; + }; + /** + * 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): Line; + }; + /** + * 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): Line; + }; + } + + export interface LineRadial { + /** + * 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): LineRadial; + }; + /** + * 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): LineRadial; + }; + /** + * Get or set the interpolation mode. + */ + interpolate: { + /** + * Get the interpolation accessor. + */ + (): string; + /** + * Set the interpolation accessor. + * + * @param interpolate The interpolation mode + */ + (interpolate: string): LineRadial; + }; + /** + * 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): LineRadial; + }; + /** + * 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): LineRadial; + }; + radius: { + (): (d: any, i: any) => number; + (radius: number): LineRadial; + (radius: (d: any, i: any) => number): LineRadial; + } + angle: { + (): (d: any, i: any) => number; + (angle: number): LineRadial; + (angle: (d: any, i: any) => number): LineRadial; + } + } + + export interface Area { + /** + * 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): Area; + }; + /** + * 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): Area; + }; + /** + * 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): Area; + }; + /** + * 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): Area; + }; + /** + * 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): Area; + }; + /** + * 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): Area; + }; + /** + * Get or set the interpolation mode. + */ + interpolate: { + /** + * Get the interpolation accessor. + */ + (): string; + /** + * Set the interpolation accessor. + * + * @param interpolate The interpolation mode + */ + (interpolate: string): Area; + }; + /** + * 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): Area; + }; + /** + * 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): Area; + }; + } + + export interface AreaRadial { + /** + * 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): AreaRadial; + }; + /** + * 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): AreaRadial; + }; + /** + * 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): AreaRadial; + }; + /** + * 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): AreaRadial; + }; + /** + * 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): AreaRadial; + }; + /** + * 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): AreaRadial; + }; + /** + * Get or set the interpolation mode. + */ + interpolate: { + /** + * Get the interpolation accessor. + */ + (): string; + /** + * Set the interpolation accessor. + * + * @param interpolate The interpolation mode + */ + (interpolate: string): AreaRadial; + }; + /** + * 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): AreaRadial; + }; + /** + * 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): AreaRadial; + }; + radius: { + (): number; + (radius: number): AreaRadial; + (radius: () => number): AreaRadial; + }; + innerRadius: { + (): number; + (radius: number): AreaRadial; + (radius: () => number): AreaRadial; + }; + outerRadius: { + (): number; + (radius: number): AreaRadial; + (radius: () => number): AreaRadial; + }; + angle: { + (): number; + (angle: number): AreaRadial; + (angle: () => number): AreaRadial; + }; + startAngle: { + (): number; + (angle: number): AreaRadial; + (angle: () => number): AreaRadial; + }; + endAngle: { + (): number; + (angle: number): AreaRadial; + (angle: () => number): AreaRadial; + }; + } + + export interface Chord { + (datum: any, index?: number): string; + radius: { + (): number; + (radius: number): Chord; + (radius: () => number): Chord; + }; + startAngle: { + (): number; + (angle: number): Chord; + (angle: () => number): Chord; + }; + endAngle: { + (): number; + (angle: number): Chord; + (angle: () => number): Chord; + }; + source: { + (): any; + (angle: any): Chord; + (angle: (d: any, i?: number) => any): Chord; + }; + target: { + (): any; + (angle: any): Chord; + (angle: (d: any, i?: number) => any): Chord; + }; + } + + export interface Diagonal { + (datum: any, index?: number): string; + projection: { + (): Array; + (radius: (d: any, i?: number) => Array): Diagonal; + }; + source: { + (): any; + (angle: any): Diagonal; + (angle: (d: any, i?: number) => any): Diagonal; + }; + target: { + (): any; + (angle: any): Diagonal; + (angle: (d: any, i?: number) => any): Diagonal; + }; + } + } + + // Scales + export module Scale { + export interface ScaleBase { + /** + * Construct a linear quantitative scale. + */ + linear(): LinearScale; + /* + * Construct an ordinal scale. + */ + ordinal(): OrdinalScale; + /** + * Construct a linear quantitative scale with a discrete output range. + */ + quantize(): QuantizeScale; + /* + * Construct an ordinal scale with ten categorical colors. + */ + category10(): OrdinalScale; + /* + * Construct an ordinal scale with twenty categorical colors + */ + category20(): OrdinalScale; + /* + * Construct an ordinal scale with twenty categorical colors + */ + category20b(): OrdinalScale; + /* + * Construct an ordinal scale with twenty categorical colors + */ + category20c(): OrdinalScale; + /* + * Construct a linear identity scale. + */ + identity(): IdentityScale; + /* + * Construct a quantitative scale with an logarithmic transform. + */ + log(): LogScale; + /* + * Construct a quantitative scale with an exponential transform. + */ + pow(): PowScale; + /* + * Construct a quantitative scale mapping to quantiles. + */ + quantile(): QuantileScale; + /* + * Construct a quantitative scale with a square root transform. + */ + sqrt(): SqrtScale; + /* + * Construct a threshold scale with a discrete output range. + */ + theshold(): ThresholdScale; + } + + export interface Scale { + (value: any): any; + domain: { + (values: any[]): Scale; + (): any[]; + }; + range: { + (values: any[]): Scale; + (): any[]; + }; + copy(): Scale; + } + + export interface QuantitiveScale extends Scale { + /** + * Get the range value corresponding to a given domain value. + * + * @param value Domain Value + */ + (value: number): number; + /** + * Get the domain value corresponding to a given range value. + * + * @param value Range Value + */ + invert(value: number): number; + /** + * Get or set the scale's input domain. + */ + domain: { + /** + * Set the scale's input domain. + * + * @param value The input domain + */ + (values: any[]): QuantitiveScale; + /** + * Get the scale's input domain. + */ + (): any[]; + }; + /** + * get or set the scale's output range. + */ + range: { + /** + * Set the scale's output range. + * + * @param value The output range. + */ + (values: any[]): QuantitiveScale; + /** + * Get the scale's output range. + */ + (): any[]; + }; + /** + * Set the scale's output range, and enable rounding. + * + * @param value The output range. + */ + rangeRound: (values: any[]) => QuantitiveScale; + /** + * get or set the scale's output interpolator. + */ + interpolate: { + (): D3.Transition.Interpolate; + (factory: D3.Transition.Interpolate): QuantitiveScale; + }; + /** + * enable or disable clamping of the output range. + * + * @param clamp Enable or disable + */ + clamp(clamp: boolean): QuantitiveScale; + /** + * extend the scale domain to nice round numbers. + */ + nice(): QuantitiveScale; + /** + * get representative values from the input domain. + * + * @param count Aproximate representative values to return. + */ + ticks(count: number): any[]; + /** + * get a formatter for displaying tick values + * + * @param count Aproximate representative values to return + */ + tickFormat(count: number): (n: number) => string; + /** + * create a new scale from an existing scale.. + */ + copy(): QuantitiveScale; + } + + export interface LinearScale extends QuantitiveScale { + /** + * Get the range value corresponding to a given domain value. + * + * @param value Domain Value + */ + (value: number): number; + } + + export interface IdentityScale extends QuantitiveScale { + /** + * Get the range value corresponding to a given domain value. + * + * @param value Domain Value + */ + (value: number): number; + } + + export interface SqrtScale extends QuantitiveScale { + /** + * Get the range value corresponding to a given domain value. + * + * @param value Domain Value + */ + (value: number): number; + } + + export interface PowScale extends QuantitiveScale { + /** + * Get the range value corresponding to a given domain value. + * + * @param value Domain Value + */ + (value: number): number; + } + + export interface LogScale extends QuantitiveScale { + /** + * Get the range value corresponding to a given domain value. + * + * @param value Domain Value + */ + (value: number): number; + } + + export interface OrdinalScale extends Scale { + /** + * Get the range value corresponding to a given domain value. + * + * @param value Domain Value + */ + (value: any): any; + /** + * Get or set the scale's input domain. + */ + domain: { + /** + * Set the scale's input domain. + * + * @param value The input domain + */ + (values: any[]): OrdinalScale; + /** + * Get the scale's input domain. + */ + (): any[]; + }; + /** + * get or set the scale's output range. + */ + range: { + /** + * Set the scale's output range. + * + * @param value The output range. + */ + (values: any[]): OrdinalScale; + /** + * Get the scale's output range. + */ + (): any[]; + }; + rangePoints(interval: any[], padding?: number): OrdinalScale; + rangeBands(interval: any[], padding?: number, outerPadding?: number): OrdinalScale; + rangeRoundBands(interval: any[], padding?: number, outerPadding?: number): OrdinalScale; + rangeBand(): number; + rangeExtent(): any[]; + /** + * create a new scale from an existing scale.. + */ + copy(): OrdinalScale; + } + + export interface QuantizeScale extends Scale { + (value: any): any; + domain: { + (values: number[]): QuantizeScale; + (): any[]; + }; + range: { + (values: any[]): QuantizeScale; + (): any[]; + }; + copy(): QuantizeScale; + } + + export interface ThresholdScale extends Scale { + (value: any): any; + domain: { + (values: number[]): ThresholdScale; + (): any[]; + }; + range: { + (values: any[]): ThresholdScale; + (): any[]; + }; + copy(): ThresholdScale; + } + + export interface QuantileScale extends Scale { + (value: any): any; + domain: { + (values: number[]): QuantileScale; + (): any[]; + }; + range: { + (values: any[]): QuantileScale; + (): any[]; + }; + quantiles(): any[]; + copy(): QuantileScale; + } + + export interface TimeScale extends Scale { + (value: Date): number; + invert(value: number): Date; + domain: { + (values: any[]): TimeScale; + (): any[]; + }; + range: { + (values: any[]): TimeScale; + (): any[]; + }; + rangeRound: (values: any[]) => TimeScale; + interpolate: { + (): D3.Transition.Interpolate; + (factory: D3.Transition.InterpolateFactory): TimeScale; + }; + clamp(clamp: boolean): TimeScale; + ticks: { + (count: number): any[]; + (range: Range, count: number): any[]; + }; + tickFormat(count: number): (n: number) => string; + copy(): TimeScale; + } + } + + // Behaviour + export module Behaviour { + export interface Behavior{ + /** + * Constructs a new drag behaviour + */ + drag(): Drag; + /** + * Constructs a new zoom behaviour + */ + zoom(): Zoom; + } + + export interface Zoom { + /** + * Execute zoom method + */ + (): any; + + /** + * Registers a listener to receive events + * + * @param type Enent name to attach the listener to + * @param listener Function to attach to event + */ + on: (type: string, listener: (data: any, index?: number) => any) => Zoom; + + /** + * Gets or set the current zoom scale + */ + scale: { + /** + * Get the current current zoom scale + */ + (): number; + /** + * Set the current current zoom scale + * + * @param origin Zoom scale + */ + (scale: number): Zoom; + }; + + /** + * Gets or set the current zoom translation vector + */ + translate: { + /** + * Get the current zoom translation vector + */ + (): number[]; + /** + * Set the current zoom translation vector + * + * @param translate Tranlation vector + */ + (translate: number[]): Zoom; + }; + + /** + * Gets or set the allowed scale range + */ + scaleExtent: { + /** + * Get the current allowed zoom range + */ + (): number[]; + /** + * Set the allowable zoom range + * + * @param extent Allowed zoom range + */ + (extent: number[]): Zoom; + }; + + /** + * Gets or set the X-Scale that should be adjusted when zooming + */ + x: { + /** + * Get the X-Scale + */ + (): D3.Scale.Scale; + /** + * Set the X-Scale to be adjusted + * + * @param x The X Scale + */ + (x: D3.Scale.Scale): Zoom; + + }; + + /** + * Gets or set the Y-Scale that should be adjusted when zooming + */ + y: { + /** + * Get the Y-Scale + */ + (): D3.Scale.Scale; + /** + * Set the Y-Scale to be adjusted + * + * @param y The Y Scale + */ + (y: D3.Scale.Scale): Zoom; + }; + } + + export interface Drag { + /** + * Execute drag method + */ + (): any; + + /** + * Registers a listener to receive events + * + * @param type Enent name to attach the listener to + * @param listener Function to attach to event + */ + on: (type: string, listener: (data: any, index?: number) => any) => Drag; + + /** + * Gets or set the current origin accessor function + */ + origin: { + /** + * Get the current origin accessor function + */ + (): any; + /** + * Set the origin accessor function + * + * @param origin Accessor function + */ + (origin?: any): Drag; + }; + } + } + + // Geography + export module Geo { + export interface Geo { + /** + * create a new geographic path generator + */ + path(): Path; + /** + * create a circle generator. + */ + circle(): Circle; + /** + * compute the spherical area of a given feature. + */ + area(feature: any): number; + /** + * compute the latitude-longitude bounding box for a given feature. + */ + bounds(feature: any): Array>; + /** + * compute the spherical centroid of a given feature. + */ + centroid(feature: any): Array; + /** + * compute the great-arc distance between two points. + */ + distance(a: Array, b: Array): number; + /** + * interpolate between two points along a great arc. + */ + interpolate(a: Array, b: Array): (t: number) => Array; + /** + * compute the length of a line string or the circumference of a polygon. + */ + length(feature: any): number; + /** + * create a standard projection from a raw projection. + */ + projection(raw: (lambda: any, phi: any) => any): Projection; + /** + * create a standard projection from a mutable raw projection. + */ + projectionMutator(rawFactory: (lambda: number, phi: number) => Array): Projection; + /** + * the Albers equal-area conic projection. + */ + albers(): Projection; + /** + * a composite Albers projection for the United States. + */ + albersUsa(): Projection; + /** + * the azimuthal equal-area projection. + */ + azimuthalEqualArea: { + (): Projection; + raw(): Projection; + } + /** + * the azimuthal equidistant projection. + */ + azimuthalEquidistant: { + (): Projection; + raw(): Projection; + } + /** + * the conic conformal projection. + */ + conicConformal: { + (): Projection; + raw(): Projection; + } + /** + * the conic equidistant projection. + */ + conicEquidistant: { + (): Projection; + raw(): Projection; + } + /** + * the conic equal-area (a.k.a. Albers) projection. + */ + conicEqualArea: { + (): Projection; + raw(): Projection; + } + /** + * the equirectangular (plate carreĂ©) projection. + */ + equirectangular: { + (): Projection; + raw(): Projection; + } + /** + * the gnomonic projection. + */ + gnomonic: { + (): Projection; + raw(): Projection; + } + /** + * the spherical Mercator projection. + */ + mercator: { + (): Projection; + raw(): Projection; + } + /** + * the azimuthal orthographic projection. + */ + othographic: { + (): Projection; + raw(): Projection; + } + /** + * the azimuthal stereographic projection. + */ + stereographic: { + (): Projection; + raw(): Projection; + } + /** + * the transverse Mercator projection. + */ + transverseMercator: { + (): Projection; + raw(): Projection; + } + /** + * convert a GeoJSON object to a geometry stream. + */ + stream(object: GeoJSON, listener: any): Stream; + /** + * + */ + graticule(): Graticule; + /** + * + */ + greatArc: GreatArc; + /** + * + */ + rotation(rotation: Array): Rotation; + } + + export interface Path { + /** + * Returns the path data string for the given feature + */ + (feature: any, index?: any): string; + /** + * get or set the geographic projection. + */ + projection: { + /** + * get the geographic projection. + */ + (): Projection; + /** + * set the geographic projection. + */ + (projection: Projection): Path; + } + /** + * get or set the render context. + */ + context: { + /** + * return an SVG path string invoked on the given feature. + */ + (): string; + /** + * sets the render context and returns the path generator + */ + (context: Context): Path; + } + /** + * Computes the projected area + */ + area(feature: any); + /** + * Computes the projected centroid + */ + centroid(feature: any); + /** + * Computes the projected bounding box + */ + bounds(feature: any); + /** + * get or set the radius to display point features. + */ + pointRadius: { + /** + * returns the current radius + */ + (): number; + /** + * sets the radius used to display Point and MultiPoint features to the specified number + */ + (radius: number): Path; + /** + * sets the radius used to display Point and MultiPoint features to the specified number + */ + (radius: (feature: any, index: number) => number): Path; + } + } + + export interface Context { + beginPath(): any; + moveTo(x: number, y: number): any; + lineTo(x: number, y: number): any; + arc(x: number, y: number, radius: number, startAngle: number, endAngle: number): any; + closePath(): any; + } + + export interface Circle { + (...args: Array): GeoJSON; + origin: { + (): Array; + (origin: Array): Circle; + (origin: (...args: Array) => Array): Circle; + } + angle: { + (): number; + (angle: number): Circle; + } + precision: { + (): number; + (precision: number): Circle; + } + } + + export interface Graticule{ + (): GeoJSON; + lines(): GeoJSON; + outline(): GeoJSON; + extent: { + (): Array>; + (extent: Array>): Graticule; + } + minorExtent: { + (): Array>; + (extent: Array>): Graticule; + } + majorExtent: { + (): Array>; + (extent: Array>): Graticule; + } + step: { + (): Array>; + (extent: Array>): Graticule; + } + minorStep: { + (): Array>; + (extent: Array>): Graticule; + } + majorStep: { + (): Array>; + (extent: Array>): Graticule; + } + precision: { + (): number; + (precision: number): Graticule; + } + } + + export interface GreatArc { + (): GeoJSON; + distance(): number; + source: { + (): any; + (source: any): GreatArc; + } + target: { + (): any; + (target: any): GreatArc; + } + precision: { + (): number; + (precision: number): GreatArc; + } + } + + export interface GeoJSON { + coordinates: Array>; + type: string; + } + + export interface Projection { + (coordinates: Array): Array; + invert(point: Array): Array; + rotate: { + (): Array; + (rotation: Array): Projection; + }; + center: { + (): Array; + (location: Array): Projection; + }; + translate: { + (): Array; + (point: Array): Projection; + }; + scale: { + (): number; + (scale: number): Projection; + }; + clipAngle: { + (): number; + (angle: number): Projection; + }; + clipExtent: { + (): Array>; + (extent: Array>): Projection; + }; + precision: { + (): number; + (precision: number): Projection; + }; + stream(listener?: any): Stream; + } + + export interface Stream { + point(x: number, y: number, z?: number): void; + lineStart(): void; + lineEnd(): void; + polygonStart(): void; + polygonEnd(): void; + sphere(): void; + } + + export interface Rotation extends Array { + (location: Array): Rotation; + invert(location: Array): Rotation; + } + } + + // Geometry + export module Geom { + export interface Geom { + /** + * compute the Voronoi diagram for the specified points. + */ + voronoi: Voronoi + /** + * compute the Delaunay triangulation for the specified points. + */ + delaunay(vertices?: Array): Array; + /** + * constructs a quadtree for an array of points. + */ + quadtree: Quadtree; + /** + * constructs a polygon + */ + polygon: Polygon; + /** + * creates a new hull layout with the default settings. + */ + hull: Hull; + } + + export interface Vertice extends Array { + /** + * Returns the angle of the vertice + */ + angle?: number; + } + + export interface Polygon extends Array { + /** + * Returns the input array of vertices with additional methods attached + */ + (vertices: Array): Polygon; + /** + * Returns the signed area of this polygon + */ + area(): number; + /** + * Returns a two-element array representing the centroid of this polygon. + */ + centroid(): Array; + /** + * Clips the subject polygon against this polygon + */ + clip(subject: Polygon): Polygon; + } + + export interface Quadtree { + /** + * Constructs a new quadtree for the specified array of points. + */ + (): Quadtree; + /** + * Constructs a new quadtree for the specified array of points. + */ + (points: Array, x1: number, y1: number, x2: number, y2: number): Quadtree; + /** + * Constructs a new quadtree for the specified array of points. + */ + (points: Array, width: number, height: number): Quadtree; + /** + * Adds a new point to the quadtree. + */ + add(point: Point): Quadtree; + visit(callback: any): Quadtree; + x: { + (): (d: any) => any; + (accesor: (d: any) => any): Quadtree; + + } + y: { + (): (d: any) => any; + (accesor: (d: any) => any): Quadtree; + + } + size(size: Array): Quadtree; + } + + export interface Point { + x: number; + y: number; + } + + export interface Voronoi { + (vertices?: Array): Array; + x: { + (): (d: any) => any; + (accesor: (d: any) => any): any; + } + y: { + (): (d: any) => any; + (accesor: (d: any) => any): any; + } + } + + export interface Hull { + (vertices: Array): Hull; + x: { + (): (d: any) => any; + (accesor: (d: any) => any): any; + } + y: { + (): (d: any) => any; + (accesor: (d: any) => any): any; + } + } + } } declare var d3: D3.Base;