<!-- 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> var svg = d3.select("svg").on("touchmove mousemove", moved), width = +svg.attr("width"), height = +svg.attr("height"); var sites = d3.range(100) .map(function(d) { return [Math.random() * width, Math.random() * height]; }); var voronoi = d3.voronoi() .extent([[-1, -1], [width + 1, height + 1]]); var polygon = svg.append("g") .attr("class", "polygons") .selectAll("path") .data(voronoi.polygons(sites)) .enter().append("path") .call(redrawPolygon); var link = svg.append("g") .attr("class", "links") .selectAll("line") .data(voronoi.links(sites)) .enter().append("line") .call(redrawLink); var site = svg.append("g") .attr("class", "sites") .selectAll("circle") .data(sites) .enter().append("circle") .attr("r", 2.5) .call(redrawSite); function moved() { sites[0] = d3.mouse(this); redraw(); } function redraw() { var diagram = voronoi(sites); polygon = polygon.data(diagram.polygons()).call(redrawPolygon); link = link.data(diagram.links()), link.exit().remove(); link = link.enter().append("line").merge(link).call(redrawLink); site = site.data(sites).call(redrawSite); } function redrawPolygon(polygon) { polygon .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; }); } function redrawLink(link) { link .attr("x1", function(d) { return d.source[0]; }) .attr("y1", function(d) { return d.source[1]; }) .attr("x2", function(d) { return d.target[0]; }) .attr("y2", function(d) { return d.target[1]; }); } function redrawSite(site) { site .attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }); } </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; }); d3.select("body") .append("svg") .attr("width", 600) .attr("height", 60 * data.length) .selectAll("g") .data(data) .enter() .append("g") .attr("transform", (d, i) => `translate(0,${i * 60})`) .append("rect") .attr("height", 60 - 2) .attr("width", d => 40 * d) .append("text") .attr("x", d => 43 * d) .attr("y", 30) .attr("dy", ".35em") .text(d => d); </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> var svg = d3.select("svg").on("touchmove mousemove", moved), width = +svg.attr("width"), height = +svg.attr("height"); var sites = d3.range(100) .map(function(d) { return [Math.random() * width, Math.random() * height]; }); var voronoi = d3.voronoi() .extent([[-1, -1], [width + 1, height + 1]]); var polygon = svg.append("g") .attr("class", "polygons") .selectAll("path") .data(voronoi.polygons(sites)) .enter().append("path") .call(redrawPolygon); var link = svg.append("g") .attr("class", "links") .selectAll("line") .data(voronoi.links(sites)) .enter().append("line") .call(redrawLink); var site = svg.append("g") .attr("class", "sites") .selectAll("circle") .data(sites) .enter().append("circle") .attr("r", 2.5) .call(redrawSite); function moved() { sites[0] = d3.mouse(this); redraw(); } function redraw() { var diagram = voronoi(sites); polygon = polygon.data(diagram.polygons()).call(redrawPolygon); link = link.data(diagram.links()), link.exit().remove(); link = link.enter().append("line").merge(link).call(redrawLink); site = site.data(sites).call(redrawSite); } function redrawPolygon(polygon) { polygon .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; }); } function redrawLink(link) { link .attr("x1", function(d) { return d.source[0]; }) .attr("y1", function(d) { return d.source[1]; }) .attr("x2", function(d) { return d.target[0]; }) .attr("y2", function(d) { return d.target[1]; }); } function redrawSite(site) { site .attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }); } </script> </body> </html>
<html> <head> <title>Learn D3 in 5 minutes</title> </head> <body> <h3>Today is a beautiful day!!</h3> <script src='https://d3js.org/d3.v4.min.js'></script> <ul></ul> <svg></svg> <script> var fruits = ['apple', 'mango', 'banana', 'orange']; d3.select('ul') .selectAll('li') .data(fruits) .enter() .append('li') .text(function(d) { return d; }); //Select SVG element /*var svg = d3.select('svg'); //Create rectangle element inside SVG svg.append('rect') .attr('x', 60) .attr('y', 50) .attr('width', 200) .attr('height', 100) .attr('fill', 'yellow');*/ // javascript var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160]; var svgWidth = 500, svgHeight = 300, barPadding = 30; var barWidth = (svgWidth / dataset.length); var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight); /*var barChart = svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("y", function(d) { console.log(d); return svgHeight - d }) .attr("fill","yellow") .attr("height", function(d) { return d; }) .attr("width", barWidth - barPadding) .attr("transform", function (d, i) { var translate = [barWidth * i, 0]; return "translate("+ translate +") rotate(4)"; });*/ var cir=[20] var circle=svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx","90") .attr("cy","90") .attr("r","30") .attr("fill","yellow") </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> var svg = d3.select("svg").on("touchmove mousemove", moved), width = +svg.attr("width"), height = +svg.attr("height"); var sites = d3.range(100) .map(function(d) { return [Math.random() * width, Math.random() * height]; }); var voronoi = d3.voronoi() .extent([[-1, -1], [width + 1, height + 1]]); var polygon = svg.append("g") .attr("class", "polygons") .selectAll("path") .data(voronoi.polygons(sites)) .enter().append("path") .call(redrawPolygon); var link = svg.append("g") .attr("class", "links") .selectAll("line") .data(voronoi.links(sites)) .enter().append("line") .call(redrawLink); var site = svg.append("g") .attr("class", "sites") .selectAll("circle") .data(sites) .enter().append("circle") .attr("r", 2.5) .call(redrawSite); function moved() { sites[0] = d3.mouse(this); redraw(); } function redraw() { var diagram = voronoi(sites); polygon = polygon.data(diagram.polygons()).call(redrawPolygon); link = link.data(diagram.links()), link.exit().remove(); link = link.enter().append("line").merge(link).call(redrawLink); site = site.data(sites).call(redrawSite); } function redrawPolygon(polygon) { polygon .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; }); } function redrawLink(link) { link .attr("x1", function(d) { return d.source[0]; }) .attr("y1", function(d) { return d.source[1]; }) .attr("x2", function(d) { return d.target[0]; }) .attr("y2", function(d) { return d.target[1]; }); } function redrawSite(site) { site .attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }); } </script> </body> </html>
<!DOCTYPE html> <meta charset="UTF-8"> <style> /* Make the badge float in the top right corner of the button */ .notification { background-color: #fa3e3e; border-radius: 2px; color: white; padding: 1px 3px; font-size: 10px; position: absolute; /* Position the badge within the relatively positioned button */ top: 0; right: 0; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .node text { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 2px; } </style> <body> <!-- load the d3.js library --> <script src="https://d3js.org/d3.v4.min.js"></script> <script> // Set the dimensions and margins of the diagram var margin = {top: 20, right: 90, bottom: 30, left: 90}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // append the svg object to the body of the page // appends a 'group' element to 'svg' // moves the 'group' element to the top left margin var svg = d3.select("body").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var i = 0, duration = 750, root; // declares a tree layout and assigns the size var treemap = d3.tree().size([height, width]); var treeDataText = { "name": "Top Level", "children": [ { "name": "Level 2: A", "value": 1, "children": [ { "name": "Son of A", "value": 3 }, { "name": "Daughter of A", "value": 5 }, { "name": "Another Son of A", "value": 55 } ] }, { "name": "Level 2: B", "value": 15 } ] }; var treeData = { "name": "Top Level", "value": 2, "type": "black", "level": "red", "children": [ { "name": "Level 2: A", "value": 2, "type": "grey", "level": "red", "children": [ { "name": "Son of A", "value": 0, "type": "steelblue", "level": "orange" }, { "name": "Daughter of A", "value": 0, "type": "steelblue", "level": "red" } ] }, { "name": "Level 2: B", "value": 0, "type": "grey", "level": "green" } ] }; // Assigns parent, children, height, depth root = d3.hierarchy(treeData, function(d) { return d.children; }); root.x0 = height / 2; root.y0 = 0; // Collapse after the second level root.children.forEach(collapse); update(root); // Collapse the node and all it's children function collapse(d) { if(d.children) { d._children = d.children d._children.forEach(collapse) d.children = null } } function update(source) { // Assigns the x and y position for the nodes var treeData = treemap(root); // Compute the new tree layout. var nodes = treeData.descendants(), links = treeData.descendants().slice(1); // Normalize for fixed-depth. nodes.forEach(function(d){ d.y = d.depth * 180}); // ****************** Nodes section *************************** // Update the nodes... var node = svg.selectAll('g.node') .data(nodes, function(d) {return d.id || (d.id = ++i); }); // Enter any new modes at the parent's previous position. var nodeEnter = node.enter().append('g') .attr('class', 'node') .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) // Add Circle for the nodes nodeEnter.append('circle') .attr('class', 'node') .attr('r', 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }) // Add labels for the nodes nodeEnter.append('text') .attr("dy", ".35em") .attr("x", function(d) { return d.children || d._children ? -13 : 13; }) .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.data.name; }); // Notification Sign nodeEnter.append('circle') .style("stroke","orange") .style("fill", "orange") .attr('class','NotificationSign') .attr('cx',10) .attr('cy',-10) .attr('r',function(d){ return d._children ? 1e-6 : 0; }); nodeEnter.append('text') .style("stroke","white") .style("fill", "white") .attr('class','NotificationSign') .attr('x',6) .attr('y',-6) .text(function(d){ return d._children ? "+" : ""; }); // Notification Number nodeEnter.append('circle') .style("stroke","#FF0000") .style("fill", "#FF0000") .attr('class','NotificationText') .attr('cx',17.5) .attr('cy',-17.5) .attr('r',function(d){ return d._children ? 1e-6 : 0; }); nodeEnter.append('text') .style("stroke","white") .style("fill", "white") .style("font-size",8) .attr('class','NotificationText') .attr('x',13) .attr('y',-13) .text(function(d){ return d._children ? d._children.length : ""; }); // UPDATE var nodeUpdate = nodeEnter.merge(node); // Transition to the proper position for the node nodeUpdate.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); // Update the node attributes and style nodeUpdate.select('circle.node') .attr('r', 10) .style("fill", function(d) { // if have children goes lightsteelblue else white return d._children ? "lightsteelblue" : "#fff"; }) .attr('cursor', 'pointer'); nodeUpdate.select('circle.NotificationSign') .attr('r',function(d){ return d._children || d.children ? 8 : 0; }) .attr('cursor', 'pointer') .on('click', click); nodeUpdate.select('text.NotificationSign') .attr('x',6) .attr('y',-6) .text(function(d){ if(d._children) return "+"; else if (d.children) return "-"; else return ""; }) .attr('cursor', 'pointer') .on('click', click); // Notification Number nodeUpdate.select('circle.NotificationText') .style("stroke","#FF0000") .style("fill", "#FF0000") .attr('cx',17.5) .attr('cy',-17.5) .attr('r',function(d){ return d._children ? 6 : 0; }); nodeUpdate.select('text.NotificationText') .style("stroke","white") .style("fill", "white") .style("font-size",8) .attr('x',13) .attr('y',-13) .text(function(d){ return d._children ? d._children.length : ""; }); // Remove any exiting nodes var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); // On exit reduce the node circles size to 0 nodeExit.selectAll('circle') .attr('r', function(d) { if (d.r >0) return 1e-6; else return 0; }); // On exit reduce the opacity of text labels nodeExit.selectAll('text') .style('fill-opacity', 1e-6); // ****************** links section *************************** // Update the links... var link = svg.selectAll('path.link') .data(links, function(d) { return d.id; }); // Enter any new links at the parent's previous position. var linkEnter = link.enter().insert('path', "g") .attr("class", "link") .attr('d', function(d){ var o = {x: source.x0, y: source.y0} return diagonal(o, o) }); // UPDATE var linkUpdate = linkEnter.merge(link); // Transition back to the parent element position linkUpdate.transition() .duration(duration) .attr('d', function(d){ return diagonal(d, d.parent) }); // Remove any exiting links var linkExit = link.exit().transition() .duration(duration) .attr('d', function(d) { var o = {x: source.x, y: source.y} return diagonal(o, o) }) .remove(); // Store the old positions for transition. nodes.forEach(function(d){ d.x0 = d.x; d.y0 = d.y; }); // Creates a curved (diagonal) path from parent to the child nodes function diagonal(s, d) { path = `M ${s.y} ${s.x} C ${(s.y + d.y) / 2} ${s.x}, ${(s.y + d.y) / 2} ${d.x}, ${d.y} ${d.x}` return path } // Toggle children on click. function click(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(d); } } </script> </body>
<html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> svg text { fill: purple; font: 12px sans-serif; text-anchor: end; } </style> </head> <body> <script> var width = 400, height = 400; var data = [101, 120, 141, 160, 180, 205]; var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); var xscale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([0, width - 100]); var yscale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([height/2, 0]); var x_axis = d3.axisBottom().scale(xscale); var y_axis = d3.axisLeft().scale(yscale); svg.append("g") .attr("transform", "translate(150, 10)") .call(y_axis); var xAxisTranslate = height/2 + 10; svg.append("g") .attr("transform", "translate(50, " + xAxisTranslate +")") .call(x_axis) </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> var data = [10, 22, 30, 25, 15]; d3.select("#list").selectAll("li") .data(data) .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> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div class = "myclass"> Hello World! </div> <script> d3.select(".myclass").style("color", "red"); console.log(d3.select(".myclass")); </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>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more