A quick throw together of a circle-packing example using a data file provided by zach atop my strokes library.
Note: There is a known performance problem with the library that is being looked into - this is running 1-2 orders of magnitude slower than normal.
<!DOCTYPE html>
<meta charset="utf-8">
<title>Zach circle pack</title>
<style>
circle {
fill: rgb(31, 119, 180);
fill-opacity: .25;
stroke: rgb(31, 119, 180);
stroke-width: 1px;
}
.leaf circle {
fill: #ff7f0e;
fill-opacity: 1;
}
text {
font: 10px sans-serif;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
strokes_demo="circle-pack";
</script>
<script type="text/javascript" src="strokes-zach-circle-pack.js"></script>
{:timestamp 1354320514391, :sub-tasks ({:sub-tasks ({:sub-tasks ({:sub-tasks ({:task "summaries-table", :durations (0.059048 0.045476)}), :task "get-summaries", :durations (31.330752 181.814338)}), :task "latest-summaries", :durations (213.339324)} {:sub-tasks ({:task "dataset-scarecrow", :durations (0.122658)}), :task "extracted-input", :durations (0.576339)} {:task "write-batched-quick-inputs", :durations (2008.292149)} {:task "write-batched-unprocessed-inputs", :durations (123.20271)}), :task "write-batched-inputs", :durations (2368.822175)} {:sub-tasks ({:task "summarize-views", :durations (229.414336)} {:task "batch-put-diffs", :durations (0.595916)}), :task "generate-summary-diffs", :durations (230.173458)}), :task "put-inputs", :durations (2599.083395)}(ns strokes.examples.circle-pack
(:require [strokes :refer [d3]]))
(def diameter 900)
(def formatfn (d3/format ",d"))
(def pack (-> d3 .-layout .pack
(.size [(- diameter 4), (- diameter 4)])
(.children :sub-tasks)
(.value #(first (:durations %)))))
(def svg (-> d3 (.select "body") (.append "svg")
(.attr "width" diameter)
(.attr "height" diameter)
(.append "g")
(.attr "transform" "translate(2,2)")))
(-> d3 (.edn "trace.edn" (fn [error, root]
(.log js/console root)
(let [node (-> svg (.datum root) (.selectAll ".node")
(.data (.-nodes pack))
.enter (.append "g")
(.attr "class" #(if (contains? % :children) "node" "leaf node"))
(.attr "transform" #(str "translate(" (:x %) "," (:y %) ")")))]
(-> node (.append "title")
(.text #(str (:task %) (if (contains? % :children) "" (formatfn (:size %))))))
(-> node (.append "circle")
(.attr "r" :r))
(-> node (.filter #(not (:children %))) (.append "text")
(.attr "dy" ".3em")
(.style "text-anchor" "middle")
(.text #(subs (:task %) 0 (/ (:r %) 3))))
))))
(-> d3 (.select (.-frameElement js/self)) (.style "height" (str diameter "px")))