• Home
  • Events
  • About
  • William Playfair inspired charts…

    December 6th, 2017


    Today I just would like to share a little blogpost about a chart that I’ve implemented last Friday evening. The chart design is inspired by William Playfair who invented this kind of chart to visualize economic data like import and export of theUS in relation to other countries.

    One of his charts looks like follows…

    The idea is pretty simple, take two line charts and fill the area between the two charts with a color. The color depends on which line is on top. With this technique one can visualize for example gain and loss of processes etc.

    Like mentioned the idea is simple but the realization is not as trivial as it looks. The problem here is that you have two separate line charts that you have to combine to not only one polygon but to multiple polygons.

    So every time the two lines cross each other one has to fill the area before the intersection point with one color and the area after the intersection point with the other color.
    After thinking about the chart for a bit I’ve got an idea on how to realize that behavior and here is one result…

    As always I do not really have a use case for that chart but I can imagine that it might be useful for someone out there 🙂

    So if you would like to play around with it, feel free to check out the code at github.

    I hope to find some time within the next days to add some interactivity to the chart…so stay tuned 🙂

    Well…I guess that’s it for today…so keep coding… 🙂

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Friday Fun LIII – Sankey Plots

    December 1st, 2017

    Aloha everyone,

    Creating charts is really fun…again Thomas Nield(@thomasnield9272) pointed me to a nice chart which is called Sankey chart and again I could not withstand to try my best to implement it in JavaFX.

    To give you an idea on what I’m talking about here is an example of such a Sankey plot…

    Compared to last weeks Circular plots these plots can be multilevel and after searching the web for some hours I figured out that you can find all sorts of Sankey plots which might look completely different…here another example…

    That doesn’t make it easier to implement such a chart and so I’ve started reading about the history of that chart. In the end it turned out that the main purpose of this kind of chart is the visualization of flows where the width of the arrows/lines is shown proportionally to the flow quantity.

    So I had to make a decision which style I should follow and I’ve decided to go with the first visualization of the above pictures. Lucky me there is also a version of the Sankey plots in the Google charts which I took as a template. Here is a screenshot of what I’ve come with…

    This is the more colorful version of the chart but it is also possible to create other versions as you can see here…

    In this version I’ve used different parameters for the width of the items and here also the direction of the flow is indicated by arrows (but I only support one direction anyway).

    To get nice results you have to keep in mind that in my implementation you have to think about how to order the items in the chart when adding it to the control.
    Meaning to say I do not have some hyper smart algorithm that do some fancy automatic sorting of items but you have to use your own brain and think about the chart before you create it. For the example above I’ve added the items exactly in the order as they appear on the chart which would look like follows…

    After that is done you have to define the connections between the items by defining only the outgoing streams for each item. Because that’s a lot for the chart above I will only show you the ones for the first column which will look as follows…

    As mentioned you define the streams that goes from each item to other items with their values.
    After that is done you can setup the chart using the SankeyPlotBuilder as follows…

    And that’s all it takes to create such a chart. Because the chart is again based on the JavaFX Canvas node there is no interactivity at the moment but I’m already working on a little project that will make it possible to have interactivity in the future…so stay tuned 🙂

    Of course the code is available on github as always.

    That’s it for today…so keep coding…

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Friday Fun LII – Circular Plots

    November 24th, 2017


    Slowly getting into the charting business 😉

    After Thomas Nield (@thomasnield9272) pointed me to so called Circular Plots I’ve couldn’t hold back. If you know these charts you might understand why I was so keen on creating such a chart.

    So to give you an example here is an image of such a chart…

    To be honest when I first saw the plot I was fascinated even without knowing how to read it and without knowing what this chart is good for. But after I took a look at more and more of those charts I got an idea on how to use them.

    So I’m not a data scientist which is the reason why I’ve implemented it in a way that seemed logical for me.

    The biggest problem was to find some data that I could use for the visualization. So in the end I’ve decided to take the public available data from the current parliamentary election in Germany.
    To give you an idea what my chart is visualizing I think I need to explain it a bit. Each section on the chart shows one party with it’s name, color and the voting result related to the number of eligible voters (61.5 Million).

    Because there was a new party this year it was interesting to see where did the voters came from, so my chart visualizes the migration from all parties to other parties. The bigger the arrow the more voters migrated from the party to another.

    So here is my chart…

    So in the chart one can see that most of the AfD voters came from the Union party, the so called Non-Voters (“Nichtwaehler”) and others.

    I’ve also created another chart that shows fictive data about travellers that travel between some asian countries. As always I do not have any use case for this chart and cannot guarantee that it is useful for real data analysis but at least it works for me and was fun to create. So here is the other chart…

    At the moment there is not interactivity in this chart but if I will find some time I will definitely add it.

    As always you can find the code on github.

    That’s it for today…enjoy the upcoming weekend and…keep coding 😉

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Just some conversion tool…

    November 20th, 2017


    Last week I was in Switzerland and somehow got reminded on some tool that I’ve created some time ago which might be handy for some of you. It is a simple unit conversion tool which supports conversion between the following categories of units:

    • ANGLE
    • AREA
    • DATA
    • ENERGY
    • FORCE
    • LENGTH
    • MASS
    • SPEED
    • TIME
    • TORQUE
    • VOLUME
    • WORK

    As an example let’s convert a temperature in Celsius in Fahrenheit and Kelvin which would
    look as follows:

    So first you create a Converter instance with a category and a base unit (here Temperature as category and Celsius as base unit).

    After that is done you can convert celsius based temperatures to other units like Fahrenheit and Kelvin.

    In addition I’ve also added a method to shorten long numbers with abbreviations.

    Sometimes this is really useful when working with big numbers, a little example would look like follows…

    And the result will look like this…



    The format method will support the following abbreviations

    • kilo
    • Mega
    • Giga
    • Tera
    • Peta
    • Exa
    • Zetta
    • Yotta

    Not really sure if you can use it but at least I wanted to share it with you folks… 🙂

    The code is as always available on github.

    That’s it for today…keep coding…

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    (Deutsch) Friday Fun LI – Horizon Charts

    November 17th, 2017


    Another Friday and again time for some fun… 🙂

    Last week someone pointed me to so called horizon charts which are a really nice way to visualize data in a compact way.
    To give you an idea what they look like here is an example…

    The idea behind it is to reduce the amount of space and preserve the information by splitting a graph in the vertical direction in so called bands.

    The following image will show how it works (it was taken from here)…

    As you can see in the image above first you flip the negative values to the positive side by inverting them (2nd graph).

    Now you split the vertical axis in bands and place all of them on the 0 value of the y-axis. The image above shows an example for 1 band, 2 bands, 3 bands and 4 bands.
    For every band you change the color (usually from a lighter to a darker color). So you get some kind of a heat map where darker colors visualize higher values.

    So my JavaFX implementation looks like follows for some random data…

    For the implementation of this chart I used the JavaFX Canvas node again which should also work with lots of data because it will only use 1 node on the scene graph. So the HorizonChart will take 2 nodes on the scene graph, one for the Region and one for the Canvas.

    At the moment you can split the graph in up to 5 bands which seems to be enough for most of the visualizations I’ve found.

    To get nice colors for the chart I’ve also added some convenience methods in the Helper class to create color variations for a given color.

    For example let’s assume you would like to visualize positive values with shades of blue and negative values with shades of red and you will use 4 bands.
    To create the colors simply use the following code…

    Now you can set these colors on the chart instance as follows…

    The HorizonChart doesn’t come with any axis or bounds which should make it easy to implement it in your own more feature rich chart. Meaning to say the chart will always take the whole space you defined for it using the setPrefSize() method.
    So you decide the size of the chart and the chart will scale it’s content always to the defined area.
    When using not so many data points you might want to smooth the chart which is possible by using the setSmoothed() method of the chart or by setting the smoothed value in the constructor (usually you don’t need smoothing in this kind of chart because it is normally used to visualize big datasets).

    The HorizonChart will listen to changes in the Series of Data objects and will redraw itself when changes occur.
    If you just change the value in the existing Data objects the chart won’t notice but you have to explicitly call the charts redraw() method.

    The Series will also fire SeriesEvents which will be used to either redraw the chart or select data in the chart. In the provided Demo class you will see that I simply fire one SeriesEvent of SeriesEventType.REDRAW to redraw all charts because they are all using the same Series. Otherwise I would have to call the redraw() method of each chart after I’ve changed the data.

    The HorizonChart also supports mouse interaction where you can click somewhere in the chart and it will show the current Data object values in a tooltip. In addition a SeriesEvent of type SeriesEventType.SELECT_DATA will be fired. By adding a SeriesEventListener to the Series you can get the selected data information from the SeriesEvent which contains the Data object of the selected point (just take a look at the provided Demo which prints the data of the selected point to the console).

    The toString() methods of the Point, Data and Series class will return a JSON String which might come in handy sometimes.

    Another thing that could be useful is the ability to decide if the reference value should be 0 or the first y-value in the Series items.
    If you would like to visualize stock data you usually start with a given stock value. In this case you would like to use the first y-value of the data list as reference value and all following data should be visualized as negative value if it is below the reference and as positive value if it is above the reference value. In this case just call setReferenceZero(false) method.
    But if you would like to visualize data that is alternating around zero (like the cos values in the provided Demo) you simply leave the reference value to 0 (which is the default value).

    I think that’s more or less everything I have to offer today…so I hope some of you can use it…I for myself have again no use for it 🙂

    Oh and if you need something special or have an idea for a special graph/chart/control…just let me know.

    And as always you can find the source code over at github

    Enjoy your weekend and…keep coding… 🙂

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks