Filter by topic

All, Development, Systems.

D3.js part 9 of 9 – Display several years of data with a time series

Posted on 19 July 2015 | Development by Tiety Kooistra

Part 8 – Interactive tooltips for detailed information In the previous post we added information tooltips to the map. Untill now we could only display the data from a specific year. In this post we will open the additional data of the years 1999 till 2013 so we can also visualise changes over time. With …


Continue reading

D3.js part 8 of 9 – Interactive tooltips for detailed information

Posted on 19 July 2015 | Development by Tiety Kooistra

Part 7 – Adding a legend to explain the data The map makes a lot more sense now with labels and a legend. You already get a general idea about the distribution of arrests in the provinces of The Netherlands, but we can do even better. Let’s unlock detailed information about the amount of arrests …


Continue reading

D3.js part 7 of 9 – Adding a legend to explain the data

Posted on 19 July 2015 | Development by Tiety Kooistra

Part 6 – Add labels to the map With the labels in place let’s start working on integrating a legend to explain the colors on the map. You can visit my Github page for all the blogs and demo’s in this series. To be able to display the legend we first need to make the …


Continue reading

D3.js part 6 of 9 – Add labels to the map

Posted on 19 July 2015 | Development by Tiety Kooistra

Part 5 – Zoom functionality Our map has become interactive with the addition of zoom functionality in the previous post. Lets add some explanatory content now. Every map should have labels and a legend, right? We will begin with adding labels to each of the provinces on the map. The final result of this post …


Continue reading

D3.js part 5 of 9 – Zoom functionality

Posted on 19 July 2015 | Development by Tiety Kooistra

Part 4 – Enhance to a choropleth We have made a nice choropleth map up till now, but it hasn’t got any interactivity or explanation of the data yet. Lets start with adding zoom functionality to the map. To check out the results of this post go to the demo on github. Create zoom behaviour …


Continue reading

D3.js part 4 of 9 – Enhance to a choropleth

Posted on 19 July 2015 | Development by Tiety Kooistra

Part 3 – Render a map Let’s transform our map to a choropleth, based upon the amount of arrests per 100.000 inhabitants per province. We will shade the map from green for a few arrests to red for a lot of arrests. To do that we first need to load the data. For later use …


Continue reading

D3.js part 3 of 9 – Render a map

Posted on 19 July 2015 | Development by Tiety Kooistra

Part 2 – Prepare your mapdata with QGIS Up untill now we only collected and manipulated the data. Now we are ready to start using D3.js to render the data to the screen. You can find the working code of this blogpost and the final product in my github reposotory Setup the basic structure To …


Continue reading

Foreman dashboard to Graphite

Posted on 19 July 2015 | Systems by Daniel Schutterop

I currently use Foreman as our life cycle management tool, and to be honest, it’s a great tool. Using Foreman (or rather, Foreman’s API) and Puppet/Chef integration you can spin up machines in seconds -or minutes-, provision them and nuke them when you’re done. That is, if you’re prepared to use the API. API? Foreman’s …


Continue reading

How create tooltips in D3.js

Posted on 19 July 2015 | Development by Maria Cristina Di Termine

A tooltip is a piece of information that will appear when the mouse is hovered over a specific element of the view. Some people call it different names such as “hover box”, “infotip” or “hint”, but a sure thing is that it is a useful tool to show extra information and it can also be …


Continue reading

Fullscreen image slider with Vanilla JavaScript

Posted on 19 July 2015 | Development by Victoria Mineva

For my latest project I’ve been working on a fullscreen image slider that is made in Vanilla JavaScript. The slider was built without the use of jQuery and it shows that all of this can be done with just the use of plain JavaScript. As a start we create the html where there’s a frame …


Continue reading

1 2 3 14

Previous / Next

Our website uses cookies to understand how it is used, which helps us to improve your experience. More information