nicr9/.block

## .block
license: mit

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes rect {
  stroke: #fff;
  stroke-width: 1.5px;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(150))
    .force("charge", d3.forceManyBody().strength(function(d) { return -30*d.group }))
    .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("mindmap.json", function(error, graph) {
    if (error) throw error;

    // Update links
    var link = svg.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(graph.links)
        .enter().append("line")
        .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

    // Update nodes
    var node = svg.append("g")
        .attr("class", "nodes")
        .selectAll("circle")
        .data(graph.nodes)
        .enter().append("rect")
        .attr("width", 100)
        .attr("height", 50)
        .attr("rx", 5)
        .attr("fill", function(d) { return color(d.group); })
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));

    // Set node titles
    node.append("title")
        .text(function(d) { return d.id; });

    // Simulate nodes
    simulation
        .nodes(graph.nodes)
        .on("tick", ticked);

    // Simulate links
    simulation.force("link")
        .links(graph.links);

    function ticked() {
        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("x", function(d) { return d.x - 50; })
            .attr("y", function(d) { return d.y - 25; });
    }
});

function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
}

function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
}

function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
}

</script>

## mindmap.json
{
  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 2},
    {"id": "Mlle.Baptistine", "group": 2},
    {"id": "Mme.Magloire", "group": 2},
    {"id": "CountessdeLo", "group": 3},
    {"id": "Geborand", "group": 3},
    {"id": "Champtercier", "group": 3},
    {"id": "Cravatte", "group": 3},
    {"id": "Count", "group": 3},
    {"id": "OldMan", "group": 3}
  ],
  "links": [
    {"source": "Myriel", "target": "Napoleon", "value": 1},
    {"source": "Myriel", "target": "Mlle.Baptistine", "value": 1},
    {"source": "Myriel", "target": "Mme.Magloire", "value": 1},
    {"source": "Napoleon", "target": "CountessdeLo", "value": 1},
    {"source": "Napoleon", "target": "Geborand", "value": 1},
    {"source": "Mlle.Baptistine", "target": "Champtercier", "value": 1},
    {"source": "Mlle.Baptistine", "target": "Cravatte", "value": 1},
    {"source": "Mme.Magloire", "target": "Count", "value": 1},
    {"source": "Mme.Magloire", "target": "OldMan", "value": 1}
  ]
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.links line {
	stroke: #999;
	stroke-opacity: 0.6;
	}

	.nodes rect {
	stroke: #fff;
	stroke-width: 1.5px;
	}

	</style>
	<svg width="960" height="600"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height");

	var color = d3.scaleOrdinal(d3.schemeCategory20);

	var simulation = d3.forceSimulation()
	.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(150))
	.force("charge", d3.forceManyBody().strength(function(d) { return -30*d.group }))
	.force("center", d3.forceCenter(width / 2, height / 2));

	d3.json("mindmap.json", function(error, graph) {
	if (error) throw error;

	// Update links
	var link = svg.append("g")
	.attr("class", "links")
	.selectAll("line")
	.data(graph.links)
	.enter().append("line")
	.attr("stroke-width", function(d) { return Math.sqrt(d.value); });

	// Update nodes
	var node = svg.append("g")
	.attr("class", "nodes")
	.selectAll("circle")
	.data(graph.nodes)
	.enter().append("rect")
	.attr("width", 100)
	.attr("height", 50)
	.attr("rx", 5)
	.attr("fill", function(d) { return color(d.group); })
	.call(d3.drag()
	.on("start", dragstarted)
	.on("drag", dragged)
	.on("end", dragended));

	// Set node titles
	node.append("title")
	.text(function(d) { return d.id; });

	// Simulate nodes
	simulation
	.nodes(graph.nodes)
	.on("tick", ticked);

	// Simulate links
	simulation.force("link")
	.links(graph.links);

	function ticked() {
	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("x", function(d) { return d.x - 50; })
	.attr("y", function(d) { return d.y - 25; });
	}
	});

	function dragstarted(d) {
	if (!d3.event.active) simulation.alphaTarget(0.3).restart();
	d.fx = d.x;
	d.fy = d.y;
	}

	function dragged(d) {
	d.fx = d3.event.x;
	d.fy = d3.event.y;
	}

	function dragended(d) {
	if (!d3.event.active) simulation.alphaTarget(0);
	d.fx = null;
	d.fy = null;
	}

	</script>
	{
	"nodes": [
	{"id": "Myriel", "group": 1},
	{"id": "Napoleon", "group": 2},
	{"id": "Mlle.Baptistine", "group": 2},
	{"id": "Mme.Magloire", "group": 2},
	{"id": "CountessdeLo", "group": 3},
	{"id": "Geborand", "group": 3},
	{"id": "Champtercier", "group": 3},
	{"id": "Cravatte", "group": 3},
	{"id": "Count", "group": 3},
	{"id": "OldMan", "group": 3}
	],
	"links": [
	{"source": "Myriel", "target": "Napoleon", "value": 1},
	{"source": "Myriel", "target": "Mlle.Baptistine", "value": 1},
	{"source": "Myriel", "target": "Mme.Magloire", "value": 1},
	{"source": "Napoleon", "target": "CountessdeLo", "value": 1},
	{"source": "Napoleon", "target": "Geborand", "value": 1},
	{"source": "Mlle.Baptistine", "target": "Champtercier", "value": 1},
	{"source": "Mlle.Baptistine", "target": "Cravatte", "value": 1},
	{"source": "Mme.Magloire", "target": "Count", "value": 1},
	{"source": "Mme.Magloire", "target": "OldMan", "value": 1}
	]
	}