kusa.js

'use strict'

const svg = (width, height, opts, f) => {
  return tag('svg', Object.assign(
    {}, 
    {width: `${width}px`, height: `${height}px`},
    opts
  ), f)
}

const translate = (x, y, contents) => tag('g', {transform: `translate(${x}, ${y})`}, contents)

const tag = (identifier, opts, contents) => {
  let optAttr = Object.keys(opts).reduce((acc, key) => {
    const val = opts[key]
    return acc + ` ${key}="${val}"`
  }, '')
  if (contents == null) {
    return `<${identifier}${optAttr} />`
  } else {
    return `<${identifier}${optAttr}>${_eval(contents)}</${identifier}>`
  }
}

const t = tag

const _eval = contents => {
  let contentsStr = ''
  if (typeof(contents) === 'function') {
    contentsStr = contents()
  } else if (!contents) {
    contentsStr = ''
  } else if (Array.isArray(contents)) {
    contentsStr = contents.reduce((acc, e) => {
      return acc + _eval(e)
    }, contentsStr)
  } else {
    contentsStr = String(contents)
  }
  return contentsStr
}

const kusaData = [
  [0, 1, 2, 3, 4],
  [0, 1, 2, 3, 4],
  [0, 1, 2, 3, 4],
  [0, 1, 2, 3, 4],
  [0, 1, 2, 3, 4]
]

const growKusaCol = kusas => kusas.map(grow)

const grow = (kusa, offset) => {
  const size = 10
  const levelToColor = i => {
    const colorTable = ['#eee', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
    return colorTable[i] || colorTable[0]
  }
  return t('rect', {x: 0, y: (size+2)*offset, width: size, height: size, fill: levelToColor(kusa)},'')
}

const kusaCols = kusaData.map((col, colIndex) => {
  return translate(colIndex*13, 0, growKusaCol(col))
})

const svgString = svg(100, 100, null, kusaCols)
console.log(svgString)

kusa.svg

<svg width="100px" height="100px"><g transform="translate(0, 0)"><rect x="0" y="0" width="10" height="10" fill="#eee"></rect><rect x="0" y="12" width="10" height="10" fill="#c6e48b"></rect><rect x="0" y="24" width="10" height="10" fill="#7bc96f"></rect><rect x="0" y="36" width="10" height="10" fill="#239a3b"></rect><rect x="0" y="48" width="10" height="10" fill="#196127"></rect></g><g transform="translate(13, 0)"><rect x="0" y="0" width="10" height="10" fill="#eee"></rect><rect x="0" y="12" width="10" height="10" fill="#c6e48b"></rect><rect x="0" y="24" width="10" height="10" fill="#7bc96f"></rect><rect x="0" y="36" width="10" height="10" fill="#239a3b"></rect><rect x="0" y="48" width="10" height="10" fill="#196127"></rect></g><g transform="translate(26, 0)"><rect x="0" y="0" width="10" height="10" fill="#eee"></rect><rect x="0" y="12" width="10" height="10" fill="#c6e48b"></rect><rect x="0" y="24" width="10" height="10" fill="#7bc96f"></rect><rect x="0" y="36" width="10" height="10" fill="#239a3b"></rect><rect x="0" y="48" width="10" height="10" fill="#196127"></rect></g><g transform="translate(39, 0)"><rect x="0" y="0" width="10" height="10" fill="#eee"></rect><rect x="0" y="12" width="10" height="10" fill="#c6e48b"></rect><rect x="0" y="24" width="10" height="10" fill="#7bc96f"></rect><rect x="0" y="36" width="10" height="10" fill="#239a3b"></rect><rect x="0" y="48" width="10" height="10" fill="#196127"></rect></g><g transform="translate(52, 0)"><rect x="0" y="0" width="10" height="10" fill="#eee"></rect><rect x="0" y="12" width="10" height="10" fill="#c6e48b"></rect><rect x="0" y="24" width="10" height="10" fill="#7bc96f"></rect><rect x="0" y="36" width="10" height="10" fill="#239a3b"></rect><rect x="0" y="48" width="10" height="10" fill="#196127"></rect></g></svg>