webkid Blog

We are releasing React Flow 10, a new website, docs, a blog and React Flow Pro.

A List of 15 active and maintained React UI libraries sorted by Github stars.

To make our daily work more effective and fun we built a node based editor called datablocks for processing and visualizing data. This…

We just open sourced "React Flow" : A library for rendering interactive node-based graphs with a smooth panning and zooming behaviour and…

We recently worked on a project with Zeit Online which is analyzing the frequency of words in the Bundestag's (the german parliament…

Last year we've worked on a dashboard prototype which visualizes data publicly released by the BASt (German Federal Highway Research…

An explanation about how to use Scribbletune to create MIDI files from data.

In cooperation with OECD , we recently published an open source charting library based on D3 called OECD Simple Charts . As the charts…

Jupyter Notebooks are a useful tool when it comes to visualizing and analysing data. This blog post presents basic charts and explains how to create them.

A Leaflet plugin for creating projection aware draggable polygons and polylines.

We built D3 Discovery, a helpful application that lets you explore a growing list of d3 utilities by providing a list of sorting and filtering functions.

How and why we moved from Disqus to schnack, a self-hostable Open Source commenting platform.

In this article we cover some useful tips and tricks about how to use npm.

We created a plugin that helps you to create customizable swoopy arrow annotations on top of Leaflet maps.

A collection of various dataviz projects for the German federal election 2017.

In our latest project "Berlin an deiner Linie" with the Interactive Team of the Berliner Morgenpost we visualized data along 250 public transportation lines in Berlin.

In this article you can find an overview about different React mapping libraries. A lot of our projects are about data visualizations and maps.

If you’re looking for a way to process or manipulate pictures in your web project, it might be worth having a look at some of the libraries introduced in this blog post.

An important step in machine learning is creating or finding suitable data for training and testing an algorithm. This article will provides you with a useful collection.

This article introduces 5 React UI libraries. You will see how to setup and integrate them for your purposes. We will share our impressions and show an example for each library.

This morning, Britain voted to leave the European Union. Here are some maps and charts that show the referendum results and what consequences might follow.

If you want to work with a large amount of data, there are some machine learning techniques that might be helpful for you. A common task in this area is the classification of texts.

In this post I will give you an overview of some CSS and UI frameworks. If you are building a rich admin dashboard, Bootstrap is totally fine, but for smaller projects you might not need all its features.

In our recent project we visualized how green German cities really are. It was the first time the interactive team of the Berliner Morgenpost used satellite imagery for a data visualization.

Neural networks provide the possibility to solve complicated non linear problems. They can be used in various areas such as signal classification, forecasting timeseries and pattern recognition.

In our latest project, we have visualized the bicycle roads in Berlin. The interactive map is implemented using MapboxGL and a raster tile fallback for older browsers which do not support WebGL.

When we build visualizations, we sometimes need small backends for our applications which enable our clients to change data after launch. This is especially useful when the app should update automatically.

In the last two years we created several map projects. When you do projects like this it's a common task that you have to process geospatial data before you can use it.

An unofficial and incomplete look at how major news outlets over the world reacted to the main events throughout the year 2015. If you find something wrong or missing, feel free to comment.

In this post I have collected some techniques that I used recently when creating D3 Charts. These examples might help you to improve the readability and usability of your charts.

In this article I will show you how to create a 3D map based on OSMBuildings with custom geojson data and fly-to animations. Last week we published the project "Berlins neue Skyline".

On October 3rd Germany celebrated the 25th anniversary of the reunification. Therefore we published the interactive feature Einheitsreise. As a story intro we asked our readers to draw the former East-West German border.

The refugee crisis is the ubiquitous topic in international media for the past months. Many news outlets have tried to support their coverage through data visualizations - resulting in some powerful interactives.

Creating a REST API is a common task in web development. I really like the ecosystem of Hapi, so today I want to show you how to do that using the Plugins Dogwater and Bedwetter.

QGIS is a great tool when you have to work with geospatial data, but when you only want to do one or two little tasks, like renaming or filtering some attributes then you might not need a heavy GUI based program.

Recently we published an interactive map that visualizes where the population in Europe grows and where it declines. It is a very detailed map with 119.406 colored polygons.

This is a quick roundup about WebGL map libraries. Since IOS is supporting WebGL and the browser support is getting better in general, it becomes a relevant technology for map applications too.

In this post I will show you how to use different libraries so you can get a rough idea of how to work with them. These are only very simple examples. Please check out the docs to get to know more.

You can easily replace jQuery in your visualization projects by using D3-only functions. When creating visualizations or interactives we often use a combination of jQuery and D3.

In this post I will show you how to create some effects that let your maps appeal more interesting/fancy/weird. These effects are just proof of concepts, but they could help you to attract more attention.

When designing visualizations, we sometimes have to deal with bigger datasets than standard tools can handle. For example, Microsoft Excel has a limit of roundabout 1 million rows.

In this post I will share some Leaflet features with you I wish I knew earlier. It should help you to use the full power of Leaflet and not only stick to the map related functions.

In this article we will give you a quick overview about open source javascript chart libraries (mostly D3 based). Just leave a comment if you miss one.

On Tuesday, the US Senate has released the Report on Torture by the CIA. It was interesting to see, how quickly visualizations of the report appeared that are extracting the key findings.

Some datasets consist of geo-referenced values and a time component. We can visualize this type of data using "small multiples". This means that we are creating multiple small representations of the visualization.

In this post I will show you how to create a world map with random colored countries following 4 steps.

We will write about frontend stuff, maps, data visualizations and other programming-related topics in the future. This will also be our space for discussions about projects and for sharing ideas.