Strokes: Let's pretend D3 was written in ClojureScript | Hacker News Reader

Strokes: Let's pretend D3 was written in ClojureScript

github.com

46 pointssebg19 comments

I like all the stuff that D3 has, but it's all done through the most obnoxious cute chaining API. Why can't a low level library have simple, if more verbose, normal function calls? I see that this thing doesn't try to solve the problem at all.

I remember getting excited about functional approaches to d3, but then the excitement died down

https://keminglabs.com/c2/

https://github.com/seliopou/elm-d3

In all fairness mBostock works very hard on d3 and he is prolific at it as evidence by his bl.ocks.org pages but his library is very opinionated as well

I got really excited reading about c2, and then saw on github the last update was two years ago. :(

Author of elm-d3 here. The project's still being maintained, but I've been slow to update it to 0.16 for a number of reasons. First, there's dealing with cabal hell after every release. Second, Elm's FFI is undocumented, so it's always a bit of a pain to dig into the internals get things working again. Second, most of my D3 efforts are now focused on ocaml-d3[0], which is the library that I use day-to-day for building front-end interfaces, not just visualizations.

If there's somebody from the Elm community that would like to help out in maintaining elm-d3, let me know. Experience with the FFI that you can point to is required.

[0]: https://github.com/seliopou/ocaml-d3

Most of what C2 provided is now better-provided by React and a ClojureScript layer over top of it -- I upgraded my C2 project to use Reagent. I think this is actually why C2 is abandoned, although I don't know for sure.

I'm the author of C2, and you're exactly right. React provides everything that C2's underlying DOM manipulation library (https://github.com/lynaghk/singult/) does. React is faster, capable with more browsers, and has better API hooks that let callers control the low-level details.

Oh nice, and thanks for C2. Really all I had to do was write my own scaling fn and just move the state into a Reagent atom and it all worked the same as before.

Thanks for C2! I've just looked and it is indeed indicated as "Deprecated" in github, but in keminglabs.com it still states "C2 is a very early project, and there’s a lot left to do." Perhaps that could be updated... I remember some time ago I wondered this, and I didn't see the "Deprecated" in github, if it already was.

Is anyone working on a library similar to d3 that is written from the ground up in ClojureScript?

toxi's thi-ng/geom[1] library deserves a mention in this space.

[1]: https://github.com/thi-ng/geom

I recently attended a workshop with Karsten (in fact, the last commit to geom was a small bugfix I authored there). He's a really smart guy and the amount of ground covered by the libraries is bewildering.

Probably worth checking out the main site for an overview if you haven't seen it before:

http://thi.ng/

the example links (s.trokes.org) are broken. HN hug? Although my browser is saying it's a DNS resolution issue.

sorry - s.trokes.org was just a clone of bl.ocks.org with syntax highlight support for clojure. I've updated the links to blocks and the examples are working again.

I've recently had good success writing raw SVG from ClojureScript. What does D3 provide on top of that?

a principled way to think about layering graphics and animations ... it's a bit higher level of abstraction than generating raw SVG. paper here: http://vis.stanford.edu/files/2011-D3-InfoVis.pdf

D3 provides bindings between data structures and DOM elements; that's where a lot of the power comes from, specifically for doing in-place updates.

I've used d3 as a replacement for react and it performs quite well—though you have to be a bit more explicit when it comes to updates.

Probably the most important innovation of d3 is the idea of the DOM - data join. Mike Bostock, handsome father of d3.js and maker of all that is pure and wonderful (I have the good fortune to spend lots of work time using d3), mentioned this himself during his reddit AMA, see https://www.reddit.com/r/dataisbeautiful/comments/3k3if4/hi_...

In short, you get some data, you join it with a selection of wholly or partially non-existent DOM, and then you work with the enter (new), update (existing) and exit (not required for the new data) selection. This is an extremely powerful metaphor for representing data and performing dynamic data updates using arbitrary mixes of SVG (or any other DOM) elements. (oh, based on this mechanism, you can build really beautiful visual transitions)

Here's a short introduction to the join idea in d3: https://bost.ocks.org/mike/join/

BTW, programming in d3.js already feels a whole lot like programming in a functional language.

Literally, TONS. From handling mappings between ranges to converting geolocations, and from automatically keeping track of things added/removed from an SVG based diagram/plot to picking nice tick marks on your axis.

Most of the replies you got are talking about DOM manipulation. If you're using React, then you have that part covered. In my experience, it's much easier to use React's declarative model over D3's imperative one.

D3 has some really nice graphing utilities, though. Their scale functions are handy and their geometry API is spectacular: https://github.com/mbostock/d3/wiki/Geometry

Reply on news.ycombinator.com