Introducing React Line Chart

Data Visualization is an important concept in nowadays applications and line charts are often chosen as representation. This is no coincidence: studies show that position is the most efficient way for humans to perceive differences in data. The following image is a slide extracted from the amazing Data Visualization course offered by Coursera.

Mapping Layer

The above slide ranks (from top to bottom) which kind of representation is best applied given the type of the data (Quantitative, Ordinal or Nominal). An easy takeaway is that you can’t go wrong with Position, which turns out to be exactly what we measure with … Keep reading

Sortable Targets with React DnD

If you ever had to add some drag and drop functionality to your app, chances are you suffered a bit. For those building their apps with React, however, React DnD does not fall in this category. The API is clean, the docs are comprehensive and there are many examples.

This library provides a thin layer to cover your components. First add a drag and drop context, then start connecting your components with the functionality you want. If you haven’t had a chance to test it yet, go there and fiddle around.  Read the docs to understand the mindset behind.… Keep reading

Real-Time Charts with Meteor, React and D3

Meteor has recently announced official support for React as its rendering engine (together with Blaze). This is great news, once React is becoming more and more popular and brings improvements in many aspects of your code (reusability, unit-testing, no spaghetti code…).

Since the React fever, many tutorials explain how to integrate it with the most popular libraries outside. The perspective of a reactive chart using React components and D3.js is pretty exciting and in fact there are many guides out there exploring this subject. This one correlates D3 and React lifecycles and this other explores svg components.

The … Keep reading