eesur

Force layout test/experiment with images

Sources:

• Force Layout
• Force-based label placement
• Collapsible force layout with directed paths and images/text in the nodes.
• Labeled Force Layout

eesur

license: mit
height: 500
border: no

eesur

Just two simple questions to prioritise tasks, using Eisenhower’s strategy matrix.

"Using the decision matrix, you will separate your actions based on four possibilities.

• Urgent and important (tasks you will do immediately)
• Important, but not urgent (tasks you will schedule to do later)
• Urgent, but not important (tasks you will delegate to someone else)
• Neither urgent nor important (tasks that you will eliminate)

The great thing about this matrix is that it can be used for broad productivity plans (“How should I spend my time each week?”) and for smaller, daily plans (“What should I do today?”)"

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

D3 Multiple Line chart with toggle legend

Line chart updates the yAxis depending on selection from the legend.

The legend uses purecss for the menu, which can be made into a responsive menu.

The legend has been added to the re-useable components from ScottLogic's awesome d3-financial-components

eesur

license: mit
height: 500
border: no

eesur

using a waffle chart to show time in percentage. Updating every second and squares/percentage is rounded down to nearest integer

eesur

eesur

Hotspots with D3

Just a play with hotspots to make an image 'interactive' in D3 and an excuse to reminisce.

Process:

• Find a pic, choose The Grand Budapest Hotel, it was an awesome film
• Made a grid, so I can quickly reference the pixels
• Made the data (my son helped me here)
• Draw some transparent rects

eesur

Updated reusable slopegraph sketch, from my previous slopegraph version

This version allows for multiple sets/columns and will adapted accordingly. Added some interaction to toggle the sets/columns and also toggle highlighted line.

data source