46 |
47 |
48 |
49 |
50 | ${asLinks(JSON.stringify(data, null, 2))}
40 | ${text.slice(0, match.index)}`)
65 | results.push(yo`${match[1]}`)
66 | text = text.slice(match.index + match[1].length)
67 | }
68 |
69 | results.push(yo`${text}`)
70 |
71 | return results
72 | }
73 | }
74 |
75 | module.exports = build
76 |
--------------------------------------------------------------------------------
/client/fill.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | function setupFill (scale, maxColor) {
4 | const idColors = new Map()
5 | var paletteCounter = 0
6 |
7 | return fill
8 |
9 | function fill (d, i) {
10 | const name = d.id || d.data.id
11 | var color = idColors.get(name)
12 | if (!color) {
13 | color = scale(paletteCounter++)
14 | idColors.set(name, color)
15 | }
16 |
17 | if (paletteCounter >= maxColor) {
18 | paletteCounter = 0
19 | }
20 |
21 | return color
22 | }
23 | }
24 |
25 | module.exports = setupFill
26 |
--------------------------------------------------------------------------------
/client/hash.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const d3 = require('d3')
4 |
5 | function create (radius, svg, color) {
6 | const arc = d3.arc()
7 |
8 | var innerRadius = 0
9 | var outerRadius = 0
10 | var path
11 |
12 | changeRadius(radius)
13 |
14 | return { plot, changeRadius, remove }
15 |
16 | function plot (main, point) {
17 | var startAngle
18 | var endAngle = 0
19 |
20 | main.selectAll('path')
21 | .each(function (p, i) {
22 | if (p.data.point < point.point) {
23 | startAngle = p.startAngle
24 | endAngle = p.endAngle
25 | }
26 | })
27 |
28 | if (!path) {
29 | path = svg.selectAll('path')
30 | .data([{
31 | startAngle,
32 | endAngle
33 | }])
34 | .enter()
35 | .append('path')
36 | .attr('fill', color)
37 | .attr('d', arc)
38 | .attr('opacity', 0)
39 |
40 | path
41 | .transition()
42 | .duration(500)
43 | .attr('opacity', 1)
44 | } else {
45 | path
46 | .transition()
47 | .duration(1500)
48 | .attr('opacity', 1)
49 | .attrTween('d', arcTween(startAngle, endAngle))
50 | }
51 | }
52 |
53 | function changeRadius (r) {
54 | computeVars(r)
55 |
56 | arc
57 | .innerRadius(innerRadius)
58 | .outerRadius(outerRadius)
59 |
60 | svg.selectAll('path')
61 | .transition('winresize')
62 | .attr('d', arc)
63 | }
64 |
65 | function computeVars (r) {
66 | innerRadius = r * 92 / 100
67 | outerRadius = r * 100 / 100
68 | }
69 |
70 | function remove () {
71 | if (path) {
72 | path.transition()
73 | .duration(500)
74 | .attr('opacity', 0)
75 | .remove()
76 | path = null
77 | }
78 | }
79 |
80 | function arcTween (startAngle, endAngle) {
81 | return function (d) {
82 | const interpolateEnd = d3.interpolate(d.endAngle, endAngle)
83 | const interpolateStart = d3.interpolate(d.startAngle, startAngle)
84 | return function (t) {
85 | d.endAngle = interpolateEnd(t)
86 | d.startAngle = interpolateStart(t)
87 | return arc(d)
88 | }
89 | }
90 | }
91 | }
92 |
93 | module.exports = create
94 |
--------------------------------------------------------------------------------
/client/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | /* global WebSocket */
3 |
4 | const d3 = require('d3')
5 | const sheetify = require('sheetify')
6 | const yo = require('yo-yo')
7 | const wr = require('winresize-event')
8 | const xhr = require('xhr')
9 | const d3sc = require('d3-scale-chromatic')
10 | const CompCol = require('complementary-colors')
11 | const maxColor = 7
12 | const maxInt = Math.pow(2, 32) - 1
13 |
14 | // TODO make the scale and the max number of color dynamic
15 | const scale = d3.scaleSequential(d3sc.interpolatePurples).domain([maxColor, 0])
16 | const fill = require('./fill')(scale, maxColor)
17 |
18 | const compCol = new CompCol(scale(1))
19 | const fillColor = asColor(compCol.triad()[2])
20 |
21 | sheetify('normalize.css')
22 | const ringStyle = sheetify('./ring.css')
23 | const barStyle = sheetify('./bar.css')
24 |
25 | var width = 0
26 | var height = 0
27 | var radius = 0
28 | var innerRadius = 0
29 | var outerRadius = 0
30 |
31 | function computeSizes (dim) {
32 | width = Math.floor(dim.width * 98 / 100)
33 | height = Math.floor(dim.height * 98 / 100)
34 | radius = Math.min(width, height) / 2
35 |
36 | innerRadius = radius * 70 / 100
37 | outerRadius = radius * 90 / 100
38 | }
39 |
40 | computeSizes(wr.getWinSize())
41 |
42 | const bar = yo`
43 |
46 |
47 |