Examples

Below are some examples to illustrate the possibilities and extensive configurability of twyg. All examples were generated by simply combining the built-in configurations and colorschemes. Every built-in configuration is shown with three different colorschemes.

You can recreate all images on this page by running the script docs/examples/generate-samples.sh in the distribution package. The example JSON data can be found in the example-data directory.

boxes

jelly (default)

boxes-goals

moon

boxes-moon-metrics

kelp

boxes-kelp-cocoa

bubbles

inca

bubbles-inca-google-analytics

neo

bubbles-neo-six-thinking-hats

crayons (default)

bubbles-metrics

edge

azure

edge-azure-goals

aqua

edge-aqua-cocoa

clay (default)

edge-guitars

flowchart

turquoise (default)

flowchart-metrics

inca

flowchart-inca-google-analytics

jelly

flowchart-jelly-wind-instruments

hive

jelly

hive-jelly-goals

mango

hive-mango-synthesis

merlot (default)

hive-six-thinking-hats

ios

honey

ios-honey-six-thinking-hats

milkshake

ios-milkshake-metrics

cobalt (default)

ios-synthesis

jellyfish

quartz

jellyfish-quartz-synthesis

colors21

jellyfish-colors21-animals

azure (default)

jellyfish-guitars

junction1

clay

junction1-clay-metrics

forest

junction1-forest-animals

pastels (default)

junction1-wind-instruments

junction2

bordeaux (default)

junction2-guitars

mango

junction2-mango-animals

salmon

junction2-salmon-wind-instruments

lines

mint-gray (default)

lines-animals

azure

lines-azure-metrics

merlot

lines-merlot-google-analytics

modern

terracotta (default)

modern-animals

cobalt

modern-cobalt-synthesis

mustard

modern-mustard-metrics

nazca

earth

nazca-earth-cocoa

aqua

nazca-aqua-metrics

orbit (default)

nazca-synthesis

rounded

mint (default)

rounded-goals

orbit

rounded-orbit-google-analytics

grape

rounded-grape-metrics

square

tentacle (default)

square-guitars

quartz

square-quartz-animals

crayons

square-crayons-cocoa

synapse

kelp

synapse-kelp-cocoa

violet (default)

synapse-metrics

mint

synapse-mint-google-analytics

tron

cmyk (default)

tron-cocoa

mellow

tron-mellow-metrics

colors21

tron-colors21-synthesis