Introduction to D3.js (Part 2)

In our previous blog post, we saw how to create a simple histogram based on data. But still, our chart is not ideal, as the range of data in the array can vary from too small to very large numbers that might not fit in our SVG canvas created by D3. For example, in our last blog post, we said that if one element in the array is 120, then the width of bar corresponding to that number would be 120 * 10 = 1200px, which is more than the width (600px) of the canvas of D3. In this case, any bar that exceeds a width of 600px will stop at the right edge of the canvas, and this representation of data would be incorrect. To cope with these glitches, D3 provides support for scaling our bars (or curves, colors, or any SVG shape) to adjust in the canvas of the D3 so that the smallest element in the dataset all the way to the largest element in the dataset can fit in correctly and relatively (to each other).


<script type=”text/javascript" src=""></script>

var dataArray = [120, 40, 50, 160];

var width = 500;
var height = 500;

var widthScale = d3.scaleLinear()
.domain([0, 160]) //(Minimum, Maximum)
.range([0, width]);

var canvas ="body")
.attr("width", width)
.attr("height", height);

var bars = canvas.selectAll("rect")
.attr("width", function(d) {
return widthScale(d)
.attr("height", 60)
.attr("y", function(d, i) {
return i * 62


In the code above, we created a linear scale with the scaleLinear() method of the d3 object. The values inside the domain() method must be the minimum and maximum values in the dataset. Here, I hard coded the minimum and maximum values, but D3 also has various methods to do calculations on the dataset to calculate the minimum, maximum, mean, median, etc. The range() method sets the boundaries of the bars of our histogram. Here, the whole canvas width is taken as the size of the biggest bar in the histogram.


Introduction to D3.js

D3.js is a JavaScript library used to render amazing charts based on data. It can be used to visualize stats and find patterns, show the comparison between two or more time-series data, draw the data in real-time as it happens (for example, data generated by various sensors or internet traffic), and even create cool dynamic art on web pages. How you use this library just depends on one’s imagination. To view a huge catalog of charts drawn by this library one can visit the official website of D3.js.
D3 is not a pre-built library composed of particular charts; instead, it’s a tool that can be used to create various charts — any chart you can envision). It uses SVG (Scalable Vector Graphics) to draw the charts along with HTML and CSS. With D3 a dataset of tens of thousands of objects can be represented graphically easily. If you design your custom chart and you want to use a module in other charts then you can also create a module to reuse in other projects.


Setting Up New Relic on Django, Apache HTTPD, and mod_wsgi

If you’ve used New Relic before, then you know that it’s normally pretty easy to integrate and doesn’t require any code modifications — at least, it didn’t when I was using their Java agent.

Using their Python agent on my Django application deployed with Apache HTTPD and mod_wsgi didn’t turn out to be so straightforward.


How to Allow a Request/Response Size Above 8KB

We have our current platform set up with Akamai as the CDN, Apache as the web server, and AEM as the content tool. We had to do real-time ID verification through Signicat — which returned a huge SAML. When we get this huge amount of SAML and try to pass it to our server to parse, we always find bad SAML; it was getting truncated after a certain number of characters (around 7,800). My initial assumption was that the browser was restricting the size and hence truncating, causing a “400 — Bad request from the server" error. I searched on the internet and did not find any credible solution to my problem. After researching I found that this issue is a server-side issue, as most web servers restrict request the size to 8KB. Initially, I thought just aone server was restricting — but I realized that all three servers were. 
If your request gets truncated due to its large size and you get "400 — Bad request from the server," this means that your web server, proxy, or content server is not able to handle a large amount of data. You will not find any logs in your application, as it is a server configuration issue. You need to increase the size of the server request.