Learning D3 can take time, especially if you have no prior web development experience. Hence, D3 is probably not for people who want to just quickly expand their visualization skills. Now back to the top 3 reasons for learning D3
1. Lots of examples.
Here’s a secret about creating great data visualizations: take ideas from other examples you’ve liked! That’s often the most effective way to make you look like and become a master data visualizer.
And that’s the great news about D3: there are thousands – thousands! – of great D3 examples to work from.
See excellent curated lists of D3 examples here and here. Many of these examples are posted online because developers want others to re-use their code. Just be sure to give credit where credit is due 🙂
2. Vibrant open-source community.
When I have a question about D3 , I often Google the issue and then quickly find a great StackOverflow or blog post that addresses it. These extensive (free!) resources are available because of the very large and vibrant open-source community behind D3.
3. Knowing D3 = Hirable skills.
Data Science and analytics skills are top trends and when it comes to analytics over web D3JS is preferred because of its powerful libraries and responsive capabilites.
Event means action . The most common types of event are Click, Tap, Drag, Press, Change, Focus, KeyPress .
Let us refer to our previous project which we have done earlier here .
So, at the time of pressing the submit button, we will execute a particular function so that an event will get fired.
Here we will use the onChange event handler function.
Step1:- Let us go to the API reference URL and search for sap.m.input and again search for the liveChange event from Here .
Now , let us go to our demo.view.js page and create a function over there with the name as liveChange :-
var oSimpleInput = new sap.m.Input({
liveChange:[oController.liveChange,oController],
placeholder:"Enter Name"
})
Step2:- Let us create a function in our demo.controller.js with the toast message creation function which will be displayed on top of the page the string that is typed by the user :-
liveChange: function(oEvt){
var sValue = oEvt.getParameter('value');
sap.m.MessageToast.show(sValue);
},
Step3:- So here comes the output below and the change event is fired when the user writes any text on the text box:
Let us do add more CSS styling to the existing project which we have already done before from Here to make it like the screenshot below:-
Step1:- Let us first open up the same project in eclipse IDE.
Next , let us create a CSS folder and create a CSS file named as style.css
and we will link this CSS file to the index page :-
<link rel ="stylesheet" type = text/css href="css/style.css>
Step2:- Now let us add the custom CSS class(.addStyleClass(“newForm”),(.addStyleClass(“hBoxForm”),(.addStyleClass(“vBoxForm”)))) to it :-
<script>
var oMyForm = new sap.ui.layout.form.SimpleForm({
content:[
new sap.m.Label({
text: "Simple Form"
}),
new sap.m.Input({
placeholder: "Simple Input",
}),
new sap.m.Button({
text:"Press me"
}),
new sap.m.RatingIndicator({
value:4.7
}),
new sap.m.TextArea({
value:"Awesome Text Area"
}),
new sap.m.DatePicker({
}),
new sap.ui.unified.FileUploader({}),
new sap.m.VBox({
items:[
new sap.m.Button({
text: "VBox Btn1"
}),
new sap.m.Button({
text: "VBox Btn2"
})
]
}).addStyleClass("vBoxForm"),
new sap.m.HBox({
items: [
new sap.m.Button({
text:"HBox Btn1",
type: "Emphasized"
}),
new sap.m.Button({
text:"HBox Btn2",
type: "Accept"
})
]
}).addStyleClass("hBoxForm"),
]
}).addStyleClass("newForm");
oMyForm.placeAt("content");
</script>
Now all of our CSS properties are working fine only the issue is with the vBox & hBox, so for that let us add the media query to it to get the responsiveness perfectly when we run the app on any devices.
Now let us change the color of the buttons HBox Btn1 & HBox Btn2 at the property level at the index.html page , which can be also found in the URL Here which contains Accept & Emphasized code :-
new sap.m.HBox({
items: [
new sap.m.Button({
text:"HBox Btn1",
type: "Emphasized"
}),
new sap.m.Button({
text:"HBox Btn2"
// type: "Accept"
}).addStyleClass("newBtnGreen")
]
}).addStyleClass("hBoxForm"),
]
}).addStyleClass("newForm");
oMyForm.placeAt("content");
[js]
We can also do the color change of the buttons in CSS like inspecting on the button element and by doing hit and trial method in the browser
We will add a custom style class to the 2nd button :-
[js]
new sap.m.Button({ text:"HBox Btn2" }).addStyleClass("newBtnGreen")
The main motto of styling & theming in our application is responsiveness as well as look & feel.
Here, we will design a form and will change the styling of the page by using the CSS as per the screenshot :-
Step1:- Open our existing previously developed application from Here
Open the application in eclipse and right click on the WebContent and create a new folder named it as CSS as mentioned below:-
Then right click on the created CSS folder and create a new file named as new.css :-
Next , let us open the index.html in HTML editor and add this piece of code(marked in yellow) to our existing code:-
<link rel="stylesheet" type = 'text/css' href='css/new.css'>
Step:2 Now if we want to add the CSS to that particular element then add this function [.addStyleClass(“inputCss” & .addStyleClass(“btnCss”)] respectively for the text field and the button to the code:-
createContent : function(oController) {
var oSimpleInput = new sap.m.Input({
placeholder:"Enter Name"
}).addStyleClass("inputCss");
var oBtn = new sap.m.Button({
text:"Submit"
}).addStyleClass("btnCss");
