Last active
September 16, 2015 03:47
-
-
Save kadamwhite/52043d17009a0ec9319e to your computer and use it in GitHub Desktop.
Week Three exercise for datavis with d3 course: graph of untitled MoMA accessions by year
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> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| </head> | |
| <body> | |
| <h2>MoMA Acquisition History for Untitled Works</h2> | |
| <p><em>Total quantity of untitled works<sup>*</sup> acquired by the Museum of Modern Art in each calendar year between 1935 and 2015</em></p> | |
| <p><small>Data source: <a href="https://github.com/MuseumofModernArt/collection">github.com/MuseumofModernArt/collection</a></small></p> | |
| <svg></svg> | |
| <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})/; | |
| // function getDate( dateAcquired ) { | |
| // var parsedDate = DATE_ACQUIRED_REGEX_US.exec( dateAcquired ); | |
| // if ( parsedDate ) { | |
| // // Note to self: just use Moment if this gets out of hand | |
| // return { | |
| // month: +parsedDate[1], | |
| // day: +parsedDate[2], | |
| // year: +parsedDate[3] | |
| // }; | |
| // } | |
| // // If we made it this far, the first pattern did not match | |
| // parsedDate = DATE_ACQUIRED_REGEX_CONTINENT.exec( dateAcquired ); | |
| // if ( parsedDate ) { | |
| // return { | |
| // year: +parsedDate[1], | |
| // month: +parsedDate[2], | |
| // day: +parsedDate[3] | |
| // }; | |
| // } | |
| // console.warn( dateAcquired + ' not matched' ); | |
| // } | |
| var WIDTH = window.innerWidth > 650 ? 650 : window.innerWidth - 20; | |
| // var HEIGHT = 520; | |
| var ROW_HEIGHT = 8; | |
| var svg = d3.select('svg'); | |
| svg.attr( 'width', WIDTH ); | |
| // d3.csv('untitled.csv', function(artworks) { | |
| // | |
| // // I was having load issues with the full csv on blocks, so I | |
| // // ran the following in Chrome Dev Tools, after loading Lodash | |
| // // and letting the CSV load: | |
| // // | |
| // // window.art = artworks; | |
| // // var countByYear = var countByYear = _.countBy( art, function( work ) { | |
| // // return /\d{4}/.exec( work.dateAcquired )[ 0 ] | |
| // // }); | |
| // // copy( _.chain( countByYear ) | |
| // // .keys() | |
| // // .sortBy(function( year ) { | |
| // // // Numeric sort on year | |
| // // return +year; | |
| // // }) | |
| // // .map(function( year ) { | |
| // // return { | |
| // // year: year, | |
| // // count: countByYear[ year ] | |
| // // }; | |
| // // }) | |
| // // .map(function( year ) { | |
| // // return year.year + ',' + year.count; | |
| // // }) | |
| // // .value().join( '\n' ) ) | |
| // // | |
| // // Pasted the data into works-acquired-by-year.csv | |
| // }); | |
| // New code, after doing the above: | |
| d3.csv( 'works-acquired-by-year.csv', function( artByYearAcquired ) { | |
| window.art = artByYearAcquired; | |
| // ROW_HEIGHT per year | |
| svg.attr( 'height', artByYearAcquired.length * ROW_HEIGHT ); | |
| var maxWorksForAYear = d3.max( artByYearAcquired, function( year ) { | |
| return +year.worksAcquired; | |
| }); | |
| var rects = svg.selectAll('rect').data( artByYearAcquired ).enter() | |
| .append( 'rect' ) | |
| .attr({ | |
| fill: 'black', | |
| title: function( d ) { | |
| return d.key; | |
| }, | |
| y: function( d, i ) { | |
| return i * ROW_HEIGHT; | |
| }, | |
| x: 0, | |
| width: function( d ) { | |
| return +d.worksAcquired / maxWorksForAYear * WIDTH; | |
| }, | |
| height: ROW_HEIGHT - 2 | |
| }) | |
| .append( 'title' ) | |
| .text(function( d ) { | |
| return d.key; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
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 | worksAcquired | |
|---|---|---|
| 1935 | 182 | |
| 1937 | 6 | |
| 1940 | 13 | |
| 1941 | 47 | |
| 1942 | 16 | |
| 1944 | 1 | |
| 1945 | 22 | |
| 1947 | 48 | |
| 1948 | 4 | |
| 1949 | 37 | |
| 1950 | 3 | |
| 1952 | 27 | |
| 1953 | 3 | |
| 1954 | 5 | |
| 1955 | 17 | |
| 1956 | 43 | |
| 1957 | 1 | |
| 1958 | 11 | |
| 1959 | 37 | |
| 1960 | 29 | |
| 1961 | 46 | |
| 1962 | 39 | |
| 1963 | 164 | |
| 1964 | 118 | |
| 1965 | 146 | |
| 1966 | 125 | |
| 1967 | 292 | |
| 1968 | 388 | |
| 1969 | 463 | |
| 1970 | 99 | |
| 1971 | 113 | |
| 1972 | 133 | |
| 1973 | 213 | |
| 1974 | 987 | |
| 1975 | 98 | |
| 1976 | 74 | |
| 1977 | 109 | |
| 1978 | 96 | |
| 1979 | 129 | |
| 1980 | 96 | |
| 1981 | 164 | |
| 1982 | 91 | |
| 1983 | 69 | |
| 1984 | 81 | |
| 1985 | 125 | |
| 1986 | 156 | |
| 1987 | 133 | |
| 1988 | 123 | |
| 1989 | 174 | |
| 1990 | 261 | |
| 1991 | 98 | |
| 1992 | 187 | |
| 1993 | 293 | |
| 1994 | 112 | |
| 1995 | 201 | |
| 1996 | 276 | |
| 1997 | 215 | |
| 1998 | 345 | |
| 1999 | 442 | |
| 2000 | 72 | |
| 2001 | 398 | |
| 2002 | 104 | |
| 2003 | 97 | |
| 2004 | 145 | |
| 2005 | 1359 | |
| 2006 | 666 | |
| 2007 | 571 | |
| 2008 | 724 | |
| 2009 | 480 | |
| 2010 | 825 | |
| 2011 | 305 | |
| 2012 | 640 | |
| 2013 | 327 | |
| 2014 | 312 | |
| 2015 | 94 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment