Show HN: Paths.js – Generate SVG paths for geometric shapes

Well, there are a few. The main one is that Paths.js only builds a descriptor of your path (the string that goes into the "d" attribute of the SVG path tag), and leaves to you the actual rendering. This has, for me, a few benefits:

- it is easier to integrate into frameworks like React or Angular (because both these frameworks and D3 think they have control on what goes rendered in the page)

- you can use templating, which leads to a declarative approach, instead of the imperative approach of D3

- it only involves pure functions (no side effects) which makes it easier to unit test your graphics

- not doing the rendering means you can use Paths.js also on Node

Of course, D3 is more mature and complete at this point, and it is easier to find examples and documentation. I hope eventually to fill the gap, at least partially.

Another difference, although minor, is that D3 includes a lot of utilities (parsing CSV, doing Ajax requests, working with dates and much more...). This may be a benefit for you or not. I prefer to have small building blocks, and Paths.js is only concerned with generating paths.

girinambari2• 12 years ago

Thanks! make sense. I have observed that lot of JS based SVG libraries having memory leaks and slowing down browser over the time, how paths.js behaves in this context?

mshark• 12 years ago

You should have a section in your README discussing differences from D3. I've used D3 a little and understand some of the pain points. Looking at your library I'm asking myself "why would I abandon D3 for this?".

sidcool• 12 years ago

Inexplicable hostility towards this post. It's quite a handy library.

dgreensp• 12 years ago

So is the primary purpose of the library to save you from having to type "M 0 0 L 1 0 L 1 1", instead letting you type "Path().moveto(0, 0).lineto(1, 0).lineto(1, 1).print()"?

pathsjs6• 12 years ago

Well, if you are familiar with SVG and you just want to write at this level of abstraction, yes. But of course, this is only the lowest level API.

The actual purpose of library is to provide with more complex shapes and graphs, while still leaving you the possibility to write a path by hand, should the need arise.

Moreover, consider that even if you stay wit the lowest level API, the data you have may be dynamic, so that it may be easier to call a function with parameters at every frame, rather than hand-concatenating string (although this use is admittedly rather limited)

bshimmin• 12 years ago

I guess you didn't make it more than a third of the way through the README.

This looks super useful for the many circumstances where interpolating things into strings to generate SVG paths is quite unpleasant (ie. anything much beyond "M #{x} #{y}").

mambodog• 12 years ago

Consider, why do people use SQL query builders when you could just use a string?

josteink2• 12 years ago

Not sure you actually meant it as a question, but just to spell it, in case someone might actually consider it a genuine question.

SQL query builders can have the capability that they make queries composable.

Sending a string around will require you to do double and tripple check for parameters, logical combinations and what not in every step of a composable action.

Besides that, most SQL query composers assist you in isolating parameters from query, and this protects you from SQL injection.

untog2• 12 years ago

Yes, which is actually very useful once you start doing things like working with variables.

josteink2• 12 years ago

Looks nice, but I would really prefer the samples on the sample-site to be in plain Javascript.

Coffescript isn't for everyone, on the web Javascript should be considered the lingua franca.

By all means, keep the Coffescript if you like, just don't limit it to just a non-standard language web-wise. I can test JS in my browser, with coffescript... Not so much.

untog2• 12 years ago

All of the example code appears to be JS?

jasallen• 12 years ago

Parent is referring to the "demo application", though I personally disagree that one should worry about it on the demo app. The docs sure, but the demo app is readable enough even if you're not a coffeescript aficionado.

ffn• 12 years ago

Hey, this is actually pretty useful. Thanks

woah• 12 years ago

If this is viable for making dataviz, it will be a great relief to get away from D3's disorganized mishmash of data wrangling and dom manipulation code!

chrisdevereux• 12 years ago

This is a brilliantly conceived library. It does one thing well and even within that, decomposes into clear layers of abstraction. I've been using it at work and found the experience much nicer than the various high-level charting libs built on top of d3.

There's a nice example of using it with a declarative templating library like react or ractive.js here: http://mlarocca.github.io/01-22-2014/pathsjs_ractive.html

Only complaint is that some of the charts are a bit lacking in features (no stacked bar charts, for example). But it looks easy to hack on, which I'd take over a zillion different options.

akx• 12 years ago

Hm.

I just recently wrote something that does the lowest layer of this (generating SVG path strings) and didn't consider it "Show HN" worthy... https://github.com/akx/gravelly.js

(And no, this isn't an attempt at an underhanded sneaky "Show HN", just a thought.)

spb• 12 years ago

This is OK, but it would be a lot more useful if the low level API used the standard names from CanvasPathMethods for compatibility with Canvas and Path2D: http://html5index.org/Canvas%20-%20CanvasPathMethods.html

Show HN: Paths.js – Generate SVG paths for geometric shapes

Related Stories