eesur

Travelling to planets

Came across this vintage data viz (the b/w image), not sure how they got the figures, perhaps plane speeds at the time? I've added some more recent ones for comparison, referenced from astronomycafe and also dustbunny. note: dustbunny had the data from the Sun, so used it to calculate it from the Earth as the reference.

Just move over the planets to view. As the planets move along their orbital paths they move nearer and further in comparison to each other all the time, so all just for play.

>It's very hard for us to understand just how large the solar system is. Scientists tell us that the largest number our minds can really comprehend, or grasp, is about a hundred thousand (100,000). When you begin talking about the distances between planets, which are measured in millions, or billions, of miles, our minds just don't keep up very well. When you add the habit that adults hav

eesur

Moving an SVG selection to the front/back

Rolling over boxes bring them to front, and clicking them sends them to the back.

D3 is often used to create and manipulate SVG. Other than with HTML, the order of SVG elements define their visibility (whereas in HTML we have something like z-index). So we are often missing the functionality of moving an SVG selection to the front/back as it is known from Adobe Illustrator.

source: d3-extended

eesur

Example uses D3 to produce Pure's responsive grid programmatically.

For example, elements within a '3' row grid will be width: 100% on small screens, but will shrink to become width: 33.33% on medium-sized screens and above.

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>

eesur

setInterval to update at random time, within the second half of the minute. e.g. to help spread server load

• If between 30-60 seconds of current minute PASS
• If between 0-30 seconds of current minute FAIL

If FAIL, set time-out to ensure PASS If PASS, set interval to reload every 60 seconds

*View browser console for feedback

eesur

Testing legend with scroll for an overtly long legend. Test has simple fade out of lines on click of legend item, and moves the legend on roll over of bar lines. Use the slider to increase/decrease the lines and keys in legend.

eesur

Chart on SGGS authors

This is my first draft/sketch for a chart to show authors, as they appear on each ang/page of the Sri Guru Granth Sahib. Each bar represents a page, there is a legend to filter the authors.

Issues

• Mostly to do with the data, scraped what I could, but had to go through manually to fill in the gaps. Grouped Bhagats together(15), Bhatts(17), and Sikhs(4) otherwise would have be too many colours
• Didn't know which shabad Guru Gobind Singh wrote

To do:

eesur

Voronoi for hotspots

Updated previous bl.ock which used transparent circles——this version using voronoi

Note: Toggle grid via button top right.

Inspiration:

• This awesome article by Nadieh Bremer

eesur

My youngest is always asking me, 'how old will you be when I'm x years? and by brother/sister is x years

So this sketch is for him! but it was weird doing it, actually made me pause.

Used moment.js to calculate the dates; no real need though, as they were just subtractions—but handy if I do anything more detailed with the sketch.

The nav/options are an array (caled dates in the code) that can just be added to and changed, and the rest get's worked out and displayed.

eesur

Modified sketch of individual transitions to incorporate the using data to render and apply the circles to the DOM (but ignored from the browser), and use p5 to paint to the canvas.

sources/inspiration

-p5-D3-cookbook

• Working with D3.js and Canvas

eesur

Time tables practice for my youngest. I've been using playing cards (normal deck), which are fantastic and this is based of the same idea; where I still work with him and see if he beats the machine—no scoring, just fun practice.

You can filter the sets at the top, by deselecting any to be excluded. And change speed via buttons in footer.