Skip to content

Instantly share code, notes, and snippets.

@kadamwhite
Last active September 18, 2015 01:52
Show Gist options
  • Save kadamwhite/9062a3d33a61dfb3a5e9 to your computer and use it in GitHub Desktop.
Save kadamwhite/9062a3d33a61dfb3a5e9 to your computer and use it in GitHub Desktop.
DataVis w/ D3 Week 4: axes & story
year Architecture & Design Drawings Film Fluxus Collection Media and Performance Art Painting & Sculpture Photography Prints & Illustrated Books total untitled
1929 0 1 0 0 0 0 0 8 9 0
1930 0 2 0 0 0 5 0 1 8 0
1931 0 0 0 0 0 2 0 1 3 0
1932 2 3 0 0 0 1 1 10 17 0
1933 0 0 0 0 0 2 92 2 96 0
1934 45 19 0 0 0 20 2 168 254 0
1935 23 306 4 0 0 22 24 33 412 182
1936 88 27 4 0 0 25 0 4 148 0
1937 193 25 1 0 0 35 57 6 317 6
1938 17 2 10 0 0 16 85 7 137 0
1939 137 87 15 0 0 59 51 72 421 0
1940 73 51 6 0 0 21 125 1140 1416 13
1941 10 152 1 0 0 49 610 67 889 47
1942 81 262 1 0 0 78 218 197 837 16
1943 822 26 0 0 0 37 127 75 1087 0
1944 64 20 1 0 0 19 113 123 340 1
1945 99 83 0 0 0 18 0 82 282 21
1946 32 7 0 0 0 9 32 90 170 0
1947 73 87 1 0 0 19 36 218 434 48
1948 117 31 0 0 0 21 1 227 397 4
1949 28 24 0 0 0 36 0 1423 1511 12
1950 96 27 0 0 0 30 92 203 448 3
1951 149 19 0 0 0 38 0 420 626 0
1952 63 16 0 0 0 32 16 412 539 27
1953 133 71 2 0 0 44 51 171 472 3
1954 115 34 1 0 0 36 44 598 828 5
1955 45 57 1 0 0 55 4 278 440 17
1956 211 99 3 0 0 66 64 665 1108 43
1957 104 41 0 0 0 27 26 99 297 1
1958 188 35 0 0 0 52 0 424 699 11
1959 16 9 0 0 0 63 451 291 830 36
1960 112 31 0 0 0 56 104 146 449 29
1961 59 42 0 0 0 79 151 210 541 42
1962 31 78 0 0 0 38 156 266 569 39
1963 167 220 0 0 0 57 128 370 942 149
1964 92 132 0 0 0 61 572 11651 12508 116
1965 105 82 0 0 0 70 354 1373 1984 136
1966 144 152 0 0 0 61 170 1258 1785 122
1967 199 215 0 0 0 104 340 1468 2326 277
1968 204 233 1 0 0 42 5417 897 6794 351
1969 71 135 4 0 0 73 304 1596 2183 462
1970 168 73 8 0 0 69 256 647 1221 91
1971 3 90 4 0 0 49 500 390 1036 109
1972 70 59 3 0 0 11 258 412 813 127
1973 24 93 0 0 0 29 225 665 1036 210
1974 803 65 2 0 0 25 556 1887 3338 972
1975 19 54 1 0 26 46 283 524 953 92
1976 95 60 2 0 8 34 331 336 866 69
1977 171 139 5 0 0 24 293 539 1171 108
1978 60 326 4 0 0 37 236 686 1349 96
1979 65 109 3 0 32 96 248 537 1090 121
1980 131 72 2 0 15 25 191 209 645 94
1981 164 46 1 0 23 26 698 329 1287 109
1982 96 41 0 0 20 27 298 358 840 89
1983 223 105 2 0 14 47 412 382 1185 67
1984 103 109 1 0 62 29 276 279 859 81
1985 110 166 1 0 14 114 172 471 1048 125
1986 71 60 2 0 62 30 309 482 1016 154
1987 144 45 0 0 17 24 295 739 1264 133
1988 73 95 5 0 36 16 176 615 1016 123
1989 28 73 9 0 10 14 375 361 870 170
1990 146 61 1 0 18 47 253 708 1234 260
1991 30 58 8 0 13 87 192 440 828 98
1992 66 87 2 0 18 45 323 657 1198 187
1993 106 22 1 0 37 17 258 806 1247 293
1994 119 9 1 0 69 75 333 330 936 112
1995 132 47 5 0 6 30 573 179 972 199
1996 202 89 0 0 0 77 196 392 956 273
1997 98 60 4 0 71 40 179 477 929 215
1998 130 56 1 0 41 47 575 401 1251 344
1999 629 92 11 0 152 35 164 578 1661 440
2000 416 110 1 0 107 43 904 263 1844 72
2001 257 324 3 0 10 29 1006 1886 3515 396
2002 39 211 109 0 7 34 110 231 741 104
2003 124 78 47 0 39 14 126 159 587 91
2004 83 173 5 0 36 47 137 254 735 144
2005 103 2754 109 0 68 151 336 543 4064 1353
2006 299 85 17 0 21 34 336 888 1680 665
2007 227 182 72 0 425 41 407 801 2155 551
2008 213 134 127 1082 257 46 267 3321 5447 672
2009 193 124 94 0 53 32 393 667 1556 442
2010 145 244 64 0 3 112 645 841 2054 809
2011 310 237 156 0 178 88 376 719 2064 302
2012 676 150 679 0 139 46 300 1384 3374 630
2013 168 91 260 0 78 68 1257 1062 2984 324
2014 852 95 109 0 64 42 810 692 2664 312
2015 258 7 55 0 35 38 262 90 745 94
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Untitled Works in the MoMA Collection</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type='text/javascript' src='http://d3js.org/d3.v3.js'></script>
<style type='text/css'>
body {
font: 13px/1.38em "helveticaneue", "helvetica neue", helvetica, arial, sans-serif;
padding: 20px;
}
h1 {
font-size: 4em;
}
.italic {
font-style: italic;
font-weight: normal;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.highlight {
color: #e83f2c;
fill: #e83f2c;
}
.regular {
fill: 'black';
}
blockquote {
font-style: italic;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.notes {
max-width: 500px;
}
@media (min-width: 800px) {
svg {
float: left;
margin-right: 20px;
}
.notes {
margin-top: 40px;
max-width: 900px;
}
}
@media (min-width: 960px) {
body {
width: 960px;
margin: auto;
}
}
</style>
</head>
<body>
<h1>MoMA Acquisition History</h1>
<h2>Collection Growth</h2>
<p>Columns represent the number of works acquired by the Museum of Modern Art each year since the museum&rsquo;s founding in 1929.</p>
<p>
<em>Note: works for which either the date of creation or date of acquisition is unknown were excluded from this data set.</em>
</p>
<svg></svg>
<div class="notes">
<h2>Notable Acquisitions <small><small class="italic">(by volume, anyway)</small></small></h2>
<p>The highest peak, in 1964, represents the donation of the <strong class="highlight">Louis E. Stern Collection</strong>, comprising 145 individual printed books with illustrations by artists including Picasso, Chagall and Matisse. Strictly speaking in terms of individual records in the collection data, it is the highest-volume gift in the museum's history.</p>
<p>From the <a href="https://www.moma.org/momaorg/shared/pdfs/docs/press_archives/3206/releases/MOMA_1963_0118_114.pdf?2010">press release for the donation</a>:</p>
<blockquote>
<p>The gift of the Louis E. Stem Collection of Illustrated Books to The Museum of Modern Art, announced today by the trustees of the Louis E. Stern Foundation, is one of the most important ever made to the Museum's Department of Drawings and Prints, according to Alfred H. Barr, Jr., Director of Museum Collections, and William S. Lieberman, Curator of Drawings and Prints.</p></blockquote>
<hr>
<p>The next-highest-volume year is 1968, when MoMA purchased the <strong class="highlight">Abbott/Levy collection</strong> of <a href="https://en.wikipedia.org/wiki/Eug%C3%A8ne_Atget">Eugène Atget's photography</a>, adding 4803 records to the Photography department. Atget was a pioneer of documentary photography, systematically recording images of Paris as the city changed and modernized in the early 1900s. His monograph <em>Atget: Photographe de Paris</em>, published posthumously by Berenice Abbott (of the Abbott/Levy collection), was the first book of photographs to be published simultanously in multiple countries, as related on the <a href="https://www.moma.org/interactives/objectphoto/publications/781.html">MoMA object:photo website</a>.</p>
<hr>
<p>Of the over 130,000 records in the MoMA catalog photographs, books and monographs make up the vast majority (record-for-record), followed by holdings in the Architecture &amp; Design department (which has collected, among other things, <a href="http://www.moma.org/explore/inside_out/2010/03/22/at-moma">the "@" sign</a>) and the Drawing department. <strong>Less than four thousand</strong> records represent paintings and sculptures, the collections for which MoMA is arguably best known.</p>
<p>That the 145 books of the Stern Collection can yield nearly 11,000 individual catalog records is both a testament to the thoroughness of the MoMA's cataloguing, and a reminded that it is difficult to deal with printed works in the same manner as discrete or monolithic artworks such as sculptures and paintings!</p>
</div>
<p>
<small>Data source: <a href='https://github.com/MuseumofModernArt/collection'>github.com/MuseumofModernArt/collection</a></small>
</p>
<!--
<p>
<small><sup>*</sup>: Works in which the English word 'untitled' appears in the title of the accessioned work</small>
</p>
-->
<script type='text/javascript'>
DATE_ACQUIRED_REGEX_US = /(\d{2})-(\d{2})-(\d{4})/;
DATE_ACQUIRED_REGEX_CONTINENT = /(\d{4})-(\d{2})-(\d{2})/;
var WIDTH = window.innerWidth - 40 > 500 ? 500 : window.innerWidth - 40;
var HEIGHT = 900;
var PADDING = {
top: 0,
right: 40,
bottom: 60,
left: 40
};
var svg = d3.select('svg');
svg.attr({
width: WIDTH,
height: HEIGHT
});
var xScale = d3.scale.linear().range([
0,
WIDTH - PADDING.right - PADDING.left
]);
var yScale = d3.scale.ordinal().rangeRoundBands([
PADDING.top,
HEIGHT - PADDING.bottom
], 0.15);
var xAxis = d3.svg.axis()
.scale( xScale )
.orient( 'bottom ');
var yAxis = d3.svg.axis()
.scale( yScale )
.orient( 'left' );
d3.csv( 'accessions-by-dept-by-year.csv', function( accessionsByYear ) {
// convert all member object values to numbers
accessionsByYear = accessionsByYear.map(function( year ) {
Object.keys( year ).forEach(function( key ) {
year[ key ] = +year[ key ];
});
return year;
});
window.art = accessionsByYear;
accessionsByYear.sort(function( a, b ) {
return d3.descending( a.year, b.year );
});
var years = accessionsByYear.map(function( d ) { return d.year; });
var maxAcquiredInOneYear = d3.max( accessionsByYear, function( d ) {
return d.total;
});
xScale.domain([ 0, maxAcquiredInOneYear ]);
yScale.domain( years );
// // Descending order of years
// d3.max( years ),
// d3.min( years )
// ]);
var rects = svg.selectAll('rect').data( accessionsByYear ).enter().append( 'rect' )
.attr({
class: function( d ) {
if ( d.year === 1968 || d.year === 1964 ) {
return 'highlight';
}
return 'regular';
},
title: function( d ) {
return d.year;
},
x: PADDING.left,
width: function( d ) {
return xScale( d.total );
},
y: function( d, i ) {
return yScale( d.year );
},
height: yScale.rangeBand()
})
.append( 'title' )
.text(function( d ) {
return d.total + ' works acquired in ' + d.year;
});
// yAxis.tickFormat(function( year, i ) {
// return i % 2 ? '' : year;
// });
yAxis.tickValues( years.filter(function( year, i ) {
return i % 2 === 0;
}) );
xAxis.tickFormat( function( a, b ) {
console.log( a, b );
return a > 0 ? (a + '').replace( '000', 'k' ) : a;
});
svg.append('g')
.attr({
class: 'x axis',
transform: 'translate(' + PADDING.left + ',' + (HEIGHT - PADDING.bottom) + ')'
})
.call( xAxis);
svg.append('g')
.attr({
class: 'y axis',
transform: 'translate(' + PADDING.left + ',0)'
}).call( yAxis );
svg.append( 'text' ).attr({
// 'text-anchor': 'middle',
'font-weight': 'bold',
transform: 'translate(' + PADDING.left + ',' + (HEIGHT - PADDING.bottom / 3) + ')',
fill: 'black'
}).text( 'MoMA Catalog Records Added Per Year' );
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment