strokes issue #8 by dribnet

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>testmatrix</title>
<style>

td { font-family: Courier }
table { margin-left: 250px }

</style>

<body>
	(for <a href="https://github.com/dribnet/strokes/issues/8">strokes issue #8</a>)<br>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="testmatrix.js"></script>
</body>

testmatrix.cljs

(ns testmatrix
  (:require [strokes :refer [d3]]))

(strokes/bootstrap)

(defn tablulate [data]
  (let [columns (vec (keys (first data)))
        table (-> d3 (.select "body") (.append "table"))
        thead (-> table (.append "thead"))
        tbody (-> table (.append "tbody"))]

    (-> thead (.append "tr")
      (.selectAll "th")
      (.data columns)
      (.enter)
      (.append "th")
      (.text name))

    (-> tbody (.selectAll "tr")
      (.data data)
      (.enter)
      (.append "tr")
      (.selectAll "td")
      (.data (fn [row]
        (map (fn [c] {:column c :value (get row c)}) columns)))
      (.enter)
      (.append "td")
      (.html #(:value %)))

    table))

(tablulate [
  {:name "Jill"   :age 30}
  {:name "Bob"    :age 32}
  {:name "George" :age 29}
  {:name "Sally"  :age 31}
])