block by dribnet 6183595

6183595

Full Screen

Starting from Mike’s sample (https://gist.github.com/1134768) I stripped down the chart to the bare minimum to understand the physics. I use a matrix instead of a csv or json. With the console.log outputs you can look at the transformation of the matrix when fed into the stack layout.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>venn-simple</title>
<style>
svg {
    border: solid 1px #ccc;
    font: 10px sans-serif;
    shape-rendering: crispEdges;
}
</style>

<body>
  <div id="viz"></div>
    <script src="//d3js.org/d3.v2.js"></script>
	<script type="text/javascript" src="d3-layout-example.js"></script>
</body>

d3-layout-example.cljs

(ns d3-layout-example
  (:require [strokes :refer [d3]]))

(strokes/bootstrap)

(def width 960)
(def height 500)

(defn dprint [x]
  (.log js/console (pr-str x)))

(def svg (-> d3 (.select "#viz")
             (.append "svg:svg")
             (.attr {:class "chart"
                     :width width
                     :height height})
             (.append "svg:g")
             (.attr {:transform "translate(10, 470)"})))

(def x (-> d3 .-scale
           (.ordinal)
           (.rangeRoundBands [0 (- width 50)])))

(def y (-> d3 .-scale
           (.linear)
           (.range [0 (- height 50)])))

(def z (-> d3 .-scale
           (.ordinal)
           (.range ["darkblue" "blue" "lightblue"])))

(def matrix [[1 5871  8916 2868]
             [2 10048 2060 6171]
             [3 16145 8090 8045]
             [4 990   940  6907]
             [5 450   430  5000]])

(dprint "--- matrix ---")
(dprint matrix)

(def remapped (vec (map-indexed (fn [i d]
                                  (map-indexed
                                   (fn [ii dd] {:x ii :y (get dd (inc i))})
                                   matrix))
                                ["c1" "c2" "c3"])))

(dprint "--- remapped ---")
(dprint remapped)

(def stackedjs ((-> d3 .-layout
                           (.stack))
                       (clj->js remapped)))

(def stacked (js->clj stackedjs :keywordize-keys true))

(dprint "--- stacked ---")
(dprint stacked)
(dprint (first stacked))
(dprint (mapv :x (first stacked))) ; Sweet

(.domain x (mapv :x (first stacked)))
(.domain y [0 (reduce (fn [prev curr]
                      (max prev (+ (:y0 curr) (:y curr))))
                    0 (last stacked))])

(dprint "--- domain ---")
(dprint (.domain x))
(dprint (.domain y))

(def valgroup (-> svg
                  (.selectAll "g.valgroup")
                  (.data stacked)
                  (.enter)
                  (.append "svg:g")
                  (.attr {:class "valgroup"})
                  (.style {:fill #(z %2)
                           :stroke #(-> d3 (.rgb (z %2)) (.darker))})))

(def rect (-> valgroup
              (.selectAll "rect")
              (.data identity)
              (.enter)
              (.append "svg:rect")
              (.attr {:x #(x (:x %))
                      :y #(y (- (- 0 (:y %)) (:y0 %)))
                      :height #(y (:y %))
                      :width (.rangeBand x)})))