Merge branch 'release'
This commit is contained in:
Коммит
fe671a70e2
|
@ -10,7 +10,7 @@ try {
|
|||
d3_style_setProperty.call(this, name, value + "", priority);
|
||||
};
|
||||
}
|
||||
d3 = {version: "2.6.0"}; // semver
|
||||
d3 = {version: "2.6.1"}; // semver
|
||||
var d3_array = d3_arraySlice; // conversion for NodeLists
|
||||
|
||||
function d3_arrayCopy(pseudoarray) {
|
||||
|
@ -977,9 +977,9 @@ function d3_interpolateByName(n) {
|
|||
d3.interpolators = [
|
||||
d3.interpolateObject,
|
||||
function(a, b) { return (b instanceof Array) && d3.interpolateArray(a, b); },
|
||||
function(a, b) { return (typeof b === "string") && d3.interpolateString(a + "", b); },
|
||||
function(a, b) { return (typeof b === "string" ? b in d3_rgb_names || /^(#|rgb\(|hsl\()/.test(b) : b instanceof d3_Rgb || b instanceof d3_Hsl) && d3.interpolateRgb(a + "", b); },
|
||||
function(a, b) { return (typeof b === "number") && d3.interpolateNumber(+a, b); }
|
||||
function(a, b) { return (typeof a === "string" || typeof b === "string") && d3.interpolateString(a + "", b + ""); },
|
||||
function(a, b) { return (typeof b === "string" ? b in d3_rgb_names || /^(#|rgb\(|hsl\()/.test(b) : b instanceof d3_Rgb || b instanceof d3_Hsl) && d3.interpolateRgb(a, b); },
|
||||
function(a, b) { return !isNaN(a = +a) && !isNaN(b = +b) && d3.interpolateNumber(a, b); }
|
||||
];
|
||||
function d3_uninterpolateNumber(a, b) {
|
||||
b = b - (a = +a) ? 1 / (b - a) : 0;
|
||||
|
@ -2542,7 +2542,7 @@ function d3_scale_log(linear, log) {
|
|||
if (arguments.length < 2) format = d3_scale_logFormat;
|
||||
if (arguments.length < 1) return format;
|
||||
var k = n / scale.ticks().length,
|
||||
f = log === d3_scale_logn ? (e = -1e-15, Math.floor) : (e = 1e-15, Math.ceil),
|
||||
f = log === d3_scale_logn ? (e = -1e-12, Math.floor) : (e = 1e-12, Math.ceil),
|
||||
e;
|
||||
return function(d) {
|
||||
return d / pow(f(log(d) + e)) < k ? format(d) : "";
|
||||
|
@ -3646,7 +3646,7 @@ function d3_svg_mousePoint(container, e) {
|
|||
var point = (container.ownerSVGElement || container).createSVGPoint();
|
||||
if ((d3_mouse_bug44083 < 0) && (window.scrollX || window.scrollY)) {
|
||||
var svg = d3.select(document.body)
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.style("position", "absolute")
|
||||
.style("top", 0)
|
||||
.style("left", 0);
|
||||
|
@ -3807,13 +3807,13 @@ d3.svg.axis = function() {
|
|||
// Minor ticks.
|
||||
var subticks = d3_svg_axisSubdivide(scale, ticks, tickSubdivide),
|
||||
subtick = g.selectAll(".minor").data(subticks, String),
|
||||
subtickEnter = subtick.enter().insert("svg:line", "g").attr("class", "tick minor").style("opacity", 1e-6),
|
||||
subtickEnter = subtick.enter().insert("line", "g").attr("class", "tick minor").style("opacity", 1e-6),
|
||||
subtickExit = transition(subtick.exit()).style("opacity", 1e-6).remove(),
|
||||
subtickUpdate = transition(subtick).style("opacity", 1);
|
||||
|
||||
// Major ticks.
|
||||
var tick = g.selectAll("g").data(ticks, String),
|
||||
tickEnter = tick.enter().insert("svg:g", "path").style("opacity", 1e-6),
|
||||
tickEnter = tick.enter().insert("g", "path").style("opacity", 1e-6),
|
||||
tickExit = transition(tick.exit()).style("opacity", 1e-6).remove(),
|
||||
tickUpdate = transition(tick).style("opacity", 1),
|
||||
tickTransform;
|
||||
|
@ -3821,7 +3821,7 @@ d3.svg.axis = function() {
|
|||
// Domain.
|
||||
var range = d3_scaleRange(scale),
|
||||
path = g.selectAll(".domain").data([0]),
|
||||
pathEnter = path.enter().append("svg:path").attr("class", "domain"),
|
||||
pathEnter = path.enter().append("path").attr("class", "domain"),
|
||||
pathUpdate = transition(path);
|
||||
|
||||
// Stash a snapshot of the new scale, and retrieve the old snapshot.
|
||||
|
@ -3829,8 +3829,8 @@ d3.svg.axis = function() {
|
|||
scale0 = this.__chart__ || scale1;
|
||||
this.__chart__ = scale1;
|
||||
|
||||
tickEnter.append("svg:line").attr("class", "tick");
|
||||
tickEnter.append("svg:text");
|
||||
tickEnter.append("line").attr("class", "tick");
|
||||
tickEnter.append("text");
|
||||
tickUpdate.select("text").text(tickFormat);
|
||||
|
||||
switch (orient) {
|
||||
|
@ -3991,19 +3991,19 @@ d3.svg.brush = function() {
|
|||
e;
|
||||
|
||||
// An invisible, mouseable area for starting a new brush.
|
||||
bg.enter().append("svg:rect")
|
||||
bg.enter().append("rect")
|
||||
.attr("class", "background")
|
||||
.style("visibility", "hidden")
|
||||
.style("pointer-events", "all")
|
||||
.style("cursor", "crosshair");
|
||||
|
||||
// The visible brush extent; style this as you like!
|
||||
fg.enter().append("svg:rect")
|
||||
fg.enter().append("rect")
|
||||
.attr("class", "extent")
|
||||
.style("cursor", "move");
|
||||
|
||||
// More invisible rects for resizing the extent.
|
||||
tz.enter().append("svg:rect")
|
||||
tz.enter().append("rect")
|
||||
.attr("class", function(d) { return "resize " + d; })
|
||||
.attr("width", 6)
|
||||
.attr("height", 6)
|
||||
|
|
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
@ -47,18 +47,18 @@ var xy = d3.geo.albers(),
|
|||
path = d3.geo.path().projection(xy);
|
||||
|
||||
d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg:g")
|
||||
.append("svg")
|
||||
.append("g")
|
||||
.attr("id", "states");
|
||||
|
||||
d3.json("../data/us-states.json", function(collection) {
|
||||
d3.select("#states")
|
||||
.selectAll("path")
|
||||
.data(collection.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", path);
|
||||
d3.select("#states")
|
||||
.append("svg:circle")
|
||||
.append("circle")
|
||||
.attr("r", 10)
|
||||
.attr("transform", "translate(" + xy(xy.origin()).join(",") + ")")
|
||||
});
|
||||
|
|
|
@ -23,21 +23,21 @@
|
|||
var r = 960 / 2,
|
||||
data = d3.range(361).map(function(i) { return .8 + Math.sin(i / 20 * Math.PI) / 6; });
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.data([data])
|
||||
.attr("width", r * 2)
|
||||
.attr("height", r * 2)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + r + "," + r + ")");
|
||||
|
||||
svg.append("svg:path")
|
||||
svg.append("path")
|
||||
.attr("class", "area")
|
||||
.attr("d", d3.svg.area.radial()
|
||||
.innerRadius(r / 2)
|
||||
.outerRadius(function(d) { return r * d; })
|
||||
.angle(function(d, i) { return i / 180 * Math.PI; }));
|
||||
|
||||
svg.append("svg:path")
|
||||
svg.append("path")
|
||||
.attr("class", "line")
|
||||
.attr("d", d3.svg.line.radial()
|
||||
.radius(function(d) { return r * d; })
|
||||
|
|
|
@ -48,53 +48,53 @@ var w = 450,
|
|||
y = d3.scale.linear().domain([0, 1]).range([h, 0]);
|
||||
|
||||
var vis = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.data([data])
|
||||
.attr("width", w + p * 2)
|
||||
.attr("height", h + p * 2)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + p + "," + p + ")");
|
||||
|
||||
var rules = vis.selectAll("g.rule")
|
||||
.data(x.ticks(10))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "rule");
|
||||
|
||||
rules.append("svg:line")
|
||||
rules.append("line")
|
||||
.attr("x1", x)
|
||||
.attr("x2", x)
|
||||
.attr("y1", 0)
|
||||
.attr("y2", h - 1);
|
||||
|
||||
rules.append("svg:line")
|
||||
rules.append("line")
|
||||
.attr("class", function(d) { return d ? null : "axis"; })
|
||||
.attr("y1", y)
|
||||
.attr("y2", y)
|
||||
.attr("x1", 0)
|
||||
.attr("x2", w + 1);
|
||||
|
||||
rules.append("svg:text")
|
||||
rules.append("text")
|
||||
.attr("x", x)
|
||||
.attr("y", h + 3)
|
||||
.attr("dy", ".71em")
|
||||
.attr("text-anchor", "middle")
|
||||
.text(x.tickFormat(10));
|
||||
|
||||
rules.append("svg:text")
|
||||
rules.append("text")
|
||||
.attr("y", y)
|
||||
.attr("x", -3)
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", "end")
|
||||
.text(y.tickFormat(10));
|
||||
|
||||
vis.append("svg:path")
|
||||
vis.append("path")
|
||||
.attr("class", "area")
|
||||
.attr("d", d3.svg.area()
|
||||
.x(function(d) { return x(d.x); })
|
||||
.y0(h - 1)
|
||||
.y1(function(d) { return y(d.y); }));
|
||||
|
||||
vis.append("svg:path")
|
||||
vis.append("path")
|
||||
.attr("class", "line")
|
||||
.attr("d", d3.svg.line()
|
||||
.x(function(d) { return x(d.x); })
|
||||
|
@ -102,7 +102,7 @@ vis.append("svg:path")
|
|||
|
||||
vis.selectAll("circle.area")
|
||||
.data(data)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("class", "area")
|
||||
.attr("cx", function(d) { return x(d.x); })
|
||||
.attr("cy", function(d) { return y(d.y); })
|
||||
|
|
|
@ -29,18 +29,18 @@ var m = [10, 10, 20, 10],
|
|||
x = d3.scale.linear().domain([.05, .95]).range([0, w]),
|
||||
y = d3.scale.linear().range([0, h]);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x minor")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(d3.svg.axis().scale(x).tickSubdivide(2).tickSize(-6));
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(d3.svg.axis().scale(x));
|
||||
|
|
|
@ -43,22 +43,22 @@ var m = [10, 10, 20, 10],
|
|||
x = d3.scale.linear().domain([.05, .95]).range([0, w]),
|
||||
y = d3.scale.linear().range([0, h]);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
svg.append("svg:rect")
|
||||
svg.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x grid")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(d3.svg.axis().scale(x).tickSubdivide(1).tickSize(-h));
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(d3.svg.axis().scale(x));
|
||||
|
|
|
@ -82,30 +82,30 @@ d3.csv("../data/stocks.csv", function(data) {
|
|||
// Add an SVG element for each symbol, with the desired dimensions and margin.
|
||||
var svg = d3.select("body").selectAll("svg")
|
||||
.data(symbols)
|
||||
.enter().append("svg:svg")
|
||||
.enter().append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
// Add the area path elements. Note: the y-domain is set per element.
|
||||
svg.append("svg:path")
|
||||
svg.append("path")
|
||||
.attr("class", "area")
|
||||
.attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); });
|
||||
|
||||
// Add the x-axis.
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(xAxis);
|
||||
|
||||
// Add the line path elements. Note: the y-domain is set per element.
|
||||
svg.append("svg:path")
|
||||
svg.append("path")
|
||||
.attr("class", "line")
|
||||
.attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); });
|
||||
|
||||
// Add a small label for the symbol name.
|
||||
svg.append("svg:text")
|
||||
svg.append("text")
|
||||
.attr("x", w - 6)
|
||||
.attr("y", h - 6)
|
||||
.attr("text-anchor", "end")
|
||||
|
|
|
@ -34,26 +34,26 @@ var xAxis = d3.svg.axis()
|
|||
var yAxis = d3.svg.axis()
|
||||
.scale(y);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "bottom axis")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(xAxis.orient("bottom"));
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "top axis")
|
||||
.call(xAxis.orient("top"));
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "left axis")
|
||||
.call(yAxis.orient("left"));
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "right axis")
|
||||
.attr("transform", "translate(" + w + ",0)")
|
||||
.call(yAxis.orient("right"));
|
||||
|
|
|
@ -91,45 +91,45 @@ d3.csv("../data/stocks.csv", function(data) {
|
|||
y.domain([0, d3.max(values, function(d) { return d.price; })]);
|
||||
|
||||
// Add an SVG element with the desired dimensions and margin.
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
// Add the clip path.
|
||||
svg.append("svg:clipPath")
|
||||
svg.append("clipPath")
|
||||
.attr("id", "clip")
|
||||
.append("svg:rect")
|
||||
.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
// Add the area path.
|
||||
svg.append("svg:path")
|
||||
svg.append("path")
|
||||
.attr("class", "area")
|
||||
.attr("clip-path", "url(#clip)")
|
||||
.attr("d", area(values));
|
||||
|
||||
// Add the x-axis.
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(xAxis);
|
||||
|
||||
// Add the y-axis.
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.attr("transform", "translate(" + w + ",0)")
|
||||
.call(yAxis);
|
||||
|
||||
// Add the line path.
|
||||
svg.append("svg:path")
|
||||
svg.append("path")
|
||||
.attr("class", "line")
|
||||
.attr("clip-path", "url(#clip)")
|
||||
.attr("d", line(values));
|
||||
|
||||
// Add a small label for the symbol name.
|
||||
svg.append("svg:text")
|
||||
svg.append("text")
|
||||
.attr("x", w - 6)
|
||||
.attr("y", h - 6)
|
||||
.attr("text-anchor", "end")
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
var xy = d3.geo.azimuthal().scale(240).mode("stereographic"),
|
||||
circle = d3.geo.greatCircle(),
|
||||
path = d3.geo.path().projection(xy),
|
||||
svg = d3.select("body").append("svg:svg");
|
||||
svg = d3.select("body").append("svg");
|
||||
|
||||
d3.json("../data/world-countries.json", function(collection) {
|
||||
svg.selectAll("path")
|
||||
.data(collection.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", function(d) { return path(circle.clip(d)); })
|
||||
.append("svg:title")
|
||||
.append("title")
|
||||
.text(function(d) { return d.properties.name; });
|
||||
});
|
||||
|
||||
|
|
|
@ -44,24 +44,24 @@ var xAxis = d3.svg.axis()
|
|||
.scale(x)
|
||||
.orient("top");
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
svg.append("svg:rect")
|
||||
svg.append("rect")
|
||||
.attr("class", "background")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.on("click", up);
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x axis");
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.append("svg:line")
|
||||
.append("line")
|
||||
.attr("y1", "100%");
|
||||
|
||||
d3.json("../data/flare.json", function(root) {
|
||||
|
@ -185,23 +185,23 @@ function up(d) {
|
|||
|
||||
// Creates a set of bars for the given data node, at the specified index.
|
||||
function bar(d) {
|
||||
var bar = svg.insert("svg:g", ".y.axis")
|
||||
var bar = svg.insert("g", ".y.axis")
|
||||
.attr("class", "enter")
|
||||
.attr("transform", "translate(0,5)")
|
||||
.selectAll("g")
|
||||
.data(d.children)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.style("cursor", function(d) { return !d.children ? null : "pointer"; })
|
||||
.on("click", down);
|
||||
|
||||
bar.append("svg:text")
|
||||
bar.append("text")
|
||||
.attr("x", -6)
|
||||
.attr("y", y / 2)
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", "end")
|
||||
.text(function(d) { return d.name; });
|
||||
|
||||
bar.append("svg:rect")
|
||||
bar.append("rect")
|
||||
.attr("width", function(d) { return x(d.value); })
|
||||
.attr("height", y);
|
||||
|
||||
|
|
|
@ -46,15 +46,15 @@ div {
|
|||
var xy = d3.geo.bonne(),
|
||||
path = d3.geo.path().projection(xy);
|
||||
|
||||
var countries = d3.select("body").append("svg:svg")
|
||||
var countries = d3.select("body").append("svg")
|
||||
.attr("id", "countries");
|
||||
|
||||
d3.json("../data/world-countries.json", function(collection) {
|
||||
countries.selectAll("path")
|
||||
.data(collection.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", path)
|
||||
.append("svg:title")
|
||||
.append("title")
|
||||
.text(function(d) { return d.properties.name; });
|
||||
});
|
||||
|
||||
|
|
|
@ -27,11 +27,11 @@ d3.csv("../data/morley.csv", function(csv) {
|
|||
|
||||
var vis = d3.select("#chart").selectAll("svg")
|
||||
.data(data)
|
||||
.enter().append("svg:svg")
|
||||
.enter().append("svg")
|
||||
.attr("class", "box")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")")
|
||||
.call(chart);
|
||||
|
||||
|
|
|
@ -48,24 +48,24 @@ var m = [10, 10, 20, 10],
|
|||
|
||||
var x = d3.scale.ordinal().domain(data).rangePoints([0, w], 1);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(d3.svg.axis().scale(x).orient("bottom"));
|
||||
|
||||
var symbol = svg.append("svg:g").selectAll("path")
|
||||
var symbol = svg.append("g").selectAll("path")
|
||||
.data(data)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("transform", function(d) { return "translate(" + x(d) + "," + (h / 2) + ")"; })
|
||||
.attr("d", d3.svg.symbol().type(String).size(200));
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "brush")
|
||||
.call(d3.svg.brush().x(x)
|
||||
.on("brushstart", brushstart)
|
||||
|
|
|
@ -48,24 +48,24 @@ var m = [10, 10, 20, 10],
|
|||
var x = d3.scale.linear().range([0, w]),
|
||||
y = d3.random.normal(h / 2, h / 8);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(d3.svg.axis().scale(x).orient("bottom"));
|
||||
|
||||
var circle = svg.selectAll("circle")
|
||||
.data(data)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("transform", function(d) { return "translate(" + x(d) + "," + y() + ")"; })
|
||||
.attr("r", 3.5);
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "brush")
|
||||
.call(d3.svg.brush().x(x)
|
||||
.on("brushstart", brushstart)
|
||||
|
|
|
@ -48,23 +48,23 @@ var m = [10, 10, 10, 40],
|
|||
var x = d3.random.normal(w / 2, w / 8),
|
||||
y = d3.scale.linear().range([h, 0]);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(d3.svg.axis().scale(y).orient("left"));
|
||||
|
||||
var circle = svg.selectAll("circle")
|
||||
.data(data)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("transform", function(d) { return "translate(" + x() + "," + y(d) + ")"; })
|
||||
.attr("r", 3.5);
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "brush")
|
||||
.call(d3.svg.brush().y(y)
|
||||
.on("brushstart", brushstart)
|
||||
|
|
|
@ -49,28 +49,28 @@ var m = [10, 10, 20, 40],
|
|||
var x = d3.scale.linear().range([0, w]),
|
||||
y = d3.scale.linear().range([h, 0]);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(d3.svg.axis().scale(x).orient("bottom"));
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(d3.svg.axis().scale(y).orient("left"));
|
||||
|
||||
var circle = svg.selectAll("circle")
|
||||
.data(data)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("transform", function(d) { return "translate(" + x(d[0]) + "," + y(d[1]) + ")"; })
|
||||
.attr("r", 3.5);
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "brush")
|
||||
.call(d3.svg.brush().x(x).y(y)
|
||||
.on("brushstart", brushstart)
|
||||
|
|
|
@ -6,7 +6,7 @@ var bubble = d3.layout.pack()
|
|||
.sort(null)
|
||||
.size([r, r]);
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", r)
|
||||
.attr("height", r)
|
||||
.attr("class", "bubble");
|
||||
|
@ -15,18 +15,18 @@ d3.json("../data/flare.json", function(json) {
|
|||
var node = vis.selectAll("g.node")
|
||||
.data(bubble.nodes(classes(json))
|
||||
.filter(function(d) { return !d.children; }))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
|
||||
|
||||
node.append("svg:title")
|
||||
node.append("title")
|
||||
.text(function(d) { return d.className + ": " + format(d.value); });
|
||||
|
||||
node.append("svg:circle")
|
||||
node.append("circle")
|
||||
.attr("r", function(d) { return d.r; })
|
||||
.style("fill", function(d) { return fill(d.packageName); });
|
||||
|
||||
node.append("svg:text")
|
||||
node.append("text")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("dy", ".3em")
|
||||
.text(function(d) { return d.className.substring(0, d.r / 3); });
|
||||
|
|
|
@ -10,23 +10,23 @@ d3.json("bullets.json", function(data) {
|
|||
|
||||
var vis = d3.select("#chart").selectAll("svg")
|
||||
.data(data)
|
||||
.enter().append("svg:svg")
|
||||
.enter().append("svg")
|
||||
.attr("class", "bullet")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")")
|
||||
.call(chart);
|
||||
|
||||
var title = vis.append("svg:g")
|
||||
var title = vis.append("g")
|
||||
.attr("text-anchor", "end")
|
||||
.attr("transform", "translate(-6," + (h - m[0] - m[2]) / 2 + ")");
|
||||
|
||||
title.append("svg:text")
|
||||
title.append("text")
|
||||
.attr("class", "title")
|
||||
.text(function(d) { return d.title; });
|
||||
|
||||
title.append("svg:text")
|
||||
title.append("text")
|
||||
.attr("class", "subtitle")
|
||||
.attr("dy", "1em")
|
||||
.text(function(d) { return d.subtitle; });
|
||||
|
|
|
@ -14,10 +14,10 @@ var line = d3.svg.line.radial()
|
|||
.radius(function(d) { return d.y; })
|
||||
.angle(function(d) { return d.x / 180 * Math.PI; });
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", r * 2)
|
||||
.attr("height", r * 2)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + r + "," + r + ")");
|
||||
|
||||
d3.json("../data/flare-imports.json", function(classes) {
|
||||
|
@ -26,16 +26,16 @@ d3.json("../data/flare-imports.json", function(classes) {
|
|||
|
||||
vis.selectAll("path.link")
|
||||
.data(splines = bundle(links))
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "link")
|
||||
.attr("d", line);
|
||||
|
||||
vis.selectAll("g.node")
|
||||
.data(nodes.filter(function(n) { return !n.children; }))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
|
||||
.append("svg:text")
|
||||
.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"; })
|
||||
|
|
|
@ -32,13 +32,13 @@ d3.json("../data/flare-imports.json", function(classes) {
|
|||
.call(cell)
|
||||
.text(function(d) { return d.children ? null : d.key; });
|
||||
|
||||
div.append("svg:svg")
|
||||
div.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.style("position", "absolute")
|
||||
.selectAll("path.link")
|
||||
.data(bundle(links))
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.style("stroke", function(d) { return stroke(d[0].value); })
|
||||
.attr("class", "link")
|
||||
.attr("d", line);
|
||||
|
|
|
@ -68,13 +68,13 @@ var area = d3.svg.area()
|
|||
.y0(y(0))
|
||||
.y1(function(d) { return y(d.Close); });
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
svg.append("svg:rect")
|
||||
svg.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
|
@ -90,27 +90,27 @@ d3.csv("dji.csv", function(data) {
|
|||
x.domain([data[0].Date, data[data.length - 1].Date]);
|
||||
y.domain([0, d3.max(data, function(d) { return d.Close; })]);
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x grid")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(xAxis.tickSubdivide(1).tickSize(-h));
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "y grid")
|
||||
.attr("transform", "translate(" + w + ",0)")
|
||||
.call(yAxis.tickSubdivide(1).tickSize(-w));
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(xAxis.tickSubdivide(0).tickSize(6));
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.attr("transform", "translate(" + w + ",0)")
|
||||
.call(yAxis.tickSubdivide(0).tickSize(6));
|
||||
|
||||
svg.append("svg:path")
|
||||
svg.append("path")
|
||||
.attr("class", "area")
|
||||
.attr("d", area(data));
|
||||
});
|
||||
|
|
|
@ -14,21 +14,21 @@ var color = d3.scale.quantize()
|
|||
|
||||
var svg = d3.select("#chart").selectAll("svg")
|
||||
.data(d3.range(1990, 2011))
|
||||
.enter().append("svg:svg")
|
||||
.enter().append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.attr("class", "RdYlGn")
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + (m[3] + (w - z * 53) / 2) + "," + (m[0] + (h - z * 7) / 2) + ")");
|
||||
|
||||
svg.append("svg:text")
|
||||
svg.append("text")
|
||||
.attr("transform", "translate(-6," + z * 3.5 + ")rotate(-90)")
|
||||
.attr("text-anchor", "middle")
|
||||
.text(String);
|
||||
|
||||
var rect = svg.selectAll("rect.day")
|
||||
.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.attr("class", "day")
|
||||
.attr("width", z)
|
||||
.attr("height", z)
|
||||
|
@ -37,7 +37,7 @@ var rect = svg.selectAll("rect.day")
|
|||
|
||||
svg.selectAll("path.month")
|
||||
.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "month")
|
||||
.attr("d", monthPath);
|
||||
|
||||
|
@ -49,7 +49,7 @@ d3.csv("dji.csv", function(csv) {
|
|||
|
||||
rect
|
||||
.attr("class", function(d) { return "day q" + color(data[format(d)]) + "-9"; })
|
||||
.append("svg:title")
|
||||
.append("title")
|
||||
.text(function(d) { return (d = format(d)) + (d in data ? ": " + percent(data[d]) : ""); });
|
||||
});
|
||||
|
||||
|
|
|
@ -12,21 +12,21 @@ var color = d3.scale.quantile()
|
|||
|
||||
var svg = d3.select("#chart").selectAll("svg")
|
||||
.data(d3.range(1993, 2011))
|
||||
.enter().append("svg:svg")
|
||||
.enter().append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.attr("class", "RdYlGn")
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + (m[3] + (w - z * 53) / 2) + "," + (m[0] + (h - z * 7) / 2) + ")");
|
||||
|
||||
svg.append("svg:text")
|
||||
svg.append("text")
|
||||
.attr("transform", "translate(-6," + z * 3.5 + ")rotate(-90)")
|
||||
.attr("text-anchor", "middle")
|
||||
.text(String);
|
||||
|
||||
var rect = svg.selectAll("rect.day")
|
||||
.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.attr("class", "day")
|
||||
.attr("width", z)
|
||||
.attr("height", z)
|
||||
|
@ -35,7 +35,7 @@ var rect = svg.selectAll("rect.day")
|
|||
|
||||
svg.selectAll("path.month")
|
||||
.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "month")
|
||||
.attr("d", monthPath);
|
||||
|
||||
|
@ -49,7 +49,7 @@ d3.csv("vix.csv", function(csv) {
|
|||
|
||||
rect
|
||||
.attr("class", function(d) { return "day q" + color(data[format(d)]) + "-9"; })
|
||||
.append("svg:title")
|
||||
.append("title")
|
||||
.text(function(d) { return (d = format(d)) + (d in data ? ": " + data[d] : ""); });
|
||||
});
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ var data = [
|
|||
.169, , .132, .167, .139, .184, .159, .14, .146, .157, , .139, .183, .16, .143
|
||||
];
|
||||
|
||||
var svg = d3.select("#chart").append("svg:svg")
|
||||
var svg = d3.select("#chart").append("svg")
|
||||
.attr("width", 960)
|
||||
.attr("height", 500);
|
||||
|
||||
|
@ -14,27 +14,27 @@ d3.json("../data/us-states.json", function(json) {
|
|||
var path = d3.geo.path();
|
||||
|
||||
// A thick black stroke for the exterior.
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "black")
|
||||
.selectAll("path")
|
||||
.data(json.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", path);
|
||||
|
||||
// A white overlay to hide interior black strokes.
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "white")
|
||||
.selectAll("path")
|
||||
.data(json.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", path);
|
||||
|
||||
// The polygons, scaled!
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "grey")
|
||||
.selectAll("path")
|
||||
.data(json.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", path)
|
||||
.attr("transform", function(d) {
|
||||
var centroid = path.centroid(d),
|
||||
|
|
|
@ -15,7 +15,7 @@ var force = d3.layout.force()
|
|||
.gravity(0)
|
||||
.size([960, 500]);
|
||||
|
||||
var svg = d3.select("#chart").append("svg:svg");
|
||||
var svg = d3.select("#chart").append("svg");
|
||||
|
||||
d3.json("../data/us-state-centroids.json", function(states) {
|
||||
var project = d3.geo.albersUsa(),
|
||||
|
@ -70,7 +70,7 @@ d3.json("../data/us-state-centroids.json", function(states) {
|
|||
|
||||
svg.selectAll("rect")
|
||||
.data(nodes)
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.style("fill", function(d) { return color(d.value); })
|
||||
.attr("x", function(d) { return d.x - d.r; })
|
||||
.attr("y", function(d) { return d.y - d.r; })
|
||||
|
|
|
@ -15,10 +15,10 @@ var force = d3.layout.force()
|
|||
.gravity(0)
|
||||
.size([960, 500]);
|
||||
|
||||
var svg = d3.select("#chart").append("svg:svg")
|
||||
var svg = d3.select("#chart").append("svg")
|
||||
.attr("width", 960 + 100)
|
||||
.attr("height", 500 + 100)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(50,50)");
|
||||
|
||||
d3.json("../data/us-state-centroids.json", function(states) {
|
||||
|
@ -72,7 +72,7 @@ d3.json("../data/us-state-centroids.json", function(states) {
|
|||
|
||||
svg.selectAll("circle")
|
||||
.data(nodes)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.style("fill", function(d) { return color(d.value); })
|
||||
.attr("cx", function(d) { return d.x; })
|
||||
.attr("cy", function(d) { return d.y; })
|
||||
|
|
|
@ -34,10 +34,10 @@ var arc = d3.svg.arc()
|
|||
.innerRadius(r0)
|
||||
.outerRadius(r0 + 20);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", r1 * 2)
|
||||
.attr("height", r1 * 2)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + r1 + "," + r1 + ")");
|
||||
|
||||
d3.json("../data/flare-imports.json", function(imports) {
|
||||
|
@ -75,15 +75,15 @@ d3.json("../data/flare-imports.json", function(imports) {
|
|||
|
||||
var g = svg.selectAll("g.group")
|
||||
.data(chord.groups)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "group");
|
||||
|
||||
g.append("svg:path")
|
||||
g.append("path")
|
||||
.style("fill", function(d) { return fill(d.index); })
|
||||
.style("stroke", function(d) { return fill(d.index); })
|
||||
.attr("d", arc);
|
||||
|
||||
g.append("svg:text")
|
||||
g.append("text")
|
||||
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
|
||||
|
@ -96,7 +96,7 @@ d3.json("../data/flare-imports.json", function(imports) {
|
|||
|
||||
svg.selectAll("path.chord")
|
||||
.data(chord.chords)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "chord")
|
||||
.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
|
||||
.style("fill", function(d) { return fill(d.source.index); })
|
||||
|
|
|
@ -19,42 +19,42 @@ var fill = d3.scale.ordinal()
|
|||
.range(["#000000", "#FFDD89", "#957244", "#F26223"]);
|
||||
|
||||
var svg = d3.select("#chart")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.selectAll("path")
|
||||
.data(chord.groups)
|
||||
.enter().append("svg:path")
|
||||
.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(r0).outerRadius(r1))
|
||||
.on("mouseover", fade(.1))
|
||||
.on("mouseout", fade(1));
|
||||
|
||||
var ticks = svg.append("svg:g")
|
||||
var ticks = svg.append("g")
|
||||
.selectAll("g")
|
||||
.data(chord.groups)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.selectAll("g")
|
||||
.data(groupTicks)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("transform", function(d) {
|
||||
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
|
||||
+ "translate(" + r1 + ",0)";
|
||||
});
|
||||
|
||||
ticks.append("svg:line")
|
||||
ticks.append("line")
|
||||
.attr("x1", 1)
|
||||
.attr("y1", 0)
|
||||
.attr("x2", 5)
|
||||
.attr("y2", 0)
|
||||
.style("stroke", "#000");
|
||||
|
||||
ticks.append("svg:text")
|
||||
ticks.append("text")
|
||||
.attr("x", 8)
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", function(d) {
|
||||
|
@ -65,11 +65,11 @@ ticks.append("svg:text")
|
|||
})
|
||||
.text(function(d) { return d.label; });
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.attr("class", "chord")
|
||||
.selectAll("path")
|
||||
.data(chord.chords)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.style("fill", function(d) { return fill(d.target.index); })
|
||||
.attr("d", d3.svg.chord().radius(r0))
|
||||
.style("opacity", 1);
|
||||
|
|
|
@ -20,12 +20,12 @@ svg {
|
|||
<script type="text/javascript">
|
||||
|
||||
var svg = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.call(d3.behavior.zoom()
|
||||
.on("zoom", redraw))
|
||||
.append("svg:g");
|
||||
.append("g");
|
||||
|
||||
var counties = svg.append("svg:g")
|
||||
var counties = svg.append("g")
|
||||
.attr("id", "counties");
|
||||
|
||||
var path = d3.geo.path();
|
||||
|
@ -37,7 +37,7 @@ var fill = d3.scale.log()
|
|||
d3.json("../data/us-counties.json", function(json) {
|
||||
counties.selectAll("path")
|
||||
.data(json.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", path)
|
||||
.attr("fill", function(d) { return fill(path.area(d)); });
|
||||
});
|
||||
|
|
|
@ -22,9 +22,9 @@ svg {
|
|||
<script type="text/javascript">
|
||||
|
||||
var svg = d3.select("body")
|
||||
.append("svg:svg");
|
||||
.append("svg");
|
||||
|
||||
var counties = svg.append("svg:g")
|
||||
var counties = svg.append("g")
|
||||
.attr("id", "counties");
|
||||
|
||||
var path = d3.geo.path();
|
||||
|
@ -32,7 +32,7 @@ var path = d3.geo.path();
|
|||
d3.json("../data/us-counties.json", function(json) {
|
||||
counties.selectAll("path")
|
||||
.data(json.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", function(d) {
|
||||
return path({
|
||||
type: "LineString",
|
||||
|
|
|
@ -3,19 +3,19 @@ var data; // loaded asynchronously
|
|||
var path = d3.geo.path();
|
||||
|
||||
var svg = d3.select("#chart")
|
||||
.append("svg:svg");
|
||||
.append("svg");
|
||||
|
||||
var counties = svg.append("svg:g")
|
||||
var counties = svg.append("g")
|
||||
.attr("id", "counties")
|
||||
.attr("class", "Blues");
|
||||
|
||||
var states = svg.append("svg:g")
|
||||
var states = svg.append("g")
|
||||
.attr("id", "states");
|
||||
|
||||
d3.json("../data/us-counties.json", function(json) {
|
||||
counties.selectAll("path")
|
||||
.data(json.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", data ? quantize : null)
|
||||
.attr("d", path);
|
||||
});
|
||||
|
@ -23,7 +23,7 @@ d3.json("../data/us-counties.json", function(json) {
|
|||
d3.json("../data/us-states.json", function(json) {
|
||||
states.selectAll("path")
|
||||
.data(json.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", path);
|
||||
});
|
||||
|
||||
|
|
|
@ -22,21 +22,21 @@ var arc = d3.svg.arc()
|
|||
.innerRadius(function(d) { return d.index * r; })
|
||||
.outerRadius(function(d) { return (d.index + s) * r; });
|
||||
|
||||
var vis = d3.select("#clock").append("svg:svg")
|
||||
var vis = d3.select("#clock").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
|
||||
|
||||
var g = vis.selectAll("g")
|
||||
.data(fields)
|
||||
.enter().append("svg:g");
|
||||
.enter().append("g");
|
||||
|
||||
g.append("svg:path")
|
||||
g.append("path")
|
||||
.style("fill", function(d) { return fill(d.value); })
|
||||
.attr("d", arc);
|
||||
|
||||
g.append("svg:text")
|
||||
g.append("text")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("dy", "1em")
|
||||
.text(function(d) { return d.text; });
|
||||
|
|
|
@ -6,10 +6,10 @@ var cluster = d3.layout.cluster()
|
|||
var diagonal = d3.svg.diagonal.radial()
|
||||
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", r * 2)
|
||||
.attr("height", r * 2)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + r + "," + r + ")");
|
||||
|
||||
d3.json("../data/flare.json", function(json) {
|
||||
|
@ -17,20 +17,20 @@ d3.json("../data/flare.json", function(json) {
|
|||
|
||||
var link = vis.selectAll("path.link")
|
||||
.data(cluster.links(nodes))
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "link")
|
||||
.attr("d", diagonal);
|
||||
|
||||
var node = vis.selectAll("g.node")
|
||||
.data(nodes)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
|
||||
|
||||
node.append("svg:circle")
|
||||
node.append("circle")
|
||||
.attr("r", 4.5);
|
||||
|
||||
node.append("svg:text")
|
||||
node.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"; })
|
||||
|
|
|
@ -7,10 +7,10 @@ var cluster = d3.layout.cluster()
|
|||
var diagonal = d3.svg.diagonal()
|
||||
.projection(function(d) { return [d.y, d.x]; });
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(40, 0)");
|
||||
|
||||
d3.json("../data/flare.json", function(json) {
|
||||
|
@ -18,20 +18,20 @@ d3.json("../data/flare.json", function(json) {
|
|||
|
||||
var link = vis.selectAll("path.link")
|
||||
.data(cluster.links(nodes))
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "link")
|
||||
.attr("d", diagonal);
|
||||
|
||||
var node = vis.selectAll("g.node")
|
||||
.data(nodes)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
|
||||
|
||||
node.append("svg:circle")
|
||||
node.append("circle")
|
||||
.attr("r", 4.5);
|
||||
|
||||
node.append("svg:text")
|
||||
node.append("text")
|
||||
.attr("dx", function(d) { return d.children ? -8 : 8; })
|
||||
.attr("dy", 3)
|
||||
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
|
||||
|
|
|
@ -64,18 +64,18 @@ function translateX(d, i) { return "translate("+(i*sz)+",0)"; }
|
|||
function scale(p) { return [p[0]*sz, p[1]*sz]; }
|
||||
|
||||
var svg = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", dw*sz)
|
||||
.attr("height", dh*sz);
|
||||
|
||||
var g = svg.selectAll("g")
|
||||
.data(data)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("transform", translateY);
|
||||
|
||||
g.selectAll("rect")
|
||||
.data(function(d) { return d; })
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.attr("transform", translateX)
|
||||
.attr("width", sz)
|
||||
.attr("height", sz)
|
||||
|
@ -88,7 +88,7 @@ function contour(grid, start) {
|
|||
svg.selectAll("path")
|
||||
.data([d3.geom.contour(grid, start).map(scale)])
|
||||
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
|
||||
}
|
||||
|
||||
|
|
|
@ -36,10 +36,10 @@ var p = [20, 50, 30, 20],
|
|||
parse = d3.time.format("%m/%Y").parse,
|
||||
format = d3.time.format("%b");
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + p[3] + "," + p[0] + ")");
|
||||
|
||||
d3.csv("crimea.csv", function(crimea) {
|
||||
|
@ -58,7 +58,7 @@ d3.csv("crimea.csv", function(crimea) {
|
|||
// Add an area for each cause.
|
||||
svg.selectAll("path.area")
|
||||
.data(causes)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "area")
|
||||
.style("fill", function(d, i) { return z(i); })
|
||||
.attr("d", d3.svg.area()
|
||||
|
@ -69,7 +69,7 @@ d3.csv("crimea.csv", function(crimea) {
|
|||
// Add a line for each cause.
|
||||
svg.selectAll("path.line")
|
||||
.data(causes)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "line")
|
||||
.style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); })
|
||||
.attr("d", d3.svg.line()
|
||||
|
@ -79,7 +79,7 @@ d3.csv("crimea.csv", function(crimea) {
|
|||
// Add a label per date.
|
||||
svg.selectAll("text")
|
||||
.data(x.ticks(12))
|
||||
.enter().append("svg:text")
|
||||
.enter().append("text")
|
||||
.attr("x", x)
|
||||
.attr("y", h + 6)
|
||||
.attr("text-anchor", "middle")
|
||||
|
@ -89,16 +89,16 @@ d3.csv("crimea.csv", function(crimea) {
|
|||
// Add y-axis rules.
|
||||
var rule = svg.selectAll("g.rule")
|
||||
.data(y.ticks(5))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "rule")
|
||||
.attr("transform", function(d) { return "translate(0," + y(d) + ")"; });
|
||||
|
||||
rule.append("svg:line")
|
||||
rule.append("line")
|
||||
.attr("x2", w)
|
||||
.style("stroke", function(d) { return d ? "#fff" : "#000"; })
|
||||
.style("stroke-opacity", function(d) { return d ? .7 : null; });
|
||||
|
||||
rule.append("svg:text")
|
||||
rule.append("text")
|
||||
.attr("x", w + 6)
|
||||
.attr("dy", ".35em")
|
||||
.text(d3.format(",d"));
|
||||
|
|
|
@ -29,10 +29,10 @@ var p = [20, 50, 30, 20],
|
|||
parse = d3.time.format("%m/%Y").parse,
|
||||
format = d3.time.format("%b");
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + p[3] + "," + (h + p[0]) + ")");
|
||||
|
||||
d3.csv("crimea.csv", function(crimea) {
|
||||
|
@ -51,7 +51,7 @@ d3.csv("crimea.csv", function(crimea) {
|
|||
// Add a group for each cause.
|
||||
var cause = svg.selectAll("g.cause")
|
||||
.data(causes)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "cause")
|
||||
.style("fill", function(d, i) { return z(i); })
|
||||
.style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });
|
||||
|
@ -59,7 +59,7 @@ d3.csv("crimea.csv", function(crimea) {
|
|||
// Add a rect for each date.
|
||||
var rect = cause.selectAll("rect")
|
||||
.data(Object)
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.attr("x", function(d) { return x(d.x); })
|
||||
.attr("y", function(d) { return -y(d.y0) - y(d.y); })
|
||||
.attr("height", function(d) { return y(d.y); })
|
||||
|
@ -68,7 +68,7 @@ d3.csv("crimea.csv", function(crimea) {
|
|||
// Add a label per date.
|
||||
var label = svg.selectAll("text")
|
||||
.data(x.domain())
|
||||
.enter().append("svg:text")
|
||||
.enter().append("text")
|
||||
.attr("x", function(d) { return x(d) + x.rangeBand() / 2; })
|
||||
.attr("y", 6)
|
||||
.attr("text-anchor", "middle")
|
||||
|
@ -78,16 +78,16 @@ d3.csv("crimea.csv", function(crimea) {
|
|||
// Add y-axis rules.
|
||||
var rule = svg.selectAll("g.rule")
|
||||
.data(y.ticks(5))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "rule")
|
||||
.attr("transform", function(d) { return "translate(0," + -y(d) + ")"; });
|
||||
|
||||
rule.append("svg:line")
|
||||
rule.append("line")
|
||||
.attr("x2", w)
|
||||
.style("stroke", function(d) { return d ? "#fff" : "#000"; })
|
||||
.style("stroke-opacity", function(d) { return d ? .7 : null; });
|
||||
|
||||
rule.append("svg:text")
|
||||
rule.append("text")
|
||||
.attr("x", w + 6)
|
||||
.attr("dy", ".35em")
|
||||
.text(d3.format(",d"));
|
||||
|
|
|
@ -27,15 +27,15 @@ var vertices = d3.range(500).map(function(d) {
|
|||
});
|
||||
|
||||
var svg = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.attr("class", "PiYG");
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.selectAll("path")
|
||||
.data(d3.geom.delaunay(vertices))
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", function(d, i) { return "q" + (i % 9) + "-9"; })
|
||||
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
|
||||
|
||||
|
|
|
@ -29,16 +29,16 @@ var w = 400,
|
|||
donut = d3.layout.pie().sort(null);
|
||||
|
||||
var vis = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
vis.selectAll("g.arc")
|
||||
.data(arcs(data0, data1))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "arc")
|
||||
.attr("transform", "translate(" + r1 + "," + r1 + ")")
|
||||
.append("svg:path")
|
||||
.append("path")
|
||||
.attr("fill", function(d, i) { return color(i); })
|
||||
.attr("d", arc);
|
||||
|
||||
|
|
|
@ -43,24 +43,24 @@ var w = 450,
|
|||
color = d3.scale.category10();
|
||||
|
||||
var vis = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w + p * 2)
|
||||
.attr("height", h + p * 2)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + p + "," + p + ")");
|
||||
|
||||
var xrule = vis.selectAll("g.x")
|
||||
.data(x.ticks(10))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "x");
|
||||
|
||||
xrule.append("svg:line")
|
||||
xrule.append("line")
|
||||
.attr("x1", x)
|
||||
.attr("x2", x)
|
||||
.attr("y1", 0)
|
||||
.attr("y2", h);
|
||||
|
||||
xrule.append("svg:text")
|
||||
xrule.append("text")
|
||||
.attr("x", x)
|
||||
.attr("y", h + 3)
|
||||
.attr("dy", ".71em")
|
||||
|
@ -69,29 +69,29 @@ xrule.append("svg:text")
|
|||
|
||||
var yrule = vis.selectAll("g.y")
|
||||
.data(y.ticks(10))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "y");
|
||||
|
||||
yrule.append("svg:line")
|
||||
yrule.append("line")
|
||||
.attr("x1", 0)
|
||||
.attr("x2", w)
|
||||
.attr("y1", y)
|
||||
.attr("y2", y);
|
||||
|
||||
yrule.append("svg:text")
|
||||
yrule.append("text")
|
||||
.attr("x", -3)
|
||||
.attr("y", y)
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", "end")
|
||||
.text(y.tickFormat(10));
|
||||
|
||||
vis.append("svg:rect")
|
||||
vis.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
vis.selectAll("path.dot")
|
||||
.data(data)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "dot")
|
||||
.attr("stroke", function(d, i) { return color(i); })
|
||||
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
|
||||
|
|
|
@ -22,11 +22,11 @@ var drag = d3.behavior.drag()
|
|||
.origin(Object)
|
||||
.on("drag", dragmove);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
|
||||
var circle = svg.append("svg:circle")
|
||||
var circle = svg.append("circle")
|
||||
.data([{x: w / 2, y: h / 2}])
|
||||
.attr("r", r)
|
||||
.attr("cx", function(d) { return d.x; })
|
||||
|
|
|
@ -31,18 +31,18 @@ var force = d3.layout.force()
|
|||
.linkDistance(30)
|
||||
.size([w, h]);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
d3.json("miserables.json", function(json) {
|
||||
var link = svg.selectAll("line")
|
||||
.data(json.links)
|
||||
.enter().append("svg:line");
|
||||
.enter().append("line");
|
||||
|
||||
var node = svg.selectAll("circle")
|
||||
.data(json.nodes)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("r", r - .75)
|
||||
.style("fill", function(d) { return fill(d.group); })
|
||||
.style("stroke", function(d) { return d3.rgb(fill(d.group)).darker(); })
|
||||
|
|
|
@ -159,7 +159,7 @@ function drawCluster(d) {
|
|||
|
||||
var body = d3.select("body");
|
||||
|
||||
var vis = body.append("svg:svg")
|
||||
var vis = body.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
|
@ -171,9 +171,9 @@ d3.json("miserables.json", function(json) {
|
|||
o.target = data.nodes[o.target];
|
||||
}
|
||||
|
||||
hullg = vis.append("svg:g");
|
||||
linkg = vis.append("svg:g");
|
||||
nodeg = vis.append("svg:g");
|
||||
hullg = vis.append("g");
|
||||
linkg = vis.append("g");
|
||||
nodeg = vis.append("g");
|
||||
|
||||
init();
|
||||
|
||||
|
@ -198,7 +198,7 @@ function init() {
|
|||
hullg.selectAll("path.hull").remove();
|
||||
hull = hullg.selectAll("path.hull")
|
||||
.data(convexHulls(net.nodes, getGroup, off))
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "hull")
|
||||
.attr("d", drawCluster)
|
||||
.style("fill", function(d) { return fill(d.group); })
|
||||
|
@ -206,7 +206,7 @@ function init() {
|
|||
|
||||
link = linkg.selectAll("line.link").data(net.links, linkid);
|
||||
link.exit().remove();
|
||||
link.enter().append("svg:line")
|
||||
link.enter().append("line")
|
||||
.attr("class", "link")
|
||||
.attr("x1", function(d) { return d.source.x; })
|
||||
.attr("y1", function(d) { return d.source.y; })
|
||||
|
@ -216,7 +216,7 @@ function init() {
|
|||
|
||||
node = nodeg.selectAll("circle.node").data(net.nodes, nodeid);
|
||||
node.exit().remove();
|
||||
node.enter().append("svg:circle")
|
||||
node.enter().append("circle")
|
||||
.attr("class", function(d) { return "node" + (d.size?"":" leaf"); })
|
||||
.attr("r", function(d) { return d.size ? d.size + dr : dr+1; })
|
||||
.attr("cx", function(d) { return d.x; })
|
||||
|
|
|
@ -38,7 +38,7 @@ var force = d3.layout.force()
|
|||
.linkDistance(function(d) { return d.target._children ? 80 : 30; })
|
||||
.size([w, h]);
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
|
@ -65,7 +65,7 @@ function update() {
|
|||
.data(links, function(d) { return d.target.id; });
|
||||
|
||||
// Enter any new links.
|
||||
link.enter().insert("svg:line", ".node")
|
||||
link.enter().insert("line", ".node")
|
||||
.attr("class", "link")
|
||||
.attr("x1", function(d) { return d.source.x; })
|
||||
.attr("y1", function(d) { return d.source.y; })
|
||||
|
@ -84,7 +84,7 @@ function update() {
|
|||
.attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; });
|
||||
|
||||
// Enter any new nodes.
|
||||
node.enter().append("svg:circle")
|
||||
node.enter().append("circle")
|
||||
.attr("class", "node")
|
||||
.attr("cx", function(d) { return d.x; })
|
||||
.attr("cy", function(d) { return d.y; })
|
||||
|
|
|
@ -37,11 +37,11 @@ var w = 960,
|
|||
nodes = [],
|
||||
links = [];
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
vis.append("svg:rect")
|
||||
vis.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
|
@ -51,7 +51,7 @@ var force = d3.layout.force()
|
|||
.links(links)
|
||||
.size([w, h]);
|
||||
|
||||
var cursor = vis.append("svg:circle")
|
||||
var cursor = vis.append("circle")
|
||||
.attr("r", 30)
|
||||
.attr("transform", "translate(-100,-100)")
|
||||
.attr("class", "cursor");
|
||||
|
@ -96,7 +96,7 @@ function restart() {
|
|||
|
||||
vis.selectAll("line.link")
|
||||
.data(links)
|
||||
.enter().insert("svg:line", "circle.node")
|
||||
.enter().insert("line", "circle.node")
|
||||
.attr("class", "link")
|
||||
.attr("x1", function(d) { return d.source.x; })
|
||||
.attr("y1", function(d) { return d.source.y; })
|
||||
|
@ -105,7 +105,7 @@ function restart() {
|
|||
|
||||
vis.selectAll("circle.node")
|
||||
.data(nodes)
|
||||
.enter().insert("svg:circle", "circle.cursor")
|
||||
.enter().insert("circle", "circle.cursor")
|
||||
.attr("class", "node")
|
||||
.attr("cx", function(d) { return d.x; })
|
||||
.attr("cy", function(d) { return d.y; })
|
||||
|
|
|
@ -30,7 +30,7 @@ var w = 960,
|
|||
var path = d3.geo.path(),
|
||||
force = d3.layout.force().size([w, h]);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
|
@ -63,7 +63,7 @@ d3.json("../data/us-states.json", function(states) {
|
|||
|
||||
var link = svg.selectAll("line")
|
||||
.data(links)
|
||||
.enter().append("svg:line")
|
||||
.enter().append("line")
|
||||
.attr("x1", function(d) { return d.source.x; })
|
||||
.attr("y1", function(d) { return d.source.y; })
|
||||
.attr("x2", function(d) { return d.target.x; })
|
||||
|
@ -71,10 +71,10 @@ d3.json("../data/us-states.json", function(states) {
|
|||
|
||||
var node = svg.selectAll("g")
|
||||
.data(nodes)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("transform", function(d) { return "translate(" + -d.x + "," + -d.y + ")"; })
|
||||
.call(force.drag)
|
||||
.append("svg:path")
|
||||
.append("path")
|
||||
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
|
||||
.attr("d", function(d) { return path(d.feature); });
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@ var w = 960,
|
|||
fill = d3.scale.category10(),
|
||||
nodes = d3.range(100).map(Object);
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
|
@ -27,7 +27,7 @@ var force = d3.layout.force()
|
|||
|
||||
var node = vis.selectAll("circle.node")
|
||||
.data(nodes)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("class", "node")
|
||||
.attr("cx", function(d) { return d.x; })
|
||||
.attr("cy", function(d) { return d.y; })
|
||||
|
|
|
@ -2,7 +2,7 @@ var w = 960,
|
|||
h = 500,
|
||||
fill = d3.scale.category20();
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
|
@ -17,7 +17,7 @@ d3.json("miserables.json", function(json) {
|
|||
|
||||
var link = vis.selectAll("line.link")
|
||||
.data(json.links)
|
||||
.enter().append("svg:line")
|
||||
.enter().append("line")
|
||||
.attr("class", "link")
|
||||
.style("stroke-width", function(d) { return Math.sqrt(d.value); })
|
||||
.attr("x1", function(d) { return d.source.x; })
|
||||
|
@ -27,7 +27,7 @@ d3.json("miserables.json", function(json) {
|
|||
|
||||
var node = vis.selectAll("circle.node")
|
||||
.data(json.nodes)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("class", "node")
|
||||
.attr("cx", function(d) { return d.x; })
|
||||
.attr("cy", function(d) { return d.y; })
|
||||
|
@ -35,7 +35,7 @@ d3.json("miserables.json", function(json) {
|
|||
.style("fill", function(d) { return fill(d.group); })
|
||||
.call(force.drag);
|
||||
|
||||
node.append("svg:title")
|
||||
node.append("title")
|
||||
.text(function(d) { return d.name; });
|
||||
|
||||
force.on("tick", function() {
|
||||
|
|
|
@ -35,20 +35,20 @@ var path = d3.geo.path()
|
|||
|
||||
var arc = d3.geo.greatArc();
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
var states = svg.append("svg:g")
|
||||
var states = svg.append("g")
|
||||
.attr("id", "states");
|
||||
|
||||
var arcs = svg.append("svg:g")
|
||||
var arcs = svg.append("g")
|
||||
.attr("id", "arcs");
|
||||
|
||||
d3.json("../data/us-states.json", function(collection) {
|
||||
states.selectAll("path")
|
||||
.data(collection.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", path);
|
||||
});
|
||||
|
||||
|
@ -69,7 +69,7 @@ d3.json("../data/us-state-centroids.json", function(collection) {
|
|||
|
||||
arcs.selectAll("path")
|
||||
.data(links)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", function(d) { return path(arc(d)); });
|
||||
});
|
||||
|
||||
|
|
|
@ -26,10 +26,10 @@ function transform() {
|
|||
|
||||
t.enter().append("span")
|
||||
.attr("id", function(d) { return "span-" + d.id; })
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", 100)
|
||||
.attr("height", 100)
|
||||
.append("svg:text")
|
||||
.append("text")
|
||||
.attr("x", "50%")
|
||||
.attr("y", "50%")
|
||||
.attr("dy", ".35em")
|
||||
|
|
|
@ -17,10 +17,10 @@ var data = [4, 8, 15, 16, 23, 42];
|
|||
|
||||
d3.selectAll("span")
|
||||
.data(data)
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", 100)
|
||||
.attr("height", 100)
|
||||
.append("svg:text")
|
||||
.append("text")
|
||||
.attr("x", "50%")
|
||||
.attr("y", "50%")
|
||||
.attr("dy", ".35em")
|
||||
|
|
|
@ -14,10 +14,10 @@ var data = [4, 8, 15, 16, 23, 42];
|
|||
d3.select("span")
|
||||
.selectAll("svg")
|
||||
.data(data)
|
||||
.enter().append("svg:svg")
|
||||
.enter().append("svg")
|
||||
.attr("width", 100)
|
||||
.attr("height", 100)
|
||||
.append("svg:text")
|
||||
.append("text")
|
||||
.attr("x", "50%")
|
||||
.attr("y", "50%")
|
||||
.attr("dy", ".35em")
|
||||
|
|
|
@ -35,7 +35,7 @@ div {
|
|||
<script type="text/javascript">
|
||||
|
||||
d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("viewBox", "0 0 1000 1000");
|
||||
|
||||
d3.select("#sort")
|
||||
|
@ -48,7 +48,7 @@ function transform() {
|
|||
.selectAll("circle")
|
||||
.data(d3.range(400).map(Math.random));
|
||||
|
||||
circle.enter().append("svg:circle")
|
||||
circle.enter().append("circle")
|
||||
.attr("cx", function() { return 100 + Math.random() * 800; })
|
||||
.attr("cy", function() { return 100 + Math.random() * 800; })
|
||||
.attr("r", function(d) { return 50 * d; });
|
||||
|
|
|
@ -14,10 +14,10 @@
|
|||
<script type="text/javascript">
|
||||
|
||||
d3.selectAll("span")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", 100)
|
||||
.attr("height", 100)
|
||||
.append("svg:text")
|
||||
.append("text")
|
||||
.attr("x", "50%")
|
||||
.attr("y", "50%")
|
||||
.attr("dy", ".35em")
|
||||
|
|
|
@ -51,15 +51,15 @@ var y = d3.scale.linear()
|
|||
.domain([0, d3.max(histogram, function(d) { return d.y; })])
|
||||
.range([0, h]);
|
||||
|
||||
var vis = d3.select("body").append("svg:svg")
|
||||
var vis = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(.5)");
|
||||
|
||||
vis.selectAll("rect")
|
||||
.data(histogram)
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + (h - y(d.y)) + ")"; })
|
||||
.attr("width", x.rangeBand())
|
||||
.attr("y", function(d) { return y(d.y); })
|
||||
|
@ -69,7 +69,7 @@ vis.selectAll("rect")
|
|||
.attr("y", 0)
|
||||
.attr("height", function(d) { return y(d.y); });
|
||||
|
||||
vis.append("svg:line")
|
||||
vis.append("line")
|
||||
.attr("x1", 0)
|
||||
.attr("x2", w)
|
||||
.attr("y1", h)
|
||||
|
|
|
@ -8,7 +8,7 @@ var chart = d3.chart.horizon()
|
|||
.mode("offset")
|
||||
.interpolate("basis");
|
||||
|
||||
var svg = d3.select("#chart").append("svg:svg")
|
||||
var svg = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
|
|
|
@ -38,7 +38,7 @@ var vertices = d3.range(15).map(function(d) {
|
|||
});
|
||||
|
||||
var svg = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.attr("pointer-events", "all")
|
||||
|
@ -51,12 +51,12 @@ function update() {
|
|||
svg.selectAll("path")
|
||||
.data([d3.geom.hull(vertices)])
|
||||
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(vertices.slice(1))
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("transform", function(d) { return "translate(" + d + ")"; })
|
||||
.attr("r", 3);
|
||||
}
|
||||
|
|
|
@ -10,19 +10,19 @@ d3.json("../data/faithful.json", function(faithful) {
|
|||
kde = science.stats.kde().sample(data);
|
||||
|
||||
var vis = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
var bars = vis.selectAll("g.bar")
|
||||
.data(bins)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "bar")
|
||||
.attr("transform", function(d, i) {
|
||||
return "translate(" + x(d.x) + "," + (h - y(d.y)) + ")";
|
||||
});
|
||||
|
||||
bars.append("svg:rect")
|
||||
bars.append("rect")
|
||||
.attr("fill", "steelblue")
|
||||
.attr("width", function(d) { return x(d.dx + 30) - 1; })
|
||||
.attr("height", function(d) { return y(d.y); });
|
||||
|
@ -33,7 +33,7 @@ d3.json("../data/faithful.json", function(faithful) {
|
|||
|
||||
vis.selectAll("path")
|
||||
.data(d3.values(science.stats.bandwidth))
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", function(h) {
|
||||
return line(kde.bandwidth(h)(d3.range(30, 110, .1)));
|
||||
});
|
||||
|
|
|
@ -10,45 +10,45 @@ var w = 450,
|
|||
|
||||
var vis = d3.select("body")
|
||||
.data([data])
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w + p * 2)
|
||||
.attr("height", h + p * 2)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + p + "," + p + ")");
|
||||
|
||||
var rules = vis.selectAll("g.rule")
|
||||
.data(x.ticks(10))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "rule");
|
||||
|
||||
rules.append("svg:line")
|
||||
rules.append("line")
|
||||
.attr("x1", x)
|
||||
.attr("x2", x)
|
||||
.attr("y1", 0)
|
||||
.attr("y2", h - 1);
|
||||
|
||||
rules.append("svg:line")
|
||||
rules.append("line")
|
||||
.attr("class", function(d) { return d ? null : "axis"; })
|
||||
.attr("y1", y)
|
||||
.attr("y2", y)
|
||||
.attr("x1", 0)
|
||||
.attr("x2", w + 1);
|
||||
|
||||
rules.append("svg:text")
|
||||
rules.append("text")
|
||||
.attr("x", x)
|
||||
.attr("y", h + 3)
|
||||
.attr("dy", ".71em")
|
||||
.attr("text-anchor", "middle")
|
||||
.text(x.tickFormat(10));
|
||||
|
||||
rules.append("svg:text")
|
||||
rules.append("text")
|
||||
.attr("y", y)
|
||||
.attr("x", -3)
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", "end")
|
||||
.text(y.tickFormat(10));
|
||||
|
||||
vis.append("svg:path")
|
||||
vis.append("path")
|
||||
.attr("class", "line")
|
||||
.attr("d", d3.svg.line()
|
||||
.x(function(d) { return x(d.x); })
|
||||
|
@ -56,7 +56,7 @@ vis.append("svg:path")
|
|||
|
||||
vis.selectAll("circle.line")
|
||||
.data(data)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("class", "line")
|
||||
.attr("cx", function(d) { return x(d.x); })
|
||||
.attr("cy", function(d) { return y(d.y); })
|
||||
|
|
|
@ -32,10 +32,10 @@ var w = 960,
|
|||
n = d3.format(",d"),
|
||||
p = d3.format("%");
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + 2 * m + "," + m + ")");
|
||||
|
||||
d3.json("marimekko.json", function(data) {
|
||||
|
@ -59,15 +59,15 @@ d3.json("marimekko.json", function(data) {
|
|||
// Add x-axis ticks.
|
||||
var xtick = svg.selectAll(".x")
|
||||
.data(x.ticks(10))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "x")
|
||||
.attr("transform", function(d) { return "translate(" + x(d) + "," + y(1) + ")"; });
|
||||
|
||||
xtick.append("svg:line")
|
||||
xtick.append("line")
|
||||
.attr("y2", 6)
|
||||
.style("stroke", "#000");
|
||||
|
||||
xtick.append("svg:text")
|
||||
xtick.append("text")
|
||||
.attr("y", 8)
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("dy", ".71em")
|
||||
|
@ -76,15 +76,15 @@ d3.json("marimekko.json", function(data) {
|
|||
// Add y-axis ticks.
|
||||
var ytick = svg.selectAll(".y")
|
||||
.data(y.ticks(10))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "y")
|
||||
.attr("transform", function(d) { return "translate(0," + y(1 - d) + ")"; });
|
||||
|
||||
ytick.append("svg:line")
|
||||
ytick.append("line")
|
||||
.attr("x1", -6)
|
||||
.style("stroke", "#000");
|
||||
|
||||
ytick.append("svg:text")
|
||||
ytick.append("text")
|
||||
.attr("x", -8)
|
||||
.attr("text-anchor", "end")
|
||||
.attr("dy", ".35em")
|
||||
|
@ -93,7 +93,7 @@ d3.json("marimekko.json", function(data) {
|
|||
// Add a group for each segment.
|
||||
var segments = svg.selectAll(".segment")
|
||||
.data(segments)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "segment")
|
||||
.attr("xlink:title", function(d) { return d.key; })
|
||||
.attr("transform", function(d) { return "translate(" + x(d.offset / sum) + ")"; });
|
||||
|
@ -101,10 +101,10 @@ d3.json("marimekko.json", function(data) {
|
|||
// Add a rect for each market.
|
||||
var markets = segments.selectAll(".market")
|
||||
.data(function(d) { return d.values; })
|
||||
.enter().append("svg:a")
|
||||
.enter().append("a")
|
||||
.attr("class", "market")
|
||||
.attr("xlink:title", function(d) { return d.market + " " + d.parent.key + ": " + n(d.value); })
|
||||
.append("svg:rect")
|
||||
.append("rect")
|
||||
.attr("y", function(d) { return y(d.offset / d.parent.sum); })
|
||||
.attr("height", function(d) { return y(d.value / d.parent.sum); })
|
||||
.attr("width", function(d) { return x(d.parent.sum / sum); })
|
||||
|
|
|
@ -100,14 +100,14 @@ var force = d3.layout.force()
|
|||
.on("tick", tick)
|
||||
.start();
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
// Per-type markers, as they don't inherit styles.
|
||||
svg.append("svg:defs").selectAll("marker")
|
||||
svg.append("defs").selectAll("marker")
|
||||
.data(["suit", "licensing", "resolved"])
|
||||
.enter().append("svg:marker")
|
||||
.enter().append("marker")
|
||||
.attr("id", String)
|
||||
.attr("viewBox", "0 -5 10 10")
|
||||
.attr("refX", 15)
|
||||
|
@ -115,33 +115,33 @@ svg.append("svg:defs").selectAll("marker")
|
|||
.attr("markerWidth", 6)
|
||||
.attr("markerHeight", 6)
|
||||
.attr("orient", "auto")
|
||||
.append("svg:path")
|
||||
.append("path")
|
||||
.attr("d", "M0,-5L10,0L0,5");
|
||||
|
||||
var path = svg.append("svg:g").selectAll("path")
|
||||
var path = svg.append("g").selectAll("path")
|
||||
.data(force.links())
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", function(d) { return "link " + d.type; })
|
||||
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
|
||||
|
||||
var circle = svg.append("svg:g").selectAll("circle")
|
||||
var circle = svg.append("g").selectAll("circle")
|
||||
.data(force.nodes())
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("r", 6)
|
||||
.call(force.drag);
|
||||
|
||||
var text = svg.append("svg:g").selectAll("g")
|
||||
var text = svg.append("g").selectAll("g")
|
||||
.data(force.nodes())
|
||||
.enter().append("svg:g");
|
||||
.enter().append("g");
|
||||
|
||||
// A copy of the text with a thick white stroke for legibility.
|
||||
text.append("svg:text")
|
||||
text.append("text")
|
||||
.attr("x", 8)
|
||||
.attr("y", ".31em")
|
||||
.attr("class", "shadow")
|
||||
.text(function(d) { return d.name; });
|
||||
|
||||
text.append("svg:text")
|
||||
text.append("text")
|
||||
.attr("x", 8)
|
||||
.attr("y", ".31em")
|
||||
.text(function(d) { return d.name; });
|
||||
|
|
|
@ -47,12 +47,12 @@ var xy = d3.geo.mercator(),
|
|||
path = d3.geo.path().projection(xy);
|
||||
|
||||
var states = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg:g")
|
||||
.append("svg")
|
||||
.append("g")
|
||||
.attr("id", "states");
|
||||
|
||||
var equator = d3.select("svg")
|
||||
.append("svg:line")
|
||||
.append("line")
|
||||
.attr("x1", "0%")
|
||||
.attr("x2", "100%");
|
||||
|
||||
|
@ -61,9 +61,9 @@ d3.json("../data/world-countries.json", function(collection) {
|
|||
states
|
||||
.selectAll("path")
|
||||
.data(collection.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", path)
|
||||
.append("svg:title")
|
||||
.append("title")
|
||||
.text(function(d) { return d.properties.name; });
|
||||
|
||||
equator
|
||||
|
|
|
@ -20,22 +20,22 @@ var w = 960,
|
|||
h = 500;
|
||||
|
||||
var svg = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.attr("pointer-events", "all");
|
||||
|
||||
svg.append("svg:g")
|
||||
svg.append("g")
|
||||
.selectAll("circle")
|
||||
.data(d3.range(110))
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
|
||||
.attr("r", function(d) { return d * 5; });
|
||||
|
||||
var circle = svg.append("svg:g")
|
||||
var circle = svg.append("g")
|
||||
.selectAll("circle")
|
||||
.data(d3.range(60))
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
|
||||
.attr("r", function(d) { return d * 3; });
|
||||
|
||||
|
|
|
@ -6,27 +6,27 @@ var pack = d3.layout.pack()
|
|||
.size([w - 4, h - 4])
|
||||
.value(function(d) { return d.size; });
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.attr("class", "pack")
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(2, 2)");
|
||||
|
||||
d3.json("../data/flare.json", function(json) {
|
||||
var node = vis.data([json]).selectAll("g.node")
|
||||
.data(pack.nodes)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
|
||||
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
|
||||
|
||||
node.append("svg:title")
|
||||
node.append("title")
|
||||
.text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });
|
||||
|
||||
node.append("svg:circle")
|
||||
node.append("circle")
|
||||
.attr("r", function(d) { return d.r; });
|
||||
|
||||
node.filter(function(d) { return !d.children; }).append("svg:text")
|
||||
node.filter(function(d) { return !d.children; }).append("text")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("dy", ".3em")
|
||||
.text(function(d) { return d.name.substring(0, d.r / 3); });
|
||||
|
|
|
@ -57,10 +57,10 @@ var line = d3.svg.line(),
|
|||
background,
|
||||
foreground;
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
d3.csv("cars.csv", function(cars) {
|
||||
|
@ -73,39 +73,39 @@ d3.csv("cars.csv", function(cars) {
|
|||
}));
|
||||
|
||||
// Add grey background lines for context.
|
||||
background = svg.append("svg:g")
|
||||
background = svg.append("g")
|
||||
.attr("class", "background")
|
||||
.selectAll("path")
|
||||
.data(cars)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", path);
|
||||
|
||||
// Add blue foreground lines for focus.
|
||||
foreground = svg.append("svg:g")
|
||||
foreground = svg.append("g")
|
||||
.attr("class", "foreground")
|
||||
.selectAll("path")
|
||||
.data(cars)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", path);
|
||||
|
||||
// Add a group element for each dimension.
|
||||
var g = svg.selectAll(".dimension")
|
||||
.data(dimensions)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "dimension")
|
||||
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
|
||||
|
||||
// Add an axis and title.
|
||||
g.append("svg:g")
|
||||
g.append("g")
|
||||
.attr("class", "axis")
|
||||
.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
|
||||
.append("svg:text")
|
||||
.append("text")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("y", -9)
|
||||
.text(String);
|
||||
|
||||
// Add and store a brush for each axis.
|
||||
g.append("svg:g")
|
||||
g.append("g")
|
||||
.attr("class", "brush")
|
||||
.each(function(d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); })
|
||||
.selectAll("rect")
|
||||
|
|
|
@ -23,7 +23,7 @@ var w = 960,
|
|||
y = d3.scale.linear().range([0, h]),
|
||||
color = d3.scale.category20c();
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
|
@ -33,7 +33,7 @@ var partition = d3.layout.partition()
|
|||
d3.json("../data/flare.json", function(json) {
|
||||
var rect = vis.data([json]).selectAll("rect")
|
||||
.data(partition.nodes)
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.attr("x", function(d) { return x(d.x); })
|
||||
.attr("y", function(d) { return y(d.y); })
|
||||
.attr("width", function(d) { return x(d.dx); })
|
||||
|
|
|
@ -21,7 +21,7 @@ var w = 960,
|
|||
h = 250,
|
||||
color = d3.scale.category20c();
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
|
@ -32,7 +32,7 @@ var partition = d3.layout.partition()
|
|||
d3.json("../data/flare.json", function(json) {
|
||||
vis.data([json]).selectAll("rect")
|
||||
.data(partition.nodes)
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.attr("x", function(d) { return d.x; })
|
||||
.attr("y", function(d) { return d.y; })
|
||||
.attr("width", function(d) { return d.dx; })
|
||||
|
|
|
@ -25,10 +25,10 @@ var w = 960,
|
|||
y = d3.scale.sqrt().range([0, r]),
|
||||
color = d3.scale.category20c();
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
|
||||
|
||||
var partition = d3.layout.partition()
|
||||
|
@ -43,7 +43,7 @@ var arc = d3.svg.arc()
|
|||
d3.json("../data/flare.json", function(json) {
|
||||
var path = vis.data([json]).selectAll("path")
|
||||
.data(partition.nodes)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", arc)
|
||||
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
|
||||
.on("click", click);
|
||||
|
|
|
@ -3,10 +3,10 @@ var w = 960,
|
|||
r = Math.min(w, h) / 2,
|
||||
color = d3.scale.category20c();
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
|
||||
|
||||
var partition = d3.layout.partition()
|
||||
|
@ -23,7 +23,7 @@ var arc = d3.svg.arc()
|
|||
d3.json("../data/flare.json", function(json) {
|
||||
var path = vis.data([json]).selectAll("path")
|
||||
.data(partition.nodes)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
|
||||
.attr("d", arc)
|
||||
.attr("fill-rule", "evenodd")
|
||||
|
|
|
@ -23,18 +23,18 @@ var w = 400,
|
|||
arc = d3.svg.arc().outerRadius(r),
|
||||
donut = d3.layout.pie();
|
||||
|
||||
var vis = d3.select("body").append("svg:svg")
|
||||
var vis = d3.select("body").append("svg")
|
||||
.data([data])
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
var arcs = vis.selectAll("g.arc")
|
||||
.data(donut)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "arc")
|
||||
.attr("transform", "translate(" + r + "," + r + ")");
|
||||
|
||||
var paths = arcs.append("svg:path")
|
||||
var paths = arcs.append("path")
|
||||
.attr("fill", function(d, i) { return color(i); });
|
||||
|
||||
paths.transition()
|
||||
|
|
|
@ -24,22 +24,22 @@ var w = 400,
|
|||
arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r);
|
||||
|
||||
var vis = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.data([data])
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
var arcs = vis.selectAll("g.arc")
|
||||
.data(donut)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "arc")
|
||||
.attr("transform", "translate(" + r + "," + r + ")");
|
||||
|
||||
arcs.append("svg:path")
|
||||
arcs.append("path")
|
||||
.attr("fill", function(d, i) { return color(i); })
|
||||
.attr("d", arc);
|
||||
|
||||
arcs.append("svg:text")
|
||||
arcs.append("text")
|
||||
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", "middle")
|
||||
|
|
|
@ -4,22 +4,22 @@ var w = 960,
|
|||
y = d3.scale.linear().range([0, h - 40]);
|
||||
|
||||
// An SVG element with a bottom-right origin.
|
||||
var svg = d3.select("#chart").append("svg:svg")
|
||||
var svg = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.style("padding-right", "30px")
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + x(1) + "," + (h - 20) + ")scale(-1,-1)");
|
||||
|
||||
// A sliding container to hold the bars.
|
||||
var body = svg.append("svg:g")
|
||||
var body = svg.append("g")
|
||||
.attr("transform", "translate(0,0)");
|
||||
|
||||
// A container to hold the y-axis rules.
|
||||
var rules = svg.append("svg:g");
|
||||
var rules = svg.append("g");
|
||||
|
||||
// A label for the current year.
|
||||
var title = svg.append("svg:text")
|
||||
var title = svg.append("text")
|
||||
.attr("class", "title")
|
||||
.attr("dy", ".71em")
|
||||
.attr("transform", "translate(" + x(1) + "," + y(1) + ")scale(-1,-1)")
|
||||
|
@ -48,14 +48,14 @@ d3.csv("population.csv", function(data) {
|
|||
// Add rules to show the population values.
|
||||
rules = rules.selectAll(".rule")
|
||||
.data(y.ticks(10))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "rule")
|
||||
.attr("transform", function(d) { return "translate(0," + y(d) + ")"; });
|
||||
|
||||
rules.append("svg:line")
|
||||
rules.append("line")
|
||||
.attr("x2", w);
|
||||
|
||||
rules.append("svg:text")
|
||||
rules.append("text")
|
||||
.attr("x", 6)
|
||||
.attr("dy", ".35em")
|
||||
.attr("transform", "rotate(180)")
|
||||
|
@ -64,17 +64,17 @@ d3.csv("population.csv", function(data) {
|
|||
// Add labeled rects for each birthyear.
|
||||
var years = body.selectAll("g")
|
||||
.data(d3.range(year0 - age1, year1 + 5, 5))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("transform", function(d) { return "translate(" + x(year1 - d) + ",0)"; });
|
||||
|
||||
years.selectAll("rect")
|
||||
.data(d3.range(2))
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.attr("x", 1)
|
||||
.attr("width", x(5) - 2)
|
||||
.attr("height", 1e-6);
|
||||
|
||||
years.append("svg:text")
|
||||
years.append("text")
|
||||
.attr("y", -6)
|
||||
.attr("x", -x(5) / 2)
|
||||
.attr("transform", "rotate(180)")
|
||||
|
@ -83,9 +83,9 @@ d3.csv("population.csv", function(data) {
|
|||
.text(String);
|
||||
|
||||
// Add labels to show the age.
|
||||
svg.append("svg:g").selectAll("text")
|
||||
svg.append("g").selectAll("text")
|
||||
.data(d3.range(0, age1 + 5, 5))
|
||||
.enter().append("svg:text")
|
||||
.enter().append("text")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("transform", function(d) { return "translate(" + (x(d) + x(5) / 2) + ",-4)scale(-1,-1)"; })
|
||||
.attr("dy", ".71em")
|
||||
|
|
|
@ -10,8 +10,8 @@ var chart = d3.chart.qq()
|
|||
.tickFormat(function(d) { return ~~(d * 100); });
|
||||
|
||||
var vis = d3.select("#chart")
|
||||
.append("svg:svg")
|
||||
.append("svg:g")
|
||||
.append("svg")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
d3.json("turkers.json", function(turkers) {
|
||||
|
@ -37,18 +37,18 @@ d3.json("turkers.json", function(turkers) {
|
|||
y: turkers,
|
||||
label: "Mixture of 3 Gaussians"
|
||||
}])
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "qq")
|
||||
.attr("transform", function(d, i) { return "translate(" + (w + m[1] + m[3]) * i + ")"; });
|
||||
|
||||
g.append("svg:rect")
|
||||
g.append("rect")
|
||||
.attr("class", "box")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
g.call(chart);
|
||||
|
||||
g.append("svg:text")
|
||||
g.append("text")
|
||||
.attr("dy", "1.3em")
|
||||
.attr("dx", ".6em")
|
||||
.text(function(d) { return d.label; });
|
||||
|
|
|
@ -40,14 +40,14 @@ var data = d3.range(500).map(function() {
|
|||
// Generate a quadtree of the specified data.
|
||||
var quadtree = d3.geom.quadtree(data, 0, w);
|
||||
|
||||
var vis = d3.select("body").append("svg:svg")
|
||||
var vis = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", w)
|
||||
.style("pointer-events", "all");
|
||||
|
||||
vis.selectAll("rect")
|
||||
.data(nodes(quadtree))
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.attr("x", function(d) { return d.x; })
|
||||
.attr("y", function(d) { return d.y; })
|
||||
.attr("width", function(d) { return d.width; })
|
||||
|
@ -55,7 +55,7 @@ vis.selectAll("rect")
|
|||
|
||||
vis.selectAll("circle")
|
||||
.data(data)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("cx", function(d) { return d.x; })
|
||||
.attr("cy", function(d) { return d.y; })
|
||||
.attr("r", 4.5);
|
||||
|
@ -64,7 +64,7 @@ vis.selectAll("circle")
|
|||
vis.on("mousedown", function() {
|
||||
var m0 = d3.svg.mouse(this);
|
||||
|
||||
var rect = d3.select(this).append("svg:rect")
|
||||
var rect = d3.select(this).append("rect")
|
||||
.style("fill", "#999")
|
||||
.style("fill-opacity", .5);
|
||||
|
||||
|
|
|
@ -38,10 +38,10 @@ var x = d3.time.scale().range([0, w - 60]),
|
|||
|
||||
var color = d3.scale.category10();
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
var stocks,
|
||||
|
@ -96,7 +96,7 @@ d3.csv("../data/stocks.csv", function(data) {
|
|||
|
||||
var g = svg.selectAll("g")
|
||||
.data(symbols)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "symbol");
|
||||
|
||||
setTimeout(lines, duration);
|
||||
|
@ -110,16 +110,16 @@ function lines() {
|
|||
g.each(function(d) {
|
||||
var e = d3.select(this);
|
||||
|
||||
e.append("svg:path")
|
||||
e.append("path")
|
||||
.attr("class", "line");
|
||||
|
||||
e.append("svg:circle")
|
||||
e.append("circle")
|
||||
.attr("r", 5)
|
||||
.style("fill", function(d) { return color(d.key); })
|
||||
.style("stroke", "#000")
|
||||
.style("stroke-width", "2px");
|
||||
|
||||
e.append("svg:text")
|
||||
e.append("text")
|
||||
.attr("x", 12)
|
||||
.attr("dy", ".31em")
|
||||
.text(d.key);
|
||||
|
@ -151,10 +151,10 @@ function lines() {
|
|||
}
|
||||
|
||||
function horizons() {
|
||||
svg.insert("svg:defs", ".symbol")
|
||||
.append("svg:clipPath")
|
||||
svg.insert("defs", ".symbol")
|
||||
.append("clipPath")
|
||||
.attr("id", "clip")
|
||||
.append("svg:rect")
|
||||
.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h / 4 - 20);
|
||||
|
||||
|
@ -179,7 +179,7 @@ function horizons() {
|
|||
|
||||
d3.select(this).selectAll(".area")
|
||||
.data(d3.range(3))
|
||||
.enter().insert("svg:path", ".line")
|
||||
.enter().insert("path", ".line")
|
||||
.attr("class", "area")
|
||||
.attr("transform", function(d) { return "translate(0," + (d * (h / 4 - 20)) + ")"; })
|
||||
.attr("d", area(d.values))
|
||||
|
@ -351,7 +351,7 @@ function overlappingArea() {
|
|||
.attr("dy", ".31em")
|
||||
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price) + ")"; });
|
||||
|
||||
svg.append("svg:line")
|
||||
svg.append("line")
|
||||
.attr("class", "line")
|
||||
.attr("x1", 0)
|
||||
.attr("x2", w - 60)
|
||||
|
@ -390,7 +390,7 @@ function groupedBar() {
|
|||
g.each(function(p, j) {
|
||||
d3.select(this).selectAll("rect")
|
||||
.data(function(d) { return d.values; })
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.attr("x", function(d) { return x(d.date) + x1(p.key); })
|
||||
.attr("y", function(d) { return y(d.price); })
|
||||
.attr("width", x1.rangeBand())
|
||||
|
@ -499,7 +499,7 @@ function donut() {
|
|||
|
||||
var arc = d3.svg.arc();
|
||||
|
||||
g.append("svg:path")
|
||||
g.append("path")
|
||||
.style("fill", function(d) { return color(d.key); })
|
||||
.data(function() { return pie(symbols); })
|
||||
.transition()
|
||||
|
|
|
@ -9,13 +9,13 @@ var w = 960,
|
|||
data = shuffle(d3.range(n)),
|
||||
duration = 250;
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
var line = vis.selectAll("line")
|
||||
.data(data)
|
||||
.enter().append("svg:line")
|
||||
.enter().append("line")
|
||||
.attr("x1", 0)
|
||||
.attr("y1", 0)
|
||||
.attr("x2", 0)
|
||||
|
|
|
@ -5,11 +5,11 @@ var w = 960,
|
|||
dragged = null,
|
||||
selected = points[0];
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
vis.append("svg:rect")
|
||||
vis.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.on("mousedown", function() {
|
||||
|
@ -17,7 +17,7 @@ vis.append("svg:rect")
|
|||
update();
|
||||
});
|
||||
|
||||
vis.append("svg:path")
|
||||
vis.append("path")
|
||||
.data([points])
|
||||
.attr("class", "line")
|
||||
.call(update);
|
||||
|
@ -56,7 +56,7 @@ function update() {
|
|||
var circle = vis.selectAll("circle")
|
||||
.data(points, function(d) { return d; });
|
||||
|
||||
circle.enter().append("svg:circle")
|
||||
circle.enter().append("circle")
|
||||
.attr("class", function(d) { return d === selected ? "selected" : null; })
|
||||
.attr("cx", function(d) { return d[0]; })
|
||||
.attr("cy", function(d) { return d[1]; })
|
||||
|
|
|
@ -27,14 +27,14 @@ d3.json("flowers.json", function(flower) {
|
|||
.on("brushend", brushend);
|
||||
|
||||
// Root panel.
|
||||
var svg = d3.select("#chart").append("svg:svg")
|
||||
var svg = d3.select("#chart").append("svg")
|
||||
.attr("width", size * n + padding)
|
||||
.attr("height", size * n + padding);
|
||||
|
||||
// X-axis.
|
||||
svg.selectAll("g.x.axis")
|
||||
.data(flower.traits)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", function(d, i) { return "translate(" + i * size + ",0)"; })
|
||||
.each(function(d) { d3.select(this).call(axis.scale(x[d]).orient("bottom")); });
|
||||
|
@ -42,7 +42,7 @@ d3.json("flowers.json", function(flower) {
|
|||
// Y-axis.
|
||||
svg.selectAll("g.y.axis")
|
||||
.data(flower.traits)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "y axis")
|
||||
.attr("transform", function(d, i) { return "translate(0," + i * size + ")"; })
|
||||
.each(function(d) { d3.select(this).call(axis.scale(y[d]).orient("right")); });
|
||||
|
@ -50,13 +50,13 @@ d3.json("flowers.json", function(flower) {
|
|||
// Cell and plot.
|
||||
var cell = svg.selectAll("g.cell")
|
||||
.data(cross(flower.traits, flower.traits))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "cell")
|
||||
.attr("transform", function(d) { return "translate(" + d.i * size + "," + d.j * size + ")"; })
|
||||
.each(plot);
|
||||
|
||||
// Titles for the diagonal.
|
||||
cell.filter(function(d) { return d.i == d.j; }).append("svg:text")
|
||||
cell.filter(function(d) { return d.i == d.j; }).append("text")
|
||||
.attr("x", padding)
|
||||
.attr("y", padding)
|
||||
.attr("dy", ".71em")
|
||||
|
@ -66,7 +66,7 @@ d3.json("flowers.json", function(flower) {
|
|||
var cell = d3.select(this);
|
||||
|
||||
// Plot frame.
|
||||
cell.append("svg:rect")
|
||||
cell.append("rect")
|
||||
.attr("class", "frame")
|
||||
.attr("x", padding / 2)
|
||||
.attr("y", padding / 2)
|
||||
|
@ -76,7 +76,7 @@ d3.json("flowers.json", function(flower) {
|
|||
// Plot dots.
|
||||
cell.selectAll("circle")
|
||||
.data(flower.values)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("class", function(d) { return d.species; })
|
||||
.attr("cx", function(d) { return x[p.x](d[p.x]); })
|
||||
.attr("cy", function(d) { return y[p.y](d[p.y]); })
|
||||
|
|
|
@ -23,23 +23,23 @@ var p = 20,
|
|||
y2 = function(d) { return d.y * h / mz; }; // or `my` to not rescale
|
||||
|
||||
var vis = d3.select("#chart")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h + p);
|
||||
|
||||
var layers = vis.selectAll("g.layer")
|
||||
.data(data)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.style("fill", function(d, i) { return color(i / (n - 1)); })
|
||||
.attr("class", "layer");
|
||||
|
||||
var bars = layers.selectAll("g.bar")
|
||||
.data(function(d) { return d; })
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "bar")
|
||||
.attr("transform", function(d) { return "translate(" + x(d) + ",0)"; });
|
||||
|
||||
bars.append("svg:rect")
|
||||
bars.append("rect")
|
||||
.attr("width", x({x: .9}))
|
||||
.attr("x", 0)
|
||||
.attr("y", h)
|
||||
|
@ -51,7 +51,7 @@ bars.append("svg:rect")
|
|||
|
||||
var labels = vis.selectAll("text.label")
|
||||
.data(data[0])
|
||||
.enter().append("svg:text")
|
||||
.enter().append("text")
|
||||
.attr("class", "label")
|
||||
.attr("x", x)
|
||||
.attr("y", h + 6)
|
||||
|
@ -60,7 +60,7 @@ var labels = vis.selectAll("text.label")
|
|||
.attr("text-anchor", "middle")
|
||||
.text(function(d, i) { return i; });
|
||||
|
||||
vis.append("svg:line")
|
||||
vis.append("line")
|
||||
.attr("x1", 0)
|
||||
.attr("x2", w - x({x: .1}))
|
||||
.attr("y1", h)
|
||||
|
|
|
@ -19,13 +19,13 @@ var area = d3.svg.area()
|
|||
.y1(function(d) { return h - (d.y + d.y0) * h / my; });
|
||||
|
||||
var vis = d3.select("#chart")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
vis.selectAll("path")
|
||||
.data(data0)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.style("fill", function() { return color(Math.random()); })
|
||||
.attr("d", area);
|
||||
|
||||
|
|
|
@ -44,24 +44,24 @@ var w = 450,
|
|||
color = d3.scale.category10();
|
||||
|
||||
var vis = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w + p * 2)
|
||||
.attr("height", h + p * 2)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + p + "," + p + ")");
|
||||
|
||||
var xrule = vis.selectAll("g.x")
|
||||
.data(x.ticks(10))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "x");
|
||||
|
||||
xrule.append("svg:line")
|
||||
xrule.append("line")
|
||||
.attr("x1", x)
|
||||
.attr("x2", x)
|
||||
.attr("y1", 0)
|
||||
.attr("y2", h);
|
||||
|
||||
xrule.append("svg:text")
|
||||
xrule.append("text")
|
||||
.attr("x", x)
|
||||
.attr("y", h + 3)
|
||||
.attr("dy", ".71em")
|
||||
|
@ -70,29 +70,29 @@ xrule.append("svg:text")
|
|||
|
||||
var yrule = vis.selectAll("g.y")
|
||||
.data(y.ticks(10))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "y");
|
||||
|
||||
yrule.append("svg:line")
|
||||
yrule.append("line")
|
||||
.attr("x1", 0)
|
||||
.attr("x2", w)
|
||||
.attr("y1", y)
|
||||
.attr("y2", y);
|
||||
|
||||
yrule.append("svg:text")
|
||||
yrule.append("text")
|
||||
.attr("x", -3)
|
||||
.attr("y", y)
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", "end")
|
||||
.text(y.tickFormat(10));
|
||||
|
||||
vis.append("svg:rect")
|
||||
vis.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
vis.selectAll("path.dot")
|
||||
.data(data)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "dot")
|
||||
.attr("stroke", function(d, i) { return color(i); })
|
||||
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
|
||||
|
|
|
@ -65,7 +65,7 @@ var types = {
|
|||
var format = d3.format(".4n"),
|
||||
scale = d3.scale.linear().domain([-10, 20, 1000]).range([0, 800, 1000]);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", 960)
|
||||
.attr("height", 500);
|
||||
|
||||
|
@ -74,7 +74,7 @@ var shape = superformula()
|
|||
.size(100000)
|
||||
.segments(3600);
|
||||
|
||||
var path = svg.append("svg:path")
|
||||
var path = svg.append("path")
|
||||
.attr("class", "big")
|
||||
.attr("transform", "translate(480,250)")
|
||||
.attr("d", shape);
|
||||
|
|
|
@ -35,7 +35,7 @@ var x = d3.scale.ordinal()
|
|||
.domain(superformulaTypes)
|
||||
.rangePoints([0, 960], 1);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", 960)
|
||||
.attr("height", 500);
|
||||
|
||||
|
@ -50,17 +50,17 @@ var big = superformula()
|
|||
|
||||
svg.selectAll("a")
|
||||
.data(superformulaTypes)
|
||||
.enter().append("svg:a")
|
||||
.enter().append("a")
|
||||
.attr("xlink:title", String)
|
||||
.attr("transform", function(d, i) { return "translate("+ x(d) + ",40)"; })
|
||||
.append("svg:path")
|
||||
.append("path")
|
||||
.attr("class", "small")
|
||||
.attr("d", small)
|
||||
.on("mousedown", function() { d3.select(this).style("fill", "aliceblue"); })
|
||||
.on("mouseup", function() { d3.select(this).style("fill", null); })
|
||||
.on("click", function(d) { d3.select(".big").transition().duration(500).attr("d", big.type(d)); });
|
||||
|
||||
svg.append("svg:path")
|
||||
svg.append("path")
|
||||
.attr("class", "big")
|
||||
.attr("transform", "translate(450,250)")
|
||||
.attr("d", big);
|
||||
|
|
|
@ -36,15 +36,15 @@ var r = d3.scale.sqrt()
|
|||
// Our projection.
|
||||
var xy = d3.geo.albersUsa();
|
||||
|
||||
var svg = d3.select("body").append("svg:svg");
|
||||
svg.append("svg:g").attr("id", "states");
|
||||
svg.append("svg:g").attr("id", "state-centroids");
|
||||
var svg = d3.select("body").append("svg");
|
||||
svg.append("g").attr("id", "states");
|
||||
svg.append("g").attr("id", "state-centroids");
|
||||
|
||||
d3.json("../data/us-states.json", function(collection) {
|
||||
svg.select("#states")
|
||||
.selectAll("path")
|
||||
.data(collection.features)
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("d", d3.geo.path().projection(xy));
|
||||
});
|
||||
|
||||
|
@ -53,7 +53,7 @@ d3.json("../data/us-state-centroids.json", function(collection) {
|
|||
.selectAll("circle")
|
||||
.data(collection.features
|
||||
.sort(function(a, b) { return b.properties.population - a.properties.population; }))
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("transform", function(d) { return "translate(" + xy(d.geometry.coordinates) + ")"; })
|
||||
.attr("r", 0)
|
||||
.transition()
|
||||
|
|
|
@ -27,7 +27,7 @@ svg {
|
|||
|
||||
var color = d3.scale.category10();
|
||||
|
||||
var svg = d3.select("body").append("svg:svg");
|
||||
var svg = d3.select("body").append("svg");
|
||||
|
||||
d3.select("body")
|
||||
.on("touchstart", touch)
|
||||
|
@ -42,7 +42,7 @@ function touch() {
|
|||
.attr("cx", function(d) { return d[0]; })
|
||||
.attr("cy", function(d) { return d[1]; });
|
||||
|
||||
circle.enter().append("svg:circle")
|
||||
circle.enter().append("circle")
|
||||
.attr("class", "touch")
|
||||
.attr("cx", function(d) { return d[0]; })
|
||||
.attr("cy", function(d) { return d[1]; })
|
||||
|
|
|
@ -13,10 +13,10 @@
|
|||
|
||||
var outcome = d3.select("body").append("p");
|
||||
|
||||
var g = d3.select("body").append("svg:svg")
|
||||
var g = d3.select("body").append("svg")
|
||||
.attr("width", 10)
|
||||
.attr("height", 10)
|
||||
.append("svg:g");
|
||||
.append("g");
|
||||
|
||||
var results = d3.select("body").append("table")
|
||||
.style("display", "none");
|
||||
|
|
|
@ -26,13 +26,13 @@ var w = 960,
|
|||
x = w / z,
|
||||
y = h / z;
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(d3.range(x * y))
|
||||
.enter().append("svg:rect")
|
||||
.enter().append("rect")
|
||||
.attr("transform", translate)
|
||||
.attr("width", z)
|
||||
.attr("height", z)
|
||||
|
|
|
@ -31,15 +31,15 @@ var w = 960,
|
|||
duration = 750,
|
||||
timer = setInterval(update, duration);
|
||||
|
||||
var vis = d3.select("body").append("svg:svg")
|
||||
var vis = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(10, 10)");
|
||||
|
||||
vis.selectAll("circle")
|
||||
.data(tree(root))
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("class", "node")
|
||||
.attr("r", 3.5)
|
||||
.attr("cx", x)
|
||||
|
@ -61,7 +61,7 @@ function update() {
|
|||
.data(nodes, function(d) { return d.id; });
|
||||
|
||||
// Enter any new nodes at the parent's previous position.
|
||||
node.enter().append("svg:circle")
|
||||
node.enter().append("circle")
|
||||
.attr("class", "node")
|
||||
.attr("r", 3.5)
|
||||
.attr("cx", function(d) { return d.parent.x0; })
|
||||
|
@ -82,7 +82,7 @@ function update() {
|
|||
.data(tree.links(nodes), function(d) { return d.target.id; });
|
||||
|
||||
// Enter any new links at the parent's previous position.
|
||||
link.enter().insert("svg:path", "circle")
|
||||
link.enter().insert("path", "circle")
|
||||
.attr("class", "link")
|
||||
.attr("d", function(d) {
|
||||
var o = {x: d.source.x0, y: d.source.y0};
|
||||
|
|
|
@ -43,10 +43,10 @@ var tree = d3.layout.tree()
|
|||
var diagonal = d3.svg.diagonal()
|
||||
.projection(function(d) { return [d.y, d.x]; });
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
d3.json("../data/flare.json", function(json) {
|
||||
|
@ -79,16 +79,16 @@ function update(source) {
|
|||
.data(nodes, function(d) { return d.id || (d.id = ++i); });
|
||||
|
||||
// Enter any new nodes at the parent's previous position.
|
||||
var nodeEnter = node.enter().append("svg:g")
|
||||
var nodeEnter = node.enter().append("g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
|
||||
.on("click", click);
|
||||
|
||||
nodeEnter.append("svg:circle")
|
||||
nodeEnter.append("circle")
|
||||
.attr("r", 1e-6)
|
||||
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
|
||||
|
||||
nodeEnter.append("svg:text")
|
||||
nodeEnter.append("text")
|
||||
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
|
||||
|
@ -124,7 +124,7 @@ function update(source) {
|
|||
.data(tree.links(nodes), function(d) { return d.target.id; });
|
||||
|
||||
// Enter any new links at the parent's previous position.
|
||||
link.enter().insert("svg:path", "g")
|
||||
link.enter().insert("path", "g")
|
||||
.attr("class", "link")
|
||||
.attr("d", function(d) {
|
||||
var o = {x: source.x0, y: source.y0};
|
||||
|
|
|
@ -7,10 +7,10 @@ var tree = d3.layout.tree()
|
|||
var diagonal = d3.svg.diagonal.radial()
|
||||
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", r * 2)
|
||||
.attr("height", r * 2 - 150)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + r + "," + r + ")");
|
||||
|
||||
d3.json("../data/flare.json", function(json) {
|
||||
|
@ -18,20 +18,20 @@ d3.json("../data/flare.json", function(json) {
|
|||
|
||||
var link = vis.selectAll("path.link")
|
||||
.data(tree.links(nodes))
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "link")
|
||||
.attr("d", diagonal);
|
||||
|
||||
var node = vis.selectAll("g.node")
|
||||
.data(nodes)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
|
||||
|
||||
node.append("svg:circle")
|
||||
node.append("circle")
|
||||
.attr("r", 4.5);
|
||||
|
||||
node.append("svg:text")
|
||||
node.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"; })
|
||||
|
|
|
@ -7,10 +7,10 @@ var tree = d3.layout.tree()
|
|||
var diagonal = d3.svg.diagonal()
|
||||
.projection(function(d) { return [d.y, d.x]; });
|
||||
|
||||
var vis = d3.select("#chart").append("svg:svg")
|
||||
var vis = d3.select("#chart").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(40, 0)");
|
||||
|
||||
d3.json("../data/flare.json", function(json) {
|
||||
|
@ -18,20 +18,20 @@ d3.json("../data/flare.json", function(json) {
|
|||
|
||||
var link = vis.selectAll("path.link")
|
||||
.data(tree.links(nodes))
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", "link")
|
||||
.attr("d", diagonal);
|
||||
|
||||
var node = vis.selectAll("g.node")
|
||||
.data(nodes)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
|
||||
|
||||
node.append("svg:circle")
|
||||
node.append("circle")
|
||||
.attr("r", 4.5);
|
||||
|
||||
node.append("svg:text")
|
||||
node.append("text")
|
||||
.attr("dx", function(d) { return d.children ? -8 : 8; })
|
||||
.attr("dy", 3)
|
||||
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
|
||||
|
|
|
@ -7,25 +7,25 @@ var treemap = d3.layout.treemap()
|
|||
.size([w, h])
|
||||
.value(function(d) { return d.size; });
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(-.5,-.5)");
|
||||
|
||||
d3.json("../data/flare.json", function(json) {
|
||||
var cell = svg.data([json]).selectAll("g")
|
||||
.data(treemap)
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "cell")
|
||||
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
|
||||
|
||||
cell.append("svg:rect")
|
||||
cell.append("rect")
|
||||
.attr("width", function(d) { return d.dx; })
|
||||
.attr("height", function(d) { return d.dy; })
|
||||
.style("fill", function(d) { return d.children ? color(d.data.name) : null; });
|
||||
|
||||
cell.append("svg:text")
|
||||
cell.append("text")
|
||||
.attr("x", function(d) { return d.dx / 2; })
|
||||
.attr("y", function(d) { return d.dy / 2; })
|
||||
.attr("dy", ".35em")
|
||||
|
|
|
@ -19,7 +19,7 @@ var vertices = boids.map(function(boid) {
|
|||
d3.select(window).on("blur", nullGravity);
|
||||
|
||||
var svg = d3.select("#vis")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.attr("class", "PiYG")
|
||||
|
@ -32,13 +32,13 @@ var svg = d3.select("#vis")
|
|||
|
||||
svg.selectAll("path")
|
||||
.data(d3.geom.voronoi(vertices))
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
|
||||
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(vertices)
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("transform", function(d) { return "translate(" + d + ")"; })
|
||||
.attr("r", 2);
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ var vertices = d3.range(100).map(function(d) {
|
|||
});
|
||||
|
||||
var svg = d3.select("#chart")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.attr("class", "PiYG")
|
||||
|
@ -14,13 +14,13 @@ var svg = d3.select("#chart")
|
|||
|
||||
svg.selectAll("path")
|
||||
.data(d3.geom.voronoi(vertices))
|
||||
.enter().append("svg:path")
|
||||
.enter().append("path")
|
||||
.attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
|
||||
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(vertices.slice(1))
|
||||
.enter().append("svg:circle")
|
||||
.enter().append("circle")
|
||||
.attr("transform", function(d) { return "translate(" + d + ")"; })
|
||||
.attr("r", 2);
|
||||
|
||||
|
|
|
@ -32,30 +32,30 @@ var y = d3.scale.linear()
|
|||
.domain([+1.00, -1.00])
|
||||
.range([0, size[1]]);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", size[0] + padding[3] + padding[1])
|
||||
.attr("height", size[1] + padding[0] + padding[2])
|
||||
.attr("pointer-events", "all")
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + padding[3] + "," + padding[0] + ")")
|
||||
.call(d3.behavior.zoom()
|
||||
.extent([[0, size[0]], [0, size[1]], [0, Infinity]])
|
||||
.on("zoom", redraw))
|
||||
.append("svg:g");
|
||||
.append("g");
|
||||
|
||||
// Generate x-ticks…
|
||||
var gx = svg.selectAll("g.x")
|
||||
.data(x.ticks(10))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "x")
|
||||
.attr("transform", tx);
|
||||
|
||||
gx.append("svg:line")
|
||||
gx.append("line")
|
||||
.attr("stroke", stroke)
|
||||
.attr("y1", 0)
|
||||
.attr("y2", size[1]);
|
||||
|
||||
gx.append("svg:text")
|
||||
gx.append("text")
|
||||
.attr("y", size[1])
|
||||
.attr("dy", "1em")
|
||||
.attr("text-anchor", "middle")
|
||||
|
@ -64,22 +64,22 @@ gx.append("svg:text")
|
|||
// Generate y-ticks…
|
||||
var gy = svg.selectAll("g.y")
|
||||
.data(y.ticks(10))
|
||||
.enter().append("svg:g")
|
||||
.enter().append("g")
|
||||
.attr("class", "y")
|
||||
.attr("transform", ty);
|
||||
|
||||
gy.append("svg:line")
|
||||
gy.append("line")
|
||||
.attr("stroke", stroke)
|
||||
.attr("x1", 0)
|
||||
.attr("x2", size[0]);
|
||||
|
||||
gy.append("svg:text")
|
||||
gy.append("text")
|
||||
.attr("x", -3)
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", "end")
|
||||
.text(y.tickFormat(10));
|
||||
|
||||
svg.append("svg:rect")
|
||||
svg.append("rect")
|
||||
.attr("width", size[0])
|
||||
.attr("height", size[1])
|
||||
.attr("stroke", stroke)
|
||||
|
|
|
@ -32,25 +32,25 @@ var y = d3.scale.linear()
|
|||
.domain([+1.00, -1.00])
|
||||
.range([0, size[1]]);
|
||||
|
||||
var svg = d3.select("body").append("svg:svg")
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", size[0] + padding[3] + padding[1])
|
||||
.attr("height", size[1] + padding[0] + padding[2])
|
||||
.attr("pointer-events", "all")
|
||||
.append("svg:g")
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + padding[3] + "," + padding[0] + ")")
|
||||
.call(d3.behavior.zoom()
|
||||
.extent([[0, size[0]], [0, size[1]], [0, 3]])
|
||||
.on("zoom", redraw));
|
||||
|
||||
svg.append("svg:rect")
|
||||
svg.append("rect")
|
||||
.attr("width", size[0])
|
||||
.attr("height", size[1])
|
||||
.attr("stroke", "none")
|
||||
.style("fill", "#fff");
|
||||
|
||||
svg.append("svg:a")
|
||||
svg.append("a")
|
||||
.attr("xlink:href", "http://mbostock.github.com/d3/")
|
||||
.append("svg:text")
|
||||
.append("text")
|
||||
.style("font-size", "3em")
|
||||
.attr("transform", "translate(110.5, 110.5)")
|
||||
.text("D3.js");
|
||||
|
@ -71,16 +71,16 @@ function redraw() {
|
|||
gx.select("text")
|
||||
.text(fx);
|
||||
|
||||
var gxe = gx.enter().insert("svg:g", "a")
|
||||
var gxe = gx.enter().insert("g", "a")
|
||||
.attr("class", "x")
|
||||
.attr("transform", tx);
|
||||
|
||||
gxe.append("svg:line")
|
||||
gxe.append("line")
|
||||
.attr("stroke", stroke)
|
||||
.attr("y1", 0)
|
||||
.attr("y2", size[1]);
|
||||
|
||||
gxe.append("svg:text")
|
||||
gxe.append("text")
|
||||
.attr("y", size[1])
|
||||
.attr("dy", "1em")
|
||||
.attr("text-anchor", "middle")
|
||||
|
@ -96,16 +96,16 @@ function redraw() {
|
|||
gy.select("text")
|
||||
.text(fy);
|
||||
|
||||
var gye = gy.enter().insert("svg:g", "a")
|
||||
var gye = gy.enter().insert("g", "a")
|
||||
.attr("class", "y")
|
||||
.attr("transform", ty);
|
||||
|
||||
gye.append("svg:line")
|
||||
gye.append("line")
|
||||
.attr("stroke", stroke)
|
||||
.attr("x1", 0)
|
||||
.attr("x2", size[0]);
|
||||
|
||||
gye.append("svg:text")
|
||||
gye.append("text")
|
||||
.attr("x", -3)
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", "end")
|
||||
|
|
|
@ -35,15 +35,15 @@ var w = 960,
|
|||
y2 = d3.scale.linear().range([h2, 0]);
|
||||
|
||||
var svg = d3.select("body")
|
||||
.append("svg:svg")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h1 + h2);
|
||||
|
||||
// Focus view.
|
||||
var focus = svg.append("svg:g");
|
||||
var focus = svg.append("g");
|
||||
|
||||
// Context view.
|
||||
var context = svg.append("svg:g")
|
||||
var context = svg.append("g")
|
||||
.attr("transform", "translate(0," + h1 + ")");
|
||||
|
||||
d3.csv("dji.csv", function(csv) {
|
||||
|
@ -67,21 +67,21 @@ d3.csv("dji.csv", function(csv) {
|
|||
y2.domain([0, maxY]);
|
||||
|
||||
// Focus view.
|
||||
focus.append("svg:path")
|
||||
focus.append("path")
|
||||
.data([csv])
|
||||
.attr("d", d3.svg.area()
|
||||
.x(function(d) { return x(d.x); })
|
||||
.y0(y1(0))
|
||||
.y1(function(d) { return y1(d.y); }));
|
||||
|
||||
focus.append("svg:line")
|
||||
focus.append("line")
|
||||
.attr("x1", 0)
|
||||
.attr("x2", w)
|
||||
.attr("y1", y1(0))
|
||||
.attr("y2", y1(0));
|
||||
|
||||
// Context view.
|
||||
context.append("svg:rect")
|
||||
context.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h2)
|
||||
.attr("fill", "none")
|
||||
|
@ -89,7 +89,7 @@ d3.csv("dji.csv", function(csv) {
|
|||
.attr("cursor", "crosshair")
|
||||
.on("mousedown", mousedown);
|
||||
|
||||
context.append("svg:path")
|
||||
context.append("path")
|
||||
.data([csv])
|
||||
.attr("pointer-events", "none")
|
||||
.attr("d", d3.svg.area()
|
||||
|
@ -97,14 +97,14 @@ d3.csv("dji.csv", function(csv) {
|
|||
.y0(y2(0))
|
||||
.y1(function(d) { return y2(d.y); }));
|
||||
|
||||
context.append("svg:line")
|
||||
context.append("line")
|
||||
.attr("x1", 0)
|
||||
.attr("x2", w)
|
||||
.attr("y1", y2(0))
|
||||
.attr("y2", y2(0));
|
||||
|
||||
// Active focus region.
|
||||
active = context.append("svg:rect")
|
||||
active = context.append("rect")
|
||||
.attr("pointer-events", "none")
|
||||
.attr("id", "active")
|
||||
.attr("x", x(x0 = minX))
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "d3",
|
||||
"version": "2.6.0",
|
||||
"version": "2.6.1",
|
||||
"description": "A small, free JavaScript library for manipulating documents based on data.",
|
||||
"keywords": [
|
||||
"dom",
|
||||
|
|
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче