John H. Hellier jhellier

Built with blockbuilder.org

This is an example of a graphic created in Adobe Illustrator and imported into a D3 based page. This is a followup of an earlier block "Adobe SVG to D3". The earlier block explains more about the mechanics of bringing in a new SVG element.

This block creates four copies of the original star graphic SVG and shows how to access each one as if it were a D3 based SVG element. The styling colors are changed and the movement of each is distinct as well as capturing mouse events for each SVG.

This graphic although simple is a good example of one that you would not want to have to code the path yourself. Very easy to do in Adobe Illustrator but very painfull to get right if you were trying to code it manually.

Built with blockbuilder.org

This is an example of creating a graphic in Adobe Illustrator which is then exported as a SVG file. This image was designed as a new annotation element for another project. The reason for using a tool to generate SVGs is that doing any complex graphic manually does not scale and is very painful to create. However, there are things to consider when bringing external SVGs in, which I will discuss further down.

This SVG is composed of several layers that will support multiple interaction schemes. The red circle is a delete button. The blue circle will be draggable off the SVG to anywhere on the screen with a connecting line back to the parent g. The white space in the middle of the parent g will be for text annotation. Each layer created in Adobe Illustrator gets mapped to a new group element in the SVG each with its own generated ID. Each element in each group is assigned a CSS class for styling. All the CSS is then placed in the header of the SVG elemen

Built with blockbuilder.org

This was an experiment in visually identifying word patterns and then moving them out to form phrases.

"VISUALIZE PATTERNS IN YOUR DATA" is encoded for this message. Each letter of each word is placed at a specific location. When the code hits that location it highlights the letter and once the complete word has been found it copies the word to the message area below the scan area.

I used multiple layers of the letters to simulate identifying and then moving a target letter to another part of the screen while keeping the original letter in the original spot.

This kind of viz could be expanded on quite a bit to represent searching through bodies of text to visually identify key terms. A categorizer could be added to sort words into bins.

Built with blockbuilder.org

Randomly generates a bunch of sticks then randomly drops each stick into a pile. There is always one red stick in the pile. Click the "Sort It" button and the sticks are pulled out and placed on the bottom of the frame and then sorted. At this point the red stick should be very clearly seen and comparable. Hitting the reset button will generate a new random pile.

This was based on a sketch I did and then asked could I implement it in D3. This is how a lot of the projects I am doing go. It is a fun way to see what you can do. Also like the tons of examples the D3 community is developing, it provides inspiration to do other things. Clearly this was influenced heavily by other community examples, everything from the co-occurence matrix to the visual sorting algorithms.

An ongoing question for the animation is can we create meaning in the animation itself. Ideas like drawing the user's attention to specific pieces or creating meaning by the change in pro

Built with blockbuilder.org

This is part of a series looking at the movement of circles in circular patterns. Clicking on one of the small inner circles starts that inner circle rotating. Clicking on it again, stops the rotation.

This example has the circles rotate around the inside of the perimeter of the large circle.

You can put any number of circles in the large base circle and they will be evenly spaced.

The position of the each circle is tracked so that you can start and stop each circle without doing complex calculations for determining where the circle is and where it needs to go. Or at least it seemed more complex to me versus just tracking the last degree position.

Built with blockbuilder.org

This is part of a series looking at the movement of circles in circular patterns. Clicking on one of the small inner circles starts that inner circle rotating. Clicking on it again, stops the rotation.

This example has the circles grow and shrink as they move around.

You can put any number of circles in the large base circle and they will be evenly spaced.

The position of the each circle is tracked so that you can start and stop each circle without doing complex calculations for determining where the circle is and where it needs to go. Or at least it seemed more complex to me versus just tracking the last degree position.