Custom visualization with AWS AppSync using Amazon Athena as a data source. Built with AWS Amplify CLI.
This project shows how to use Amazon Athena, AWS AppSync, and AWS Amplify to build an application that interacts with big data. The application is built using React, the AWS Amplify Javascript library, and the D3.js Javascript library to render custom visualizations.
The application code can be found in this GitHub repository. It uses Athena to query data hosted in a public Amazon S3 bucket by the Registry of Open Data on AWS. Specifically, it uses the High Resolution Population Density Maps + Demographic Estimates by CIESIN and Facebook.
This public dataset provides "population data for a selection of countries, allocated to 1 arcsecond blocks and provided in a combination of CSV and Cloud-optimized GeoTIFF files," and is hosted in the S3 bucket s3://dataforgood-fb-data.
with-auth
provides an implementation that tracks request per owner in a DynamoDB table. In introduces a pipeline resolver with 2 functions to interact with Amazon Athena and AWS Lambda in a single query. Using a @dynamodb
and @auth
transformer, access to past queries is limited to the query owners and the Lambda functions that create and update the table entries. To view the intial release (minus the auth), go to the initial-release branch.
type AthenaOperation
@model
@key(
name: "ByOwner"
fields: ["owner", "createdAt"]
queryField: "queryByOwner"
)
@auth(
rules: [
{ allow: owner, identityClaim: "sub" }
{ allow: private, provider: iam, operations: [create, update] }
]
) {
id: ID!
queryString: String!
countryCode: String!
status: STATUS!
owner: String
file: S3Object
createdAt: String
}
For more information about this app and how to get started, please see the blog post.
Deploy the application in a single step to the Amplify Console by clicking the button above.
Alternatively, you can clone the repository, deploy the backend with Amplify CLI, and build and serve the frontend locally.
First, install the Amplify CLI and step through the configuration.
npm install -g @aws-amplify/cli
amplify configure
Next, clone the repository and install the dependencies.
git clone https://github.com/aws-samples/aws-appsync-visualization-with-athena-app
cd aws-appsync-visualization-with-athena-app
yarn
Update the name of the storage bucket (bucketName
) in the file ./amplify/backend/storage/sQueryResults/parameters.json
then initialize a new Amplify project and push the changes.
amplify init
amplify push
Finally, launch the application.
yarn start
Here is how the application works:
QueryExecutionId
in the response, it subscribes to mutations on that ID.SELECT longitude, count(latitude) as count, sum(population) as tot_pop
FROM "default"."hrsl"
WHERE country='${countryCode.trim()}'
group by longitude
order by longitude
/protected/athena/
prefix. Signed-in app users can access these results using their IAM credentials.announceQueryResult
mutation with the S3 bucket and object information.