Fork me on GitHub

Which chart lib do you guys like using with clojurescript?


I like making custom charts with d3 (helper library: But there are a lot of good options with more ready made charts. Take a look at cljsjs and you can peak at the charting options easily compatible with reagent


It’s on cljsjs also [cljsjs/recharts "1.4.2-0"]

David Pham14:02:50

You can also write wrappers around other react librarys 🙂

David Pham14:02:11

@gadfly361 How did you implement tooltip with rid3?

David Pham14:02:46

Do you use cursors? Because whenever I try to use tooltip viz recompute the whole graphic


@neo2551 yeah, I use cursors for the ratom used in each rid3 visualization


For tooltip I'd use conditional logic to show an element based on some kind of touch event .. so I'd make the tooltip element 100% opacity when not in use

David Pham17:02:59

Do you have an example with a cursor for rid3?

David Pham17:02:13

I still have the feeling that my component will be called whenever the ratom change xD


The component will call did-update everytime the viz's ratom changes (which can be a cursor) .. that is intended behavior. The viz component is meant to update when data that it relies on changes :man-shrugging:


I don't have an example handy, but you can also create a Form-2 component with a ratom and pass that in if you want to mock something up .. a cursor would act the same way

David Pham19:02:19

Oh great thanks!! While you are at it, do you know the difference between the track and reaction in reagent?!


@neo2551 I won't speak to reaction, but this may give some insight in to how track works:

(defn tracked-counter [ratom]
  (print "tracked counter ran")
  (get @ratom :tracked-counter 0))

(defn track-example []
  (let [ratom1 (reagent/atom {:counter 0})
        ratom2 (reagent/atom {:tracked-counter 0})]
    (fn []
      (let [_ (print "this component has re-rendered")
            untracked-count (get @ratom1 :counter 0)
            tracked-count @(reagent/track tracked-counter ratom2)]
         [:h1 "Counter: " untracked-count]
         [:h1 "Tracked Counter: " tracked-count]

          {:on-click #(swap! ratom1 update :counter inc)}
          "Increment counter"]
          {:on-click #(swap! ratom2 update :tracked-counter inc)}
          "Increment tracked counter"]
If you click the first button, you will only see a print-out of "this component has re-rendered". However, if you click the second button, you will see that print-out plus the "tracked counter ran". So with track, you can enable functions to only run when the ratom that they rely on changes. So if you wanted to sort a list of data ... but worry about having to pay the cost of that sort every time your component rerenders ... you can instead track the sort function so it will only run when data changes


And regarding reactions, this is from reagent website

If you've been using reagent.ratom/reaction etc, track should be quite familiar. The main difference is that track uses named functions and variables, rather than depending on closures, and that you don’t have to manage their creation manually (since tracks are automatically cached and reused).