An interactive version of a Reingold–Tilford tree. Click on the nodes to expand or collapse.
date | calls | |
---|---|---|
5-1-2015 | 2 | |
5-2-2015 | 36 | |
5-3-2015 | 30 | |
5-4-2015 | 24 | |
5-5-2015 | 30 | |
5-6-2015 | 39 | |
5-7-2015 | 36 | |
5-8-2015 | 44 | |
5-9-2015 | 33 |
This is an implementation of Ann K. Emery’s technique of placings labels directly on top of a line in D3 4.0 Alpha.
This is a multi series line chart in that the data is first transformed into separate arrays for each series. (The series names are dynamic and automatically derived from the columns in the TSV file, using [dsv.parse]. A label is rendered for each point in the time series. Beneath this label, a white rectangle is added, whose size and position is computed automatically using element.getBBox plus a little bit more padding.
This is an implementation of Ann K. Emery’s technique of placings labels directly on top of a line in D3 4.0 Alpha.
This is a multi series line chart in that the data is first transformed into separate arrays for each series. (The series names are dynamic and automatically derived from the columns in the TSV file, using [dsv.parse]. A label is rendered for each point in the time series. Beneath this label, a white rectangle is added, whose size and position is computed automatically using element.getBBox plus a little bit more padding.
This program renders a network diagram for a ModelJS reactive flow.
The input data is generated by an experimental ModelJS branch that computes the reactive flow graph at runtime.
Based on a previous implementation from July 2014
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>d3.js with Direct Yahoo Finance</title> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.3.0"></script> | |
<style type="text/css"> | |
body { | |
font: 10px sans-serif; |
!function(){ | |
var bP={}; | |
var b=30, bb=150, height=600, buffMargin=1, minHeight=14; | |
var c1=[-130, 40], c2=[-50, 100], c3=[-10, 140]; //Column positions of labels. | |
var colors =["#3366CC", "#DC3912", "#FF9900","#109618", "#990099", "#0099C6"]; | |
bP.partData = function(data,p){ | |
var sData={}; | |
sData.keys=[ |
This d3.js parallel coordinates plot is another experiment in how we might use interactive plots in Javascript to represent a partykit / rpart object from R. The example builds on this d3.js collapsible tree plot. Eventually, it would be nice to combine the tree and parallel coordinates into a layout with synced interactivity.
### Almost No [`rCharts`](http://rcharts.io) Also, this is fairly different from most of my interactive plots from R in that it almost completely avoids [`rCharts`](http://rcharts.io) (almost because I did use its `publish` to make this gist). I chose to exclude `rCharts` for two reasons:
- demo how we can use
htmltools
to build html/js in R - help users understand some of the things
rCharts
does f
I thought it would be interesting to produce an interactive parcoords
version of the parallel coordinates chart in this post Looking After Datasets by Antony Unwin on the Revolution Analytics blog.
# devtools::install_github("dogobox/parcoords")
# install.packages("dynRB") # for the finch data
data("finch",package="dynRB")
Built with blockbuilder.org
The next phase in htmlwidgets
will be the ability to communicate with or without Shiny. Joe Cheng from RStudio has demonstrated this with d3scatter
using crosstalk
. This example extends Joe's example and experiments with d3scatter
+ parcoords
. Currently, the experimental crosstalk
-version of parcoords
is only wired to send its brushed selection and not receive.
For another example, see Carson Sievert's plotly
experiments.
# devtools::install_github("dogobox/crosstalk")