Database Reference
In-Depth Information
(str "<h2>" (aget node "name") "</h2>"
"<dl>"
(dl-item "Total" data "race-total")
(dl-item "White" data "race-white")
(dl-item "African-American" data
"race-black")
(dl-item "Native American" data
"race-indian")
(dl-item "Asian" data "race-asian")
(dl-item "Hawaiian" data "race-hawaiian")
(dl-item "Other" data "race-other")
(dl-item "Multi-racial" data
"race-two-more")
"</dl>")]
(dom/remove-children :datapane)
(dom/append
(dom/get-element :datapane)
(dom/html->dom content))))
7.
Our
mouseover
event, which will get called whenever the user hovers over a node,
pulls the
CIRCLE
element out of the event, gets the index of the node from the
element, and pulls the data item out of the graph:
(defn on-mouseover [ev]
(let [target (.-target ev)]
(if (= (.-nodeName target) "circle")
(let [n (+ (.getAttribute target "data-n"))]
(update-data
(aget (.-nodes @force/census-graph) n))))))
8.
Now, we create the chart using the
force-layout
function from the last recipe and
then we add an event handler to the chart's parent:
(defn ^:export interactive-force-layout []
(force/force-layout)
(gevents/listen (dom/get-element "force")
(.-MOUSEOVER gevents/EventType)
on-mouseover))
