Basic principles...
of readability and strucure in websites
- 5 basic principles of typography
- 6 CSS tips for better typography
- Fluid typography: using CSS for responsive font sizes
- CSS3 text effects (PS: Use with caution!)
Basic CSS and HTML↑
Some tips and tricks on how to use simple CSS to present and/or navigate specific, highlighted data
- CSS3 animations at W3Schools
- Image maps: Map URLs to an image
- Fun with CSS viewport units
As seen in examples: NRK: Karl XII - CSS Hover slider (for character presentation, for example)
Infographics
Some basic but useful HTML/CSS templates/inspirational infographics
- Know your coffee Great representation of content and strongness
- Circles highlights numbers
- CSS progress bars
- HTML/CSS Infographic: Simple ordered presentation using icons, numbers and colors
- Tutorial: Designing an HTML/CSS infographic from Line25
Some fancy CSS tutorials
- Slider with text/HTML as slide content
- CSS Animation Shake effect
- CSS Keyframes Solar system rotation
- CSS Animation and JavaScript Day/Night simulation
- Ken Burns ("Pan and Zoom") effect using CSS on still images
- CSS3 Fullscreen slideshow
- Animating sliding page elements with CSS
HTML/CSS/JS elements
- Modal boxes (overlay pop-up boxes) *Simple
As seen in exaples: Gåten Orderud - Modal boxes *Advanced
HTML/CSS/JS templates
CSS frameworks
HTML and CSS frameworks to kickoff your projects.
Scrolling↑
Tutorials, tools, templates and techniques to make scrolling web pages
- Parallax scrolling sections
As seen in examples: Snow fall, NRK: Karl XII - CSS fullsite parallax site
- Horizontal scrolling full-page with navigation
As seen in examples: Gåten Orderud (tidslinje) - position:sticky - stickable headers or floating infoboxes
- OnePage Scrolling dotted navigation
- Simple scroll animations
Examples: Fade in, flip, zoom in - JavaScript scrolling effects
Examples: Blur image on scroll, zoom in layers on scroll, Parallax, position detection and many more... - [Template] Stamina Sectioned scrolling onepage template
Charts ↑
Charts are a popular way of displaying data for comparison. Bar charts and Pie charts are some of the most basic charts.
Charts.js
Chart.js is a javascript library that use the HTML <canvas> element to draw different chart types based on data value input.
- Chart.js homepage
As seen in examples: VG: Corona - Chart.js documentation
- Chart.js introduction tutorial
Also see simple code examples from the lecture.
A similar alternative with slightly different syntax is Chartist.js
GoJS
More advanced charts (not very more advanced code), like organization charts, relationship charts etc.
Raw Graph
Simple web editor to produce data visualizations for scatter, plot, size diagrams (as well as traditional charts like bar, line, pie etc.)
Datawrapper
Editor for creating charts based on larger datasets
Timelines ↑
Timelines are used to display historical events or milestones within a topic (story)
A great place to start is the article How to Create a Timeline Infographic: The Definitive Guide from Venngage. But, don't limit yourself to timelines as simple infographic, as both diagrams, graphs and entire sites can be used to present chronological time-based information.
Photo manipulation and Graphics/Icon libraries ↑
Different tools and techniques to display, manipulate and engage with pure images as the base.
- 5 JavaScript libraries to compare images. See also JuxtaposeJS
- Make posters and collages with BeFunky
- Add audio to photos with Kapwing
- Zoom images without modal boxes
Icons
Free icon libraries.
Maps ↑
Different tutorials and libraries to create maps.
Leaflet js
- Leaflet.js, a low-level javascript library for creating interactive maps
- Leaflet.js documentation
- Code example: Filtering markers on leaflet maps
Turn off zoom on scrollwheel: set option scrollWheelZoom to false in map initiation. [Leaflet Documentation]
Various maps libraries
Map constructors
Norwegian maps and geographical data sets
Kartverket and GeoNorge offer plenty of data and map apis to construct different map sets with Norwegian national data
- Kartverket: APIs and map data
- Leaflet TileLayer extension for Kartverket
- Kartverket: Code examples of leaflet and Kartverket
- GeoNorge: Large collection of maps and datasets with Norwegian data.
Datawrapper
Editor for creating maps based on larger datasets
Visme
Software for creating interactive maps
Mobile adaption/responsive design ↑
Media queries
Use media queries to make your existing design elements responsive in regards to different breakpoints
- How to write mobile-first CSS
- Media Queries demystified
- Why you don't need device specific breakpoints
- Fluid and responsive typography
- Responsive design lecture notes (from Web development course)
JavaScript
- jQuery UI: interface interaction library (on top of jQuery)
- jQuery Mobile: Touch-optimized web framework (on top of jQuery)
Mobile detection
Application frameworks
- Ionic Creator: graphical interface to make a mobile web application
- Ionic Framework: Mobile SDK for creating native mobile apps
- Framework7: Full Featured HTML Framework for Building iOS & Android Apps
App development (without coding)
Crowdsourcing tools ↑
Various helpful tools to build parts of your audience-driven projects.
- EasyPolls : Simple polls allowing visitors to give their vote on a subject.
- MailThis.to : Simple e-mail forms to gather audience posts and stories
- Tricider: Get feedback, votes and comments on ideas.
Tools ↑
Various helpful tools to build parts of your projects.
- Flourish Studio : Amazing tool for building animated info-graphical stories. Can be exported as HTML and included in your site/articles.
- Twine 2.0 : Open Source tool for prototyping interactive, non-linear stories
- Plain JS Media plugins Different simple plugins for slideshows and modal boxes
- CanvaOnline designverktøy for plakater, infografikk ol.
- VismeOnline designverktøy for plakater, infografikk ol.
Various tutorials ↑
This list contains different tutorials of different techniques that can be used to make aspects of a digital story
PhotoShop
JavaScript
- Create HTML and JS tabs
As seen in examples: VG: Corona - Create HTML and JS accordions
As seen in examples: VG: Corona - onScroll Detect scroll position to manipulate HTML.
See also scrollTop()
As seen in examples: Snow fall - D3 - Data Driven Documents, a huge javascript library that take data as input, then convert the data into controllable HTML elements.
- Modalbox.js, a javascript library to make modalboxes
As seen in examples: Snow fall ('map' and 'group' links), Gåten Orderud ('aktørene' and 'sporene') - Lazy loading content
As seen in examples: Tom Hagen, levde han et dobbeltliv - Slick Slider, a javascript library to make slideshows
- InfoVis: JavaScript library for creating interactive data visualizations for the web.
- jQuery Mobile: touch web framework.
Maps
- CSS Maps: A list apart makes maps more controllable and available.
- Realtime tracking using PubNub, javascript and Google Maps
Misc
Inspiration
A collection of sites and examples that can be used as inspiration for data visualization in your projects.