Our Vendor/Freelancer Need
Three.js development and engineering support for data visualization and digital storytelling interactive.
Our client wants to develop an interactive web-based story and data explorer to highlight the philanthropic giving of their institution for over 30 years using a garden-based metaphor of “From Seeds to Harvest,” using three.js, R3F, and Gatsby as a React-based static site generator.
As we close out the project over the next two months, we are looking for a contractor to help polish and improve this interactive experience and get it over the finish line.
We have already designed and developed a beta version of the interactive but need further targeted assistance to bolster the project’s optimization and aesthetic polish. We are interested in someone who can (1) assist with addressing some performance issues related to animated transitions and (2) incorporate three.js features that will help convey more artful and creative aspirations to help this project come alive.
If you are selected for this project, you will work closely with our senior data visualization engineer (for code review and handoff) and creative director of data visualization (for a deeper dive into the design aspirations via links to example projects and a brief on the supporting animation and features). As a three.js expert, we are looking for you to be a creative partner, recommend solutions, and problem-solve within the three.js framework or any supporting and salient technologies suited for the project.
Brief Project Overview
Our client has a dataset of 30 years of grant disbursements for nearly 1,000 grantees, totaling nearly a billion dollars. We’ve created a digital garden to showcase this history of grant giving. Each “plant” represents one grantee, and each “leaf” represents one grant disbursement. So the height of each plant forms the Y axis, showing the timeline of grant-making to a given grantee.
The project has an explanatory portion, where the user clicks through (or scrolls through) specific story points, describing different eras of grant giving. And then, in the end, it “unlocks” into an exploratory experience, and the user can select different filters to see a subset of grants or select an individual grant. Improving upon the transitions and animations in-between both the explanatory and exploratory experiences is an essential part of the scope of this project.
Qualifications Summary
Examples of potential tasks:
- Overall performance improvements to maintain a stable frame rate (including any refactoring our how our scene is constructed)
- Animated transitions, so animating between things as the user makes selections
- “Passive” animations, such as a subtle “blowing in the wind” effect for each plant
- “Active” animations, such as the user’s cursor subtly moving or deforming nearby platforms.
- Varied timing of plant life coming to the fore and growing in a “natural” and “organic” manner.
- Depth of field effect, atmospheric effects/occlusion, anything to help the scene feel more alive and less like a set of 2D cardboard cutouts.
- Adding gradients that are data-driven to each plant form to show transitions from grant disbursements tagged to one category in a given year to another category.
Who we are looking for:
- A person with significant experience with three.js and/or R3F (React Three Fiber) and creative projects using webGL technologies
- A person fluent in Typescript, React-based web applications and static site generators like Next.js or Gatsby
- Any 3D generalist knowledge about asset preparation would be welcome
- Some GLSL shader experience welcome
- Someone to be able to start immediately (June 2023)
Period of Performance
The period of performance for this work is June 20–August 31, 2023. We can discuss more specific timelines, dates, and background project information with you if you are selected to participate in this project.
Submission Details
Please contact Josh Nerpel (jnerpel@graphicacy.com) or Rizqi Rachmat (rrachmat@graphicacy.com) if you have further questions about this RFQ. We would like all RFQ responses due by June 20th, 2023.