<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> body { font-family: Arial; } </style> </head> <body> <ul id = "list"> <li></li> <li></li> </ul> <input type = "button" name = "remove" value = "Remove fourth value" onclick = "javascript:remove()" /> <script> d3.select("#list").selectAll("li") .data([10, 20, 30, 25, 15]) .text(function(d) { return "This is pre-existing element and the value is " + d; }) .enter() .append("li") .text(function(d) { return "This is dynamically created element and the value is " + d; }); function remove() { d3.selectAll("li") .data([10, 20, 30, 15]) .exit() .remove() } </script> </body> </html>
<!DOCTYPE html> <meta charset = "UTF-8"> <head> <title>SVG path line Generator</title> </head> <style> path { fill: green; stroke: #aaa; } </style> <body> <svg width = "600" height = "100"> <path transform = "translate(200, 0)" /> </svg> <script src = "https://d3js.org/d3.v4.min.js"></script> <script> var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]]; var lineGenerator = d3.line(); var pathString = lineGenerator(data); d3.select('path').attr('d', pathString); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> body { font-family: Arial; } </style> </head> <body> <div id = "svgcontainer"> <svg width = "500" height = "500"> <line x1 = "300" x2 = "300" style = "stroke:rgb(255,0,0); stroke-width:5"/> </svg> </div> <p></p> <p></p> </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: #000; font: 12px sans-serif; text-anchor: end; } .xaxis,.yaxis{ stroke:#000; stroke-width:1; } .line{ stroke:#f00; stroke-width:1; } </style> </head> <body> <script> var data = [{year:2015,value:10},{year:2016,value:5},{year:2017,value:12},{year:2018,value:15}]; var height = 400 scaleFactor = 20, barwidth = 30, offset = 10; var graph = d3.select("body") .append("svg") .attr("width", (barwidth * data.length)+(offset*(data.length+1))) .attr("height", height+(offset*3)); // set the ranges var x = d3.scaleTime().range([0, (barwidth * data.length)+(offset*(data.length+1))]); var y = d3.scaleLinear().range([height, 0]); var valueline = d3.line() .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.value); }); var yaxis = graph.append("line") .attr("x1",0) .attr("x2",0) .attr("y1",0) .attr("y2",height) .classed("yaxis",true); var yaxis2 = graph.append("line") .attr("x1",(barwidth * data.length)+(offset*(data.length+1))) .attr("x2",(barwidth * data.length)+(offset*(data.length+1))) .attr("y1",0) .attr("y2",height) .classed("yaxis",true); var xaxis = graph.append("line") .attr("x1",0) .attr("x2",(barwidth * data.length)+(offset*(data.length+1))) .attr("y1",height) .attr("y2",height) .classed("xaxis",true); var bar = graph.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(" + i * barwidth + ",0)"; }); bar.append("rect").attr("y",function(d){ return height-(d.value * scaleFactor); }) .attr("x",function(d,i){ return offset+(i*offset); }) .attr("height", function(d) { return d.value * scaleFactor; }) .attr("width", barwidth - 1); bar.append("text") .attr("x", function(d,i) { return offset+(i*offset)+(barwidth/2); }) .attr("y", height+(offset*2)) .attr("dx", ".35em") .text(function(d) { return d; }); bar.append("line") .attr("x1", function(d,i) { return offset+(i*offset); }) .attr("x2", function(d,i) { return offset+(i*offset)+(barwidth); }) .attr("y1",function(d){return height-(d*scaleFactor)}) .attr("y2",function(d){return height-(d*scaleFactor)}) .classed("line",true); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Household monthly electricity consumption</title> <style> body { font: 12px sans-serif; } svg { margin: 0px auto; display: block; } path.arc { opacity: 0.9; transition: opacity 0.5s; } path.arc:hover { opacity: 0.7; } .axis line, .axis circle { stroke: #cccccc; stroke-width: 1px } .axis circle { fill: none; } .r.axis text { text-anchor: end } .tooltip { position: absolute; display: none; background: rgba(0, 0, 0, 0.6); border-radius: 3px; box-shadow: -3px 3px 15px #888; color: white; padding: 6px; } </style> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <script> const width = 960, height = 500, chartRadius = height / 2 - 40; const color = d3.scaleOrdinal(d3.schemeCategory10); let svg = d3.select('body').append('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); let tooltip = d3.select('body').append('div') .attr('class', 'tooltip'); const PI = Math.PI, arcMinRadius = 10, arcPadding = 10, labelPadding = -5, numTicks = 10; d3.csv('energy.csv', (error, data) => { let scale = d3.scaleLinear() .domain([0, d3.max(data, d => d.value) * 1.1]) .range([0, 2 * PI]); let ticks = scale.ticks(numTicks).slice(0, -1); let keys = data.map((d, i) => d.name); //number of arcs const numArcs = keys.length; const arcWidth = (chartRadius - arcMinRadius - numArcs * arcPadding) / numArcs; let arc = d3.arc() .innerRadius((d, i) => getInnerRadius(i)) .outerRadius((d, i) => getOuterRadius(i)) .startAngle(0) .endAngle((d, i) => scale(d)) let radialAxis = svg.append('g') .attr('class', 'r axis') .selectAll('g') .data(data) .enter().append('g'); radialAxis.append('circle') .attr('r', (d, i) => getOuterRadius(i) + arcPadding); radialAxis.append('text') .attr('x', labelPadding) .attr('y', (d, i) => -getOuterRadius(i) + arcPadding) .text(d => d.name); let axialAxis = svg.append('g') .attr('class', 'a axis') .selectAll('g') .data(ticks) .enter().append('g') .attr('transform', d => 'rotate(' + (rad2deg(scale(d)) - 90) + ')'); axialAxis.append('line') .attr('x2', chartRadius); axialAxis.append('text') .attr('x', chartRadius + 10) .style('text-anchor', d => (scale(d) >= PI && scale(d) < 2 * PI ? 'end' : null)) .attr('transform', d => 'rotate(' + (90 - rad2deg(scale(d))) + ',' + (chartRadius + 10) + ',0)') .text(d => d); //data arcs let arcs = svg.append('g') .attr('class', 'data') .selectAll('path') .data(data) .enter().append('path') .attr('class', 'arc') .style('fill', (d, i) => color(i)) arcs.transition() .delay((d, i) => i * 200) .duration(1000) .attrTween('d', arcTween); arcs.on('mousemove', showTooltip) arcs.on('mouseout', hideTooltip) function arcTween(d, i) { let interpolate = d3.interpolate(0, d.value); return t => arc(interpolate(t), i); } function showTooltip(d) { tooltip.style('left', (d3.event.pageX + 10) + 'px') .style('top', (d3.event.pageY - 25) + 'px') .style('display', 'inline-block') .html(d.value); } function hideTooltip() { tooltip.style('display', 'none'); } function rad2deg(angle) { return angle * 180 / PI; } function getInnerRadius(index) { return arcMinRadius + (numArcs - (index + 1)) * (arcWidth + arcPadding); } function getOuterRadius(index) { return getInnerRadius(index) + arcWidth; } }); </script> </body> </html>
<!DOCTYPE html> <html lang = "en"> <head> <title>My Document</title> </head> <body> <div> <svg width = "500" height = "500"> <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect> </svg> </div> </body> </html>
<html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <script> var width = 400; var height = 400; var data = [10, 20, 30]; var colors = ['green', 'purple', 'yellow']; var svg = d3 .select("body") .append("svg") .attr("width", width) .attr("height", height); var g = svg.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0,0)"; }) g.append("circle").attr("cx", function(d, i) { return i*75 + 50; }) .attr("cy", function(d, i) { return 75; }) .attr("r", function(d) { return d*1.5; }) .attr("fill", function(d, i){ return colors[i]; }) g.append("text").attr("x", function(d, i) { return i * 75 + 25; }) .attr("y", 80) .attr("stroke", "teal") .attr("font-size", "10px") .attr("font-family", "sans-serif").text(function(d) { return d; }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> body { font-family: Arial; } </style> </head> <body> <ul id = "list"> <li></li> <li></li> </ul> <input type = "button" name = "remove" value = "Remove fourth value" onclick = "javascript:remove()" /> <script> d3.select("#list").selectAll("li") .data([10, 20, 30, 25, 15]) .text(function(d) { return "This is pre-existing element and the value is " + d; }) .enter() .append("li") .text(function(d) { return "This is dynamically created element and the value is " + d; }); function remove() { d3.selectAll("li") .data([10, 20, 30, 15]) .exit() .remove() } </script> </body> </html>
<!DOCTYPE html> <meta charset="utf-8"> <style> .node circle { fill: #999; } .node text { font: 10px sans-serif; } .node--internal circle { fill: #555; } .node--internal text { text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; } .link { fill: none; stroke: #555; stroke-opacity: 0.4; stroke-width: 1.5px; } form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; position: absolute; left: 10px; top: 10px; } label { display: block; } </style> <form> <label><input type="radio" name="mode" value="cluster" checked> Dendrogram</label> <label><input type="radio" name="mode" value="tree"> Tree</label> </form> <svg width="960" height="2400"></svg> <script src="d3.min.js"></script> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), g = svg.append("g").attr("transform", "translate(40,0)"); var tree = d3.tree() .size([height - 400, width - 160]); var cluster = d3.cluster() .size([height, width - 160]); var stratify = d3.stratify() .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); }); d3.csv("flare.csv", function(error, data) { if (error) throw error; var root = stratify(data) .sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); }); cluster(root); var link = g.selectAll(".link") .data(root.descendants().slice(1)) .enter().append("path") .attr("class", "link") .attr("d", diagonal); var node = g.selectAll(".node") .data(root.descendants()) .enter().append("g") .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); node.append("circle") .attr("r", 2.5); node.append("text") .attr("dy", 3) .attr("x", function(d) { return d.children ? -8 : 8; }) .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); }); d3.selectAll("input") .on("change", changed); var timeout = setTimeout(function() { d3.select("input[value=\"tree\"]") .property("checked", true) .dispatch("change"); }, 1000); function changed() { timeout = clearTimeout(timeout); (this.value === "tree" ? tree : cluster)(root); var t = d3.transition().duration(750); node.transition(t).attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); link.transition(t).attr("d", diagonal); } }); function diagonal(d) { return "M" + d.y + "," + d.x + "C" + (d.parent.y + 100) + "," + d.x + " " + (d.parent.y + 100) + "," + d.parent.x + " " + d.parent.y + "," + d.parent.x; } </script> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more