D3 charts with clippath and threshold coloring

[roydo....@gmail.com]

Hi

I have worked with line charts and clippath coloring. But this chart's requirement is a little different. I wanted someone to point me to some resources/ concepts so I could achieve this.

There are 2 dotted lines that act as the upper and lower threshold level for the pacing chart. Any line data below or above these lines is a different color. 

I have seen coloring using clip-path with rectangle, but this is more like path area or something. Any assistance would be really helpful. Thanks.

Regards,
Roydon D' Souza

All Emails of Roydon D'Souza are managed by the MailBox.

http://www.roydondsouza.com

[roydo....@gmail.com]

Any help here would be appreciated. I want to know how I can clip the line chart with a line across it. It will not be parallel to the axis.

The examples by mike on threshold encoding with clip path and and gradient are explain for area that can be achieved using rectangles. But here we might not end up with rectangles because of pacing chart.

Thanks again.

[roydo....@gmail.com]

I have put together a codepen mock. I need a red color for the line chart that falls outside the 2 black lines; blue color between line will not change. 

http://codepen.io/roydondsouza/pen/bVbvZO

Regards,

Roydon D' Souza

Ph.: +91-9739791096

Disclaimer Notice: This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. E-mail transmission cannot be guaranteed to be secure or error-free as information could be intercepted, corrupted, lost, destroyed, arrive late or incomplete, or contain viruses. The sender therefore does not accept liability for any errors or omissions in the contents of this message, which arise as a result of e-mail transmission. If verification is required please request a hard-copy version.

WARNING: Computer viruses can be transmitted via email. The recipient should check this email and any attachments for the presence of viruses. The company accepts no liability for any damage caused by any virus transmitted by this email. E-mail transmission cannot be guaranteed to be secure or error-free as information could be intercepted, corrupted, lost, destroyed, arrive late or incomplete, or contain viruses. The sender therefore does not accept liability for any errors or omissions in the contents of this message, which arise as a result of e-mail transmission.

All Emails of Roydon D'Souza are managed by the MailBox.

http://www.roydondsouza.com

[Ger Hobbelt]

Here you go: http://codepen.io/anon/pen/NGKMmx

The key is to create a clipping mask and reference that one. The clipping mask can be any polygon/shape/whatever. (See also MDN et al)

Note that if you google SVG clipping masks (I did) then some folks mention these only work on G (SVG group) elements; this one happens to work on a svg:path directly, at least in latest Win8/Chrome (haven't checked on other platforms/browsers/versions)

The draw_poly in there is a bit hacky as it (ab)uses d3.svg.line() to produce something that works for a polygon; the segment 'M' gets killed brutally and the poly is started by two extra corner points to span the entire graph surface above that 'pac' dashed line. I'm sure someone else can do it better/cleaner than this bitbanging an SVG path.

Extras:

- Heed the warning in the CSS in that codepen, BTW.

- There's no d3.svg.polygon() so I took d3.svg.line() and made it bend to my wiles. Mind the custom interpolator (hinted at by M. Bostock in the d3.svg.line.interpolate API docs). YMMV.

Cheers,

Met vriendelijke groeten / Best regards,

Ger Hobbelt

--------------------------------------------------
web:    http://www.hobbelt.com/
        http://www.hebbut.net/
mail:   g...@hobbelt.com
mobile: +31-6-11 120 978
--------------------------------------------------

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.