Radian - Home Radian is an open source JavaScript library that makes it easy to embed plots in HTML documents. It is being developed as part of OpenBrain’s BayesHive project. Instead of writing JavaScript plotting code yourself, you use custom HTML elements to represent plots. For instance, the HTML code on the left produces the plot on the right: Radian uses the AngularJS JavaScript framework to provide the machinery to implement custom HTML elements, and to allow two-way binding between attributes in HTML elements and JavaScript variables, and it uses the D3.js plotting library for graphics generation. Radian is licensed under the Mozilla public license. Applications Radian is used extensively in the BayesHive Bayesian statistics platform. Features Rationale There are many JavaScript plotting and graphing libraries out there, ranging in complexity from quick-and-easy utilities like Flot up to powerful but complex libraries like D3.js. We couldn’t do it without… The second big thing we use is D3.js.
Cubism.js Time Series Visualization foo7.6 bar−6.2 foo + bar1.4 foo - bar14 Cubism.js is a D3 plugin for visualizing time series. Scalable Cubism fetches time series data incrementally: after the initial display, Cubism reduces server load by polling only the most recent values. Effective Cubism also scales in terms of perception: small multiples aligned by time facilitate rapid comparison. Area (120px)7.6 Area (30px)7.6 In contrast, horizon charts reduce vertical space without losing resolution. Horizon, 1-band (120px)7.6 Horizon, 2-band (60px)7.6 Horizon, 3-band (40px)7.6 Horizon, 4-band (30px)7.6 By combining position and color, horizon charts improve perception: position is highly effective at discriminating small changes, while color differentiates large changes. Flexible Cubism is data-source agnostic. Want to learn more?
Sky Blue Trades Cytoscape.js This is how easy it is to get started with Cytoscape.js (this code creates the instance you see on the bottom-right: About Cytoscape.js is an open-source graph theory library written in JavaScript. Cytoscape.js allows you to easily display and manipulate rich, interactive graphs. Cytoscape.js also has graph analysis in mind: The library contains a slew of useful functions in graph theory. Cytoscape.js is an open-source project, and anyone is free to contribute. The library was developed at the Donnelly Centre at the University of Toronto. Cytoscape.js & Cytoscape Though Cytoscape.js shares its name with Cytoscape, Cytoscape.js is not Cytoscape. Cytoscape.js is a JavaScript library: It gives you a reusable graph widget that you can integrate with the rest of your webapp with your own JavaScript code. Funding Funding for Cytoscape.js and Cytoscape is provided by NRNB (U.S. ISB | UCSD | MSKCC | Pasteur | Agilent | UCSF | Unilever | Toronto | NCIBI | NRNB Architecture & API Notation Position Data
jiahuang/d3-timeline Speeding Up D3.js: A Checklist | Safari Blog A guest post by Peter Le Bek, founder of RethinkUI, an frontend development agency based in Glasgow, UK. He tweets at @_lebek and writes code at github.com/lebek. D3.js is a bit like the C of visualization frameworks. Programmers are often surprised to learn that D3.js doesn’t include high-level charting functions (e.g. plot(), bar(), or line()). In my last post I showed you how to build responsive visualizations with D3.js. Does your code generate many SVG elements? SVG performance varies across browsers and devices, but they all have their limits. Solution: Remove non-essential elements (e.g. group elements) Group elements (<g></g>) are useful when a set of elements need to share some properties. points = svg.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; }); points.append("circle").attr("r", 5); points.append("text").text("label"); Alternative solution: Use a canvas element instead of SVG Conclusion
D3.js D3.js (or just D3 for Data-Driven Documents) is a JavaScript library that uses digital data to drive the creation and control of dynamic and interactive graphical forms which run in web browsers. It is a tool for data visualization in W3C-compliant computing, making use of the widely implemented Scalable Vector Graphics (SVG), JavaScript, HTML5, and Cascading Style Sheets (CSS3) standards. It is the successor to the earlier Protovis framework.[2] In contrast to many other libraries, D3 allows great control over the final visual result.[3] Its development was noted in 2011,[4] as version 2.0.0 was released in August 2011.[5] Context[edit] The first web browsers appeared in the early 1990s. At the same time, researchers, engineers, and practitioners from various branches of engineering and science looked for tools that would enable web browsers to visually present data within web pages. In 2011, the development of Protovis was stopped to focus on a new project, D3.js. Selections[edit]
Sankey Diagram Source: Department of Energy & Climate Change, Tom Counsell. Sankey diagrams visualize the magnitude of flow between nodes in a network. This intricate diagram shows a possible scenario for UK energy production and consumption in 2050: energy supplies are on the left, and demands are on the right. Intermediate nodes group related forms of production and show how energy is converted and transmitted before it is consumed (or lost!). The thickness of each link encodes the amount of flow from source to target. This example is built with D3’s Sankey plugin. The fully automatic layout is convenient for rapid visualization—positioning nodes manually is tedious! Many thanks to Tom Counsell, whose Sankey library provided inspiration for this example.