Simple Web Projects

Simple Presentation

 

A template html/css page intended to provide a quick and simple digital handout to accompany presentations.

I created this while offline on a train; it was a last minute addition to a presentation prepared for the Internship Assessment Day I was travelling to.

Source Code: Github (External)

Preview: HTMLPreview (External)


SkillTree

skilltree-1
Both mouse-hover and button-click options show dependencies and dependent skills.

SkillTree uses javascript to produce an interactive SVG graph of dependencies.

I was inspired by the problems students face when choosing which subjects to study – this could be used to visualise career and study routes, amongst other things.

Source Code: Github (External)

Preview: HTMLPreview (External)


WebStack

Simply populate the JSON structures with data and configuration and this client-side script will produce an SVG (with added annotation option).

Options include random or pre-defined colours, the tool handles empty spaces too.

The inspiration for this was web development stacks, where it could be useful (especially for beginners) to see a high-level visualisation of what products/services are compatible – because by choosing a combination, you’re also rejecting other combinations (and sometimes it would be useful to see them upfront).

Another use I’ve seen (after developing this) was to visualise organisation charts.

Source Code: Github (External)

Preview: HTMLPreview

webstack-graph
An example visualisation of some web development options (OS/Server/Database/Languages)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s