D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
nivas8292
Full window
Github gist
Adjacency Matrix Example
<!DOCTYPE html> <html> <head> <title>Adjacency Matrix Layout</title> <style> svg { width: 1250px; height: 850px; border: 1px solid gray; } g.am-axis text { font-size: 8px; } .domain { fill: none; } .tick > line{ stroke: black; stroke-width: 1px; stroke-opacity: .25; } </style> </head> <body> <svg></svg> <script src="https://d3js.org/d3.v3.min.js" type="text/JavaScript"></script> <script src="adjacency_matrix.js"></script> <script> var svg = d3.select('svg'); d3.json('data.json', function(err, data) { var adjacencyMatrix = d3.layout.adjacencyMatrix() .size([1200, 800]) .nodes(data.nodes) .links(data.links) .directed(false) .nodeID(function(d) {return d.name;}); var matrixData = adjacencyMatrix(); var colorScale = d3.scale.category20b(); svg.append('g') .attr('transform', 'translate(' + 50 + ',' + 50 + ')') .attr('id', 'adjacencyG') .selectAll('rect') .data(matrixData) .enter().append('rect') .attr('x', function(d) {return d.x;}) .attr('y', function(d) {return d.y;}) .attr('width', function(d) {return d.width;}) .attr('height', function(d) {return d.height;}) .style('stroke', 'black') .style('stroke-width', '1px') .style('stroke-opacity', .1) .style('fill', function(d) {return colorScale(d.source.group);}) .style('fill-opacity', function(d) {return d.weight * .8;}) d3.select('#adjacencyG') .call(adjacencyMatrix.xAxis) .call(adjacencyMatrix.yAxis); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js