D3OG

All examples By author By category About

emilyrmi

Full window Github gist

Automatically Finding Better Force Directed Layout Parameters (10x10 Grid)

forked from rpgove's block: Automatically Finding Better Force Directed Layout Parameters (10x10 Grid)

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

html, body {
  font: 12px sans-serif;
}

svg {
  display: block;
}

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

.nodes circle {
  fill: #d30000;
  stroke: #fff;
  stroke-width: 1px;
}

.chart circle {
  fill: #aaa;
  fill-opacity: 0.3;
  cursor: pointer;
}

.chart circle.selected {
  fill: #d30000;
  fill-opacity: 0.6;
}

</style>
<svg class="chart"></svg>
<svg class="graph">
  <text x="300" y="250" text-anchor="middle">Loading...</text>
</svg>
<script src="greadability.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var width = 600;
var height = 500;

var chartWidth = 600;
var chartHeight = 60;
var margin = {left: 10, right: 10, top: 10, bottom: 40};

var numTicks = 100;

var selectedParams;

var svg = d3.select('svg.graph')
  .attr('width', width)
  .attr('height', height);

var chartSvg = d3.select('svg.chart')
  .attr('width', chartWidth)
  .attr('height', chartHeight)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

chartWidth = chartWidth - margin.left - margin.right;
chartHeight = chartHeight - margin.top - margin.bottom;

var x = d3.scaleLinear()
  .domain([0, 1])
  .range([0, chartWidth]);

chartSvg.append('g')
    .attr('transform', 'translate(0,' + chartHeight + ')')
    .call(d3.axisBottom(x).ticks(7))
  .append("text")
    .attr("fill", "#000")
    .attr('transform', 'translate(' + chartWidth/2 + ',' + 0 + ')')
    .attr("y", chartHeight + 10)
    .attr("dy", "0.71em")
    .attr("text-anchor", "middle")
    .text("Average readability score");

var readabilityCircles = chartSvg.append('g');

d3.json('grid10x10.json', function (error, graph) {
  if (error) throw error;

var link = svg.append('g')
    .attr('class', 'links')
    .selectAll('line')
    .data(graph.links)
    .enter().append('line');

var node = svg.append('g')
    .attr('class', 'nodes')
    .selectAll('circle')
    .data(graph.nodes)
    .enter().append('circle')
    .attr('r', 4);

node.append('title').text(function (d) { return d.name; });

var paramGroups = [
    {name: 'chargeStrength', values: [-30, -80]},
    {name: 'linkDistance', values: [30, 80]},
    {name: 'linkStrength', values: [null, 0.05, 0.25]},
    {name: 'gravity', values: [0, 0.01]},
    {name: 'iterations', values: [1, 2]},
    {name: 'alphaDecay', values: [0, 0.01, 0.0228]},
    {name: 'velocityDecay', values: [0.4, 0.5]}
  ];

var paramList = generateParams(paramGroups);

console.log('Testing ' + paramList.length + ' parameter settings');

paramList.forEach(function (p, i, arr) {
    var forceSim = getForceSimFromParams(p);

// Reset node attributes.
    graph.nodes.forEach(function (n) {
      n.x = n.y = n.vx = n.vy = 0;
    });

forceSim.nodes(graph.nodes)
      .stop();

forceSim.force('link')
      .links(graph.links);

for (var t = 0; t < numTicks; ++t) {
      forceSim.tick();
    }

p.graphReadability = greadability.greadability(graph.nodes, graph.links);
    p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
      p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4

p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });

if (i % 100 === 0) console.log(i);
  });

// Remove "Loading..." text.
  svg.selectAll('text').remove();

// Choose the best layout parameters and draw that graph.
  selectedParams = paramList.sort(function (a,b) {
    if (a.graphReadability > b.graphReadability) return 1;
    if (b.graphReadability < a.graphReadability) return -1;
    return 0;
  })[paramList.length - 1];

// Plot the number line.
  readabilityCircles.selectAll('circle')
    .data(paramList)
    .enter().append('circle')
    .classed('selected', function (d) { return d === selectedParams; })
    .attr('cx', function (d) { return x(d.graphReadability); })
    .attr('cy', 5)
    .attr('r', 4)
    .on('click', function (d) {
      console.log(d);
      selectedParams = d;
      readabilityCircles.selectAll('circle').classed('selected', false);
      d3.select(this).classed('selected', true).raise();
      drawGraph();
    });

drawGraph();

function drawGraph () {
    graph.nodes.forEach(function (n, i) {
      n.x = selectedParams.positions[i].x;
      n.y = selectedParams.positions[i].y;
    });

var xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
    var xMin = xDistance[0];
    xDistance = xDistance[1] - xDistance[0];

var yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
    var yMin = yDistance[0];
    yDistance = yDistance[1] - yDistance[0];

var scale = height / Math.max(xDistance, yDistance);

svg.attr('transform', 'scale(' + 1 + ')');

graph.nodes.forEach(function (n, i) {
      n.x = (height - 10) * (selectedParams.positions[i].x - xMin) / Math.max(xDistance, yDistance);
      n.y = (height - 10) * (selectedParams.positions[i].y - yMin) / Math.max(xDistance, yDistance);
    });

xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
    xMid = (xDistance[1] + xDistance[0]) / 2;
    yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
    yMid = (yDistance[1] - yDistance[0]) / 2;

graph.nodes.forEach(function (n, i) {
      n.x = n.x + width/2 - xMid;
      n.y = n.y + height/2 - yMid;
    });

link
      .attr('x1', function (d) { return d.source.x; })
      .attr('x2', function (d) { return d.target.x; })
      .attr('y1', function (d) { return d.source.y; })
      .attr('y2', function (d) { return d.target.y; });

node
      .attr('cx', function (d) { return d.x; })
      .attr('cy', function (d) { return d.y; });
  }
});

function generateParams (paramGroups, paramList, currParam) {
  var p = paramGroups[0];

if (!paramList) paramList = [];

if (!currParam) currParam = {};

p.values.forEach(function (v) {
    var setting = {};
    setting[p.name] = v;
    if (paramGroups.length === 1) {
      paramList.push(Object.assign(setting, currParam));
    } else {
      generateParams(paramGroups.slice(1), paramList, Object.assign(setting, currParam));
    }
  });

return paramList;
}

function getForceSimFromParams (params) {
  var forceSim = d3.forceSimulation()
    .force('link', d3.forceLink().iterations(params.iterations))
    .force('charge', d3.forceManyBody().strength(params.chargeStrength))
    .force('x', d3.forceX(0).strength(params.gravity))
    .force('y', d3.forceY(0).strength(params.gravity))
    .force('center', d3.forceCenter(0, 0))
    .alphaDecay(params.alphaDecay)
    .velocityDecay(params.velocityDecay);

if (params.linkStrength !== null) {
    forceSim.force('link').strength(params.linkStrength);
  }

return forceSim;
}

</script>

https://d3js.org/d3.v4.min.js