we use a lot of bulbs in our class along with cadd. all these are meant to be an answer for all the questions we had during our seminar session
A D3.js graph and it’s explanation
D3.js is a frontend chart making library which requires data to be fed in the form of either JSON, CSV, TSV or XML etc.. file formats
D3.js is most importantly used for Data visualisation
In this blog post I try to explain how I used D3.js to make a graph. D3.js is tough to get started and hence it requires significant amount of time digest
Let us understand how to create above graph
link to source code :- https://github.com/nikhilponnuru/D3.js-sample
Explanation of each line:-
— The code starts with defining character encoding meta tag. we need to specify character encoding to make the browser understand what type of characters are being used inside. this is an optional tag but it is a good practise to use, since we don’t know how and where our client uses our website
— then we start with style tag:- in which body tag is defined with font size and font-family
— And then we defined path attributes. here path is nothing but the graph line which we see between x and y axis.
— And then we defined how the x and y axis must be appearing and hence it’s attributes are defined
— In body part of the code we defined a script tag to load d3.js. the line which we used
the above code is d3.js CDN. instead of this we can even download D3.js from its official website and include it’s path. but if you constantly use internet, I would highly recommend a CDN path
— Then we defined the width and height of the graph and canvas
— The file which we used is “data.csv” — the format used inside this “Day-Month name-Year” and value of sales that day in lakhs
"Day-Month name-Year" we use "%d-%b-%y"
— We have set the range of lengths of x and y axis, where x-axis displays time and y-axis as scale values
— And then we define axes values which are values range used on the axes and orient(“left”) and orient(“bottom”) are used …..for e.g:- look the images
— The below code
<pre> var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");</pre>
This Adds the SVG canvas. here we are appending svg (scalable vector graphics, it is a form of vector image which is not pixel dependent, hence zoom-in or zoom-out wont effect the image quality)
The SVG is provided with attributes of left, right, bottom, top.
— In the latter lines we fetch the csv data and parse the data which has date and values and then we plot them on the graph
here forEach (The forEach() method calls a provided function once for each element in an array, in order.) is used to iterate each and every value in the data.csv
— In the latter code parts we define attributes required to display X and Y axis
//ADD the X-axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // Add the Y Axis svg.append("g") .attr("class", "y axis") .call(yAxis);
Before I try to convey interesting and informative stuff I recommend you to read these articles first
look at the visualization of different architectures provided in above links
3)monolithic vs microkernel (this gives much easier and nice explanation)
key points to remember:-
To understand why short and long names respectively were given, one need’s to understand their functionality
In simple words :-
just one thing to remember is we have 2 types of queues when talking about schedulers :–1)Ready Queue(in or near main memory )and 2)Input Queue.
well we in these days use multi-core processors like core i3 or i5 or i7 of intel rather than single core processors like Intel Pentium4 670
—for brevity of this article
core i3-has two cores and hyper-threading
core i7-all core i7 models will have hyper-threading and it may have from 2 cores to 8 cores
Hyper threading is in usage since more than 10 years mainly on Intel processors.yet it is not that famous term.
Imagine you want to eat your food very fast and eat more food in less time so that you can spend your time in other activity , then you have two broad options to achieve your goal