Skip to content

Instantly share code, notes, and snippets.

@thomasdobber

thomasdobber/.block

Last active October 13, 2016 07:54
Show Gist options
  • Save thomasdobber/68051f5695d5d4282b9555e7ea997ca3 to your computer and use it in GitHub Desktop.
Save thomasdobber/68051f5695d5d4282b9555e7ea997ca3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
.block
license: mit
Raw
README.md

WIP

Built with blockbuilder.org

Used http://www.json-generator.com/ to generate random data with the following template:

[
  '{{repeat(15, 50)}}',
  {
    index: '{{ index() }}',
    name: function (tags) {
      var fruits = ['apple', 'banana', 'strawberry', 'mango'];
      return fruits[tags.integer(0, fruits.length - 1)];
    },
    properties: {
      color: '{{ random("red","yellow","purple","green") }}',
      //pattern: '{{ random("spotted","stripped","none") }}',
      size: '{{ random("tiny","small","medium","large","giant") }}',
      taste: '{{ random("bitter","sweet","sour","salty","savoury") }}',
      weight: '{{ integer(0,400) }}'
    }
  }
]
Raw
data.json
[
{
"index": 0,
"name": "mango",
"properties": {
"color": "yellow",
"size": "giant",
"taste": "savoury",
"weight": 275
}
},
{
"index": 1,
"name": "banana",
"properties": {
"color": "red",
"size": "giant",
"taste": "savoury",
"weight": 75
}
},
{
"index": 2,
"name": "banana",
"properties": {
"color": "purple",
"size": "tiny",
"taste": "bitter",
"weight": 260
}
},
{
"index": 3,
"name": "strawberry",
"properties": {
"color": "green",
"size": "small",
"taste": "bitter",
"weight": 369
}
},
{
"index": 4,
"name": "apple",
"properties": {
"color": "yellow",
"size": "giant",
"taste": "bitter",
"weight": 114
}
},
{
"index": 5,
"name": "apple",
"properties": {
"color": "yellow",
"size": "small",
"taste": "savoury",
"weight": 232
}
},
{
"index": 6,
"name": "apple",
"properties": {
"color": "purple",
"size": "giant",
"taste": "salty",
"weight": 104
}
},
{
"index": 7,
"name": "strawberry",
"properties": {
"color": "green",
"size": "tiny",
"taste": "sour",
"weight": 313
}
},
{
"index": 8,
"name": "mango",
"properties": {
"color": "green",
"size": "tiny",
"taste": "bitter",
"weight": 182
}
},
{
"index": 9,
"name": "mango",
"properties": {
"color": "red",
"size": "giant",
"taste": "savoury",
"weight": 257
}
},
{
"index": 10,
"name": "banana",
"properties": {
"color": "yellow",
"size": "small",
"taste": "sour",
"weight": 287
}
},
{
"index": 11,
"name": "banana",
"properties": {
"color": "purple",
"size": "giant",
"taste": "bitter",
"weight": 182
}
},
{
"index": 12,
"name": "mango",
"properties": {
"color": "red",
"size": "giant",
"taste": "sweet",
"weight": 5
}
},
{
"index": 13,
"name": "strawberry",
"properties": {
"color": "red",
"size": "large",
"taste": "savoury",
"weight": 246
}
},
{
"index": 14,
"name": "mango",
"properties": {
"color": "green",
"size": "large",
"taste": "salty",
"weight": 326
}
},
{
"index": 15,
"name": "banana",
"properties": {
"color": "purple",
"size": "tiny",
"taste": "sour",
"weight": 81
}
},
{
"index": 16,
"name": "strawberry",
"properties": {
"color": "red",
"size": "small",
"taste": "sour",
"weight": 62
}
},
{
"index": 17,
"name": "strawberry",
"properties": {
"color": "purple",
"size": "giant",
"taste": "salty",
"weight": 329
}
},
{
"index": 18,
"name": "apple",
"properties": {
"color": "yellow",
"size": "giant",
"taste": "salty",
"weight": 367
}
},
{
"index": 19,
"name": "strawberry",
"properties": {
"color": "green",
"size": "tiny",
"taste": "bitter",
"weight": 299
}
},
{
"index": 20,
"name": "apple",
"properties": {
"color": "green",
"size": "tiny",
"taste": "savoury",
"weight": 211
}
},
{
"index": 21,
"name": "strawberry",
"properties": {
"color": "red",
"size": "giant",
"taste": "savoury",
"weight": 215
}
},
{
"index": 22,
"name": "strawberry",
"properties": {
"color": "red",
"size": "medium",
"taste": "sweet",
"weight": 2
}
},
{
"index": 23,
"name": "mango",
"properties": {
"color": "yellow",
"size": "small",
"taste": "savoury",
"weight": 370
}
},
{
"index": 24,
"name": "strawberry",
"properties": {
"color": "purple",
"size": "small",
"taste": "sweet",
"weight": 155
}
},
{
"index": 25,
"name": "apple",
"properties": {
"color": "yellow",
"size": "tiny",
"taste": "bitter",
"weight": 341
}
},
{
"index": 26,
"name": "strawberry",
"properties": {
"color": "green",
"size": "medium",
"taste": "savoury",
"weight": 223
}
},
{
"index": 27,
"name": "strawberry",
"properties": {
"color": "yellow",
"size": "large",
"taste": "sweet",
"weight": 183
}
},
{
"index": 28,
"name": "strawberry",
"properties": {
"color": "green",
"size": "large",
"taste": "savoury",
"weight": 214
}
},
{
"index": 29,
"name": "banana",
"properties": {
"color": "purple",
"size": "small",
"taste": "savoury",
"weight": 130
}
},
{
"index": 30,
"name": "mango",
"properties": {
"color": "yellow",
"size": "giant",
"taste": "salty",
"weight": 286
}
},
{
"index": 31,
"name": "mango",
"properties": {
"color": "yellow",
"size": "small",
"taste": "savoury",
"weight": 67
}
},
{
"index": 32,
"name": "mango",
"properties": {
"color": "purple",
"size": "large",
"taste": "sweet",
"weight": 362
}
},
{
"index": 33,
"name": "mango",
"properties": {
"color": "green",
"size": "medium",
"taste": "savoury",
"weight": 190
}
},
{
"index": 34,
"name": "mango",
"properties": {
"color": "red",
"size": "small",
"taste": "bitter",
"weight": 370
}
},
{
"index": 35,
"name": "apple",
"properties": {
"color": "green",
"size": "small",
"taste": "salty",
"weight": 298
}
},
{
"index": 36,
"name": "strawberry",
"properties": {
"color": "yellow",
"size": "small",
"taste": "savoury",
"weight": 5
}
},
{
"index": 37,
"name": "banana",
"properties": {
"color": "red",
"size": "tiny",
"taste": "sweet",
"weight": 217
}
},
{
"index": 38,
"name": "apple",
"properties": {
"color": "yellow",
"size": "small",
"taste": "sweet",
"weight": 376
}
},
{
"index": 39,
"name": "mango",
"properties": {
"color": "yellow",
"size": "small",
"taste": "bitter",
"weight": 223
}
},
{
"index": 40,
"name": "strawberry",
"properties": {
"color": "yellow",
"size": "medium",
"taste": "sour",
"weight": 86
}
},
{
"index": 41,
"name": "banana",
"properties": {
"color": "red",
"size": "tiny",
"taste": "sweet",
"weight": 191
}
},
{
"index": 42,
"name": "banana",
"properties": {
"color": "green",
"size": "giant",
"taste": "salty",
"weight": 268
}
},
{
"index": 43,
"name": "mango",
"properties": {
"color": "red",
"size": "tiny",
"taste": "sweet",
"weight": 328
}
},
{
"index": 44,
"name": "mango",
"properties": {
"color": "yellow",
"size": "large",
"taste": "savoury",
"weight": 84
}
},
{
"index": 45,
"name": "strawberry",
"properties": {
"color": "green",
"size": "tiny",
"taste": "bitter",
"weight": 37
}
},
{
"index": 46,
"name": "mango",
"properties": {
"color": "red",
"size": "tiny",
"taste": "sour",
"weight": 54
}
},
{
"index": 47,
"name": "banana",
"properties": {
"color": "yellow",
"size": "giant",
"taste": "salty",
"weight": 312
}
},
{
"index": 48,
"name": "apple",
"properties": {
"color": "yellow",
"size": "giant",
"taste": "sweet",
"weight": 345
}
},
{
"index": 49,
"name": "mango",
"properties": {
"color": "yellow",
"size": "small",
"taste": "bitter",
"weight": 247
}
},
{
"index": 50,
"name": "mango",
"properties": {
"color": "red",
"size": "medium",
"taste": "savoury",
"weight": 287
}
},
{
"index": 51,
"name": "strawberry",
"properties": {
"color": "red",
"size": "giant",
"taste": "salty",
"weight": 217
}
},
{
"index": 52,
"name": "banana",
"properties": {
"color": "yellow",
"size": "giant",
"taste": "salty",
"weight": 348
}
},
{
"index": 53,
"name": "apple",
"properties": {
"color": "purple",
"size": "giant",
"taste": "bitter",
"weight": 384
}
},
{
"index": 54,
"name": "apple",
"properties": {
"color": "green",
"size": "small",
"taste": "sweet",
"weight": 296
}
},
{
"index": 55,
"name": "apple",
"properties": {
"color": "purple",
"size": "large",
"taste": "sweet",
"weight": 8
}
},
{
"index": 56,
"name": "mango",
"properties": {
"color": "green",
"size": "medium",
"taste": "sour",
"weight": 191
}
},
{
"index": 57,
"name": "strawberry",
"properties": {
"color": "purple",
"size": "giant",
"taste": "bitter",
"weight": 230
}
},
{
"index": 58,
"name": "apple",
"properties": {
"color": "purple",
"size": "small",
"taste": "sweet",
"weight": 372
}
},
{
"index": 59,
"name": "apple",
"properties": {
"color": "purple",
"size": "tiny",
"taste": "sweet",
"weight": 69
}
},
{
"index": 60,
"name": "apple",
"properties": {
"color": "green",
"size": "tiny",
"taste": "salty",
"weight": 175
}
},
{
"index": 61,
"name": "apple",
"properties": {
"color": "red",
"size": "tiny",
"taste": "salty",
"weight": 58
}
},
{
"index": 62,
"name": "mango",
"properties": {
"color": "red",
"size": "tiny",
"taste": "bitter",
"weight": 17
}
},
{
"index": 63,
"name": "apple",
"properties": {
"color": "purple",
"size": "medium",
"taste": "savoury",
"weight": 383
}
},
{
"index": 64,
"name": "strawberry",
"properties": {
"color": "purple",
"size": "small",
"taste": "sweet",
"weight": 346
}
},
{
"index": 65,
"name": "apple",
"properties": {
"color": "green",
"size": "small",
"taste": "savoury",
"weight": 395
}
},
{
"index": 66,
"name": "strawberry",
"properties": {
"color": "red",
"size": "small",
"taste": "bitter",
"weight": 286
}
},
{
"index": 67,
"name": "banana",
"properties": {
"color": "red",
"size": "medium",
"taste": "salty",
"weight": 178
}
},
{
"index": 68,
"name": "strawberry",
"properties": {
"color": "red",
"size": "medium",
"taste": "savoury",
"weight": 394
}
},
{
"index": 69,
"name": "mango",
"properties": {
"color": "red",
"size": "tiny",
"taste": "sweet",
"weight": 113
}
},
{
"index": 70,
"name": "apple",
"properties": {
"color": "purple",
"size": "small",
"taste": "sweet",
"weight": 13
}
},
{
"index": 71,
"name": "apple",
"properties": {
"color": "purple",
"size": "large",
"taste": "savoury",
"weight": 126
}
},
{
"index": 72,
"name": "apple",
"properties": {
"color": "yellow",
"size": "large",
"taste": "bitter",
"weight": 338
}
},
{
"index": 73,
"name": "apple",
"properties": {
"color": "red",
"size": "small",
"taste": "savoury",
"weight": 158
}
},
{
"index": 74,
"name": "banana",
"properties": {
"color": "yellow",
"size": "large",
"taste": "sweet",
"weight": 202
}
},
{
"index": 75,
"name": "mango",
"properties": {
"color": "red",
"size": "small",
"taste": "sweet",
"weight": 124
}
},
{
"index": 76,
"name": "strawberry",
"properties": {
"color": "red",
"size": "medium",
"taste": "bitter",
"weight": 355
}
},
{
"index": 77,
"name": "mango",
"properties": {
"color": "yellow",
"size": "large",
"taste": "savoury",
"weight": 133
}
},
{
"index": 78,
"name": "banana",
"properties": {
"color": "yellow",
"size": "medium",
"taste": "sweet",
"weight": 72
}
},
{
"index": 79,
"name": "banana",
"properties": {
"color": "green",
"size": "tiny",
"taste": "salty",
"weight": 236
}
},
{
"index": 80,
"name": "strawberry",
"properties": {
"color": "red",
"size": "large",
"taste": "salty",
"weight": 194
}
},
{
"index": 81,
"name": "banana",
"properties": {
"color": "purple",
"size": "medium",
"taste": "sour",
"weight": 133
}
}
]
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.link {
stroke: #ccc;
}
.node text {
pointer-events: none;
font: 10px sans-serif;
}
</style>
</head>
<body>
<script>
var width = 960,
height = 500
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.charge(function (d) {
return (d.weight * -100);
})
.size([width, height]);
d3.json("data.json", function(error, data) {
if (error) throw error;
var links = generateLinks(data);
force
.nodes(data)
.links(links)
.start();
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(data)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("rect")
.attr("x", -6)
.attr("y", -6)
.attr("width", 12)
.attr("height", 12)
.attr("fill", function (d) {
return d.properties.color;
});
// node.append("text")
// .attr("dx", 12)
// .attr("dy", ".35em")
// .text(function(d) { return d.name });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
});
function generateLinks (data) {
return _.chain(data)
.reduce(function (result, d) {
var index = d.index;
_.each(d.properties, function (value, property) {
if(!result[property+value]) {
result[property+value] = [];
}
result[property+value].push(index);
});
return result;
}, {})
.toPairs()
.filter(function (d) {
return d[0].length > 1;
})
.reduce(function (result, d) {
var indices = d[1].sort();
var source = indices[0];
console.log(indices);
_.each( _.slice(indices,1), function (target) {
result.push({
source: source,
target: target
})
});
return result;
}, [])
.value();
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment