Re: Variable width lines?

[asgallant]

You can hack the AreaCharts to do that.  The first would be a stacked area chart with an extra, transparent area on the bottom which represents the negative space below the blue section.  The second would be like the first, but with additional extra transparent areas in between each series.  You'd have to calculate the size of the transparent areas at each data point to get the total effect you're looking for (DataViews with calculated columns will do this for you if you know the algorithm you need to use), but it's totally doable.

On Sunday, September 2, 2012 11:48:16 PM UTC-4, Sergio Zambrano wrote:

Is there any way I can hack, modify, or can you tell me where to start to get a different graph style?

I find that that I'm looking for is similar to the stream graph,

http://code.shutterstock.com/rickshaw/examples/extensions.html

which is based on an area-type graph, but representing values with the thickness of the lines rather than the area.

It could be rendered with the same engine, though, since it draws lines, smooth them, and centers the whole stream.

I could just render it with absolutely positioned css circles (divs with corner-radius) plotted in enough rows to simulate a continuous line, but I think the final work could be shared with the world with a standard like the Google Graph API.

I attached a sample of my idea.

The first example shows the variable width lines stacked one on top of the other, but centered at the same time…

The second example smoothes out the spine of the lines, to prevent violent changes and zig-zags.

I could come up with the functions to render the positions of the lines (the spines and the areas making up the lines) myself, but the drawing is something too new for me.

If some javascript / svg / canvas warrior wants to collaborate to get it done, me and the rest of the community will appreciate it.

If no one does, I'd appreciate any tip that lights me the path.

Thanks.

[Sergio Zambrano]

I assume the calculated columns is what will allow me to do the pain I'm foreseeing:

Smoothing the spine of each bar/string, (about 3 columns) while keeping the width at the key points, rather than smoothing the whole paths that make the areas. Kind of a high pass filter. I don't know how it works. I just know that's the name of what I use to get the fine detail in a photo for later smoothing it like crazy and re-applying the fine details back (i.e. pores)… or like a temporal filter in video…

I think it'd be something like… 

Getting the thickest cols where all the bars peak up…

Finding a middle curve between both edges (spine)

Average that curve 3 cols around, returning the higher values only (loosing up -outwards- the spine but never straightening -inwards- the stream)

Re-render the proper thickness /2 both sides the spine.

Can I trace negative spaces that would end up transparent? I was thinking of covering up the area behind with another white area.

Can I manage the base (cero) of the areas or should I start with a white patch to cover the first (next) color area?

[asgallant]

I'm not sure what you asking here.  What do you mean by "trace negative spaces" and "manage the base"?

[Sergio Zambrano]

For "trace" I meant "draw" as in drawing an area that you called "transparent" which you said i'd "represent the negative space…"

For "manage the base" I meant to have access to caltulate a part of the area that the graphic considers the base of the graph, or cero.

In an area graph only the top path is visible, while the bottom is FLAT, hidden behind other areas. I wondered if I can modify/manage/control that, as in other graphs online called "stream", where the columns height is centered rather than aligned to the bottom, and it's the width of the horizontal stream (i don't want to call it height to prevent confusion) what determines the value, not the height of an bar or shape aligned to the bottom.

[asgallant]

You can't get an outline on the bottom of the areas, but if you use a ComboChart with lines and areas, you could set the "lineWidth" option of the areas to 0 (so they have no outline) and use the line series to draw the outlines yourself.  

For the other part, you could use a transparent area with a negative value to pull the other series down below the axis, here's an example: http://jsfiddle.net/asgallant/3Uzxb/ 

[Sergio Zambrano]

Oh, you are a genius. I didn't know you can map negative numbers. Removing the scale because it will be no relevant for my kind of graphic, that'd do the trick.

I'll give it a try as soon as I have some time.

Thanks.