Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
cube(`Artworks`, { // Cube definition. // It says that the data is kept in the "artworks" table. // Learn more in the docs: https://cube.dev/docs/schema/getting-started sql: `SELECT * FROM public.artworks`, // Quantitative information about the data, e.g., count of rows. // It makes sense for all rows rather than individual rows measures: { count: { type: `count`, }, minAgeAtAcquisition: { type: `number`, sql: `MIN(${CUBE.ageAtAcquisition})` }, avgAgeAtAcquisition: { type: `number`, sql: `SUM(${CUBE.ageAtAcquisition}) / ${CUBE.count}` }, maxAgeAtAcquisition: { type: `number`, sql: `MAX(${CUBE.ageAtAcquisition})` } }, // Qualitative information about the data, e.g., an artwork's title. // It makes sense for individual rows of data rather than all rows dimensions: { title: { sql: `${CUBE}."Title"`, type: `string` }, artist: { sql: `${CUBE}."Artist"`, type: `string` }, classification: { sql: `${CUBE}."Classification"`, type: `string` }, medium: { sql: `${CUBE}."Medium"`, type: `string` }, // We can use SQL functions here year: { sql: `SUBSTRING(${CUBE}."Date" FROM '[0-9]{4}')`, type: `number` }, date: { sql: `${CUBE}."Date"`, type: `number` }, dateAcquired: { sql: `${CUBE}."DateAcquired"`, type: `time` }, yearAcquired: { sql: `DATE_PART('year', ${CUBE}."DateAcquired")`, type: `number` }, ageAtAcquisition: { case: { when: [ { sql: `${CUBE.yearAcquired}::INT - ${CUBE.year}::INT > 0`, label: { sql: `${CUBE.yearAcquired}::INT - ${CUBE.year}::INT` } } ], else: { label: `0` } }, type: `number` }, heightCm: { sql: `ROUND(${CUBE}."Height (cm)")`, type: `number` }, widthCm: { sql: `ROUND(${CUBE}."Width (cm)")`, type: `number` }, }, dataSource: `default` });
On GitHub, MoMA publishes and periodically updates a public dataset which contains ~140,000 records, representing all of the works that have been accessioned into MoMA’s collection and cataloged in our database. It includes basic metadata for each work (e.g., title, artist, date made, medium, dimensions, and date of acquisition). This dataset is placed in the public domain using a CC0 License (so we're free to use it in this tutorial) and available in CSV and JSON formats.
Now it's time to develop a front-end application telling the story behind the MoMA artworks collection with charts and other types of data visualizations. For simplicity, let's build it with pure JavaScript and without any frameworks (however, unofficial packages are available on NPM for React, Angular, and Vue as well as TypeScript definitions in the DefinitelyTyped repository).