Tag Archives: tutorial

d3.js with Dynamic Data II

Posted by —

0

A slightly adopted version using SVG. A form to control radius of randomly drawn circles.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, data!</title>
        <script type="text/javascript" src="lib/d3.js"></script>
    </head>
    <body>

        <form name="myform" onSubmit="return handleClick()">
            <input name="Submit"  type="submit" value="Radius" />
            <input type="text" id="myRadius"/>
        </form>

        <div id="viz"></div>

        <script type="text/javascript">

            var mySVG = d3.select("#viz")
            .append("svg:svg")
            .attr("width", 600)
            .attr("height", 400);

            function handleClick(event){
                console.log(document.getElementById("myRadius").value)
                draw(document.getElementById("myRadius").value)
                return false;
            }

            function draw(rad){
                mySVG.append("svg:circle")
                .style("stroke", "black")
                .style("fill", "grey")
                .attr("r", rad)
                .attr("cx", Math.round(Math.random()*600))
                .attr("cy", Math.round(Math.random()*400))
            }

        </script>
    </body>
</html>

SVG circles

d3.js with Dynamic Data

Posted by —

0

On the journey to learn d3.js it is most important to understand the basic principles first, but once you got your hands dirty, thanks to lots of samples, you want make data ‘speak’. The available samples refer to static data sitting in variables or coming from a json or csv files, sooner or later you want to feed data dynamic into your visualization. In this very simple sample we want values from a form sitting on the same html page to be added to a list, as simple as no svg involved.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, data!</title>
        <script type="text/javascript" src="lib/d3.js"></script>
    </head>
    <body>
        <form name="myform" onSubmit="return handleClick()">
            <input name="Submit"  type="submit" value="Add Value" />
            <input type="text" id="myVal"/>
        </form>

        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>

        <script type="text/javascript">

            var dataset = [];
            for(i=0; i<5; i++){
                dataset.push(Math.round(Math.random()*50));
            }

            var p = d3.select("body").selectAll("p")
            .data(dataset)
            .text(function(d,i){return i + " : " + d;});

            function handleClick(event){
                console.log(document.getElementById("myVal").value)
                draw(document.getElementById("myVal").value)
                return false;
            }

            function draw(val){
                d3.select("body").append("p");
                dataset.push(val);
                var p = d3.select("body").selectAll("p")
                .data(dataset)
                .text(function(d,i){return i + " : " + d;})
            }

        </script>

    </body>
</html>

Dynamic Data

In the next step we will play with some svg, from there I will explore ZK feeding a visualization from a DB or any other feed.

Drools Fusion Samples

Posted by —

0

I want to share some more tips and more realistic data and rules scenarios.

  • Netbeans: If you run the java file (Run File)with the sample code instead of running the whole application, the resources and NOT rebuild, means any changes made to the rules would not be reflected. So rither Cleand and Build or run the application then resources are rebuild automatically.
  • Threads: In the first sample we did not use a separate thread to fire the rules. If you update or insert facts after the initial ksession.fireAllRules() you will not see any output from the engine, only if you call it again. I recommend the thread approach with ksession.fireUntilHalt()as shown in the last tutorial.
  • Container: A simple java application might be good enough for the first steps, but more realistic is the execution in a web application running in a container. I will post a separate tutorial how to run the rule engine inside a singleton EJB on Glassfish.

Rule samples and code snippets:  Managing Flights and Times
The previous samples with message instances are not close to anything realistic, so I create a little airport scenario. It wont be able to run an airport’s operations but gives an idea. I skip the basic initialization etc. We will use the pseudo clock.

  • We operate an airport with arriving and departing flights.
  • Our simplified data model
    Flights with attributes: Flightnumber, airlinecode, aircrafttype, origin, destination, number of pax.  + internal primary key
    Flight times with attributes:   Timestamp, type. + foreign key to Flights
  • Arriving flights usually have this or similar sequence of events: Scheduled Time (STOA) – Estimated (ETOA) – Landed/Touchdown (LAND) – OnBlock Time (ONBL)
    (in real operations you will have more events, also from different sources)
  • Rule 1: Alert me if the ETOA (often coming from automated interfaces like ATC or IATA Telex messages from the origin airport of the flight) is more than 30min after scheduled arrival time  STOA (maybe to inform public at the airport)
  • Rule 2: Alert me if the time between LAND and ONBL is more than 5min.
  • The rule does not make much operational sense, because you want to warn someone that the aircraft is still not at the position after minutes on the ground, means it is still taxiing and you want to inform the ground crew about it
    Rule 2b: Alert me if there is no ONBL 5min after the LAND event.
  • The Flight class
    public class Flight {

    private String flightKey;
    private String flightNumber;
    private String airline2lc;
    private String origin;
    private String destination;
    ... more attributes, getter-setter etc.
}
  • The Flight Time class
    public class FlightTime {

    private Date flighttime;
    private long flighttimestamp;
    private String type;
    private String flightkey;
    ... constructor,getter-setter etc.
}
  • For the simple comparison of times (Rule 1 and 2) we can ignore the session clock and use this simple rule
    rule "RULE 5"
when
    time1:FlightTime(key:flightkey,type=='STOA') from entry-point entryone
    time2:FlightTime(flightkey == key, type=='ETOA', this after[ 30m ] time1) from entry-point entryone
then
    System.out.println("More than 30min between STOA and ETOA: " + time1.getFlightkey() );
end

    Insert facts (flight times), rules get fired by the separate thread (see previous sample)

    ..
entrypoint1.insert(new FlightTime(new SimpleDateFormat("MM/dd/yy HH:mm").parse("03/08/12 12:00"), "STOA", "1"));
entrypoint1.insert(new FlightTime(new SimpleDateFormat("MM/dd/yy HH:mm").parse("03/08/12 12:40"), "ETOA", "1"));
..
  • For Rule 2b we need to use the session clock
    rule "RULE 6"
when
    time1:FlightTime(key:flightkey,type=='LAND') from entry-point entryone
    not (
        FlightTime(flightkey == key, type=='ONBL', this after[ 0,5m ] time1) from entry-point entryone
        )
then
    System.out.println("Missing ONBL after 5min LAND: " + time1.getFlightkey() );
    System.out.println("Session Time at rule trigger: " + (drools.getWorkingMemory().getSessionClock().getCurrentTime())/60000);
end

    Note: We cant use the separate thread like previously, but we must fire ksession.fireAllRules(); everytime we advance the clock !

         SessionPseudoClock clock = ksession.getSessionClock();

     clock.advanceTime(2, TimeUnit.MINUTES);
     entryPoint1.insert(new FlightTime((clock.getCurrentTime()), "LAND", "1"));

     clock.advanceTime(10, TimeUnit.MINUTES);

     ksession.fireAllRules();
     ..
  • Run with Rule 2b

    Missing ONBL after 5min

  • Challenge for now: The engine looks at the timestamp of fact insertion, so I cant backdate my timestamps, which would be necessary if you get delayed updates from an interface.
    Eg. at 02:00 you get LAND with timestamp 01:00 you would expect the rule to be triggered at 06:00 (01:00 + 5min) but it gets triggered at 07:00
    Will explore Fusion further to cover this situation.

Gettings started with JBoss jBPM5

Posted by —

0

In my journey through all the modules of Drools (Expert, Fusion, Planner), I also visit jBPM (fomerly known as Drools Flow). In this tutorial we just get started with Netbeans and a simple hello world project and focusing on the basics, such as required libraries and running within the Netbeans IDE.
Netbeans is not as close to the BPM community as Eclipse, there is no plugin available, the SOA project is abandoned (I guess). But using Netbeans as our IDE, I will not move over to Eclipse, but see how I can run and debug with Netbeans but still use some Eclipse features.

About BPMN:

The JBoss engine execute BPMN files, we can create this files manually or using one of the visual tools. For the basic understanding you should create a simple BPMN by hand to learn a bit about the notation.

Lets create the most simple BPM flow possible:

Pre-Requisites:

Continue reading →

Getting started with Drools Fusion

Posted by —

1

JBoss Drools is more than Expert and Guvnor only, the suite of products also offers Fusion, Planner and Flow (now called jBPM). After getting my hands with dirty with Expert, I want to look at the Fusion part, which covers the event handling. Based on CEP (Complex Event Processing) as an event-driven architecture which is an own science by itself, whole books written about nothing else than events (link).

There is not much information on the web about Fusion other than the JBoss documentation, some chapters in Books (Packt Publishing: Drools 5 Developer Guide, Drools Cookbook) and a handful of blog entries (link), practically no working samples or end-to-end tutorials.

In this tutorial we will apply the necessary changes to our HelloDrools project from the previous tutorial:

  • The good thing: We dont need any other libraries than the ones already used.
  • Copy the previous project and give it a new name ‘HelloDroolsFusion’
  • In the last tutorial we had a simple message class and inserted a message as fact. A rule was triggered when the message type is equal to ‘Hello’
  • As refresher: The first rule
    import hellodrools.Message
rule "Hello World"
when
    message:Message (type=="Hello")
then
    System.out.println("Hello World, Drools!");
end

    Continue reading →

Debugging Drools Rules

Posted by —

0

At the ‘hello world’ level we cant see much need to debug our rules, but with growing complexity we will be challenged quickly. We need to see which rules was fired, what parameter, what object, etc. Eclipse IDE users have the advantage of the plugin which even visualizes the RETE tree, for the rest-of-us, aka Netbeans user, we need to rely on the debugging output available. We have 4 options that give us access to almost all information of interest.

To try the below debugging options, use the previous HelloDrools Tutorial

1. Default Debug Listener

Out-of-the-box we can use 2 debug event listener:

        ...
        ksession = kbase.newStatefulKnowledgeSession();

        ksession.addEventListener( new DebugAgendaEventListener() );
        ksession.addEventListener( new DebugWorkingMemoryEventListener() );
        ...

Continue reading →

Getting started with Drools and Netbeans

Posted by —

8

Rule engines are a rather complex topic with potentially a steep learning curve. I am looking at a few options, Drools being one of them. As usual one can read all the theoretical papers, but rather I have a something to look at and play with fast. Ultimately I need to integrate the rule engine into my application, so I dont want to play with eclipse editors for rules but seeing a rule engine ticking inside my Netbeans project. I found one tutorial from Vishal Akhouri which I updated to the latest version of Drools and some minor fixes. Most of the sample source code is from Vishal.

Pre-Requirements:

  • Netbeans 6.x and later
  • Stable Drools from http://www.jboss.org/drools/downloads

Tutorial:

d3.js Tree: most simple sample

Posted by —

1

Learning d3.js might not be as easy as some other tools because there are no step-by-step instructions to get started on a hello-world level. The samples on the d3.js site are bit too complex for a noob. But browsing through the example folder of the d3.js download helps, and usually you learn most dissecting by re-assembling sample code from other people. Another great source is gist.github.com, a code snippet repository. Look for d3.js ! With bl.ocks.org you can even “run” the snippets.

The treeview is a classic visualization but one of my favorites, specifically if you spice it up with interaction and allow the user to dive into a subtree of his choice. But what is the most simple tree layout ? I want to understand the physics behind it. So let me share my compiled (of different samples) most simple version without any fancy features or interaction.

Simlpe Tree Layout

Here my bl.ocks.org version with code or here to copy and paste:

Continue reading →

ZK and d3.js

Posted by —

1

One of the important questions to me: Can I embed d3.js in my ZK zul pages and talk to the visualization ? Embedding is fairly simple, using the html tag you can embed any native html content and scripts. There is certainly a limitation to scripts, as the final rendered html page will contain both the zk javascript and our script, hoping there is no interference. As sample it is not possible to mix ZK with ExtJS, but JQuery is not a problem.

Task 1: Most simple zk application (Draw circle)

d3.js getting started

Posted by —

1

I love visualization of data. It is fantastic what and how you can visualize data and make it accessible and understandable. Specifically I like tree, radial trees and graphs . While the tools some years back were rather restricted to thick clients and Flash applications, we can transport great visualizations with the means of a simple (recent) browser.I recommend this book ‘Beautiful Visualization’ by Julie Steele, Noah Iliinsky (link)

For a while I worked wth prefuse and flare (2 nice but more or less defunc projects), now I start to implement some real life applications with d3.js (link). The features are awesome but the documentation is still rather short, the API doc is complete, but not much hello world stuff to get started with, other than dissecting some of the sample in the download.

What do we need to get started ?

  • A browser and a web server (for Linux users: there is one build in your machine, just start python -m SimpleHTTPServer 8888 and the current path becomes ‘server’)
  • Download d3.js (comes with plenty of samples, some of them will NOT run when you open the html files as file, use the webserver instead!)
  • Text editor (Kate, vi,..)

What is the most simple visualization sourcecode ?

  • Create a html file and place the d3.js in the same or lib folder.
  • Lets draw a circle (I took this from one of the get-started blogs by Christophe Viau, link)
    <!DOCTYPE html>
<html>
  <head>
    <title>Hello, data!</title>
    <script type="text/javascript" src="lib/d3.js"></script>
  </head>
  <body>

    <div id="viz"></div>

    <script type="text/javascript">

    var sampleSVG = d3.select("#viz")
        .append("svg:svg")
        .attr("width", 100)
        .attr("height", 100);

    sampleSVG.append("svg:circle")
        .style("stroke", "black")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)

    </script>

  </body>
</html>
  • Open the browser

    Most simple d3.js sample

I hope I find the time to share more with you once I get the grip on this tool.