Skip to content

Instantly share code, notes, and snippets.

@bytesbysophie

bytesbysophie/.block

Last active November 9, 2019 14:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bytesbysophie/5c019796b8dd28d3a8e394534cb02293 to your computer and use it in GitHub Desktop.
Save bytesbysophie/5c019796b8dd28d3a8e394534cb02293 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
BinaryPatternMelted.csv
group variable value
A 1 0
B 1 0
C 1 0
D 1 0
E 1 0
F 1 0
G 1 0
H 1 0
I 1 0
J 1 0
K 1 0
L 1 0
M 1 0
N 1 0
O 1 0
P 1 0
Q 1 0
R 1 0
S 1 0
T 1 0
U 1 0
V 1 0
W 1 0
X 1 0
Y 1 0
Z 1 0
A 2 0
B 2 0
C 2 0
D 2 0
E 2 0
F 2 0
G 2 0
H 2 0
I 2 0
J 2 0
K 2 0
L 2 0
M 2 0
N 2 0
O 2 0
P 2 0
Q 2 0
R 2 0
S 2 0
T 2 0
U 2 0
V 2 0
W 2 0
X 2 0
Y 2 0
Z 2 0
A 3 0
B 3 0
C 3 0
D 3 0
E 3 0
F 3 0
G 3 7
H 3 8
I 3 9
J 3 10
K 3 11
L 3 12
M 3 13
N 3 14
O 3 15
P 3 16
Q 3 0
R 3 0
S 3 0
T 3 0
U 3 0
V 3 0
W 3 0
X 3 0
Y 3 0
Z 3 0
A 4 0
B 4 0
C 4 0
D 4 0
E 4 5
F 4 6
G 4 0
H 4 0
I 4 0
J 4 0
K 4 0
L 4 0
M 4 0
N 4 0
O 4 0
P 4 0
Q 4 17
R 4 18
S 4 0
T 4 0
U 4 0
V 4 0
W 4 0
X 4 0
Y 4 0
Z 4 0
A 5 0
B 5 0
C 5 0
D 5 4
E 5 0
F 5 0
G 5 0
H 5 0
I 5 0
J 5 0
K 5 0
L 5 12
M 5 0
N 5 0
O 5 0
P 5 0
Q 5 0
R 5 0
S 5 19
T 5 0
U 5 0
V 5 0
W 5 0
X 5 0
Y 5 0
Z 5 0
A 6 0
B 6 0
C 6 0
D 6 4
E 6 0
F 6 0
G 6 0
H 6 0
I 6 0
J 6 0
K 6 0
L 6 12
M 6 0
N 6 0
O 6 0
P 6 0
Q 6 0
R 6 0
S 6 19
T 6 0
U 6 0
V 6 0
W 6 0
X 6 0
Y 6 0
Z 6 0
A 7 0
B 7 0
C 7 0
D 7 4
E 7 5
F 7 6
G 7 7
H 7 0
I 7 0
J 7 0
K 7 0
L 7 12
M 7 13
N 7 14
O 7 15
P 7 16
Q 7 17
R 7 18
S 7 19
T 7 0
U 7 0
V 7 0
W 7 0
X 7 0
Y 7 0
Z 7 0
A 8 0
B 8 0
C 8 0
D 8 0
E 8 0
F 8 0
G 8 0
H 8 0
I 8 0
J 8 0
K 8 0
L 8 0
M 8 0
N 8 0
O 8 0
P 8 0
Q 8 0
R 8 0
S 8 0
T 8 0
U 8 0
V 8 0
W 8 0
X 8 0
Y 8 0
Z 8 0
A 9 0
B 9 0
C 9 0
D 9 0
E 9 0
F 9 0
G 9 0
H 9 0
I 9 0
J 9 0
K 9 0
L 9 0
M 9 0
N 9 0
O 9 0
P 9 0
Q 9 0
R 9 0
S 9 0
T 9 0
U 9 0
V 9 0
W 9 0
X 9 0
Y 9 0
Z 9 0
A 10 0
B 10 0
C 10 0
D 10 0
E 10 0
F 10 0
G 10 0
H 10 0
I 10 0
J 10 0
K 10 0
L 10 0
M 10 0
N 10 0
O 10 0
P 10 0
Q 10 0
R 10 0
S 10 0
T 10 0
U 10 0
V 10 0
W 10 0
X 10 0
Y 10 0
Z 10 0
A 11 0
B 11 0
C 11 0
D 11 0
E 11 0
F 11 0
G 11 0
H 11 0
I 11 0
J 11 0
K 11 0
L 11 0
M 11 0
N 11 0
O 11 0
P 11 0
Q 11 0
R 11 0
S 11 0
T 11 0
U 11 0
V 11 0
W 11 0
X 11 0
Y 11 0
Z 11 0
A 12 0
B 12 0
C 12 0
D 12 0
E 12 0
F 12 0
G 12 0
H 12 0
I 12 0
J 12 0
K 12 0
L 12 0
M 12 0
N 12 0
O 12 0
P 12 0
Q 12 0
R 12 0
S 12 0
T 12 0
U 12 0
V 12 0
W 12 0
X 12 0
Y 12 0
Z 12 0
A 13 0
B 13 0
C 13 0
D 13 0
E 13 0
F 13 0
G 13 0
H 13 0
I 13 0
J 13 0
K 13 0
L 13 0
M 13 0
N 13 0
O 13 0
P 13 0
Q 13 0
R 13 0
S 13 0
T 13 0
U 13 0
V 13 0
W 13 0
X 13 0
Y 13 0
Z 13 0
A 14 0
B 14 0
C 14 0
D 14 0
E 14 0
F 14 0
G 14 0
H 14 0
I 14 0
J 14 0
K 14 0
L 14 0
M 14 0
N 14 0
O 14 0
P 14 0
Q 14 0
R 14 0
S 14 0
T 14 0
U 14 0
V 14 0
W 14 0
X 14 0
Y 14 0
Z 14 0
A 15 0
B 15 0
C 15 0
D 15 0
E 15 0
F 15 0
G 15 0
H 15 0
I 15 0
J 15 0
K 15 0
L 15 0
M 15 0
N 15 0
O 15 0
P 15 0
Q 15 0
R 15 0
S 15 0
T 15 0
U 15 0
V 15 0
W 15 0
X 15 0
Y 15 0
Z 15 0
A 16 0
B 16 0
C 16 0
D 16 0
E 16 0
F 16 0
G 16 0
H 16 0
I 16 0
J 16 0
K 16 0
L 16 0
M 16 0
N 16 0
O 16 0
P 16 0
Q 16 0
R 16 0
S 16 0
T 16 0
U 16 0
V 16 0
W 16 0
X 16 0
Y 16 0
Z 16 0
A 17 0
B 17 0
C 17 0
D 17 0
E 17 0
F 17 0
G 17 0
H 17 0
I 17 0
J 17 0
K 17 0
L 17 0
M 17 0
N 17 0
O 17 0
P 17 0
Q 17 0
R 17 0
S 17 0
T 17 0
U 17 0
V 17 0
W 17 0
X 17 0
Y 17 0
Z 17 0
A 18 0
B 18 0
C 18 0
D 18 0
E 18 0
F 18 0
G 18 0
H 18 0
I 18 0
J 18 0
K 18 0
L 18 0
M 18 0
N 18 0
O 18 0
P 18 0
Q 18 0
R 18 0
S 18 0
T 18 0
U 18 0
V 18 0
W 18 0
X 18 0
Y 18 0
Z 18 0
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 30, left: 30},
width = 450 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Labels of row and columns
var myGroups = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
var myVars = ['Z', 'Y', 'X', 'W', 'V', 'U', 'T', 'S', 'R', 'Q', 'P', 'O', 'N ',
'M', 'L', 'K', 'J', 'I', 'H', 'G', 'F', 'E', 'D', 'C', 'B', 'A']
// Build X scales and axis:
var x = d3.scaleBand()
.range([ 0, width ])
.domain(myGroups)
.padding(0.01);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
// Build X scales and axis:
var y = d3.scaleBand()
.range([ height, 0 ])
.domain(myVars)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y));
// Build color scale
var myColor = d3.scaleLinear()
.range(["white", "#69b3a2"])
.domain([1,100])
//Read the data
d3.csv("BinaryPatternMelted.csv", function(data) {
svg.selectAll()
.data(data, function(d) {return d.group+':'+d.variable;})
.enter()
.append("rect")
.attr("y", function(d) { return x(d.group) })
.attr("x", function(d) { return y(d.variable) })
.attr("width", y.bandwidth() )
.attr("height", x.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment