Skip to content

Instantly share code, notes, and snippets.

@nadinesk

nadinesk/README.md

Last active August 29, 2015 14:06
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 nadinesk/0dc8788afeefc0a0b245 to your computer and use it in GitHub Desktop.
Save nadinesk/0dc8788afeefc0a0b245 to your computer and use it in GitHub Desktop.
Download ZIP
Arcs, Lines, Bezier Curves, Triangles: Barr's Diagram
Raw
README.md
Raw
barrData.csv
iRadius oRadius tranx trany label lPosx lPosy color
30 31 70 9 VAN GOGH 70 20 black
45 46 188 -5 GAUGIN 188 20 black
70 71 440 -20 SEURAT 440 32 black
30 31 10 75 REDON 10 82 black
30 31 500 70 ROUSSEOU 500 80 black
35 36 110 160 FAUVISM 110 170 black
75 76 450 161 CUBISM 450 200 black
60 61 25 210 EXPRESSIONISM 25 240 black
50 51 150 205 FUTURISM 150 225 black
30 31 305 227 ORPHISM 305 243 black
50 51 419 230 SUPREMATISM 419 265 black
35 36 180 270 BRANCUSI 180 290 black
55 56 440 265 CONSTRUCTIVISM 440 295 black
35 36 70 330 DADAISM 70 350 black
30 31 170 350 PURISM 170 360 black
0 0 0 0 DE STIJL and 295 340 white
60 61 290 310 NEOPLASTICISM 290 350 black
40 41 35 400 SURREALISM 35 415 black
35 36 390 370 BAUHAUS 390 390 black
0 0 0 0 NON-GEOMETRICAL 25 540 white
0 0 0 0 ABSTRACT ART 26 550 white
0 0 0 0 GEOMETRICAL 415 540 white
0 0 0 0 ABSTRACT ART 411 550 white
0 0 0 0 SYNTHETISM 190 8 black
40 41 315 -20 CEZANNE 315 0 black
0 0 0 0 NEO-IMPRESSIONISM 440 10 black
Raw
curvecoords.csv
curve coords dash1 dash2 id
12 M-10,97 A-5,10 0 0,0 -3,210 3 3
16 M360,150 A100,60 0 0,1 240,190 0 0
16 M240,190 A100,60 0 0,0 144,205 0 0
18 M386,200 A215,30 0 0,0 170,204 0 0
19 M240,215 A100,100 0 0,0 190,214 0 0
25 M385,285 A100,100 0 0,1 350,223 0 0 Machine Aesthetic-Constructivism
29 M100,330 A370,200 0 0,0 405,221 0 0 Cubism-Dadaism
31 M198,334 A370,220 0 0,0 402,219 0 0 Cubism-Purism
38 M235,397 A370,220 0 0,0 275,369 0 0 De Stijl and NeoPlasticism-Modern Architecture
39 M378,403 A370,220 0 0,1 245,426 0 0 Bauhaus to Modern Architecture
40 M-8,261 A80,90 0 0,0 0,350 0 0 Expressionism to Bauhaus
41 M0,350 A280,90 0 0,0 355,390 0 0 Expressionism to Bauhaus
44 M400,360 A120,75 0 0,1 390,272 0 0 Suprematism to Bauhaus
45 M417,370 A120,75 0 0,0 440,320 0 0 Constructivism to Bauhaus
46 M-14,515 A300,400 0 0,1 -14,257 0 0 Expressionism-Non-Geometrical Abstract Art
49 M195,368 L255,395 L370,530 0 0 Purism-Geometrical Abstract Art
50 M450,360 A70,80 0 0,1 378,258 0 0 Suprematism-Geometrical Abstract Art
50 M435,515 A130,140 0 0,0 450,360 0 0 Suprematism-Geometrical Abstract Art
51 M457,530 A180,190 0 0,0 460,317 0 0 Constructivism to Geometrical Abstract Art
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
.stuff {
font-family:sans-serif;
fill: black;
font-size:10px;
font-weight:550;
}
.rect {
fill: red;
stroke-width: 1px;
stroke: black;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.point {
fill: red;
stroke: #000;
}
.y.axis path,
.y.axis line {
fill: none;
stroke: #FFFFFF;
shape-rendering: crispEdges;
}
.y.axis text {
font: 10px sans-serif;
}
h4 {
font: 12px sans-serif;
text-align:center;
margin-bottom: 17px;
}
</style>
</head>
<h4>SKETCH OF ALFRED BARR'S DIAGRAM = "CUBISM AND ABSTRACT ART", 1955</h4>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 660 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([1,4.6])
.range([0, width], 1);
var y = d3.scale.linear()
.domain([1935,1890])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("right")
.ticks(10)
.tickFormat(d3.format("y"));
d3.select(self.frameElement).style("height", "640px");
var chart = d3.select("body").append("svg")
.attr("width", width + 300)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + (margin.left + 50) + "," + margin.top + ")");
d3.csv("linedata.csv", function(error, data) {
chart.selectAll("g")
.data(data)
.enter().append("line")
.attr("x1", function(d) { return d.x1; })
.attr("y1", function(d) { return d.y1; })
.attr("x2", function(d) { return d.x2; })
.attr("y2", function(d) { return d.y2; })
.attr("stroke-width", 1)
.attr("stroke", "black")
.style("stroke-dasharray", function(d) { return ( d.dash1 + "," + d.dash2 ); });
})
d3.csv("curvecoords.csv", function(error, data) {
/* twelfth arrow-Bezier curve-Redon to Expressionism */
chart.selectAll("g")
.data(data)
.enter().append("path")
.attr("d", function(d) { return d.coords; })
.attr("stroke-width", 1)
.attr("stroke", "black")
.style("fill", "none")
.style("stroke-dasharray", function(d) { return ( d.dash1 + "," + d.dash2 ); })
})
d3.csv("rectData.csv", function(error, data) {
chart.selectAll("g" )
.data(data)
.enter().append("rect")
.attr("class", "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; })
chart.selectAll("g")
.data(data)
.enter().append("text")
.attr("class", "stuff")
.attr("x", function(d) { return d.textX; })
.attr("y", function(d) { return d.textY; })
.text(function(d) { return d.text; })
})
d3.csv("barrData.csv", function(error, data) {
var arc = d3.svg.arc()
.innerRadius(function(d) {return d.iRadius})
.outerRadius(function(d) {return d.oRadius})
.startAngle(2.0)
.endAngle(4.2)
;
chart.selectAll("g")
.data(data)
.enter().append("path")
.style("fill", function(d, i){
return d.color; })
.attr("d", arc)
.attr("transform", function(d) { return "translate(" + d.tranx + "," + d.trany + ")"; });
chart.selectAll("g")
.data(data)
.enter().append("text")
.attr("class", "stuff")
.attr("transform", function(d) { return "translate(" + (d.lPosx) + "," + (d.lPosy) + ")"; })
.text(function(d) { return d.label; })
.attr("text-anchor", "middle")
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + x(4.25) + ",4)")
.call(yAxis)
d3.csv("triDataDown.csv", function(error, data) {
var triangleDown = d3.svg.symbol().type("triangle-down")
/* triangles for arrow points */
chart.selectAll(".down-points")
.data(data)
.enter().append("path")
.attr("class", "point")
.attr("d", triangleDown)
.attr("transform", function(d) { return "translate(" + d.dtriTransX + "," + d.dtriTransY + ")"; });
})
d3.csv("triDataUp.csv", function(error, data) {
var triangleUp = d3.svg.symbol().type("triangle-up")
/* triangles for arrow points */
chart.selectAll(".up-points")
.data(data)
.enter().append("path")
.attr("class", "point")
.attr("d", triangleUp)
.attr("transform", function(d) { return "translate(" + d.triTransX + "," + d.triTransY + ")"; });
})
})
</script>
</body>
</html>
Raw
linedata.csv
arrow x1 y1 x2 y2 dash1 dash2 id
1 135 5 110 0 0 0
2 282 0 235 5 0 0
3 112 140 80 37 0 0
4 96 140 20 10 0 0
5 123 135 190 40 0 0
6 135 140 290 12 0 0
7 145 153 390 30 0 0
8 427 179 320 20 0 0
9 447 180 430 50 0 0
10 470 175 500 100 0 0
13 15 205 15 145 0 0
14 80 160 50 145 0 0 Near Eastern Art to Fauvism
15 360 150 410 43 0 0
16 55 208 100 194 0 0
17 390 190 300 170 0 0
20 382 208 340 220 0 0
21 423 232 422 239 0 0
22 343 235 400 217 0 0 Cubism-Orphism
23 401 244 350 220 0 0 Machine Aesthetic-Suprematism
24 180 270 270 225 3 3 Machine Aesthetic-Brancusi
25 475 270 470 233 0 0 Cubism-Constructivism
26 55 330 40 268 0 0 Expressionism-Dadaism
27 73 315 130 252 0 0 Futurism-Dadaism
28 85 320 237 225 0 0 Machine Aesthetic-Dadaism
30 179 330 275 225 0 0 Machine Aesthetic-Purism
32 300 317 408 224 0 0 Cubism-De Stijl and Plasticism
33 320 320 336 225 0 0 Machine Aesthetic-De Stijl and Neoplasticism
34 15 395 20 270 0 0 Expressionism-Surrealism
35 57 362 44 394 0 0 Dadaism-Surrealism
36 156 377 155 395 0 0 Purism-Modern Architecture
37 219 395 242 225 0 0 Machine Aesthetic-Modern Architecture
42 365 371 323 360 0 0 De Stijl and Neoplasticism-Bauhaus
43 380 365 340 225 0 0 Machine Aesthetic-Bauhaus
47 20 520 20 437 0 0 Surrealism-Non-Geometrical Abstract Art
48 52 520 160 300 0 0 Brancusi-Non-Geometrical Art
50 392 520 315 364 0 0 De Stijl and Neoplasticism to Geometrical Abstract Art
Raw
rectData.csv
number x y width height textX textY text
1 10 -10 100 20 14 3 JAPANESE PRINTS
2 -20 125 105 20 -18 138 NEAR EASTERN ART
3 200 157 110 20 207 170 NEGRO SCULPTURE
4 235 210 115 15 240 220 MACHINE AESTHETIC
5 120 405 115 35 155 420 MODERN
5 140 432 ARCHITECTURE
Raw
triDataDown.csv
number dtriTransX dtriTransY place
3 112 145 VG-Fauvism
4 95 145 JP-Fauvism
5 123 140 Sm-Fauvism
6 135 145 Cn-Fauvism
9 447 180 St-Cubism
10 470 180 Ro-Cubism
13 15 205 NE-Expressionism
15 146 210 ST-Futurism
20 380 210 MA-Cubism
21 420 245 Cm-Suprematism
22 55 330 En-Dadaism
23 75 320 Fm-Dadaism
24 87 325 MA-Dadaism
29 180 335 MA-Purism
32 320 320 MA-Plasticism
34 475 270 Cm-Constructivism
35 15 395 Em-Surrealism
36 45 395 Dm-Surrealism
37 155 395 Pm-Modern Architecture
38 220 395 MA-Modern Architecture
41 355 390 Em-Bauhaus
43 380 365 MA-Bauhaus
44 400 365 Sm-Bauhaus
46 -15 520 Em-NG
47 20 520 Sm-NG
48 55 520 Bi-NG
50 390 520 DN-GA
51 435 520 Sm-GA
Raw
triDataUp.csv
number triTransX triTransY shape
1 138 5 JP-SG
2 233 4 Cn-SG
7 147 150 St-Fauvism
8 425 174 Cn-Cubism
11 -3 210 Rn-Expressionism
14 80 158 NE-Fauvism
16 52 208 Fm-Expressionism
17 390 190 NS-Cm
18 170 205 Cm-Futurism
19 190 215 MA-Futurism
25 100 330 Cm-Dadaism
26 180 270 MA-Brancusi
27 340 235 Cm-Orphism
28 400 243 MA-Suprematism
30 195 335 Cm-Purism
31 300 314 Cm-Plasticism
33 385 285 MA-Constructivism
39 235 395 DN-Modern Architecture
40 245 425 Bh-Modern Architecture
42 365 370 DN-Bauhaus
45 415 370 Cm-Bauhaus
49 370 530 Pm-GA
52 457 530 Cm-GA
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment