Develop Reference

A good book for learning D3.js [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I saw D3.js and I was interested so I bought this book! I may be wrong, however I found it un-fulfilling.
Does anyone have prime material for mastering D3.jsfor data visualization?
I can see a lot of potential for D3.jsand I am very keen and interested.
thanks in advance!
Update:
I just completed reading Interactive Data Visualization for the Web by Scott Murray, great book! Try it, it's free.

As #Autio already mentioned, there are the tutorials from Scott Murray on his website.
You will also note that on his site, he has a link to his recent d3 book,
Interactive Data Visualization for the Web.
However, that book is now available online for free, along with embedded jsbin examples.
http://chimera.labs.oreilly.com/books/1230000000345/index.html
So if you are looking for a "book", this would be a great start.
Another great place to start is the set of tutorials - you could almost think of them as a mini-book - found here:
http://www.dashingd3js.com/table-of-contents
Part of what is good about these two resources is that they should encourage you to immediately begin playing around with d3 in your browser; so you are actually using d3 and exploring how it works in simple cases, instead of only reading about how it works.
The d3 wiki on github has a good deal of tutorials, and is indispensable for getting a feel for not just d3 but what's going on in the d3 community,
yet I would probably recommend starting with the two links mentioned above,
since they will provide a good base (with a sustained focus,
as opposed to a one or two page post) for then jumping off
into the other tutorials available.
https://github.com/mbostock/d3/wiki/Tutorials
Also, consider what you want to end up doing with d3. By itself, d3 is really powerful yet fairly low-level, meaning: if you just need to make a bar chart instead of a NY Times election map of 512 paths to the White House, then it may be worth looking at a tool like vega that removes some of the low-level complexity that could otherwise be involved in creating an item such as a standard bar chart. And these tools are not few in number, as can be seen in this gist listing libraries that make use of d3.
More recently, Nick Zhu, the author of dc.js charting library that combines d3.js and crossfilter, came out with a new Data Visualization with D3 Cookbook that looks promising and appears to assume a bit more of the reader than does Scott Murray's book.
There's also a d3.js intro for people who are still new to HTML and CSS:
Part1: http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html
Part2: http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html

The book you mention is indeed a bit slim. Here are some tutorials I found useful in grasping D3: http://alignedleft.com/tutorials/d3
Really the best method is to explore the source code of the examples hosted by Mike Bostock here: https://github.com/mbostock/d3/wiki/Gallery

I wrote some basic tutorials when I first started to learn, you can find them here:
https://bitbucket.org/hrojas/learn-d3

javascript gantt charts -charting data by day/hour/minutes [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I would like to use data from third party scheduling software to produce gantt or timeline type diagrams for displaying plant scheduling data on web page. Requirements include
javascript/html(5)/css solution (no flash if possible)
primarily for gantts/timeline type charts, but other chart types may be useful
based on jquery or prototype if possible
time scale should allow for hours/minutes - this is important for scheduling labor/machinery. (5 minute intervals might
be sufficient)
open source or low cost
prefer not to have to roll my own solution
I can bring in data and manipulate it with PHP and javascript. I looked at a few packages (most summarized here - Gantt Chart online), however most seemed weak on representing time in terms of hours and minutes. jQuery.Gantt looked like the best solution, although it seems to suffer from lack of ability to display clearly intervals in minutes or fraction of hours.
Does anyone use package for these requirements, or able to overcome limitations of jquery.gantt?
thanks
example. In this jquery.gantt rendering, it is not possible to determine if work should commence at 16:10 or 16:15.

Take a look at dhtmlxGantt, an open source (GPL) JavaScript Gantt chart. It has a customizable time scale so you can display hours/minutes scale, and supports easy integration with jQuery.
(Disclaimer: I work for DHTMLX)

RadiantQ's jQuery Gantt Package is ideal for implementing your requirements. It's built using native HTML5, supports Hours, Minutes and custom time scale types are supported.
Filled with a huge set of features and customization options, you should be able to plot any information on a timeline.
You can easily bind to any JSON or other kinds of data and also use MVVM patterns like KO.
Take a look at that online demos here.

Is anyone else still looking for such a Gantt chart library with granular timescales (Minutes-Seconds)?
I found Google Charts Gantt Google TimeLine Chart quite useful (although they call it TimeLine chart)
Another free to use Javascript chart library with gantt is Amcharts

I too started a project with jQuery.Gantt. I ran into the same inconvenient, and later I found this one. Hopefully this will help other people:
angular-gantt
I have not tried it on production or big data sets though. The benefits from this library is that it's MIT licensed which means you can use it in a commercial solution.

How to illustrate multigraphs in Javascript? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
The community reviewed whether to reopen this question last year and left it closed:
Original close reason(s) were not resolved
Improve this question
This question is looking for a practical and easy way for drawing multigraphs using Javascript.
First of all look at this question. None of those libraries support Multigraphs (or Pseudographs ). I mean I can't generate graphs like this:
Is there any jQuery plugin (or javascript library) out there for this purpose ?
I thought i can use WolframAlpha's API and use its images, something like this:
but it have lots of problem:
I can't move nodes or add remove edges interactively.
Only 2000 API calls per month. Not enough.
I can't produce large or intermediate graphs.
They are really ugly!
Please help me if you know some javascript library in order to draw Multigraphs, or anyway to produce such graphs (something like Dracula Graph Library but with ability to draw Multigraphs).

Cytoscape.JS supports multigraphs, is pure Javascript, and uses the new HTML 5 Canvas for performance. Its design intent is general purpose graph visualization/manipulation.
https://js.cytoscape.org/

If you are allowed to use Google Charts API you may refer to this
http://code.google.com/apis/chart/image/docs/gallery/graphviz.html
Example:
https://chart.googleapis.com/chart?cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}

I'm affraid you will have to do some development yourself. Raphael.js is pretty capable in creating and manipulating svg - would be good starting point

Some of those graph visualization libraries (mentioned in this question) DO support Multigraphs and allow dragging/placement of nodes
jsplumb: http://jsplumb.org/jquery/stateMachineDemo.html
possibly http://js-graph-it.sourceforge.net/ may support multigraphs.
but as far as your issue
4- Its really ugly!
These may not appeal to your aesthetic.

I think paper.js (http://paperjs.org) will get you also pretty close.

You might want to check this one out: www.d3js.org
You'd have to do a lot yourself (make your own SVG and such), but the library is very powerful.

I recently used Graphviz to draw the connections between some authors pubblications.
Graphviz is open source graph visualization software. The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages, PDF or Postscript for inclusion in other documents; or display in an interactive graph browser.
For example i used a simple DOT file to write all the connection between the authors and I produced a PNG file.
http://www.graphviz.org/
Here there is all the documentation that you need and in the gallery section you can see a lot of output example.
Hoping it could be helpful.

In a commercial scenario, take a look at yFiles for HTML:
It easily supports multi-graphs and does not look too ugly, I believe:
(These graphs have been laid out automatically, manual placement is also possible.)
Of course this is a matter of taste, so if you don't like the look, you can change any aspect of the visualization, like in the style tutorial.
The API offers full interactive editing capabilities and being a pure client-side solution, of course there is no API call count limit.
Large graphs are still a problem with todays' Javascript engines, but only if "large" means more than thousands of elements. With virtualization (considering only what is currently visible in the viewport during rendering), you can get good performance with thousands of elements.
Disclaimer: I work for the company that creates the library, on SO/SE, however I do not represent my employer. My posts and comments are my own.

You can check jsnetworkx (http://jsnetworkx.org/)
It is a js version of python graph library which supports multi-graph. It has a draw function which visualizes the graph using D3.js. It is available for both browser and node.js.

Best bet would be to render them on the server (or use it as an applet) with JGraphT.

Library for Canvas/SVG web-based tree graphs with layout algorithm? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I'm looking for a library that can draw interactive (i.e. clickable nodes) tree graphs.
Something like this but with text in the node boxes (i.e. the nodes would be of variable width and height).
Canviz doesn't have a stable release, and from what I can tell ProtoVis can't do text nodes and can only do single-parent nodes with tree layouts. Anyone aware of any libraries to do this in a browser?

A basic tree digram tutorial (you may expand this to get what you want)
http://www.codeproject.com/KB/scripting/graphic_javascript_tree.aspx
These are additional resources you may want to take a look at =)
http://www.graphviz.org/Theory.php
http://directory.google.com/Top/Science/Math/Combinatorics/Software/Graph_Drawing/
Really hope to see this out in javascript in the future, i too have quite a fair bit of usage for such classes =P

You may be interested in Cytoscape.js, an open-source JS graph visualisation and analysis library. It has built-in gestures, support for touch devices, and a rich API that you can use to integrate it into your webapp.
http://js.cytoscape.org
Cytoscape.js has a built-in breadthfirst layout for trees and DAGs, and this layout is very space efficient.
There is also the cytoscape-dagre extension for Cytoscape.js, which allows for using the excellent Dagre tree/DAG layout algorithm: https://github.com/cytoscape/cytoscape.js-dagre
Dagre produces very aesthetic results.
Disclaimer: I work on Cytoscape.js

Have you looked at JIT yet? I did some work with their radial graph, and it was a cinch.

Since that picture in the original post is actually created by a product of the same product family, I would like to add that "yFiles for HTML" is available commercially, too, since 2012.
The picture above has been generated by the Java variant of that library. The Javascript library variant supports all layout algorithms that the Java variant supports, with the same properties and customization capabilities. They are implemented in Javascript and do not require an active server component.
The library uses SVG as the rendering backend by default, but Canvas based renderings can be included, too.
See this live demo browser for an example that shows a similar graph (HTML5-capable browser required).
Disclaimer: I work for the company that creates that library, but on SO/SE I do not represent my employer.

This question is pretty old and pretty high up in Google results so I thought I'd update it. GraphVis does exactly what you want in a desktop, java swing based app but this is not ideal. Their description is a hierarchical graph. I Googled that and came across dagre which is built upon d3. http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html
JIT can be made to do it but it's very cumbersome and fragile.

Displaying code in blog posts [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
What libraries and/or packages have you used to create blog posts with code blocks? Having a JavaScript library that would support line numbers and indentation is ideal.

The GeSHi text highlighter is pretty awesome. If you're using WordPress, there's a plugin for you already

A simple Google query reveals http://code.google.com/p/syntaxhighlighter/
From initial looks it seems pretty good. Entirly JS based so can be implemented independent of the server side language used.

Syntax Highlighter is used by wordpress and produces nice results.

Copy Visual studio code as HTML http://www.jtleigh.com/people/colin/software/CopySourceAsHtml/

I use Live Writer and I use VS addin that copies source code as html to copy the code and then I change into HTML view in Writer and paste the result
you can download the addin at:http://blogs.microsoft.co.il/blogs/bursteg/archive/2007/11/21/copy-source-as-html-copysourceashtml-for-visual-studio-2008-rtm.aspx

Some time ago I've done some research on this topic and came to the conclusion that using GeSHi is the way to go. However recently I've been looking to some more alternatives:
Using Windows Live Writer with a syntax highlighter plugin (there are several available)
Using the syntaxhighlighter library or the google code prettify library. Both are written in JS and I think the second one is used on stackoverflow
Use some intermediate process, where I write the posts in Markdown for example and let a program generate the final HTML

Personally, I use this website to do it for me: http://puzzleware.net/codehtmler/default.aspx

If that's my own code, I would just use SciTE's export to HTML and paste it.
Otherwise (highlighting code like it is done here), I would prefer to do it on server side: JS highlighting (as seen, for example, on JavaLobby) happens after the page have been displayed in default mode (so there is a sudden change of look, not very nice), and is often slow, plus JS can be disabled.
Actually, such task can be done once, after user input, it doesn't need to be done over and over on each page served to visitor.

I usually use this free online tool that formats C# code. Along with C#, it also formats code for VB, HTML, XML, T-SQL and MSH (code name Monad).