Background<\/span><\/span><\/h3>\nLeveraging the unparalleled collection of Hopper\u2019s art and archival materials held by the Whitney Museum of American Art, <\/span>Hopper at the Theatre<\/span><\/i> contextualizes the artist\u2019s personal and professional geographies towards the end of the interwar period circa 1925 to 1937. The project targets primary source data for semantic enrichment from event ticket stubs in the newly established Sanborn Hopper Archive.<\/span><\/p>\nInspiration<\/span><\/span><\/h3>\nPrimary inspiration came from the original <\/span>Hopper at the Theatre <\/span><\/i>interactive geovisualization (Figure 1) built by the author using HTML, CSS, JavaScript, and Python. <\/span>Launch the project<\/span><\/a> or <\/span>view the code on GitHub<\/span><\/a>.<\/span><\/p>\n![\"\"](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/04\/nyc-hopper.png?resize=840%2C663\")
Figure 1<\/b>. Screenshot of original Hopper at the Theatre<\/em> map.<\/p><\/div>\nNYC Public Art Map and Guide (Figure 2) informed the decision to use different colors to visualize the permanence or destruction of a building, while Andrea Geyer\u2019s artist map <\/span>Audrey Munson: This Site of Memory<\/span><\/i> (2006) was a source of creativity for commemorating New York City cultural landmarks, albeit in analog form (Figure 3).<\/span><\/p>\n![\"\"](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/04\/nyc-parks.png?resize=775%2C1024\")
Figure 2<\/b>. Screenshot of NYC Public Art Map and Guide.<\/p><\/div>\n![\"\"](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/04\/nyc-geyer.jpg?resize=796%2C1024\")
Figure 3<\/b>. Audrey Munson: This Site of Memory<\/em> by Andrea Geyer.<\/p><\/div>\nMethodology<\/b><\/h1>\nData Collection and Transformation<\/span><\/span><\/h3>\nA detailed overview of the original data extraction and transformation process can be found <\/span>here<\/span><\/a>. To summarize, primary source metadata from ticket stubs of events attended by Edward Hopper was generously provided by the Whitney Museum of American Art Archives. After exporting the ticket dataset from <\/span>ArchivesSpace<\/span><\/a> and minimally normalizing it using <\/span>OpenRefine<\/span><\/a>, manual and automated data enrichment and integration was performed using the following sources:<\/span><\/p>\n\n- Carnegie Hall Archives Linked Data<\/span><\/a><\/li>\n
- Cinema Treasures<\/span><\/a><\/li>\n
- Google Maps Geocoding API<\/span><\/a><\/li>\n
- Internet Broadway Database<\/span><\/a><\/li>\n
- Internet Movie Database<\/span><\/a><\/li>\n
- MediaWiki API<\/span><\/a><\/li>\n
- Wikidat<\/span>a Query API<\/span><\/a><\/li>\n<\/ul>\n
The final dataset was structured to support future Resource Description Framework (RDF) modeling serialized as JSON-LD and visualization with open-source JavaScript libraries like <\/span>Leaflet<\/span><\/a> and <\/span>Stamen Maps<\/span><\/a>. While the nested structure of the final dataset was appropriate for building the original geovisualization from scratch, there were technical difficulties navigating down through multiple JSON subproperties like individual ticket data or complex geocoding when using CARTO Builder. To optimize the dataset schema for CARTO, I wrote simple Python script (see: <\/span>https:\/\/github.com\/reganartinfo\/hopper\/blob\/master\/carto.py<\/span><\/a>) to flatten the Google geocoding data, keeping only the latitude and longitude of the theaters and appending them to the top level of the JSON array.<\/span><\/p>\nVisualization Creation<\/span><\/span><\/h3>\nAfter flattening the ticket dataset, I imported it to CARTO Builder to use as the primary map layer. CARTO Builder is an extremely intuitive web-based interface that allows users to create beautiful maps in minutes. It automatically transformed the dataset into a point map, which I further customized by enabling the pop-up feature to display columns such as venue name and address from the ticket dataset. Given that the Wikipedia abstracts for the venues had already been parsed to HTML during the original extraction and transformation process, embedded hyperlinks remained functional when included in the pop-ups.<\/span><\/p>\n\u201cFilter by column\u201d analysis was applied to identify with venues\u2019 current lifecycle (e.g. closed, demolished, open) and added as a widget for users to interact with. The color palette for the filters was selected using <\/span>Eye Dropper<\/span><\/a>, an open-source extension for Chrome, to pick colors from a digital image of <\/span>New York Movie <\/span><\/i>(1939) by Edward Hopper.<\/span><\/p>\nResults<\/b><\/h1>\n
[iframe src=”https:\/\/eganr.carto.com\/builder\/cefa661f-f3cb-4bf6-9788-13a3f08e9e54\/embed” width=”100%” height=”520″]<\/p>\n
Future Directions<\/b><\/h1>\n
With more time and resources, the author envisions flattening more portions of the original ticket dataset to be optimized for CARTO Builder. In doing so, temporal data from the performances could be displayed as an animated time-series widget that retraces the artist\u2019s journey through New York City. Flattening the nested event category (e.g. play, drama, musical) and into rectangular data would also allow for an additional \u201cFilter by column\u201d analysis to further illustrate Hopper\u2019s theatrical preferences based on frequency.<\/span><\/p>\nMany of the features incorporated into this CARTO geovisualization have also inspired future versions of the original <\/span>Hopper at the Theatre<\/span><\/i> interactive map. For instance, the \u201cFilter by column\u201d analysis and use of different colors to visualize the permanence or destruction of a building could be implemented using JavaScript and Leaflet to create markers with custom icons. CARTO\u2019s automated affordance for vertical scrolling in pop-ups is an elegant UX solution to the overloaded text of the Wikipedia abstracts in the Leaflet version.<\/span><\/p>\nReferences<\/b><\/h1>\n
Geyer, A. (2006). <\/span>Audrey Munson: This site of memory<\/span><\/i> [Artist\u2019s map]. Retrieved from <\/span>http:\/\/www.andreageyer.info\/projects\/audrey_munson\/munson_notebooks\/audrey\/mapNEU5.pdf<\/span><\/a><\/p>\nHopper, E. (n.d.). <\/span>New York movie<\/span><\/i> [Digital image]. Retrieved from <\/span>https:\/\/www.moma.org\/collection\/works\/79616<\/span><\/a><\/p>\n
Inspiration<\/span><\/span><\/h3>\nPrimary inspiration came from the original <\/span>Hopper at the Theatre <\/span><\/i>interactive geovisualization (Figure 1) built by the author using HTML, CSS, JavaScript, and Python. <\/span>Launch the project<\/span><\/a> or <\/span>view the code on GitHub<\/span><\/a>.<\/span><\/p>\nFigure 1<\/b>. Screenshot of original Hopper at the Theatre<\/em> map.<\/p><\/div>\nNYC Public Art Map and Guide (Figure 2) informed the decision to use different colors to visualize the permanence or destruction of a building, while Andrea Geyer\u2019s artist map <\/span>Audrey Munson: This Site of Memory<\/span><\/i> (2006) was a source of creativity for commemorating New York City cultural landmarks, albeit in analog form (Figure 3).<\/span><\/p>\nFigure 2<\/b>. Screenshot of NYC Public Art Map and Guide.<\/p><\/div>\nFigure 3<\/b>. Audrey Munson: This Site of Memory<\/em> by Andrea Geyer.<\/p><\/div>\nMethodology<\/b><\/h1>\nData Collection and Transformation<\/span><\/span><\/h3>\nA detailed overview of the original data extraction and transformation process can be found <\/span>here<\/span><\/a>. To summarize, primary source metadata from ticket stubs of events attended by Edward Hopper was generously provided by the Whitney Museum of American Art Archives. After exporting the ticket dataset from <\/span>ArchivesSpace<\/span><\/a> and minimally normalizing it using <\/span>OpenRefine<\/span><\/a>, manual and automated data enrichment and integration was performed using the following sources:<\/span><\/p>\n\n- Carnegie Hall Archives Linked Data<\/span><\/a><\/li>\n
- Cinema Treasures<\/span><\/a><\/li>\n
- Google Maps Geocoding API<\/span><\/a><\/li>\n
- Internet Broadway Database<\/span><\/a><\/li>\n
- Internet Movie Database<\/span><\/a><\/li>\n
- MediaWiki API<\/span><\/a><\/li>\n
- Wikidat<\/span>a Query API<\/span><\/a><\/li>\n<\/ul>\n
The final dataset was structured to support future Resource Description Framework (RDF) modeling serialized as JSON-LD and visualization with open-source JavaScript libraries like <\/span>Leaflet<\/span><\/a> and <\/span>Stamen Maps<\/span><\/a>. While the nested structure of the final dataset was appropriate for building the original geovisualization from scratch, there were technical difficulties navigating down through multiple JSON subproperties like individual ticket data or complex geocoding when using CARTO Builder. To optimize the dataset schema for CARTO, I wrote simple Python script (see: <\/span>https:\/\/github.com\/reganartinfo\/hopper\/blob\/master\/carto.py<\/span><\/a>) to flatten the Google geocoding data, keeping only the latitude and longitude of the theaters and appending them to the top level of the JSON array.<\/span><\/p>\nVisualization Creation<\/span><\/span><\/h3>\nAfter flattening the ticket dataset, I imported it to CARTO Builder to use as the primary map layer. CARTO Builder is an extremely intuitive web-based interface that allows users to create beautiful maps in minutes. It automatically transformed the dataset into a point map, which I further customized by enabling the pop-up feature to display columns such as venue name and address from the ticket dataset. Given that the Wikipedia abstracts for the venues had already been parsed to HTML during the original extraction and transformation process, embedded hyperlinks remained functional when included in the pop-ups.<\/span><\/p>\n\u201cFilter by column\u201d analysis was applied to identify with venues\u2019 current lifecycle (e.g. closed, demolished, open) and added as a widget for users to interact with. The color palette for the filters was selected using <\/span>Eye Dropper<\/span><\/a>, an open-source extension for Chrome, to pick colors from a digital image of <\/span>New York Movie <\/span><\/i>(1939) by Edward Hopper.<\/span><\/p>\nResults<\/b><\/h1>\n
[iframe src=”https:\/\/eganr.carto.com\/builder\/cefa661f-f3cb-4bf6-9788-13a3f08e9e54\/embed” width=”100%” height=”520″]<\/p>\n
Future Directions<\/b><\/h1>\n
With more time and resources, the author envisions flattening more portions of the original ticket dataset to be optimized for CARTO Builder. In doing so, temporal data from the performances could be displayed as an animated time-series widget that retraces the artist\u2019s journey through New York City. Flattening the nested event category (e.g. play, drama, musical) and into rectangular data would also allow for an additional \u201cFilter by column\u201d analysis to further illustrate Hopper\u2019s theatrical preferences based on frequency.<\/span><\/p>\nMany of the features incorporated into this CARTO geovisualization have also inspired future versions of the original <\/span>Hopper at the Theatre<\/span><\/i> interactive map. For instance, the \u201cFilter by column\u201d analysis and use of different colors to visualize the permanence or destruction of a building could be implemented using JavaScript and Leaflet to create markers with custom icons. CARTO\u2019s automated affordance for vertical scrolling in pop-ups is an elegant UX solution to the overloaded text of the Wikipedia abstracts in the Leaflet version.<\/span><\/p>\nReferences<\/b><\/h1>\n
Geyer, A. (2006). <\/span>Audrey Munson: This site of memory<\/span><\/i> [Artist\u2019s map]. Retrieved from <\/span>http:\/\/www.andreageyer.info\/projects\/audrey_munson\/munson_notebooks\/audrey\/mapNEU5.pdf<\/span><\/a><\/p>\nHopper, E. (n.d.). <\/span>New York movie<\/span><\/i> [Digital image]. Retrieved from <\/span>https:\/\/www.moma.org\/collection\/works\/79616<\/span><\/a><\/p>\n
Figure 1<\/b>. Screenshot of original Hopper at the Theatre<\/em> map.<\/p><\/div>\n NYC Public Art Map and Guide (Figure 2) informed the decision to use different colors to visualize the permanence or destruction of a building, while Andrea Geyer\u2019s artist map <\/span>Audrey Munson: This Site of Memory<\/span><\/i> (2006) was a source of creativity for commemorating New York City cultural landmarks, albeit in analog form (Figure 3).<\/span><\/p>\n Figure 2<\/b>. Screenshot of NYC Public Art Map and Guide.<\/p><\/div>\n Figure 3<\/b>. Audrey Munson: This Site of Memory<\/em> by Andrea Geyer.<\/p><\/div>\n A detailed overview of the original data extraction and transformation process can be found <\/span>here<\/span><\/a>. To summarize, primary source metadata from ticket stubs of events attended by Edward Hopper was generously provided by the Whitney Museum of American Art Archives. After exporting the ticket dataset from <\/span>ArchivesSpace<\/span><\/a> and minimally normalizing it using <\/span>OpenRefine<\/span><\/a>, manual and automated data enrichment and integration was performed using the following sources:<\/span><\/p>\n The final dataset was structured to support future Resource Description Framework (RDF) modeling serialized as JSON-LD and visualization with open-source JavaScript libraries like <\/span>Leaflet<\/span><\/a> and <\/span>Stamen Maps<\/span><\/a>. While the nested structure of the final dataset was appropriate for building the original geovisualization from scratch, there were technical difficulties navigating down through multiple JSON subproperties like individual ticket data or complex geocoding when using CARTO Builder. To optimize the dataset schema for CARTO, I wrote simple Python script (see: <\/span>https:\/\/github.com\/reganartinfo\/hopper\/blob\/master\/carto.py<\/span><\/a>) to flatten the Google geocoding data, keeping only the latitude and longitude of the theaters and appending them to the top level of the JSON array.<\/span><\/p>\n After flattening the ticket dataset, I imported it to CARTO Builder to use as the primary map layer. CARTO Builder is an extremely intuitive web-based interface that allows users to create beautiful maps in minutes. It automatically transformed the dataset into a point map, which I further customized by enabling the pop-up feature to display columns such as venue name and address from the ticket dataset. Given that the Wikipedia abstracts for the venues had already been parsed to HTML during the original extraction and transformation process, embedded hyperlinks remained functional when included in the pop-ups.<\/span><\/p>\n \u201cFilter by column\u201d analysis was applied to identify with venues\u2019 current lifecycle (e.g. closed, demolished, open) and added as a widget for users to interact with. The color palette for the filters was selected using <\/span>Eye Dropper<\/span><\/a>, an open-source extension for Chrome, to pick colors from a digital image of <\/span>New York Movie <\/span><\/i>(1939) by Edward Hopper.<\/span><\/p>\n [iframe src=”https:\/\/eganr.carto.com\/builder\/cefa661f-f3cb-4bf6-9788-13a3f08e9e54\/embed” width=”100%” height=”520″]<\/p>\n With more time and resources, the author envisions flattening more portions of the original ticket dataset to be optimized for CARTO Builder. In doing so, temporal data from the performances could be displayed as an animated time-series widget that retraces the artist\u2019s journey through New York City. Flattening the nested event category (e.g. play, drama, musical) and into rectangular data would also allow for an additional \u201cFilter by column\u201d analysis to further illustrate Hopper\u2019s theatrical preferences based on frequency.<\/span><\/p>\n Many of the features incorporated into this CARTO geovisualization have also inspired future versions of the original <\/span>Hopper at the Theatre<\/span><\/i> interactive map. For instance, the \u201cFilter by column\u201d analysis and use of different colors to visualize the permanence or destruction of a building could be implemented using JavaScript and Leaflet to create markers with custom icons. CARTO\u2019s automated affordance for vertical scrolling in pop-ups is an elegant UX solution to the overloaded text of the Wikipedia abstracts in the Leaflet version.<\/span><\/p>\n Geyer, A. (2006). <\/span>Audrey Munson: This site of memory<\/span><\/i> [Artist\u2019s map]. Retrieved from <\/span>http:\/\/www.andreageyer.info\/projects\/audrey_munson\/munson_notebooks\/audrey\/mapNEU5.pdf<\/span><\/a><\/p>\n Hopper, E. (n.d.). <\/span>New York movie<\/span><\/i> [Digital image]. Retrieved from <\/span>https:\/\/www.moma.org\/collection\/works\/79616<\/span><\/a><\/p>\nMethodology<\/b><\/h1>\n
Data Collection and Transformation<\/span><\/span><\/h3>\n
\n
Visualization Creation<\/span><\/span><\/h3>\n
Results<\/b><\/h1>\n
Future Directions<\/b><\/h1>\n
References<\/b><\/h1>\n