d34.html (6321B)
1 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 7 <link rel = "stylesheet" type = "text/css" href = "http://underd0g.co/projects/projectstyle.css"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 9 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 11 12 13 </head> 14 <body> 15 <style> 16 17 @font-face { 18 font-family: myfont; 19 src: url(slkscr.ttf); 20 font-size: 14px; 21 } 22 23 body { 24 font-family: myfont; 25 font-weight: 300; 26 font-size: 1.2em; 27 line-height: 3.7em; 28 background: #222; 29 } 30 31 p{ 32 background-color: #222; 33 color: white; 34 35 } 36 37 #top{ 38 background: #222; 39 } 40 41 #col{ 42 color: white; 43 44 } 45 text{ 46 stroke-width: 0.09; 47 stroke: white; 48 fill: white; 49 } 50 .node { 51 color: white; 52 stroke-width: 1.0px; 53 fill: white; 54 } 55 56 57 .link { 58 stroke: #555; 59 stroke-width: 1.0px; 60 } 61 62 .node text { 63 font: 13px ; 64 65 } 66 67 /* function resize() { 68 width = window.innerWidth, height = window.innerHeight; 69 svg.attr("width", width).attr("height", height); 70 force.size([width, height]).resume(); 71 } */ 72 73 input { 74 width: 35%; 75 background: transparent; 76 border: none; 77 font-family: myfont; 78 font-size: 36; 79 color: #c0a79a; 80 padding-top: 150px; 81 } 82 83 input:focus { 84 outline: 0; 85 } 86 87 input::placeholder { 88 color: #fbfbfb; 89 } 90 #form-search { 91 margin: 1em 2em; 92 } 93 94 </style> 95 96 97 <div class="container"><center> 98 <form id="form-search" action="https://duckduckgo.com/" method="get" autocomplete="off"> 99 <input id="search" placeholder="" type="text" name="q" autofocus=""> 100 </form> 101 </center> 102 <div class="row" align='center'> 103 <div class="col-xsm-12" id = "col"> 104 <script src="https://d3js.org/d3.v3.min.js"></script> 105 <script> 106 107 //setup for the d3 SVG 108 109 110 // testing a resize method using the browser measurements 111 112 var width = window.innerWidth, 113 height = window.innerHeight; 114 115 116 117 118 119 120 //Set up the colour scale 121 var color = d3.scale.category20c() 122 // var color = d3.scaleOrdinal() // D3 Version 4 123 // .domain(["9", "7", "1"]) 124 .range(["#87404f", "#615772" , "#4c9882"]); 125 //Set up the force layout 126 var force = d3.layout.force() 127 .gravity(0.05) 128 .charge(-150) 129 .linkDistance(80) 130 .size([width, height]); 131 132 133 //yes this is an svg 134 var svg = d3.select(".col-xsm-12").append("svg") 135 .attr("width", width) 136 .attr("height", height); 137 138 139 // hard-code some json 140 var graph = { 141 "nodes":[ 142 {"name":"facebook","group":1, url: "https://facebook.com"}, 143 {"name":"twitter","group":1, url: "https://twitter.com"}, 144 {"name":"Reddit","group":1, url: "https://reddit.com"}, 145 {"name":"youtube","group":9, url: "http://youtube.com"}, 146 {"name":"gmail","group":9, url: "https://accounts.google.com/signin/v2/identifier?continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&service=mail&sacu=1&rip=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin"}, 147 {"name":"wiki","group":9, url: "https://wikipedia.org"}, 148 {"name":"l0bster","group":7, url: "https://l0bster.ru"}, 149 {"name":"2f30","group":7,url:"https://2f30.org"} 150 151 ], 152 "links":[ 153 {"source":1,"target":0,"value":1}, 154 {"source":2,"target":0,"value":2}, 155 {"source":4,"target":3,"value":3}, 156 {"source":5,"target":4,"value":3}, 157 {"source":5,"target":3,"value":4}, 158 {"source":6,"target":5,"value":5}, 159 {"source":6,"target":0,"value":5}, 160 {"source":2,"target":1,"value":5}, 161 {"source":7,"target":6,"value":5} 162 163 164 ] 165 } 166 167 //Creates the graph data structure out of the json data 168 force.nodes(graph.nodes) 169 .links(graph.links) 170 .start(); 171 172 //Create all the line svgs but without locations yet 173 var link = svg.selectAll(".link") 174 .data(graph.links) 175 .enter().append("line") 176 .attr("class", "link") 177 .attr('font-color', 'white') 178 .style("stroke-width", function (d) { 179 return Math.sqrt(d.value); 180 }); 181 182 //Do the same with the circles for the nodes 183 var node = svg.selectAll(".node") 184 .data(graph.nodes) 185 .enter().append("g") 186 .attr("class", "node") 187 .call(force.drag); 188 189 node.append("circle") 190 .attr("r", 10) 191 .attr('font-color', 'white') 192 .style("fill", function (d) { 193 return color(d.group); 194 195 }) 196 197 198 //give my children some attributes! 199 node.each(function(d){ 200 var thisNode = d3.select(this); 201 202 if (!d.children) { 203 thisNode.append("svg:a") 204 .attr("xlink:href",function(d) { return d.url; }) 205 .attr("target", "_blank") 206 //.text(function(d) { return d.url; }) (this isnt clugy enough) 207 .append("text", "fill", "white") 208 .attr("dx", 8) 209 .attr("dy", 3) 210 .attr("text-anchor", "start") 211 .attr('font-color', 'white') 212 .attr('font-color', 'white') 213 214 .text( function(d) { return d.name; }); 215 } else { 216 thisNode.append("text") 217 .attr("dx", -8) 218 .attr("dy", 3) 219 .attr("text-anchor", "end") 220 .attr('font-color', 'white') 221 .text(function(d) { return d.name; }); 222 } 223 }); 224 225 226 // force be with you 227 force.on("tick", function () { 228 link.attr("x1", function (d) { 229 return d.source.x; 230 }) 231 .attr("y1", function (d) { 232 return d.source.y; 233 }) 234 .attr("x2", function (d) { 235 return d.target.x; 236 }) 237 .attr("y2", function (d) { 238 return d.target.y; 239 }); 240 241 //Changed 242 243 d3.selectAll("circle").attr("cx", function (d) { 244 return d.x; 245 }) 246 .attr("cy", function (d) { 247 return d.y; 248 }); 249 250 d3.selectAll("text").attr("x", function (d) { 251 252 return d.x; 253 }) 254 .attr("y", function (d) { 255 return d.y; 256 }); 257 }); 258 259 260 </script> 261 262 263 </div> 264 </div> 265 </div> 266 267 </div> 268 269 </body> 270 </html>