Javafx QuadCurve("RainbowRGB")

I decided to try out an arc diagram visualization showing rainbow colors as Nodes(Circles) and arc(Links) width showing RGB color value.
The colors are arranged in the order of the rainbow colors,the same diagram can be used for different data.

For example red color value in the rainbow colors.

Red Color Value
green color value in all the rainbow colors.
Green Color value
The circles are 100 pixels apart and the data set as below 

c.setUserData("red="+color.getRed()+",green="+color.getGreen()+",blue="+color.getBlue());

List<String> colors=Arrays.asList("red","orange","yellow","green","blue","indigo","violet");

 for(String s:colors){

    Color color=Color.web(s);
    Circle circle=new Circle(20);
    circle.setId(s);
    circle.setUserData("red="+color.getRed()+",green="+color.getGreen()+",blue="+color.getBlue());
    circle.setFill(color);
    circle.setLayoutX(x_axis);
    circle.setLayoutY(450);
     
            x_axis+=100;
           root.getChildren().addAll(circle);
        } 
Drawing the quad curve i used the center of two nodes  as the ControlX and ControlY  
the difference in X axis.

   circle_1.setOnMouseClicked((MouseEvent event) -> {

             for(Circle c:circles){
                 
                 String item[]=c.getUserData().toString().split(",");
                 
                 for(String s:item){
                     
                     int equal=s.indexOf("=");
                     String id=s.substring(0, equal);
                     double width=Double.valueOf(s.substring(equal+1));
                     
                     if(id.equalsIgnoreCase(circle_1.getId())){
                         
                         Circle circle_2=(Circle) root.lookup("#"+c.getId());
                         System.out.println(width);
                         QuadCurve quad = new QuadCurve();
                         quad.setStrokeWidth(width*10);
                         quad.setStartX(circle_1.getLayoutX());
                         quad.setStartY(450.0f);
                         quad.setEndX(circle_2.getLayoutX());
                         quad.setEndY(450.0f);
                         
                         double centerX=(circle_1.getLayoutX() + circle_2.getLayoutX()) / 2;
                         
                         double diffrence=circle_1.getLayoutX() - circle_2.getLayoutX();
                         double diffrence_Pos=diffrence<0?diffrence*-1:diffrence;

                         //check for negative difference to avoid this

                         if(diffrence<0){
                             stops = new Stop[] {new Stop(0,(Color)circle_1.getFill()), new Stop(1,(Color)circle_2.getFill())};
                             lg1 = new LinearGradient(0, 0, 1, 0, true, CycleMethod.REFLECT, stops);
                         }else{
                             stops = new Stop[] {new Stop(0,(Color)circle_2.getFill()), new Stop(1,(Color)circle_1.getFill())};
                             lg1 = new LinearGradient(0, 0, 1, 0, true, CycleMethod.REFLECT, stops);
                         }
                         quad.setStroke(lg1);
                         quad.setFill(Color.TRANSPARENT);
                         quad.setControlX(centerX);
                         quad.setControlY(450 - diffrence_Pos);
                         root.getChildren().addAll(quad);
                     }
                 }
                 
             }
         });
Results
Rainbow RGB
Arc diagram

Comments

Popular Posts