Skip to content

Instantly share code, notes, and snippets.

@dogobox
dogobox / README.md
Last active March 19, 2018 09:13
Technology Reference Tree
@dogobox
dogobox / data.tsv
Last active April 29, 2016 09:16 — forked from mbostock/.block
Line Chart 4.0
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
@dogobox
dogobox / README.md
Last active April 29, 2016 09:17 — forked from mbostock/.block
Multi Series Graph with Inline Labels

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.

@dogobox
dogobox / README.md
Last active April 26, 2016 01:14
Readme

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.

@dogobox
dogobox / index.html
Last active April 26, 2016 08:00 — forked from timelyportfolio/index.html
d3.js dji-area example direct yahoo finance feed
<!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=[
@dogobox
dogobox / Readme.md
Last active April 26, 2016 12:49 — forked from timelyportfolio/Readme.md
R + d3.js Parallel Coordinates of partykit

Introduction

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:
  1. demo how we can use htmltools to build html/js in R
  2. help users understand some of the things rCharts does f
@dogobox
dogobox / Readme.md
Last active April 26, 2016 08:33 — forked from timelyportfolio/Readme.md
interactive d3.js parallel coordinates of finch data

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.

example

live example

code

# devtools::install_github("dogobox/parcoords")
# install.packages("dynRB") # for the finch data
data("finch",package="dynRB")
@dogobox
dogobox / README.md
Last active April 26, 2016 08:53 — forked from timelyportfolio/README.md
parcoords + d3scatter linked by crosstalk

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.

Code to Replicate

# devtools::install_github("dogobox/crosstalk")