<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div> Hello World! </div> <script> alert(d3.select("div").text()); </script> </body> </html>
<html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> svg rect { fill: gray; } svg text { fill: yellow; font: 12px sans-serif; text-anchor: end; } </style> </head> <body> <script> var data = [10, 5, 12, 15]; var width = 300 scaleFactor = 20, barHeight = 30; var graph = d3.select("body") .append("svg") .attr("width", width) .attr("height", barHeight * data.length); var bar = graph.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); bar.append("rect").attr("width", function(d) { return d * scaleFactor; }) .attr("height", barHeight - 1); bar.append("text") .attr("x", function(d) { return (d*scaleFactor); }) .attr("y", barHeight / 2) .attr("dy", ".35em") .text(function(d) { return d; }); </script> </body> </html>
<!-- source is https://bl.ocks.org/mbostock/4060366 --> <!DOCTYPE html> <html> <meta charset="utf-8"> <style> .axis path, .axis line { stroke: teal; shape-rendering: crispEdges; } .axis text { font-family: Optima, Futura, sans-serif; font-weight: bold; font-size: 14px; fill: teal; } </style> <body> <p>Click here to generate as many circles</p> <svg width="960" height="500"></svg> <script src="https://d3js.org/d3.v5.min.js"></script> <script> //var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150]]; var dataset = []; var numDataPoints = 50; var xRange = Math.random() * 1000; var yRange = Math.random() * 1000; for(i = 0; i < numDataPoints; i++) { var newNumber1 = Math.floor(Math.random() * xRange); var newNumber2 = Math.floor(Math.random() * yRange); dataset.push([newNumber1, newNumber2]); } var w = 500; var h = 300; var padding = 30; var xScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d){ return d[0]; })]) .range([padding, w - padding * 2]); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d){ return d[1]; })]) .range([h - padding, padding]); var aScale = d3.scaleSqrt() .domain([0, d3.max(dataset, function(d){ return d[1]; })]) .range([0, 10]); //Define X axis var xAxis = d3.axisBottom() .scale(xScale) .ticks(5); //.tickValues([0, 100, 250, 600]); //Define Y axis var yAxis = d3.axisLeft() .scale(yScale) .ticks(5); var svg = d3.select("svg") .attr("width", w) .attr("height", h); svg.append("clipPath") .attr("id", "chart-area") .append("rect") .attr("x", padding) .attr("y", padding) .attr("width", w - padding * 3) .attr("height", h - padding * 2); svg.append("g") .attr("id", "circle") .attr("clip-path", "url(#chart-area)") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r", function(d) { //return aScale(d[1]); return 2; }); // svg.selectAll("text") // .data(dataset) // .enter() // .append("text") // .attr("x", function(d) { // return xScale(d[0]); // }) // .attr("y", function(d) { // return yScale(d[1]); // }) // .text(function(d) { // return d[0] + "," + d[1]; // }) // .attr("font-family", "sans-serif") // .attr("font-size", "11px") // .attr("fill", "red"); //Create X Axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0, " + (h - padding) +")") .call(xAxis); //Create Y Axis svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + padding +",0)") .call(yAxis); d3.select("p") .on("click", function() { var dataset = []; var xRange = Math.random() * 1000; var yRange = Math.random() * 1000; for(i = 0; i < numDataPoints; i++) { var newNumber1 = Math.floor(Math.random() * xRange); var newNumber2 = Math.floor(Math.random() * yRange); dataset.push([newNumber1, newNumber2]); } // Update scale domains xScale.domain([0, d3.max(dataset, function(d){ return d[0]; })]); yScale.domain([0, d3.max(dataset, function(d){ return d[1]; })]); // Update circles svg.selectAll("circle") .data(dataset) .transition() .duration(1000) .on("start", function() { d3.select(this) .attr("fill", "magenta") .attr("r", 7) }) .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .on("end", function() { d3.select(this) .transition() .duration(1000) .attr("fill", "black") .attr("r", 2); }); // .transition() // .duration(1000) // .attr("fill", "black") // .attr("r", 2) svg.select(".x.axis") .transition() .duration(1000) .call(xAxis); svg.select(".y.axis") .transition() .duration(1000) .call(yAxis); }); </script> </body> </html>
<!-- source is https://bl.ocks.org/mbostock/4060366 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> </head> <body> <svg width="960" height="500"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"); var width = +svg.attr("width"); var height = +svg.attr("height"); var data; // a global d3.json("https://tipiciudadano.es/api/v1/dicts", function(error, json) { if (error) return console.warn(error); data = json; visualizeit(); }); function visualizeit(){ var node = svg.selectAll(".node") .data(data["dicts"]["tipi"]) .enter().append("g") .attr("class", "node") .attr("transform", function(d,i) { return "translate(" + Math.sin(i/10)*100 + 200 + "," + Math.sin(i/10)*100 + 200 + ")"; }); node.append("circle") .attr("id", function(d) { return d; }) .attr("r", 10) .style("fill", "blue"); }; </script> </body> </html>
<!-- source is https://bl.ocks.org/mbostock/4060366 --> <!DOCTYPE html> <htm> <meta charset="utf-8"> <style> .links { stroke: #000; stroke-opacity: 0.2; } .polygons { fill: none; stroke: #000; } .polygons :first-child { fill: #f00; } .sites { fill: #000; stroke: #fff; } .sites :first-child { fill: #fff; } </style> <body> <svg width="960" height="500"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script type="application/json" id="data"> { "clustering": [ { "cohesion_clusters": [ -10.224979204176277, -9.86676219444134, -1.2459418492874201, -2.737468158839746 ] } ] } </script> <script> var dataD = JSON.parse(document.getElementById('data').innerHTML); console.log(dataD); </script> </body> </html>
<html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <svg width = "300" height = "300"> <rect x = "20" y = "20" width = "60" height = "60" fill = "green" transform = "translate(30 30)"> </rect> </svg> </body> </html>
<!DOCTYPE html> <meta charset="utf-8"> <style type="text/css"> svg { font-family: "Helvetica Neue", Helvetica; } .line { fill: none; stroke: #000; stroke-width: 2px; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> var m = [20, 20, 30, 20], w = 960 - m[1] - m[3], h = 500 - m[0] - m[2]; var x, y, duration = 1500, delay = 500; var color = d3.scale.category10(); var svg = d3.select("body").append("svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); var stocks, symbols; // A line generator, for the dark stroke. var line = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.price); }); // A line generator, for the dark stroke. var axis = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.date); }) .y(h); // A area generator, for the dark stroke. var area = d3.svg.area() .interpolate("basis") .x(function(d) { return x(d.date); }) .y1(function(d) { return y(d.price); }); d3.csv("stocks.csv", function(data) { var parse = d3.time.format("%b %Y").parse; // Nest stock values by symbol. symbols = d3.nest() .key(function(d) { return d.symbol; }) .entries(stocks = data); // Parse dates and numbers. We assume values are sorted by date. // Also compute the maximum price per symbol, needed for the y-domain. symbols.forEach(function(s) { s.values.forEach(function(d) { d.date = parse(d.date); d.price = +d.price; }); s.maxPrice = d3.max(s.values, function(d) { return d.price; }); s.sumPrice = d3.sum(s.values, function(d) { return d.price; }); }); // Sort by maximum price, descending. symbols.sort(function(a, b) { return b.maxPrice - a.maxPrice; }); var g = svg.selectAll("g") .data(symbols) .enter().append("g") .attr("class", "symbol"); setTimeout(lines, duration); }); function lines() { x = d3.time.scale().range([0, w - 60]); y = d3.scale.linear().range([h / 4 - 20, 0]); // Compute the minimum and maximum date across symbols. x.domain([ d3.min(symbols, function(d) { return d.values[0].date; }), d3.max(symbols, function(d) { return d.values[d.values.length - 1].date; }) ]); var g = svg.selectAll(".symbol") .attr("transform", function(d, i) { return "translate(0," + (i * h / 4 + 10) + ")"; }); g.each(function(d) { var e = d3.select(this); e.append("path") .attr("class", "line"); e.append("circle") .attr("r", 5) .style("fill", function(d) { return color(d.key); }) .style("stroke", "#000") .style("stroke-width", "2px"); e.append("text") .attr("x", 12) .attr("dy", ".31em") .text(d.key); }); function draw(k) { g.each(function(d) { var e = d3.select(this); y.domain([0, d.maxPrice]); e.select("path") .attr("d", function(d) { return line(d.values.slice(0, k + 1)); }); e.selectAll("circle, text") .data(function(d) { return [d.values[k], d.values[k]]; }) .attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.price) + ")"; }); }); } var k = 1, n = symbols[0].values.length; d3.timer(function() { draw(k); if ((k += 2) >= n - 1) { draw(n - 1); setTimeout(horizons, 500); return true; } }); } function horizons() { svg.insert("defs", ".symbol") .append("clipPath") .attr("id", "clip") .append("rect") .attr("width", w) .attr("height", h / 4 - 20); var color = d3.scale.ordinal() .range(["#c6dbef", "#9ecae1", "#6baed6"]); var g = svg.selectAll(".symbol") .attr("clip-path", "url(#clip)"); area .y0(h / 4 - 20); g.select("circle").transition() .duration(duration) .attr("transform", function(d) { return "translate(" + (w - 60) + "," + (-h / 4) + ")"; }) .remove(); g.select("text").transition() .duration(duration) .attr("transform", function(d) { return "translate(" + (w - 60) + "," + (h / 4 - 20) + ")"; }) .attr("dy", "0em"); g.each(function(d) { y.domain([0, d.maxPrice]); d3.select(this).selectAll(".area") .data(d3.range(3)) .enter().insert("path", ".line") .attr("class", "area") .attr("transform", function(d) { return "translate(0," + (d * (h / 4 - 20)) + ")"; }) .attr("d", area(d.values)) .style("fill", function(d, i) { return color(i); }) .style("fill-opacity", 1e-6); y.domain([0, d.maxPrice / 3]); d3.select(this).selectAll(".line").transition() .duration(duration) .attr("d", line(d.values)) .style("stroke-opacity", 1e-6); d3.select(this).selectAll(".area").transition() .duration(duration) .style("fill-opacity", 1) .attr("d", area(d.values)) .each("end", function() { d3.select(this).style("fill-opacity", null); }); }); setTimeout(areas, duration + delay); } function areas() { var g = svg.selectAll(".symbol"); axis .y(h / 4 - 21); g.select(".line") .attr("d", function(d) { return axis(d.values); }); g.each(function(d) { y.domain([0, d.maxPrice]); d3.select(this).select(".line").transition() .duration(duration) .style("stroke-opacity", 1) .each("end", function() { d3.select(this).style("stroke-opacity", null); }); d3.select(this).selectAll(".area") .filter(function(d, i) { return i; }) .transition() .duration(duration) .style("fill-opacity", 1e-6) .attr("d", area(d.values)) .remove(); d3.select(this).selectAll(".area") .filter(function(d, i) { return !i; }) .transition() .duration(duration) .style("fill", color(d.key)) .attr("d", area(d.values)); }); svg.select("defs").transition() .duration(duration) .remove(); g.transition() .duration(duration) .each("end", function() { d3.select(this).attr("clip-path", null); }); setTimeout(stackedArea, duration + delay); } function stackedArea() { var stack = d3.layout.stack() .values(function(d) { return d.values; }) .x(function(d) { return d.date; }) .y(function(d) { return d.price; }) .out(function(d, y0, y) { d.price0 = y0; }) .order("reverse"); stack(symbols); y .domain([0, d3.max(symbols[0].values.map(function(d) { return d.price + d.price0; }))]) .range([h, 0]); line .y(function(d) { return y(d.price0); }); area .y0(function(d) { return y(d.price0); }) .y1(function(d) { return y(d.price0 + d.price); }); var t = svg.selectAll(".symbol").transition() .duration(duration) .attr("transform", "translate(0,0)") .each("end", function() { d3.select(this).attr("transform", null); }); t.select("path.area") .attr("d", function(d) { return area(d.values); }); t.select("path.line") .style("stroke-opacity", function(d, i) { return i < 3 ? 1e-6 : 1; }) .attr("d", function(d) { return line(d.values); }); t.select("text") .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; }); setTimeout(streamgraph, duration + delay); } function streamgraph() { var stack = d3.layout.stack() .values(function(d) { return d.values; }) .x(function(d) { return d.date; }) .y(function(d) { return d.price; }) .out(function(d, y0, y) { d.price0 = y0; }) .order("reverse") .offset("wiggle"); stack(symbols); line .y(function(d) { return y(d.price0); }); var t = svg.selectAll(".symbol").transition() .duration(duration); t.select("path.area") .attr("d", function(d) { return area(d.values); }); t.select("path.line") .style("stroke-opacity", 1e-6) .attr("d", function(d) { return line(d.values); }); t.select("text") .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; }); setTimeout(overlappingArea, duration + delay); } function overlappingArea() { var g = svg.selectAll(".symbol"); line .y(function(d) { return y(d.price0 + d.price); }); g.select(".line") .attr("d", function(d) { return line(d.values); }); y .domain([0, d3.max(symbols.map(function(d) { return d.maxPrice; }))]) .range([h, 0]); area .y0(h) .y1(function(d) { return y(d.price); }); line .y(function(d) { return y(d.price); }); var t = g.transition() .duration(duration); t.select(".line") .style("stroke-opacity", 1) .attr("d", function(d) { return line(d.values); }); t.select(".area") .style("fill-opacity", .5) .attr("d", function(d) { return area(d.values); }); t.select("text") .attr("dy", ".31em") .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price) + ")"; }); svg.append("line") .attr("class", "line") .attr("x1", 0) .attr("x2", w - 60) .attr("y1", h) .attr("y2", h) .style("stroke-opacity", 1e-6) .transition() .duration(duration) .style("stroke-opacity", 1); setTimeout(groupedBar, duration + delay); } function groupedBar() { x = d3.scale.ordinal() .domain(symbols[0].values.map(function(d) { return d.date; })) .rangeBands([0, w - 60], .1); var x1 = d3.scale.ordinal() .domain(symbols.map(function(d) { return d.key; })) .rangeBands([0, x.rangeBand()]); var g = svg.selectAll(".symbol"); var t = g.transition() .duration(duration); t.select(".line") .style("stroke-opacity", 1e-6) .remove(); t.select(".area") .style("fill-opacity", 1e-6) .remove(); g.each(function(p, j) { d3.select(this).selectAll("rect") .data(function(d) { return d.values; }) .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()) .attr("height", function(d) { return h - y(d.price); }) .style("fill", color(p.key)) .style("fill-opacity", 1e-6) .transition() .duration(duration) .style("fill-opacity", 1); }); setTimeout(stackedBar, duration + delay); } function stackedBar() { x.rangeRoundBands([0, w - 60], .1); var stack = d3.layout.stack() .values(function(d) { return d.values; }) .x(function(d) { return d.date; }) .y(function(d) { return d.price; }) .out(function(d, y0, y) { d.price0 = y0; }) .order("reverse"); var g = svg.selectAll(".symbol"); stack(symbols); y .domain([0, d3.max(symbols[0].values.map(function(d) { return d.price + d.price0; }))]) .range([h, 0]); var t = g.transition() .duration(duration / 2); t.select("text") .delay(symbols[0].values.length * 10) .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; }); t.selectAll("rect") .delay(function(d, i) { return i * 10; }) .attr("y", function(d) { return y(d.price0 + d.price); }) .attr("height", function(d) { return h - y(d.price); }) .each("end", function() { d3.select(this) .style("stroke", "#fff") .style("stroke-opacity", 1e-6) .transition() .duration(duration / 2) .attr("x", function(d) { return x(d.date); }) .attr("width", x.rangeBand()) .style("stroke-opacity", 1); }); setTimeout(transposeBar, duration + symbols[0].values.length * 10 + delay); } function transposeBar() { x .domain(symbols.map(function(d) { return d.key; })) .rangeRoundBands([0, w], .2); y .domain([0, d3.max(symbols.map(function(d) { return d3.sum(d.values.map(function(d) { return d.price; })); }))]); var stack = d3.layout.stack() .x(function(d, i) { return i; }) .y(function(d) { return d.price; }) .out(function(d, y0, y) { d.price0 = y0; }); stack(d3.zip.apply(null, symbols.map(function(d) { return d.values; }))); // transpose! var g = svg.selectAll(".symbol"); var t = g.transition() .duration(duration / 2); t.selectAll("rect") .delay(function(d, i) { return i * 10; }) .attr("y", function(d) { return y(d.price0 + d.price) - 1; }) .attr("height", function(d) { return h - y(d.price) + 1; }) .attr("x", function(d) { return x(d.symbol); }) .attr("width", x.rangeBand()) .style("stroke-opacity", 1e-6); t.select("text") .attr("x", 0) .attr("transform", function(d) { return "translate(" + (x(d.key) + x.rangeBand() / 2) + "," + h + ")"; }) .attr("dy", "1.31em") .each("end", function() { d3.select(this).attr("x", null).attr("text-anchor", "middle"); }); svg.select("line").transition() .duration(duration) .attr("x2", w); setTimeout(donut, duration / 2 + symbols[0].values.length * 10 + delay); } function donut() { var g = svg.selectAll(".symbol"); g.selectAll("rect").remove(); var pie = d3.layout.pie() .value(function(d) { return d.sumPrice; }); var arc = d3.svg.arc(); g.append("path") .style("fill", function(d) { return color(d.key); }) .data(function() { return pie(symbols); }) .transition() .duration(duration) .tween("arc", arcTween); g.select("text").transition() .duration(duration) .attr("dy", ".31em"); svg.select("line").transition() .duration(duration) .attr("y1", 2 * h) .attr("y2", 2 * h) .remove(); function arcTween(d) { var path = d3.select(this), text = d3.select(this.parentNode.appendChild(this.previousSibling)), x0 = x(d.data.key), y0 = h - y(d.data.sumPrice); return function(t) { var r = h / 2 / Math.min(1, t + 1e-3), a = Math.cos(t * Math.PI / 2), xx = (-r + (a) * (x0 + x.rangeBand()) + (1 - a) * (w + h) / 2), yy = ((a) * h + (1 - a) * h / 2), f = { innerRadius: r - x.rangeBand() / (2 - a), outerRadius: r, startAngle: a * (Math.PI / 2 - y0 / r) + (1 - a) * d.startAngle, endAngle: a * (Math.PI / 2) + (1 - a) * d.endAngle }; path.attr("transform", "translate(" + xx + "," + yy + ")"); path.attr("d", arc(f)); text.attr("transform", "translate(" + arc.centroid(f) + ")translate(" + xx + "," + yy + ")rotate(" + ((f.startAngle + f.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")"); }; } setTimeout(donutExplode, duration + delay); } function donutExplode() { var r0a = h / 2 - x.rangeBand() / 2, r1a = h / 2, r0b = 2 * h - x.rangeBand() / 2, r1b = 2 * h, arc = d3.svg.arc(); svg.selectAll(".symbol path") .each(transitionExplode); function transitionExplode(d, i) { d.innerRadius = r0a; d.outerRadius = r1a; d3.select(this).transition() .duration(duration / 2) .tween("arc", tweenArc({ innerRadius: r0b, outerRadius: r1b })); } function tweenArc(b) { return function(a) { var path = d3.select(this), text = d3.select(this.nextSibling), i = d3.interpolate(a, b); for (var key in b) a[key] = b[key]; // update data return function(t) { var a = i(t); path.attr("d", arc(a)); text.attr("transform", "translate(" + arc.centroid(a) + ")translate(" + w / 2 + "," + h / 2 +")rotate(" + ((a.startAngle + a.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")"); }; } } setTimeout(function() { svg.selectAll("*").remove(); svg.selectAll("g").data(symbols).enter().append("g").attr("class", "symbol"); lines(); }, duration); } </script>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more