Creating data by drawing it

[eugene brown]

Hey group,

Does anyone know how the chart in this article http://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html?_r=0 is created? It's super cool! Specifically how it allows the user to click and drag around the screen and interprets the y values for each x.

Cheers!

[Alec Barrett]

I would guess that there is an .on('click') or .on('mousedown') event attached to the <rect> inside the <svg>. A d3.event has properties that include the x and y coordinates of the mouse at the time of the event, which could be converted to coordinates for the circles and path.

I notice that before you start drawing, there is a <g class="user-line"> element with two <path> elements inside that have no 'd' property. Once you start drawing, the 'd' property starts getting filled in. You can see that it's possible to produce curves in the line, so it's probably not a linear interpolation. (See some of the other possible interpolations here: https://bl.ocks.org/mbostock/4342190).

Another interesting thing that happens is that as soon as you draw the first point, all of your unfinished points are added as <circle> elements with radius of 0 and no transform attribute. So there's some logic that's paying attention to whether your mouse has passed every 5th percentile to know whether to add a circle and M/L components to the path's 'd' attribute.

[eugene brown]

Thanks Alec that was just the advice I needed.

Cheers!

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/LYW2VmSHiL8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.