@cryptotaxi247 / kubo / commits / b896eef3b

Moved out d3view

d3view is now in its own repo: https://github.com/jbenet/ipfs-diag-net-d3-vis This is so we can iterate on it quickly without having to needlessly waste CI resources. The repo also installs it for you: ```sh git clone github.com/jbenet/ipfs-diag-net-d3-vis d3view cd d3view sudo make install ```

Juan Batiz-Benet committed Jan 16, 2015 at 11:30 UTC b896eef3bb56171e62b09b122eb10e73dda27326

4 files changed +16 -309

diagnostics/README.md new

+16

@@ -0,0 +1,16 @@

1 +# ipfs diagnostics

2 +

3 +Usage:

4 +```sh

5 +ipfs diag net [--vis=<vis>]

6 +```

7 +

8 +

9 +## view in d3

10 +

11 +Install https://github.com/jbenet/ipfs-diag-net-d3-vis then:

12 +

13 +```

14 +> ipfs diag net --vis=d3 | d3view

15 +http://ipfs.benet.ai:8080/ipfs/QmX8PuUyhSet8fppZHuRNxG7vk949z7XDxnsAz3zN77MGx#QmdhRqGea2QEzyKHG9Zhkc12d2994iah1h47tfHJifuzhT

16 +```

diagnostics/d3/chord.html deleted

-226

@@ -1,226 +0,0 @@

1 -<!DOCTYPE html>

2 -<meta charset="utf-8">

3 -<style>

4 -

5 -.node {

6 - font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;

7 -}

8 -.node:hover circle {

9 - stroke: red;

10 - stroke-width: 4px;

11 -}

12 -

13 -.node .link {

14 - stroke-width: 0;

15 -}

16 -.node:hover .link {

17 - stroke-width: 4px;

18 -}

19 -

20 -.link {

21 - stroke: steelblue;

22 - stroke-opacity: .4;

23 - fill: none;

24 -}

25 -

26 -#legend {

27 - position: fixed;

28 - top: 10px;

29 - left: 10px;

30 - font-size: 14px;

31 - background: rgba(255, 255, 255, 0.7);

32 -}

33 -

34 -#legend h1 {

35 - font-weight: 200;

36 - margin: 0px;

37 - padding: 0px;

38 -}

39 -

40 -</style>

41 -<body>

42 -<div id="legend">

43 -<h1>IPFS TestNet</h1>

44 -<a href="http://ipfs.io">ipfs.io</a> - <span id="node-count"></span> nodes

45 -</div>

46 -

47 -<script src="http://d3js.org/d3.v3.min.js"></script>

48 -<script>

49 -var hash = window.location.hash.substring(1)

50 -

51 -var diameter = 1400,

52 - radius = diameter / 2,

53 - innerRadius = radius - 200

54 - rotate = 145;

55 -

56 -var color = d3.scale.category10()

57 -

58 -var diagonal = d3.svg.diagonal.radial()

59 - .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

60 -

61 -var svg = d3.select("body").append("svg")

62 - .attr("width", "100%")

63 - .attr("height", "100%")

64 - .attr("viewBox", "0 0 " + diameter + " " + diameter )

65 - .attr("preserveAspectRatio", "xMidYMid meet")

66 - .append("g")

67 - .attr("transform", "translate(" + radius + "," + radius + ")");

68 -

69 -d3.json(hash, function(error, data) {

70 -

71 - graph = parseGraph(data)

72 -

73 - var node = svg.selectAll(".node")

74 - .data(graph.nodes)

75 - .enter().append("g")

76 - .attr("class", "node")

77 -

78 - var p = projection

79 -

80 - node.append("svg:circle")

81 - .attr("r", function(d) { return d.conns + 2; })

82 - .style("fill", function(d, i) { return color(i % 20); })

83 - .attr("transform", function(d) { return "rotate(" + (d.x - 90 + rotate) + ")translate(" + d.y + ")"; })

84 -

85 - var link = svg.selectAll(".link")

86 - .data(graph.paths)

87 - .enter().append("path")

88 - .attr("class", "link")

89 - .attr("d", function(d) {

90 - return "M" + p(d[0])[0] + "," + p(d[0])[1]

91 - + "S" + p(d[1])[0] + "," + p(d[1])[1]

92 - + " " + p(d[2])[0] + "," + p(d[2])[1];

93 - })

94 -

95 - node.selectAll('.link')

96 - .data(function(d) { return d.links })

97 - .enter().append('path')

98 - .attr('class', 'link')

99 - .style("stroke", function(d) { return color(d.source.index % 20); })

100 - .attr("d", function(d) {

101 - return "M" + p(d.path[0])[0] + "," + p(d.path[0])[1]

102 - + "S" + p(d.path[1])[0] + "," + p(d.path[1])[1]

103 - + " " + p(d.path[2])[0] + "," + p(d.path[2])[1];

104 - })

105 -

106 - node.append("text")

107 - .attr("class", "label")

108 - .attr("dx", -4)

109 - .attr("dy", 3)

110 - // .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })

111 - // .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })

112 - .text(function(d) { return d.conns + " - " + (d.rtkey || d.name); })

113 - .attr("transform", function(d) { return "rotate(" + (d.x - 90 + rotate) + ")translate(" + d.y + ")"; })

114 -

115 - node.append("svg:title")

116 - .text(function(d) { return d.name; });

117 -

118 - // var mid = svg.selectAll(".node-mid")

119 - // .data(graph.mids)

120 - // .enter().append("g")

121 - // .attr("class", "node-mid")

122 - // .attr("transform", function(d) { return "rotate(" + (d.x + rotate) + ")translate(" + d.y + ")"; })

123 -

124 - // mid.append("svg:circle")

125 - // .attr("r", function(d) { return 4; })

126 - // .style("fill", function(d, i) { return color(i % 3); })

127 -

128 - console.log(graph.paths)

129 -});

130 -

131 -

132 -function parseGraph(graph2) {

133 - graph = {}

134 - graph.nodes = []

135 - graph.links = []

136 - graph.paths = []

137 - graph.byName = {}

138 - graph.mids = []

139 -

140 - graph2.nodes.sort(function(a, b) {

141 - var aname = a.rtkey || a.name

142 - var bname = b.rtkey || b.name

143 -

144 - if (aname > bname) return 1;

145 - if (aname < bname) return -1;

146 - return 0;

147 - })

148 -

149 - graph2.nodes.forEach(function(data, i) {

150 - data.y = innerRadius

151 - data.x = ((360 / graph2.nodes.length) * i)

152 - data.conns = 0

153 - graph.nodes.push(data)

154 - graph.byName[data.name] = data

155 - data.index = i

156 - data.links = []

157 - })

158 -

159 - graph2.links.forEach(function(link) {

160 - var source = graph2.nodes[link.source]

161 - var target = graph2.nodes[link.target]

162 - source.conns++

163 - target.conns++

164 -

165 - var mid = curveNode(source, target)

166 - graph.mids.push(mid)

167 -

168 - var link1 = {source: source, target: mid, value: link.value || 3}

169 - var link2 = {source: mid, target: target, value: link.value || 3}

170 - graph.links.push(link1)

171 - graph.links.push(link2)

172 -

173 - var path = [source, mid, target]

174 - graph.paths.push(path)

175 -

176 - source.links.push({path: path, source: source})

177 - target.links.push({path: path, source: target})

178 - })

179 -

180 - document.getElementById("node-count").innerText = graph.nodes.length

181 -

182 - return graph

183 -}

184 -

185 -function curveNode(source, target) {

186 - var d = circleDistance(source.x, target.x)

187 - var h = ((1-(d/180)) * innerRadius) * 0.7

188 - var x = circleMidpoint(source.x, target.x)

189 - return {x: x, y: h}

190 -}

191 -

192 -function circleMidpoint(x, y) {

193 - var x2 = x > y ? x : y

194 - var y2 = x > y ? y : x

195 - var a = (x2-y2)

196 - if (a > 180) {

197 - a = 360 - a

198 - return (x2 + a/2) % 360

199 - } else {

200 - return (y2 + a/2) % 360

201 - }

202 -}

203 -

204 -function circleDistance(x, y) {

205 - var a = abs(x-y)

206 - return (a > 180) ? 360 - a : a

207 -}

208 -

209 -function abs(x) {

210 - return x < 0 ? -x : x

211 -}

212 -

213 -function projection(d) {

214 - var r = d.y, a = (d.x - 90 + rotate) / 180 * Math.PI;

215 - return [r * Math.cos(a), r * Math.sin(a)];

216 -}

217 -

218 -function truncate(name, limit) {

219 - return name.substring(0, limit)

220 -}

221 -

222 -

223 -d3.select(self.frameElement).style("height", "100%");

224 -d3.select(self.frameElement).style("width", "100%");

225 -

226 -</script>

diagnostics/d3/d3view deleted

-24

@@ -1,24 +0,0 @@

1 -#!/bin/sh

2 -

3 -# put stdin in temp file

4 -file=`mktemp -t d3view`

5 -cat >"$file"

6 -

7 -# add file to ipfs

8 -hash=$(ipfs add -q "$file" </dev/null | tail -n1)

9 -

10 -# this viewer is the hash of go-ipfs/diagnostics/d3/viewer.html

11 -force="QmaY6Lq9MEhDfWUc1VfHcu9aLWSyvi4VDLvWQXLoVZ4Mau"

12 -chord="QmYWjPa736Bk7FhNEEtWLjaEdioSxXkYMhRT9tLi45ccm7"

13 -viewer="$chord"

14 -

15 -# the ipfs gateway to use

16 -gatewayHTTP="http://ipfs.benet.ai:8080"

17 -gatewayIPFS="/ip4/104.236.32.22/tcp/4001/Qme7peMbkRH8qzb9TMXSoRwVmVDZz3Z4dseRXAyBwBmxA7"

18 -

19 -# make sure you're reachable (no NAT yet)

20 -ipfs swarm connect "$gatewayIPFS" </dev/null >/dev/null

21 -

22 -# output the url at the gateway

23 -url="$gatewayHTTP/ipfs/$viewer#$hash"

24 -echo "$url"

diagnostics/d3/force.html deleted

-59

@@ -1,59 +0,0 @@

1 -<!DOCTYPE html>

2 -<meta charset="utf-8">

3 -<style>

4 -.node {

5 - stroke: #fff;

6 - stroke-width: 1.5px;

7 -}

8 -.link {

9 - stroke: #999;

10 - stroke-opacity: .6;

11 -}

12 -</style>

13 -<body>

14 - <h1>Ipfs Visualization</h1>

15 -<script src="http://d3js.org/d3.v3.min.js"></script>

16 -<script>

17 -var hash = window.location.hash.substring(1)

18 -

19 -var width = 960,

20 - height = 800;

21 -var color = d3.scale.category20();

22 -var force = d3.layout.force()

23 - .charge(-50)

24 - .linkDistance(90)

25 - .gravity(0.01)

26 - .size([width, height]);

27 -var svg = d3.select("body").append("svg")

28 - .attr("width", width)

29 - .attr("height", height);

30 -

31 -d3.json(hash, function(error, graph) {

32 - force

33 - .nodes(graph.nodes)

34 - .links(graph.links)

35 - .start();

36 - var link = svg.selectAll(".link")

37 - .data(graph.links)

38 - .enter().append("line")

39 - .attr("class", "link")

40 - .style("stroke-width", function(d) { return Math.sqrt(d.value); });

41 - var node = svg.selectAll(".node")

42 - .data(graph.nodes)

43 - .enter().append("circle")

44 - .attr("class", "node")

45 - .attr("r", function(d) {return 1.0 + Math.log(d.value)})

46 - .style("fill", function(d) { return color(d.group); })

47 - .call(force.drag);

48 - node.append("title")

49 - .text(function(d) { return d.name; });

50 - force.on("tick", function() {

51 - link.attr("x1", function(d) { return d.source.x; })

52 - .attr("y1", function(d) { return d.source.y; })

53 - .attr("x2", function(d) { return d.target.x; })

54 - .attr("y2", function(d) { return d.target.y; });

55 - node.attr("cx", function(d) { return d.x; })

56 - .attr("cy", function(d) { return d.y; });

57 - });

58 -});

59 -</script>