AndrewStaroscik

Forked from bl.ocks.org/mbostock/3037015 to show how a click event can be used to change the content of a div using jQuery

Click on the atoms to see the name and atomic weight

AndrewStaroscik

This example demonstrates how to create a gradient that follows a stroke. This technique is sometimes used to indicate directionality along a curved edge, such as with hierarchical edge bundling.

To start, take any SVG path element and uniformly sample points along the path using getPointAtLength. (This method can also be used for path tweening.) Then, for each segment between adjacent points, compute the miter joint via line-line intersection. Lastly fill each segment by interpolating the start and end colors, here green to red, using the normalized length t along the path. Although each segment is a constant color, there are many segments to give the appearance of a continuous gradient.

This example uses a thin stroke in addition to filling the segments. This avoids antialiasing artifacts due to most

AndrewStaroscik

A visualization created to help me understand transitions within 'g' elements in d3.

I want to understand how to transition paths and labels linked to the same data. This visualization deals with the path and the label separately by linking the path and text variables to the same data.

While this works, it violates the principle of maintaining one to one joins between data and elements (see mbostocks answer here).

I have tried similar enter and transition structure within g elements with no success.

AndrewStaroscik

A failed attempt to get data and labels linked to the same data to transition within a 'g' element.

This is one of several variations I tried.

See this gist for an example that works but violates the principle of one to one mapping between data and elements.

The transition works after correting a typo.

AndrewStaroscik

generation of custom svg path example for d3.

in response to a question on stackoverflow

AndrewStaroscik

add border to svg container in d3

in response to a question on stackoverflow

border is added in lines 55 - 62

AndrewStaroscik

add the same functions to an svg shape and label in d3

in response to a question on stackoverflow

click on the paths to change.

AndrewStaroscik

Response to a question on stackoverflow

AndrewStaroscik

Response to a question on stackoverflow

code taken from here

AndrewStaroscik

Troubleshooting a question on stackoverflow

code taken from here and here

The tsv file is not loading properly but the graphs are stacking as expected.