Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
slide.html("feature")`
${displayImage(triangulate_logo, (width * 9) / 16 - 50)}
<p>Generative Art Projects: <a href="http://mfviz.com/triangulate/" target="_blank">Triangulate</a></p>
`
slide.html("feature")`
${displayImage(pen_plotting_logo, (width * 9) / 16 - 50)}
<p>Pen Plotting</p>
`
slide.md("intro")`
# Generative Art Tools
`
slide.md("callout")`
# Generative art systems are <em>functions</em> that accept user inputs and generate a single output (art).
`
slide.html("feature")`
${displayImage(art_diagram, (width * 9) / 16 - 50)}
<p>Generative Art Systems</p>
`
slide.md("bullets")`# Steps for Building Tools
1. **Start Simple**: Choose a shape (or set of shapes) that you want to render
2. **Add controls**: Identify different visual attribute of the shapes and create *input* elements to control them
3. **Inject Randomness**: Allow an attribute of the shape(s) to be controlled by *randomness*
4. **Add animation**: Continually update a visual element of your shape.
`
md`## Appendix`
md`### Imports`
import { displayImage } from "@info474/utilities"
import { slide, notes, style, keyBindings } from '@mkfreeman/slides'
import { slider } from '@jashkenas/inputs'
keyBindings
style
md`### Files`
ischool_logo = await FileAttachment("iSchoolPrimary_RGB_Purple.svg").url()
ihme_logo = await FileAttachment("ihme_img.png").url()
triangulate_logo = await FileAttachment("triangulate.png").url()
pen_plotting_logo = await FileAttachment("pen_plotting.png").url()
art_diagram = await FileAttachment("art_diagram.png").url()
fullscreen_icon = `<svg style="display:inline;" height=15 width = 15><path style="fill:#9d9d9d; opacity:1" clip-rule="evenodd" d="M8.00001 2L3 2H2L2 3L2.00001 8L4.00001 8L4.00001 5.47903L6.93541 8.41443L8.34963 7.00022L5.34941 4L8.00001 4L8.00001 2ZM8.00001 14H13H14V13V8H12V10.6122L9.50723 8.15797L8.10409 9.58317L10.5589 12H8.00001V14Z" fill="currentColor"></path></svg>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
