Creating data-driven fabric designs // Part 2: Generative shirt design with d3js
Channel: Creating with Data
Date: 19/06/2023

This screencast shows how to code a generate fabric patterns and visualise them as shirts using SVG and D3js. The patterns are composed of images  gathered from an archive of botanical watercolours held by the US Department of Agriculture - https://naldc.nal.usda.gov/usda_pomological_watercolor?per_page=100

To try the generative shirt design tool yourself, check out - https://creating-with-data.glitch.me/shirt-designer/

If you'd like to know more about how the images were gathered and prepared from the watercolour archive with NodeJS,  check-out part 1 - https://creatingwithdata.com/creating-data-driven-fabric-designs-with-javascript-p1-scraping-and-data-preparation-with-nodejs/

For further notes and links to code see - 

0:00 Intro
1:42 SVG pattern element and preparing the shirt graphic 
8:30 Using patternTransform and pattern href to set default patterns  
14:50 Automating pattern element generation with code
25:36 Generating a shirt for each pattern
31:01 Brief code review of final version