Last active
September 18, 2015 01:52
-
-
Save kadamwhite/9062a3d33a61dfb3a5e9 to your computer and use it in GitHub Desktop.
DataVis w/ D3 Week 4: axes & story
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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’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 & 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