mapping

CSS Logo

Simple Horizontal Segmented Bar Chart With CSS

13th March 2021 - 11 minutes read time

Bar charts are powerful ways to show the relationships between different data items. If the data you want to show is discrete then a simple horizontal segmented bar chart is a good idea. You can easily change a collection of numbers into a related set of attributes.

To display this bar chart you don't need a large JavaScript library or an backend charting system, you just need a few lines of markup and some styles. Here is all of the markup needed to generate the bar chart. This consists of a wrapper element and four inner elements that make up the data of the bar chart. Note that the width of each element is pre-calculated to be 25%. I'll address the maths involved in this later in the post.

An Introduction To OpenLayers

19th May 2012 - 7 minutes read time

OpenLayers is a powerful and open source mapping solution written in JavaScript that can display mutliple different mapping services on web pages. What this means is that you can create a mapping tool using Google Maps and swap it to use Bing Maps at a later date without having to totally rewrite your code. OpenLayers works by building up a series of layers that fit together to form mapping, tools, information and even utilities like KML parsing and AJAX. Vectors and markers can also be used to add layers of information onto the map.

A map in OpenLayers (and most other mapping services) is essentially a set of images called "tiles". When you load a map all you are doing is loading in a bunch of map tiles which OpenLayers then places in the correct place. As you move around a map or change the zoom factor then other map tiles are loaded in to build the new view of the map.