Skip to content

Instantly share code, notes, and snippets.

@jalapic

jalapic/README.md

Last active February 29, 2016 15:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jalapic/5cf4d0a3abee468d2733 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jalapic/5cf4d0a3abee468d2733 to your computer and use it in GitHub Desktop.
Download ZIP
adjacency matrix simple
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js" type="text/javascript"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var matrix = [
{
"id": "A-A",
"x": "0",
"y": "0",
"weight": ""
},
{
"id": "A-B",
"x": "1",
"y": "0",
"weight": "100"
},
{
"id": "A-C",
"x": "2",
"y": "0",
"weight": "77"
},
{
"id": "A-D",
"x": "3",
"y": "0",
"weight": "95"
},
{
"id": "A-E",
"x": "4",
"y": "0",
"weight": "18"
},
{
"id": "A-F",
"x": "5",
"y": "0",
"weight": "35"
},
{
"id": "A-G",
"x": "6",
"y": "0",
"weight": "21"
},
{
"id": "A-H",
"x": "7",
"y": "0",
"weight": "38"
},
{
"id": "A-I",
"x": "8",
"y": "0",
"weight": "17"
},
{
"id": "A-J",
"x": "9",
"y": "0",
"weight": "40"
},
{
"id": "A-K",
"x": "10",
"y": "0",
"weight": "25"
},
{
"id": "A-L",
"x": "11",
"y": "0",
"weight": "25"
},
{
"id": "B-A",
"x": "0",
"y": "1",
"weight": "0"
},
{
"id": "B-B",
"x": "1",
"y": "1",
"weight": ""
},
{
"id": "B-C",
"x": "2",
"y": "1",
"weight": "28"
},
{
"id": "B-D",
"x": "3",
"y": "1",
"weight": "13"
},
{
"id": "B-E",
"x": "4",
"y": "1",
"weight": "22"
},
{
"id": "B-F",
"x": "5",
"y": "1",
"weight": "7"
},
{
"id": "B-G",
"x": "6",
"y": "1",
"weight": "3"
},
{
"id": "B-H",
"x": "7",
"y": "1",
"weight": "23"
},
{
"id": "B-I",
"x": "8",
"y": "1",
"weight": "12"
},
{
"id": "B-J",
"x": "9",
"y": "1",
"weight": "19"
},
{
"id": "B-K",
"x": "10",
"y": "1",
"weight": "12"
},
{
"id": "B-L",
"x": "11",
"y": "1",
"weight": "14"
},
{
"id": "C-A",
"x": "0",
"y": "2",
"weight": "0"
},
{
"id": "C-B",
"x": "1",
"y": "2",
"weight": "3"
},
{
"id": "C-C",
"x": "2",
"y": "2",
"weight": ""
},
{
"id": "C-D",
"x": "3",
"y": "2",
"weight": "8"
},
{
"id": "C-E",
"x": "4",
"y": "2",
"weight": "5"
},
{
"id": "C-F",
"x": "5",
"y": "2",
"weight": "12"
},
{
"id": "C-G",
"x": "6",
"y": "2",
"weight": "5"
},
{
"id": "C-H",
"x": "7",
"y": "2",
"weight": "1"
},
{
"id": "C-I",
"x": "8",
"y": "2",
"weight": "5"
},
{
"id": "C-J",
"x": "9",
"y": "2",
"weight": "14"
},
{
"id": "C-K",
"x": "10",
"y": "2",
"weight": "9"
},
{
"id": "C-L",
"x": "11",
"y": "2",
"weight": "3"
},
{
"id": "D-A",
"x": "0",
"y": "3",
"weight": "1"
},
{
"id": "D-B",
"x": "1",
"y": "3",
"weight": "1"
},
{
"id": "D-C",
"x": "2",
"y": "3",
"weight": "6"
},
{
"id": "D-D",
"x": "3",
"y": "3",
"weight": ""
},
{
"id": "D-E",
"x": "4",
"y": "3",
"weight": "18"
},
{
"id": "D-F",
"x": "5",
"y": "3",
"weight": "29"
},
{
"id": "D-G",
"x": "6",
"y": "3",
"weight": "18"
},
{
"id": "D-H",
"x": "7",
"y": "3",
"weight": "47"
},
{
"id": "D-I",
"x": "8",
"y": "3",
"weight": "5"
},
{
"id": "D-J",
"x": "9",
"y": "3",
"weight": "11"
},
{
"id": "D-K",
"x": "10",
"y": "3",
"weight": "4"
},
{
"id": "D-L",
"x": "11",
"y": "3",
"weight": "3"
},
{
"id": "E-A",
"x": "0",
"y": "4",
"weight": "0"
},
{
"id": "E-B",
"x": "1",
"y": "4",
"weight": "1"
},
{
"id": "E-C",
"x": "2",
"y": "4",
"weight": "0"
},
{
"id": "E-D",
"x": "3",
"y": "4",
"weight": "0"
},
{
"id": "E-E",
"x": "4",
"y": "4",
"weight": ""
},
{
"id": "E-F",
"x": "5",
"y": "4",
"weight": "16"
},
{
"id": "E-G",
"x": "6",
"y": "4",
"weight": "2"
},
{
"id": "E-H",
"x": "7",
"y": "4",
"weight": "2"
},
{
"id": "E-I",
"x": "8",
"y": "4",
"weight": "0"
},
{
"id": "E-J",
"x": "9",
"y": "4",
"weight": "14"
},
{
"id": "E-K",
"x": "10",
"y": "4",
"weight": "3"
},
{
"id": "E-L",
"x": "11",
"y": "4",
"weight": "0"
},
{
"id": "F-A",
"x": "0",
"y": "5",
"weight": "0"
},
{
"id": "F-B",
"x": "1",
"y": "5",
"weight": "0"
},
{
"id": "F-C",
"x": "2",
"y": "5",
"weight": "3"
},
{
"id": "F-D",
"x": "3",
"y": "5",
"weight": "1"
},
{
"id": "F-E",
"x": "4",
"y": "5",
"weight": "12"
},
{
"id": "F-F",
"x": "5",
"y": "5",
"weight": ""
},
{
"id": "F-G",
"x": "6",
"y": "5",
"weight": "23"
},
{
"id": "F-H",
"x": "7",
"y": "5",
"weight": "11"
},
{
"id": "F-I",
"x": "8",
"y": "5",
"weight": "9"
},
{
"id": "F-J",
"x": "9",
"y": "5",
"weight": "11"
},
{
"id": "F-K",
"x": "10",
"y": "5",
"weight": "10"
},
{
"id": "F-L",
"x": "11",
"y": "5",
"weight": "11"
},
{
"id": "G-A",
"x": "0",
"y": "6",
"weight": "0"
},
{
"id": "G-B",
"x": "1",
"y": "6",
"weight": "1"
},
{
"id": "G-C",
"x": "2",
"y": "6",
"weight": "1"
},
{
"id": "G-D",
"x": "3",
"y": "6",
"weight": "6"
},
{
"id": "G-E",
"x": "4",
"y": "6",
"weight": "2"
},
{
"id": "G-F",
"x": "5",
"y": "6",
"weight": "3"
},
{
"id": "G-G",
"x": "6",
"y": "6",
"weight": ""
},
{
"id": "G-H",
"x": "7",
"y": "6",
"weight": "2"
},
{
"id": "G-I",
"x": "8",
"y": "6",
"weight": "2"
},
{
"id": "G-J",
"x": "9",
"y": "6",
"weight": "7"
},
{
"id": "G-K",
"x": "10",
"y": "6",
"weight": "1"
},
{
"id": "G-L",
"x": "11",
"y": "6",
"weight": "2"
},
{
"id": "H-A",
"x": "0",
"y": "7",
"weight": "0"
},
{
"id": "H-B",
"x": "1",
"y": "7",
"weight": "0"
},
{
"id": "H-C",
"x": "2",
"y": "7",
"weight": "1"
},
{
"id": "H-D",
"x": "3",
"y": "7",
"weight": "0"
},
{
"id": "H-E",
"x": "4",
"y": "7",
"weight": "2"
},
{
"id": "H-F",
"x": "5",
"y": "7",
"weight": "1"
},
{
"id": "H-G",
"x": "6",
"y": "7",
"weight": "0"
},
{
"id": "H-H",
"x": "7",
"y": "7",
"weight": ""
},
{
"id": "H-I",
"x": "8",
"y": "7",
"weight": "2"
},
{
"id": "H-J",
"x": "9",
"y": "7",
"weight": "6"
},
{
"id": "H-K",
"x": "10",
"y": "7",
"weight": "4"
},
{
"id": "H-L",
"x": "11",
"y": "7",
"weight": "4"
},
{
"id": "I-A",
"x": "0",
"y": "8",
"weight": "0"
},
{
"id": "I-B",
"x": "1",
"y": "8",
"weight": "0"
},
{
"id": "I-C",
"x": "2",
"y": "8",
"weight": "0"
},
{
"id": "I-D",
"x": "3",
"y": "8",
"weight": "1"
},
{
"id": "I-E",
"x": "4",
"y": "8",
"weight": "0"
},
{
"id": "I-F",
"x": "5",
"y": "8",
"weight": "1"
},
{
"id": "I-G",
"x": "6",
"y": "8",
"weight": "2"
},
{
"id": "I-H",
"x": "7",
"y": "8",
"weight": "0"
},
{
"id": "I-I",
"x": "8",
"y": "8",
"weight": ""
},
{
"id": "I-J",
"x": "9",
"y": "8",
"weight": "7"
},
{
"id": "I-K",
"x": "10",
"y": "8",
"weight": "0"
},
{
"id": "I-L",
"x": "11",
"y": "8",
"weight": "2"
},
{
"id": "J-A",
"x": "0",
"y": "9",
"weight": "0"
},
{
"id": "J-B",
"x": "1",
"y": "9",
"weight": "0"
},
{
"id": "J-C",
"x": "2",
"y": "9",
"weight": "0"
},
{
"id": "J-D",
"x": "3",
"y": "9",
"weight": "0"
},
{
"id": "J-E",
"x": "4",
"y": "9",
"weight": "1"
},
{
"id": "J-F",
"x": "5",
"y": "9",
"weight": "1"
},
{
"id": "J-G",
"x": "6",
"y": "9",
"weight": "16"
},
{
"id": "J-H",
"x": "7",
"y": "9",
"weight": "2"
},
{
"id": "J-I",
"x": "8",
"y": "9",
"weight": "0"
},
{
"id": "J-J",
"x": "9",
"y": "9",
"weight": ""
},
{
"id": "J-K",
"x": "10",
"y": "9",
"weight": "1"
},
{
"id": "J-L",
"x": "11",
"y": "9",
"weight": "0"
},
{
"id": "K-A",
"x": "0",
"y": "10",
"weight": "0"
},
{
"id": "K-B",
"x": "1",
"y": "10",
"weight": "1"
},
{
"id": "K-C",
"x": "2",
"y": "10",
"weight": "0"
},
{
"id": "K-D",
"x": "3",
"y": "10",
"weight": "0"
},
{
"id": "K-E",
"x": "4",
"y": "10",
"weight": "0"
},
{
"id": "K-F",
"x": "5",
"y": "10",
"weight": "2"
},
{
"id": "K-G",
"x": "6",
"y": "10",
"weight": "0"
},
{
"id": "K-H",
"x": "7",
"y": "10",
"weight": "0"
},
{
"id": "K-I",
"x": "8",
"y": "10",
"weight": "0"
},
{
"id": "K-J",
"x": "9",
"y": "10",
"weight": "0"
},
{
"id": "K-K",
"x": "10",
"y": "10",
"weight": ""
},
{
"id": "K-L",
"x": "11",
"y": "10",
"weight": "2"
},
{
"id": "L-A",
"x": "0",
"y": "11",
"weight": "2"
},
{
"id": "L-B",
"x": "1",
"y": "11",
"weight": "1"
},
{
"id": "L-C",
"x": "2",
"y": "11",
"weight": "0"
},
{
"id": "L-D",
"x": "3",
"y": "11",
"weight": "2"
},
{
"id": "L-E",
"x": "4",
"y": "11",
"weight": "0"
},
{
"id": "L-F",
"x": "5",
"y": "11",
"weight": "0"
},
{
"id": "L-G",
"x": "6",
"y": "11",
"weight": "1"
},
{
"id": "L-H",
"x": "7",
"y": "11",
"weight": "0"
},
{
"id": "L-I",
"x": "8",
"y": "11",
"weight": "1"
},
{
"id": "L-J",
"x": "9",
"y": "11",
"weight": "1"
},
{
"id": "L-K",
"x": "10",
"y": "11",
"weight": "0"
},
{
"id": "L-L",
"x": "11",
"y": "11",
"weight": ""
}
]
var weightScale = d3.scale.linear()
.domain(d3.extent(function(d){ return d.weight }))
.range([0,1])
// fill matrix
d3.select("body")
.append("svg")
.append("g")
.attr("id", "adjacencyG")
.attr("transform", "translate(50,50)")
.selectAll("rect")
.data(matrix)
.enter()
.append("rect")
.attr("width", 25)
.attr("height", 25)
.attr("x", function (d) {return d.x * 25})
.attr("y", function (d) {return d.y * 25})
.style("stroke", "black")
.style("stroke-width", "1px")
.style("fill", "#ff1414")
.style("fill-opacity", function (d) {return d.weight*0.1; })
.on("mouseover", gridOver)
;
// add values
d3.select("svg")
.append("g")
.attr("id", "adjacencyG")
.attr("transform", "translate(50,50)")
.selectAll("rect")
.data(matrix)
.enter()
.append("text")
.attr("x", function (d) {return (d.x * 25)+12.5})
.attr("y", function (d) {return (d.y * 25)+12.5})
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "black")
.attr("text-anchor","middle")
.attr("dy", ".35em")
.text(function(d){ return d.weight;})
;
// add axis
var nameScale = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"])
.rangePoints([0,300],1);
xAxis = d3.svg.axis()
.scale(nameScale)
.orient("top")
.tickSize(3);
yAxis = d3.svg.axis()
.scale(nameScale)
.orient("left")
.tickSize(3);
d3.selectAll("#adjacencyG")
.append("g")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "middle")
d3.selectAll("#adjacencyG")
.append("g")
.call(yAxis);
// cell and it's transpose
function gridOver(d,i) {
d3.selectAll("rect")
.style("stroke-width", function (p) {return (p.x == d.y && p.y == d.x) || (p.y == d.y && p.x == d.x) ? "3.5px" : "1px"})
.style("fill", function (p) {return (p.x == d.y && p.y == d.x) || (p.y == d.y && p.x == d.x) ? "#fff27f" : "#ff1414"})
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment