Tag Archives: D3.js

D3.js — Data Visualization with Javascript for beginners


via D3.js — Data Visualization with Javascript for beginners — Medium.

In many ways, D3.js (aka Data-Driven Documents — JavaScript) was a coding gateway drug for me. Last year, while still wholly unfamiliar with Javascript, I was able to use the library to make a interactive visualization with data from the Harry Ransom Center, where I was a graduate research assistant. D3.js produced beautiful results, gave me a great deal of control over design and display, and was frankly easier to make than a comparable diagram in Adobe Illustrator. I was hooked!

NBA Shot Charts With NodeJS and D3.js


via Jowanza Joseph — NBA Shot Charts With Node.js and D3.js.

The NBA Shot Chart has become iconic in many ways. It’s a quality visualization that gives context to the boring summarized score board data we see everyday. This context is valuable to basketball nerds and lay folks alike. In any event this post is not about the intricacies of basketball but about using Node.js/ d3.js to make cool shot carts.

d3.js and the first class function


via d3js and the first class function — d3js tutorials — Medium.

Passing a function as an argument to other functions is a difficult concept to understand for beginners, especially those coming from other languages. D3 further compounds this difficulty by making the functions-as-arguments model integral to the basic pattern, but doesn’t force the designer to understand what the heck is going on when they type function in the middle of their code.

Creating Charting Directives Using AngularJS and D3.js


via Creating Charting Directives Using AngularJS and D3.js.

D3 is a JavaScript library that can be used to create interactive charts with the HTML5 technology Scalable Vector Graphics (SVG). Working directly with SVG to create charts can be painful, as one needs to remember the shapes supported by SVG and make several calls to the API to make the chart dynamic. D3 abstracts most of the pain, and provides a simple interface to build SVG-based charts. Jay Raj published two nice SitePoint articles on working with D3, check them out if you are not already familiar with D3.

Most of you may not need a formal introduction to AngularJS. AngularJS is a client side JavaScript framework for building rich web applications. One of the top selling points of AngularJS is the support for directives. Directives provide an excellent way to define our own HTML properties and elements. It also helps in keeping the markup and code separated from each other.

AngularJS is very strong in data binding as well. This feature saves a lot of time and effort required to update the UI according to data in the model. In the modern web world, customers ask developers to build websites that respond in real-time. This means the customers want to always see the latest data on the screen. Data UI has to be updated as soon as someone modifies a piece of data in the back-end. Performing such real-time updates would be very difficult and inefficient if we don’t have support of data binding.

In this article, we will see how to build real-time AngularJS directives that wrap D3 charts.

Introduction To D3.js


via Introduction To D3js | Xoriant Blog.

With the knowledge of jQuery type libraries like Highcharts, I was introduced to D3. At a first glance, I thought that it was just another charting library. That proved to be very wrong.

In this post, I won’t compare D3 to other charting libraries but there might be cases where I talk with reference to popular technologies like jQuery and jQueryUI since it is very easy to understand where you stand compared to what you probably already know.

ColaJS: Constraint-Based Layout in the Browser


via cola.js: Constraint-based Layout in the Browser.

cola.js (A.K.A. “WebCoLa”) is an open-source JavaScript library for arranging your HTML5 documents and diagrams using constraint-based optimization techniques.

It works well with libraries like D3.js and svg.js. The core layout is based on a complete rewrite in Javascript of the C++ libcola library.

It has an adaptor for d3.js that allows you to use cola as a drop-in replacement for the D3 force layout. The layout converges to a local optimum unlike the D3 force layout, which forces convergence through a simple annealing strategy. Thus, compared to D3 force layout:

However, it works well on an average machine on graphs with fewer than 100 nodes.

cola.js can now (optionally) route edges to avoid intersections with node boundaries.

Interactive Data Visualization using D3.js, DC.js, Nodejs and MongoDB


via Interactive Data Visualization using D3.js, DC.js, Nodejs and MongoDB | Anmol Koul.

this blog post is to introduce open source business intelligence technologies and explore data using open source technologies like D3.js, DC.js, Nodejs and MongoDB.
Over the span of this post we will see the importance of the various components that we are using and we will do some code based customization as well.