Wait...Awesome things are coming your way!...

noUiSlider for Data Journalism.

What it can do to your data projects

How to use the noUiSlider for Data Journalism?

Almost every day there are new JavaScript libraries coming out. Some of them are actually useful (no! of course I mean useful in the context of data journalism). When I stumbled across noUiSlider I was impressed with the UI and wondered how data journalists can use it effectively in the story telling context. More important was the question: do readers understand how to use it and do they enjoy it, or does it distract from the story? As data journalism is as much about measuring as it is about personalization, a slider could add some interesting dimension for your data projects but should also be used with care.

How to get started?
I guess the simplest visual application for the slider is a sorting function, to output data from a dataset into a table. In combination with JQuery the slider can be used to show html elements when the underlying data happens to be in the selection criteria.

Here is an example:

First collect the data. Initially I found data in a csv format. For my data input I prefer JavaScript object notation. I used this website to convert csv into Json (I know it's lame, but if anyone of you wrote a smart terminal script to convert CSV into json, please let me know!).

Next, we use Jquery to tell the slider what to select from the data. A complete explanation for the dynamic filtering with JQuery can be also be found in Chapter 12 of this book. JQuery code examples are also available on the website and downloadable.

Data: var buildings = [ { "Rank":"1", "Name":"Burj Khalifa†", "City":"Dubai", "Country":"UAE", "meters":828, "In_feet":"2,717 ft", "Floors":163, "Year":2010 }, ... ];

The next step is to define how the HTML row tags are appended to the body element, and, as shown below, how the slider selects the range with an if-statement.

JQuery:

function appendRows() { // Adds rows to the table var $tbody = $('<tbody></tbody>'); // Create <tbody> element rows.forEach(function(row) { // For each object in the rows array $tbody.append(row.$element); // Add the HTML for the row }); $table.append($tbody); // Add the rows to the table } function update(min, max) { // Update the table content rows.forEach(function(row) { // For each row in the rows array if (row.building.meters >= min && row.building.meters <= max) { // If in range row.$element.show(); // Show the row } else { // Otherwise row.$element.hide(); // Hide the row } }); }

The HTML is rather simple. Add the HTML min and max input with the id of the jquery application. With some bootstrap css, you can make it look nice and add some interactivity.

HTML:

<div id="building-range"> Min: <input type="number" id="value-min" /> Max: <input type="number" id="value-max" /> <div id="slider"></div> <div class="table-responsive"> <table id="rates" class="table-hover"> <thead> <th>Name</th> <th>Height in Meters</th> <th>City</th> ...

A Map Application

Voila! Here we have a map with a slider. Check out the full example in the bottom of this post.

Now lets look at some slightly more sophisticated example. How about a map application? A slider comes in handy when personalizing a map in a data story. When researching the story on why Londoners are so keen to move to Berlin for example (the story will be published soon) I used a map to personalize the input variable "income spent on rent". The noUiSlider came in handy again.

With the support of the BerlinerMorgenpost’s Github development example, it was possible to create a map supported story narrative that uses the noUiSlider as part of its UI setup.

JQuery: The heart of the JQuery code is about bringing the data together from the json file (properties.rent), the input variable from the slider and the color variable that allows the poligons in the map to be filled with the colours accordingly to the rent variable.

function updateMap() { currentSalary = ~~ui.$slider.val(); ui.$salaryOutput.text(formatNumber(currentSalary)); topoLayer.eachLayer(function(layer) { var properties = layer.feature.properties, rent = properties.rent * config.roomQms[currentRoomCount], percentage = ((100 / currentSalary) * rent), color = getColorByPercentage(percentage); layer.setStyle({ 'fillColor': color }); }); setSalaryLabelPosition(); }

The HTML is again pretty straightforward. Slider with its ID in the markup links to the JQuery application and the min and max description helps the user to understand the UI.

HTML:

<div class="sidebar box"> <div class="subline"> Income spent on Rent<br /><span class="light hide-on-mobile">per month</span> </div> <div id="slider"> <div class="slider-values max hide-on-mobile">- 5.000 £</div> <div class="slider-values min hide-on-mobile">- 0 £</div> <div class="slider-output "><span></span></div> </div> </div>

Conclusion

The Slider is a great tool to be used for small data journalism applications. But similar to the problem of larger info-graphics (with too many graphics), too many sliders could take the attention away from what is most important: the journalistic narrative. Also, I noticed, using several sliders in one document could potentially lead to initial problems with conflicts in one's CSS docs.

Also there are different other slider options out there. Next to noUiSlider, there is jQRangeSlider (here) - and doesnt really work :-(, jSlider (here), Ninja UI (here),ion.rangeSlider (here) radiosToSlider (here), iOS7 Range Slider (here), Dragdealer.js (here) or Colorful Sliders (here). Of course you could just use the commonly known HTML5Slider (here) input but allowing yourself and your readers some UI-fancyness isn’t necessarily a bad idea.

Price per square meter £
How many Squaremeters?
20m²
40m²
60m²
80m²
100m²
120m²
140m²
Share of your available income you would spend on rent
×

Are you keen to leave London for Berlin?

How expensive is Berlin's rent really?

Let us assume you would want to rent a 40 square meter apartment in the city circle of Berlin, how much would you pay? The answer is, it really depends. The map below can give some guidance, with data for current average rent prices scraped from Immowelt.de and translated to pound sterling. But remember, these are just average prices. Rent can really vary from one apartment to the next, and is heavily influenced by many factors.

For example, how larger the apartment is influences the price. In many cases the price for an apartments below 40 square meters can be higher than for the size of 40-80 square meter large apartments. Whether the place offers parking or not, how old the property is and other property specific circumstances such as heat isolation, how the property is heated and so on, will all be relevant when the prices for rent is being calculated.

Top