Air Gantt pulls (gantt-like) data from an Airtable database table, via the API, and represents it as a force-directed graph using d3js. No build tools required.
The server pulls data in from the Airtable API and returns all contents of the "Tasks" table.
The Airtable API key goes in a .env file.
Airtable is a "spreadsheet-database hybrid." Kind of like Microsoft Access in the cloud. I enjoy managing projects by structuring data in an Airtable database, but I wanted more powerful view and input capabilities.
You can see below that I have a table named Tasks, a view named API and a link to other records in the table called PreReqs.
D3js processes the tasks using a number of forceSimulation features, defined by data on the nodes/tasks themselves (node depth, priority, etc.)
- Task Depth is scaled (logarithmically) along the x-axis
- Task Priority is scaled along the y-axis
- Task circle area is relative to the estimated duration of the task
- Task's are color-coded by type
Controls are more or less as specified by rkirsling's, whose source script I adapted for this project.
The interactivity is mostly cosmetic, so in the near future, I'd like to be able to do more than just READ from Airtable. That said, you can still just update Airtable then refresh your screen.
Airtable API documentation is pretty easy to follow, just a matter of entering your API key and changing any table, column, or view names to those in the script. All the syntax is in server.js and the buildGraph() function in script.js.
Email samirillion at protonmail dot com to get a copy of the Airtable database I am using. The fields are the same as those in the database, as you can see in script.js
nodes.push({
id: task.ID,
name: task.Name,
time: task.Duration
...
}