Compare commits
No commits in common. 'master' and 'octopages' have entirely different histories.
@ -1,27 +1,3 @@
|
||||
|
||||
# Jekyll Files #
|
||||
################
|
||||
_site
|
||||
|
||||
|
||||
# Random Files #
|
||||
################
|
||||
*.swp
|
||||
*~
|
||||
*.log
|
||||
|
||||
|
||||
# Private Test Data #
|
||||
#####################
|
||||
*REALDATA*
|
||||
|
||||
|
||||
# OS generated files #
|
||||
######################
|
||||
.DS_Store*
|
||||
ehthumbs.db
|
||||
Icon?
|
||||
Thumbs.db
|
||||
# nodejs packages #
|
||||
######################
|
||||
node_modules
|
||||
.sass-cache
|
||||
_deploy
|
||||
public
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
# Octopress Changelog
|
||||
|
||||
## 2.0
|
||||
|
||||
- Now based on [mojombo/jekyll](http://github.com/mojombo/jekyll)
|
||||
- Sports a semantic HTML5 template
|
||||
- Easy theming with Compass and Sass
|
||||
- A Mobile friendly responsive (320 and up) layout
|
||||
- Built in 3rd party support for Twitter, Google Plus One, Disqus Comments, Pinboard, Delicious, and Google Analytics
|
||||
- Deploy to Github pages or use Rsync
|
||||
- Built in support for POW and Rack servers
|
||||
- Beautiful [Solarized](http://ethanschoonover.com/solarized) syntax highlighting
|
||||
- Super easy setup and configuration
|
||||
|
||||
**New Plugins, Filters, & Generators**
|
||||
|
||||
- **Gist Tag** for easily embedding gists in your posts
|
||||
- **Pygments Cache** makes subsequent compiling much faster
|
||||
- **Include Code Tag** lets you embed external code snippets from your file system and adds a download link
|
||||
- **Pullquote Tag** Generate beautiful semantic pullquotes (no double data) based on Maykel Loomans's [technique](http://miekd.com/articles/pull-quotes-with-html5-and-css/)
|
||||
- **Blockquote Tag** makes it easy to semantically format blockquotes
|
||||
- **Category Generator** gives you archive pages for each category
|
||||
- **Sitemap.xml Generator** for search engines
|
||||
|
||||
## 1.0
|
||||
|
||||
- **No longer supported.**
|
||||
- Jekyll Matured, but Henrik's Jekyll fork did not.
|
||||
- Thanks for all your pull requests, I learned a lot.
|
||||
@ -0,0 +1,20 @@
|
||||
source "https://rubygems.org"
|
||||
|
||||
group :development do
|
||||
gem 'rake', '~> 0.9'
|
||||
gem 'jekyll', '~> 0.12'
|
||||
gem 'rdiscount', '~> 2.0.7'
|
||||
gem 'pygments.rb', '~> 0.3.4'
|
||||
gem 'RedCloth', '~> 4.2.9'
|
||||
gem 'haml', '~> 3.1.7'
|
||||
gem 'compass', '~> 0.12.2'
|
||||
gem 'sass', '~> 3.2'
|
||||
gem 'sass-globbing', '~> 1.0.0'
|
||||
gem 'rubypants', '~> 0.2.0'
|
||||
gem 'rb-fsevent', '~> 0.9'
|
||||
gem 'stringex', '~> 1.4.0'
|
||||
gem 'liquid', '~> 2.3.0'
|
||||
gem 'directory_watcher', '1.4.1'
|
||||
end
|
||||
|
||||
gem 'sinatra', '~> 1.4.2'
|
||||
@ -0,0 +1,68 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
RedCloth (4.2.9)
|
||||
chunky_png (1.2.5)
|
||||
classifier (1.3.3)
|
||||
fast-stemmer (>= 1.0.0)
|
||||
compass (0.12.2)
|
||||
chunky_png (~> 1.2)
|
||||
fssm (>= 0.2.7)
|
||||
sass (~> 3.1)
|
||||
directory_watcher (1.4.1)
|
||||
fast-stemmer (1.0.1)
|
||||
fssm (0.2.9)
|
||||
haml (3.1.7)
|
||||
jekyll (0.12.0)
|
||||
classifier (~> 1.3)
|
||||
directory_watcher (~> 1.1)
|
||||
kramdown (~> 0.13.4)
|
||||
liquid (~> 2.3)
|
||||
maruku (~> 0.5)
|
||||
pygments.rb (~> 0.3.2)
|
||||
kramdown (0.13.8)
|
||||
liquid (2.3.0)
|
||||
maruku (0.6.1)
|
||||
syntax (>= 1.0.0)
|
||||
posix-spawn (0.3.6)
|
||||
pygments.rb (0.3.4)
|
||||
posix-spawn (~> 0.3.6)
|
||||
yajl-ruby (~> 1.1.0)
|
||||
rack (1.5.2)
|
||||
rack-protection (1.5.0)
|
||||
rack
|
||||
rake (0.9.2.2)
|
||||
rb-fsevent (0.9.1)
|
||||
rdiscount (2.0.7.3)
|
||||
rubypants (0.2.0)
|
||||
sass (3.2.9)
|
||||
sass-globbing (1.0.0)
|
||||
sass (>= 3.1)
|
||||
sinatra (1.4.2)
|
||||
rack (~> 1.5, >= 1.5.2)
|
||||
rack-protection (~> 1.4)
|
||||
tilt (~> 1.3, >= 1.3.4)
|
||||
stringex (1.4.0)
|
||||
syntax (1.0.0)
|
||||
tilt (1.3.7)
|
||||
yajl-ruby (1.1.0)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
RedCloth (~> 4.2.9)
|
||||
compass (~> 0.12.2)
|
||||
directory_watcher (= 1.4.1)
|
||||
haml (~> 3.1.7)
|
||||
jekyll (~> 0.12)
|
||||
liquid (~> 2.3.0)
|
||||
pygments.rb (~> 0.3.4)
|
||||
rake (~> 0.9)
|
||||
rb-fsevent (~> 0.9)
|
||||
rdiscount (~> 2.0.7)
|
||||
rubypants (~> 0.2.0)
|
||||
sass (~> 3.2)
|
||||
sass-globbing (~> 1.0.0)
|
||||
sinatra (~> 1.4.2)
|
||||
stringex (~> 1.4.0)
|
||||
@ -1,106 +0,0 @@
|
||||
module.exports = function(grunt) {
|
||||
|
||||
//Project configuration.
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
concat: {
|
||||
options: {
|
||||
separator: ''
|
||||
},
|
||||
dist: {
|
||||
src: [
|
||||
'src/intro.js',
|
||||
'src/core.js',
|
||||
'src/interactiveLayer.js',
|
||||
'src/tooltip.js',
|
||||
'src/utils.js',
|
||||
'src/models/axis.js',
|
||||
'src/models/historicalBar.js',
|
||||
'src/models/bullet.js',
|
||||
'src/models/bulletChart.js',
|
||||
'src/models/cumulativeLineChart.js',
|
||||
'src/models/discreteBar.js',
|
||||
'src/models/discreteBarChart.js',
|
||||
'src/models/distribution.js',
|
||||
'src/models/historicalBar.js',
|
||||
'src/models/historicalBarChart.js',
|
||||
'src/models/indentedTree.js',
|
||||
'src/models/legend.js',
|
||||
'src/models/line.js',
|
||||
'src/models/lineChart.js',
|
||||
'src/models/linePlusBarChart.js',
|
||||
'src/models/lineWithFocusChart.js',
|
||||
'src/models/linePlusBarWithFocusChart.js',
|
||||
'src/models/multiBar.js',
|
||||
'src/models/multiBarChart.js',
|
||||
'src/models/multiBarHorizontal.js',
|
||||
'src/models/multiBarHorizontalChart.js',
|
||||
'src/models/multiChart.js',
|
||||
'src/models/ohlcBar.js',
|
||||
'src/models/pie.js',
|
||||
'src/models/pieChart.js',
|
||||
'src/models/scatter.js',
|
||||
'src/models/scatterChart.js',
|
||||
'src/models/scatterPlusLineChart.js',
|
||||
'src/models/sparkline.js',
|
||||
'src/models/sparklinePlus.js',
|
||||
'src/models/stackedArea.js',
|
||||
'src/models/stackedAreaChart.js',
|
||||
'src/outro.js'
|
||||
],
|
||||
dest: 'nv.d3.js'
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
|
||||
'<%= grunt.template.today("yyyy-mm-dd") %> */'
|
||||
},
|
||||
js: {
|
||||
files: {
|
||||
'nv.d3.min.js': ['nv.d3.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
jshint: {
|
||||
foo: {
|
||||
src: "src/**/*.js"
|
||||
},
|
||||
options: {
|
||||
jshintrc: '.jshintrc'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
js: {
|
||||
files: ["src/**/*.js"],
|
||||
tasks: ['concat']
|
||||
}
|
||||
},
|
||||
copy: {
|
||||
css: {
|
||||
files: [
|
||||
{ src: 'src/nv.d3.css', dest: 'nv.d3.css' }
|
||||
]
|
||||
}
|
||||
},
|
||||
cssmin: {
|
||||
dist: {
|
||||
files: {
|
||||
'nv.d3.min.css' : ['nv.d3.css']
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||
|
||||
grunt.registerTask('default', ['concat', 'copy']);
|
||||
grunt.registerTask('production', ['concat', 'uglify', 'copy', 'cssmin']);
|
||||
grunt.registerTask('release', ['production']);
|
||||
grunt.registerTask('lint', ['jshint']);
|
||||
};
|
||||
@ -1,49 +0,0 @@
|
||||
|
||||
##nvd3.js License
|
||||
|
||||
Copyright (c) 2011, 2012 [Novus Partners, Inc.][novus]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
[novus]: https://www.novus.com/
|
||||
|
||||
|
||||
|
||||
##d3.js License
|
||||
|
||||
Copyright (c) 2012, Michael Bostock
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
|
||||
* Redistributions in binary form must reproduce the above copyright notice,
|
||||
this list of conditions and the following disclaimer in the documentation
|
||||
and/or other materials provided with the distribution.
|
||||
|
||||
* The name Michael Bostock may not be used to endorse or promote products
|
||||
derived from this software without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
||||
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
||||
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,
|
||||
INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
|
||||
BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
||||
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
|
||||
OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
|
||||
EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
@ -1,72 +0,0 @@
|
||||
JS_FILES = \
|
||||
src/intro.js \
|
||||
src/core.js \
|
||||
src/interactiveLayer.js \
|
||||
src/tooltip.js \
|
||||
src/utils.js \
|
||||
src/models/axis.js \
|
||||
src/models/bullet.js \
|
||||
src/models/bulletChart.js \
|
||||
src/models/cumulativeLineChart.js \
|
||||
src/models/discreteBar.js \
|
||||
src/models/discreteBarChart.js \
|
||||
src/models/distribution.js \
|
||||
src/models/historicalBar.js \
|
||||
src/models/historicalBarChart.js \
|
||||
src/models/indentedTree.js \
|
||||
src/models/legend.js \
|
||||
src/models/line.js \
|
||||
src/models/lineChart.js \
|
||||
src/models/linePlusBarChart.js \
|
||||
src/models/lineWithFocusChart.js \
|
||||
src/models/linePlusBarWithFocusChart.js \
|
||||
src/models/multiBar.js \
|
||||
src/models/multiBarChart.js \
|
||||
src/models/multiBarHorizontal.js \
|
||||
src/models/multiBarHorizontalChart.js \
|
||||
src/models/multiChart.js \
|
||||
src/models/ohlcBar.js \
|
||||
src/models/pie.js \
|
||||
src/models/pieChart.js \
|
||||
src/models/scatter.js \
|
||||
src/models/scatterChart.js \
|
||||
src/models/scatterPlusLineChart.js \
|
||||
src/models/sparkline.js \
|
||||
src/models/sparklinePlus.js \
|
||||
src/models/stackedArea.js \
|
||||
src/models/stackedAreaChart.js \
|
||||
src/outro.js
|
||||
CSS_FILES = \
|
||||
src/nv.d3.css
|
||||
|
||||
JS_COMPILER = \
|
||||
uglifyjs
|
||||
|
||||
CSS_COMPILER = \
|
||||
cssmin
|
||||
|
||||
all: nv.d3.js nv.d3.min.js nv.d3.css nv.d3.min.css
|
||||
nv.d3.js: $(JS_FILES)
|
||||
nv.d3.min.js: $(JS_FILES)
|
||||
nv.d3.css: $(CSS_FILES)
|
||||
nv.d3.min.css: $(CSS_FILES)
|
||||
|
||||
nv.d3.js: Makefile
|
||||
rm -f $@
|
||||
cat $(filter %.js,$^) >> $@
|
||||
|
||||
nv.d3.css: Makefile
|
||||
rm -f $@
|
||||
cat $(filter %.css,$^) >> $@
|
||||
|
||||
%.min.js:: Makefile
|
||||
rm -f $@
|
||||
$(JS_COMPILER) nv.d3.js >> $@
|
||||
|
||||
%.min.css:: Makefile
|
||||
rm -f $@
|
||||
$(CSS_COMPILER) nv.d3.css >> $@
|
||||
|
||||
|
||||
clean:
|
||||
rm -rf nv.d3*.js nv.d3*.css
|
||||
@ -1,87 +0,0 @@
|
||||
# NVD3 - v1.1.15-beta
|
||||
## Release notes for version 1.1.15 beta
|
||||
* Various fixes across the board
|
||||
|
||||
## Overview
|
||||
A reusable chart library for d3.js.
|
||||
|
||||
NVD3 may change from its current state, but will always try to follow the style of d3.js.
|
||||
|
||||
You can also check out the [examples page](http://nvd3.org/ghpages/examples.html).
|
||||
**Note:** The examples on nvd3.org are outdated. For examples on how to use the latest NVD3, please checkout the **examples/** directory in the repository.
|
||||
|
||||
---
|
||||
|
||||
# Current development focus
|
||||
|
||||
- Getting documentation up.
|
||||
- Unifying common API functions between charts.
|
||||
- Bug fixes that come up.
|
||||
|
||||
---
|
||||
|
||||
# Installation Instructions
|
||||
|
||||
`d3.v3.js` is a dependency of `nv.d3.js`. Be sure to include in in your project, then:
|
||||
Add a script tag to include `nv.d3.js` OR `nv.d3.min.js` in your project.
|
||||
Also add a link to the `nv.d3.css` file.
|
||||
|
||||
See wiki -> Documentation for more detail
|
||||
|
||||
---
|
||||
|
||||
If one of [the existing models](https://github.com/novus/nvd3/tree/master/src/models) doesn't meet your needs, fork the project, implement the model and an example using it, send us a pull request, for consideration for inclusion in the project.
|
||||
|
||||
We cannot honor all pull requests, but we will review all of them.
|
||||
|
||||
Please do not aggregate pull requests. Aggregated pull requests are actually more difficult to review.
|
||||
|
||||
We are currently changing our branch structure so that master will be gauranteed stable. In addition, there is now a "development" branch. This branch reflects the latest changes to NVD3 and is not necessarily stable.
|
||||
|
||||
---
|
||||
|
||||
## Minifying your fork:
|
||||
|
||||
### Using Make
|
||||
The Makefile requires [UglifyJS](https://github.com/mishoo/UglifyJS) and [CSSMin](https://github.com/jbleuzen/node-cssmin)
|
||||
|
||||
The easiest way to install UglifyJS and CSSMin is via npm. Run `npm install -g uglify-js cssmin`. After installing verify the setup by running `uglifyjs --version` and `cssmin --help`.
|
||||
|
||||
Once you have the `uglifyjs` and `cssmin` commands available, running `make` from your
|
||||
fork's root directory will rebuild both `nv.d3.js` and `nv.d3.min.js`.
|
||||
|
||||
make # build nv.d3.js and nv.d3.css and minify
|
||||
make nv.d3.js # Build nv.d3.js
|
||||
make nv.d3.min.js # Minify nv.d3.js into nv.d3.min.js
|
||||
make nv.d3.css # Build nv.d3.css
|
||||
make nv.d3.min.css # Minify nv.d3.css into nv.d3.min.css
|
||||
make clean # Delete nv.d3.*js and nv.d3.*css
|
||||
|
||||
|
||||
*Without UglifyJS or CSSMin, you won't get the minified versions when running make.**
|
||||
|
||||
### Using Grunt
|
||||
|
||||
You can use grunt instead of makefile to build js file. See more about [grunt](http://gruntjs.com/).
|
||||
***[Nodejs](http://nodejs.org/) must be installed before you can use grunt.***
|
||||
Run `npm install` in root dir to install grunt and it's dependencies.
|
||||
|
||||
Then, you can use these commands:
|
||||
|
||||
grunt # build nv.d3.js
|
||||
grunt production # build nv.d3.js and nv.d3.min.js
|
||||
grunt watch # watch file changes in src/, and rebuild nv.d3.js, it's very helpful when delevop NVD3
|
||||
grunt lint # run jshint on src/**/*.js
|
||||
|
||||
**We ask that you DO NOT minify pull requests...
|
||||
If you need to minify please build pull request in separate branch, and
|
||||
merge and minify in your master.
|
||||
|
||||
## Supported Browsers
|
||||
NVD3 runs best on WebKit based browsers.
|
||||
|
||||
* **Google Chrome: latest version (preferred)**
|
||||
* **Opera 15+ (preferred)**
|
||||
* Safari: latest version
|
||||
* Firefox: latest version
|
||||
* Internet Explorer: 9 and 10
|
||||
@ -0,0 +1,404 @@
|
||||
require "rubygems"
|
||||
require "bundler/setup"
|
||||
require "stringex"
|
||||
|
||||
## -- Rsync Deploy config -- ##
|
||||
# Be sure your public key is listed in your server's ~/.ssh/authorized_keys file
|
||||
ssh_user = "user@domain.com"
|
||||
ssh_port = "22"
|
||||
document_root = "~/website.com/"
|
||||
rsync_delete = false
|
||||
rsync_args = "" # Any extra arguments to pass to rsync
|
||||
deploy_default = "push"
|
||||
|
||||
# This will be configured for you when you run config_deploy
|
||||
deploy_branch = "gh-pages"
|
||||
|
||||
## -- Misc Configs -- ##
|
||||
|
||||
public_dir = "public" # compiled site directory
|
||||
source_dir = "source" # source file directory
|
||||
blog_index_dir = 'source' # directory for your blog's index page (if you put your index in source/blog/index.html, set this to 'source/blog')
|
||||
deploy_dir = "_deploy" # deploy directory (for Github pages deployment)
|
||||
stash_dir = "_stash" # directory to stash posts for speedy generation
|
||||
posts_dir = "_posts" # directory for blog files
|
||||
themes_dir = ".themes" # directory for blog files
|
||||
new_post_ext = "markdown" # default new post file extension when using the new_post task
|
||||
new_page_ext = "markdown" # default new page file extension when using the new_page task
|
||||
server_port = "4000" # port for preview server eg. localhost:4000
|
||||
|
||||
if (/cygwin|mswin|mingw|bccwin|wince|emx/ =~ RUBY_PLATFORM) != nil
|
||||
puts '## Set the codepage to 65001 for Windows machines'
|
||||
`chcp 65001`
|
||||
end
|
||||
|
||||
desc "Initial setup for Octopress: copies the default theme into the path of Jekyll's generator. Rake install defaults to rake install[classic] to install a different theme run rake install[some_theme_name]"
|
||||
task :install, :theme do |t, args|
|
||||
if File.directory?(source_dir) || File.directory?("sass")
|
||||
abort("rake aborted!") if ask("A theme is already installed, proceeding will overwrite existing files. Are you sure?", ['y', 'n']) == 'n'
|
||||
end
|
||||
# copy theme into working Jekyll directories
|
||||
theme = args.theme || 'classic'
|
||||
puts "## Copying "+theme+" theme into ./#{source_dir} and ./sass"
|
||||
mkdir_p source_dir
|
||||
cp_r "#{themes_dir}/#{theme}/source/.", source_dir
|
||||
mkdir_p "sass"
|
||||
cp_r "#{themes_dir}/#{theme}/sass/.", "sass"
|
||||
mkdir_p "#{source_dir}/#{posts_dir}"
|
||||
mkdir_p public_dir
|
||||
end
|
||||
|
||||
#######################
|
||||
# Working with Jekyll #
|
||||
#######################
|
||||
|
||||
desc "Generate jekyll site"
|
||||
task :generate do
|
||||
raise "### You haven't set anything up yet. First run `rake install` to set up an Octopress theme." unless File.directory?(source_dir)
|
||||
puts "## Generating Site with Jekyll"
|
||||
system "compass compile --css-dir #{source_dir}/stylesheets"
|
||||
system "jekyll"
|
||||
end
|
||||
|
||||
desc "Watch the site and regenerate when it changes"
|
||||
task :watch do
|
||||
raise "### You haven't set anything up yet. First run `rake install` to set up an Octopress theme." unless File.directory?(source_dir)
|
||||
puts "Starting to watch source with Jekyll and Compass."
|
||||
system "compass compile --css-dir #{source_dir}/stylesheets" unless File.exist?("#{source_dir}/stylesheets/screen.css")
|
||||
jekyllPid = Process.spawn({"OCTOPRESS_ENV"=>"preview"}, "jekyll --auto")
|
||||
compassPid = Process.spawn("compass watch")
|
||||
|
||||
trap("INT") {
|
||||
[jekyllPid, compassPid].each { |pid| Process.kill(9, pid) rescue Errno::ESRCH }
|
||||
exit 0
|
||||
}
|
||||
|
||||
[jekyllPid, compassPid].each { |pid| Process.wait(pid) }
|
||||
end
|
||||
|
||||
desc "preview the site in a web browser"
|
||||
task :preview do
|
||||
raise "### You haven't set anything up yet. First run `rake install` to set up an Octopress theme." unless File.directory?(source_dir)
|
||||
puts "Starting to watch source with Jekyll and Compass. Starting Rack on port #{server_port}"
|
||||
system "compass compile --css-dir #{source_dir}/stylesheets" unless File.exist?("#{source_dir}/stylesheets/screen.css")
|
||||
jekyllPid = Process.spawn({"OCTOPRESS_ENV"=>"preview"}, "jekyll --auto")
|
||||
compassPid = Process.spawn("compass watch")
|
||||
rackupPid = Process.spawn("rackup --port #{server_port}")
|
||||
|
||||
trap("INT") {
|
||||
[jekyllPid, compassPid, rackupPid].each { |pid| Process.kill(9, pid) rescue Errno::ESRCH }
|
||||
exit 0
|
||||
}
|
||||
|
||||
[jekyllPid, compassPid, rackupPid].each { |pid| Process.wait(pid) }
|
||||
end
|
||||
|
||||
# usage rake new_post[my-new-post] or rake new_post['my new post'] or rake new_post (defaults to "new-post")
|
||||
desc "Begin a new post in #{source_dir}/#{posts_dir}"
|
||||
task :new_post, :title do |t, args|
|
||||
if args.title
|
||||
title = args.title
|
||||
else
|
||||
title = get_stdin("Enter a title for your post: ")
|
||||
end
|
||||
raise "### You haven't set anything up yet. First run `rake install` to set up an Octopress theme." unless File.directory?(source_dir)
|
||||
mkdir_p "#{source_dir}/#{posts_dir}"
|
||||
filename = "#{source_dir}/#{posts_dir}/#{Time.now.strftime('%Y-%m-%d')}-#{title.to_url}.#{new_post_ext}"
|
||||
if File.exist?(filename)
|
||||
abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
|
||||
end
|
||||
puts "Creating new post: #{filename}"
|
||||
open(filename, 'w') do |post|
|
||||
post.puts "---"
|
||||
post.puts "layout: post"
|
||||
post.puts "title: \"#{title.gsub(/&/,'&')}\""
|
||||
post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M:%S %z')}"
|
||||
post.puts "comments: true"
|
||||
post.puts "categories: "
|
||||
post.puts "---"
|
||||
end
|
||||
end
|
||||
|
||||
# usage rake new_page[my-new-page] or rake new_page[my-new-page.html] or rake new_page (defaults to "new-page.markdown")
|
||||
desc "Create a new page in #{source_dir}/(filename)/index.#{new_page_ext}"
|
||||
task :new_page, :filename do |t, args|
|
||||
raise "### You haven't set anything up yet. First run `rake install` to set up an Octopress theme." unless File.directory?(source_dir)
|
||||
args.with_defaults(:filename => 'new-page')
|
||||
page_dir = [source_dir]
|
||||
if args.filename.downcase =~ /(^.+\/)?(.+)/
|
||||
filename, dot, extension = $2.rpartition('.').reject(&:empty?) # Get filename and extension
|
||||
title = filename
|
||||
page_dir.concat($1.downcase.sub(/^\//, '').split('/')) unless $1.nil? # Add path to page_dir Array
|
||||
if extension.nil?
|
||||
page_dir << filename
|
||||
filename = "index"
|
||||
end
|
||||
extension ||= new_page_ext
|
||||
page_dir = page_dir.map! { |d| d = d.to_url }.join('/') # Sanitize path
|
||||
filename = filename.downcase.to_url
|
||||
|
||||
mkdir_p page_dir
|
||||
file = "#{page_dir}/#{filename}.#{extension}"
|
||||
if File.exist?(file)
|
||||
abort("rake aborted!") if ask("#{file} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
|
||||
end
|
||||
puts "Creating new page: #{file}"
|
||||
open(file, 'w') do |page|
|
||||
page.puts "---"
|
||||
page.puts "layout: page"
|
||||
page.puts "title: \"#{title}\""
|
||||
page.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
|
||||
page.puts "comments: true"
|
||||
page.puts "sharing: true"
|
||||
page.puts "footer: true"
|
||||
page.puts "---"
|
||||
end
|
||||
else
|
||||
puts "Syntax error: #{args.filename} contains unsupported characters"
|
||||
end
|
||||
end
|
||||
|
||||
# usage rake isolate[my-post]
|
||||
desc "Move all other posts than the one currently being worked on to a temporary stash location (stash) so regenerating the site happens much more quickly."
|
||||
task :isolate, :filename do |t, args|
|
||||
stash_dir = "#{source_dir}/#{stash_dir}"
|
||||
FileUtils.mkdir(stash_dir) unless File.exist?(stash_dir)
|
||||
Dir.glob("#{source_dir}/#{posts_dir}/*.*") do |post|
|
||||
FileUtils.mv post, stash_dir unless post.include?(args.filename)
|
||||
end
|
||||
end
|
||||
|
||||
desc "Move all stashed posts back into the posts directory, ready for site generation."
|
||||
task :integrate do
|
||||
FileUtils.mv Dir.glob("#{source_dir}/#{stash_dir}/*.*"), "#{source_dir}/#{posts_dir}/"
|
||||
end
|
||||
|
||||
desc "Clean out caches: .pygments-cache, .gist-cache, .sass-cache"
|
||||
task :clean do
|
||||
rm_rf [".pygments-cache/**", ".gist-cache/**", ".sass-cache/**", "source/stylesheets/screen.css"]
|
||||
end
|
||||
|
||||
desc "Move sass to sass.old, install sass theme updates, replace sass/custom with sass.old/custom"
|
||||
task :update_style, :theme do |t, args|
|
||||
theme = args.theme || 'classic'
|
||||
if File.directory?("sass.old")
|
||||
puts "removed existing sass.old directory"
|
||||
rm_r "sass.old", :secure=>true
|
||||
end
|
||||
mv "sass", "sass.old"
|
||||
puts "## Moved styles into sass.old/"
|
||||
cp_r "#{themes_dir}/"+theme+"/sass/", "sass"
|
||||
cp_r "sass/custom/.", "sass.old/custom"
|
||||
puts "## Updated Sass ##"
|
||||
end
|
||||
|
||||
desc "Move source to source.old, install source theme updates, replace source/_includes/navigation.html with source.old's navigation"
|
||||
task :update_source, :theme do |t, args|
|
||||
theme = args.theme || 'classic'
|
||||
if File.directory?("#{source_dir}.old")
|
||||
puts "## Removed existing #{source_dir}.old directory"
|
||||
rm_r "#{source_dir}.old", :secure=>true
|
||||
end
|
||||
mkdir "#{source_dir}.old"
|
||||
cp_r "#{source_dir}/.", "#{source_dir}.old"
|
||||
puts "## Copied #{source_dir} into #{source_dir}.old/"
|
||||
cp_r "#{themes_dir}/"+theme+"/source/.", source_dir, :remove_destination=>true
|
||||
cp_r "#{source_dir}.old/_includes/custom/.", "#{source_dir}/_includes/custom/", :remove_destination=>true
|
||||
cp "#{source_dir}.old/favicon.png", source_dir
|
||||
mv "#{source_dir}/index.html", "#{blog_index_dir}", :force=>true if blog_index_dir != source_dir
|
||||
cp "#{source_dir}.old/index.html", source_dir if blog_index_dir != source_dir && File.exists?("#{source_dir}.old/index.html")
|
||||
puts "## Updated #{source_dir} ##"
|
||||
end
|
||||
|
||||
##############
|
||||
# Deploying #
|
||||
##############
|
||||
|
||||
desc "Default deploy task"
|
||||
task :deploy do
|
||||
# Check if preview posts exist, which should not be published
|
||||
if File.exists?(".preview-mode")
|
||||
puts "## Found posts in preview mode, regenerating files ..."
|
||||
File.delete(".preview-mode")
|
||||
Rake::Task[:generate].execute
|
||||
end
|
||||
|
||||
Rake::Task[:copydot].invoke(source_dir, public_dir)
|
||||
Rake::Task["#{deploy_default}"].execute
|
||||
end
|
||||
|
||||
desc "Generate website and deploy"
|
||||
task :gen_deploy => [:integrate, :generate, :deploy] do
|
||||
end
|
||||
|
||||
desc "copy dot files for deployment"
|
||||
task :copydot, :source, :dest do |t, args|
|
||||
FileList["#{args.source}/**/.*"].exclude("**/.", "**/..", "**/.DS_Store", "**/._*").each do |file|
|
||||
cp_r file, file.gsub(/#{args.source}/, "#{args.dest}") unless File.directory?(file)
|
||||
end
|
||||
end
|
||||
|
||||
desc "Deploy website via rsync"
|
||||
task :rsync do
|
||||
exclude = ""
|
||||
if File.exists?('./rsync-exclude')
|
||||
exclude = "--exclude-from '#{File.expand_path('./rsync-exclude')}'"
|
||||
end
|
||||
puts "## Deploying website via Rsync"
|
||||
ok_failed system("rsync -avze 'ssh -p #{ssh_port}' #{exclude} #{rsync_args} #{"--delete" unless rsync_delete == false} #{public_dir}/ #{ssh_user}:#{document_root}")
|
||||
end
|
||||
|
||||
desc "deploy public directory to github pages"
|
||||
multitask :push do
|
||||
puts "## Deploying branch to Github Pages "
|
||||
puts "## Pulling any updates from Github Pages "
|
||||
cd "#{deploy_dir}" do
|
||||
system "git pull"
|
||||
end
|
||||
(Dir["#{deploy_dir}/*"]).each { |f| rm_rf(f) }
|
||||
Rake::Task[:copydot].invoke(public_dir, deploy_dir)
|
||||
puts "\n## Copying #{public_dir} to #{deploy_dir}"
|
||||
cp_r "#{public_dir}/.", deploy_dir
|
||||
cd "#{deploy_dir}" do
|
||||
system "git add -A"
|
||||
puts "\n## Committing: Site updated at #{Time.now.utc}"
|
||||
message = "Site updated at #{Time.now.utc}"
|
||||
system "git commit -m \"#{message}\""
|
||||
puts "\n## Pushing generated #{deploy_dir} website"
|
||||
system "git push origin #{deploy_branch}"
|
||||
puts "\n## Github Pages deploy complete"
|
||||
end
|
||||
end
|
||||
|
||||
desc "Update configurations to support publishing to root or sub directory"
|
||||
task :set_root_dir, :dir do |t, args|
|
||||
puts ">>> !! Please provide a directory, eg. rake config_dir[publishing/subdirectory]" unless args.dir
|
||||
if args.dir
|
||||
if args.dir == "/"
|
||||
dir = ""
|
||||
else
|
||||
dir = "/" + args.dir.sub(/(\/*)(.+)/, "\\2").sub(/\/$/, '');
|
||||
end
|
||||
rakefile = IO.read(__FILE__)
|
||||
rakefile.sub!(/public_dir(\s*)=(\s*)(["'])[\w\-\/]*["']/, "public_dir\\1=\\2\\3public#{dir}\\3")
|
||||
File.open(__FILE__, 'w') do |f|
|
||||
f.write rakefile
|
||||
end
|
||||
compass_config = IO.read('config.rb')
|
||||
compass_config.sub!(/http_path(\s*)=(\s*)(["'])[\w\-\/]*["']/, "http_path\\1=\\2\\3#{dir}/\\3")
|
||||
compass_config.sub!(/http_images_path(\s*)=(\s*)(["'])[\w\-\/]*["']/, "http_images_path\\1=\\2\\3#{dir}/images\\3")
|
||||
compass_config.sub!(/http_fonts_path(\s*)=(\s*)(["'])[\w\-\/]*["']/, "http_fonts_path\\1=\\2\\3#{dir}/fonts\\3")
|
||||
compass_config.sub!(/css_dir(\s*)=(\s*)(["'])[\w\-\/]*["']/, "css_dir\\1=\\2\\3public#{dir}/stylesheets\\3")
|
||||
File.open('config.rb', 'w') do |f|
|
||||
f.write compass_config
|
||||
end
|
||||
jekyll_config = IO.read('_config.yml')
|
||||
jekyll_config.sub!(/^destination:.+$/, "destination: public#{dir}")
|
||||
jekyll_config.sub!(/^subscribe_rss:\s*\/.+$/, "subscribe_rss: #{dir}/atom.xml")
|
||||
jekyll_config.sub!(/^root:.*$/, "root: /#{dir.sub(/^\//, '')}")
|
||||
File.open('_config.yml', 'w') do |f|
|
||||
f.write jekyll_config
|
||||
end
|
||||
rm_rf public_dir
|
||||
mkdir_p "#{public_dir}#{dir}"
|
||||
puts "## Site's root directory is now '/#{dir.sub(/^\//, '')}' ##"
|
||||
end
|
||||
end
|
||||
|
||||
desc "Set up _deploy folder and deploy branch for Github Pages deployment"
|
||||
task :setup_github_pages, :repo do |t, args|
|
||||
if args.repo
|
||||
repo_url = args.repo
|
||||
else
|
||||
puts "Enter the read/write url for your repository"
|
||||
puts "(For example, 'git@github.com:your_username/your_username.github.io.git)"
|
||||
puts " or 'https://github.com/your_username/your_username.github.io')"
|
||||
repo_url = get_stdin("Repository url: ")
|
||||
end
|
||||
protocol = (repo_url.match(/(^git)@/).nil?) ? 'https' : 'git'
|
||||
if protocol == 'git'
|
||||
user = repo_url.match(/:([^\/]+)/)[1]
|
||||
else
|
||||
user = repo_url.match(/github\.com\/([^\/]+)/)[1]
|
||||
end
|
||||
branch = (repo_url.match(/\/[\w-]+\.github\.(?:io|com)/).nil?) ? 'gh-pages' : 'master'
|
||||
project = (branch == 'gh-pages') ? repo_url.match(/\/([^\.]+)/)[1] : ''
|
||||
unless (`git remote -v` =~ /origin.+?octopress(?:\.git)?/).nil?
|
||||
# If octopress is still the origin remote (from cloning) rename it to octopress
|
||||
system "git remote rename origin octopress"
|
||||
if branch == 'master'
|
||||
# If this is a user/organization pages repository, add the correct origin remote
|
||||
# and checkout the source branch for committing changes to the blog source.
|
||||
system "git remote add origin #{repo_url}"
|
||||
puts "Added remote #{repo_url} as origin"
|
||||
system "git config branch.master.remote origin"
|
||||
puts "Set origin as default remote"
|
||||
system "git branch -m master source"
|
||||
puts "Master branch renamed to 'source' for committing your blog source files"
|
||||
else
|
||||
unless !public_dir.match("#{project}").nil?
|
||||
system "rake set_root_dir[#{project}]"
|
||||
end
|
||||
end
|
||||
end
|
||||
jekyll_config = IO.read('_config.yml')
|
||||
jekyll_config.sub!(/^url:.*$/, "url: #{blog_url(user, project)}")
|
||||
File.open('_config.yml', 'w') do |f|
|
||||
f.write jekyll_config
|
||||
end
|
||||
rm_rf deploy_dir
|
||||
mkdir deploy_dir
|
||||
cd "#{deploy_dir}" do
|
||||
system "git init"
|
||||
system "echo 'My Octopress Page is coming soon …' > index.html"
|
||||
system "git add ."
|
||||
system "git commit -m \"Octopress init\""
|
||||
system "git branch -m gh-pages" unless branch == 'master'
|
||||
system "git remote add origin #{repo_url}"
|
||||
rakefile = IO.read(__FILE__)
|
||||
rakefile.sub!(/deploy_branch(\s*)=(\s*)(["'])[\w-]*["']/, "deploy_branch\\1=\\2\\3#{branch}\\3")
|
||||
rakefile.sub!(/deploy_default(\s*)=(\s*)(["'])[\w-]*["']/, "deploy_default\\1=\\2\\3push\\3")
|
||||
File.open(__FILE__, 'w') do |f|
|
||||
f.write rakefile
|
||||
end
|
||||
end
|
||||
puts "\n---\n## Now you can deploy to #{repo_url} with `rake deploy` ##"
|
||||
end
|
||||
|
||||
def ok_failed(condition)
|
||||
if (condition)
|
||||
puts "OK"
|
||||
else
|
||||
puts "FAILED"
|
||||
end
|
||||
end
|
||||
|
||||
def get_stdin(message)
|
||||
print message
|
||||
STDIN.gets.chomp
|
||||
end
|
||||
|
||||
def ask(message, valid_options)
|
||||
if valid_options
|
||||
answer = get_stdin("#{message} #{valid_options.to_s.gsub(/"/, '').gsub(/, /,'/')} ") while !valid_options.include?(answer)
|
||||
else
|
||||
answer = get_stdin(message)
|
||||
end
|
||||
answer
|
||||
end
|
||||
|
||||
def blog_url(user, project)
|
||||
url = if File.exists?('source/CNAME')
|
||||
"http://#{IO.read('source/CNAME').strip}"
|
||||
else
|
||||
"http://#{user}.github.io"
|
||||
end
|
||||
url += "/#{project}" unless project == ''
|
||||
url
|
||||
end
|
||||
|
||||
desc "list tasks"
|
||||
task :list do
|
||||
puts "Tasks: #{(Rake::Task.tasks - [Rake::Task[:list]]).join(', ')}"
|
||||
puts "(type rake -T for more detail)\n\n"
|
||||
end
|
||||
@ -0,0 +1,83 @@
|
||||
# ----------------------- #
|
||||
# Main Configs #
|
||||
# ----------------------- #
|
||||
|
||||
url: http://nvd3.org/
|
||||
title: NVD3
|
||||
# subtitle:
|
||||
author: Novus Partners
|
||||
# simple_search: https://www.google.com/search
|
||||
description:
|
||||
|
||||
# Default date format is "ordinal" (resulting in "July 22nd 2007")
|
||||
# You can customize the format as defined in
|
||||
# http://www.ruby-doc.org/core-1.9.2/Time.html#method-i-strftime
|
||||
# Additionally, %o will give you the ordinal representation of the day
|
||||
date_format: "ordinal"
|
||||
|
||||
# RSS / Email (optional) subscription links (change if using something like Feedburner)
|
||||
subscribe_rss: /atom.xml
|
||||
subscribe_email:
|
||||
# RSS feeds can list your email address if you like
|
||||
email:
|
||||
|
||||
# ----------------------- #
|
||||
# Jekyll & Plugins #
|
||||
# ----------------------- #
|
||||
|
||||
# If publishing to a subdirectory as in http://site.com/project set 'root: /project'
|
||||
root: /
|
||||
permalink: /blog/:year/:month/:title/
|
||||
source: source
|
||||
destination: public
|
||||
plugins: plugins
|
||||
code_dir: downloads/code
|
||||
category_dir: blog/categories
|
||||
markdown: rdiscount
|
||||
rdiscount:
|
||||
extensions:
|
||||
- autolink
|
||||
- footnotes
|
||||
- smart
|
||||
pygments: false # default python pygments have been replaced by pygments.rb
|
||||
|
||||
paginate: 10 # Posts per page on the blog index
|
||||
pagination_dir: blog # Directory base for pagination URLs eg. /blog/page/2/
|
||||
recent_posts: 5 # Posts in the sidebar Recent Posts section
|
||||
excerpt_link: "Read on →" # "Continue reading" link text at the bottom of excerpted articles
|
||||
|
||||
titlecase: true # Converts page and post titles to titlecase
|
||||
|
||||
# list each of the sidebar modules you want to include, in the order you want them to appear.
|
||||
# To add custom asides, create files in /source/_includes/custom/asides/ and add them to the list like 'custom/asides/custom_aside_name.html'
|
||||
default_asides: [asides/recent_posts.html, asides/github.html ]
|
||||
|
||||
# Each layout uses the default asides, but they can have their own asides instead. Simply uncomment the lines below
|
||||
# and add an array with the asides you want to use.
|
||||
# blog_index_asides:
|
||||
# post_asides:
|
||||
# page_asides:
|
||||
|
||||
# ----------------------- #
|
||||
# 3rd Party Settings #
|
||||
# ----------------------- #
|
||||
|
||||
# Github repositories
|
||||
github_user:
|
||||
github_repo_count: 0
|
||||
github_show_profile_link: true
|
||||
github_skip_forks: true
|
||||
|
||||
# Twitter
|
||||
twitter_user:
|
||||
twitter_tweet_button: true
|
||||
|
||||
# Google +1
|
||||
google_plus_one: true
|
||||
google_plus_one_size: medium
|
||||
|
||||
# Google Analytics
|
||||
google_analytics_tracking_id: UA-33058059-1
|
||||
|
||||
# Facebook Like
|
||||
facebook_like: false
|
||||
@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "nvd3",
|
||||
"version": "1.1.15-beta",
|
||||
"homepage": "http://www.nvd3.org",
|
||||
"authors": [
|
||||
"Bob Monteverde",
|
||||
"Tyler Wolf",
|
||||
"Robin Hu",
|
||||
"Frank Shao"
|
||||
],
|
||||
"description": "Re-usable charts and chart components for d3.",
|
||||
"main": ["nv.d3.js", "src/nv.d3.css"],
|
||||
"keywords": [
|
||||
"d3",
|
||||
"visualization",
|
||||
"svg",
|
||||
"charts"
|
||||
],
|
||||
"license": "Apache License, v2.0",
|
||||
"dependencies": {
|
||||
"d3": "~3.3.13"
|
||||
},
|
||||
"ignore" : [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests",
|
||||
"src/models/*",
|
||||
"src/*.js",
|
||||
"lib",
|
||||
"examples",
|
||||
"deprecated"
|
||||
]
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
@echo off
|
||||
copy src\intro.js /B + src\core.js /B + src\tooltip.js /B temp1.js /B
|
||||
copy src\models\*.js /B temp2.js /B
|
||||
copy temp1.js /B + temp2.js /B + src\outro.js /B nv.d3.js /B
|
||||
del temp1.js
|
||||
del temp2.js
|
||||
@ -0,0 +1,19 @@
|
||||
require 'sass-globbing'
|
||||
|
||||
# Require any additional compass plugins here.
|
||||
project_type = :stand_alone
|
||||
|
||||
# Publishing paths
|
||||
http_path = "/"
|
||||
http_images_path = "/images"
|
||||
http_generated_images_path = "/images"
|
||||
http_fonts_path = "/fonts"
|
||||
css_dir = "public/stylesheets"
|
||||
|
||||
# Local development paths
|
||||
sass_dir = "sass"
|
||||
images_dir = "source/images"
|
||||
fonts_dir = "source/fonts"
|
||||
|
||||
line_comments = false
|
||||
output_style = :compressed
|
||||
@ -0,0 +1,25 @@
|
||||
require 'bundler/setup'
|
||||
require 'sinatra/base'
|
||||
|
||||
# The project root directory
|
||||
$root = ::File.dirname(__FILE__)
|
||||
|
||||
class SinatraStaticServer < Sinatra::Base
|
||||
|
||||
get(/.+/) do
|
||||
send_sinatra_file(request.path) {404}
|
||||
end
|
||||
|
||||
not_found do
|
||||
send_file(File.join(File.dirname(__FILE__), 'public', '404.html'), {:status => 404})
|
||||
end
|
||||
|
||||
def send_sinatra_file(path, &missing_file_block)
|
||||
file_path = File.join(File.dirname(__FILE__), 'public', path)
|
||||
file_path = File.join(file_path, 'index.html') unless file_path =~ /\.[a-z]+$/i
|
||||
File.exist?(file_path) ? send_file(file_path) : missing_file_block.call
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
run SinatraStaticServer
|
||||
@ -1,198 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<svg id="test1"></svg>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/models/bar.js"></script>
|
||||
<script>
|
||||
|
||||
var testdata = [
|
||||
{
|
||||
label: "One is a very long",
|
||||
y: 5
|
||||
},
|
||||
{
|
||||
label: "Two is also very long",
|
||||
y: 2
|
||||
},
|
||||
{
|
||||
label: "Three",
|
||||
y: 9
|
||||
},
|
||||
{
|
||||
label: "Four",
|
||||
y: 7
|
||||
},
|
||||
{
|
||||
label: "Five",
|
||||
y: 4
|
||||
},
|
||||
{
|
||||
label: "Six",
|
||||
y: 3
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
var testdata2 = [
|
||||
{
|
||||
label: "One is a very long",
|
||||
y: 1
|
||||
},
|
||||
{
|
||||
label: "Two is also very long",
|
||||
y: 12
|
||||
},
|
||||
{
|
||||
label: "Three",
|
||||
y: -9
|
||||
},
|
||||
{
|
||||
label: "Four",
|
||||
y: 4
|
||||
},
|
||||
{
|
||||
label: "Five",
|
||||
y: 6
|
||||
}
|
||||
];
|
||||
|
||||
var td = 0;
|
||||
var a = (Math.random()*10)+1;
|
||||
if (a > 5) td = 1;
|
||||
|
||||
//Format A
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
var chart = nv.models.bar()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.labelField('label')
|
||||
.dataField('y')
|
||||
.showLabels(true)
|
||||
.title("This is a sample chart title")
|
||||
;
|
||||
|
||||
if (td === 0) {
|
||||
d3.select("#test1")
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(testdata)
|
||||
.call(chart);
|
||||
} else {
|
||||
d3.select("#test1")
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(testdata2)
|
||||
.call(chart);
|
||||
}
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
|
||||
graph.dispatch.on('tooltipShow', function(e) {
|
||||
var offsetElement = document.getElementById("chart"),
|
||||
left = e.pos[0],
|
||||
top = e.pos[1];
|
||||
|
||||
var content = '<h3>' + e.label + '</h3>' +
|
||||
'<p>' +
|
||||
e.value +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
});
|
||||
|
||||
graph.dispatch.on('tooltipHide', function(e) {
|
||||
nv.tooltip.cleanup();
|
||||
});
|
||||
|
||||
graph.dispatch.on('elementClick', function(e) {
|
||||
console.log("Bar Click",e);
|
||||
});
|
||||
|
||||
graph.dispatch.on('chartClick', function(e) {
|
||||
console.log("Chart Click",e);
|
||||
});
|
||||
|
||||
graph.dispatch.on('chartClick', function(e) {
|
||||
console.log('Click Switching to');
|
||||
if (td === 0) {
|
||||
d3.select("#test1")
|
||||
.datum(testdata2)
|
||||
.call(graph);
|
||||
td = 1;
|
||||
|
||||
} else {
|
||||
d3.select("#test1")
|
||||
.datum(testdata)
|
||||
.call(graph);
|
||||
td = 0;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
window.onresize = function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
d3.select("#test1")
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(
|
||||
graph
|
||||
.width(width)
|
||||
.height(height)
|
||||
)
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
//Format B
|
||||
nv.addGraph(function() {
|
||||
var selection = d3.select("body")
|
||||
.datum(irwinHallDistribution(10000, 10));
|
||||
|
||||
var chart = nv.models.histogram()
|
||||
.bins(d3.scale.linear().ticks(20))
|
||||
.tickFormat(d3.format(".02f"));
|
||||
|
||||
chart(selection);
|
||||
|
||||
return chart;
|
||||
}, function(g) { console.log(g.width(), g.height()) })
|
||||
|
||||
//Format C
|
||||
nv.addGraph(function() {
|
||||
return nv.models.histogram()
|
||||
.bins(d3.scale.linear().ticks(20))
|
||||
.tickFormat(d3.format(".02f"))(
|
||||
d3.select("body")
|
||||
.datum(irwinHallDistribution(10000, 10))
|
||||
);
|
||||
}, function(g) { console.log(g.width(), g.height()) })
|
||||
*/
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,250 +0,0 @@
|
||||
|
||||
nv.models.bar = function() {
|
||||
var margin = {top: 20, right: 10, bottom: 80, left: 60},
|
||||
width = 960,
|
||||
height = 500,
|
||||
animate = 500,
|
||||
label ='label',
|
||||
rotatedLabel = true,
|
||||
showLabels = true,
|
||||
id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
|
||||
color = d3.scale.category20(),
|
||||
field ='y',
|
||||
title = '';
|
||||
|
||||
var x = d3.scale.ordinal(),
|
||||
y = d3.scale.linear(),
|
||||
xAxis = d3.svg.axis().scale(x).orient('bottom'),
|
||||
yAxis = d3.svg.axis().scale(y).orient('left'),
|
||||
dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
x .domain(data.map(function(d,i) { return d[label]; }))
|
||||
.rangeRoundBands([0, width - margin.left - margin.right], .1);
|
||||
|
||||
|
||||
var min = d3.min(data, function(d) { return d[field] });
|
||||
var max = d3.max(data, function(d) { return d[field] });
|
||||
var x0 = Math.max(-min, max);
|
||||
var x1 = -x0;
|
||||
|
||||
// If we have no negative values, then lets stack this with just positive bars
|
||||
if (min >= 0) x1 = 0;
|
||||
|
||||
y .domain([x1, x0])
|
||||
.range([height - margin.top - margin.bottom, 0])
|
||||
.nice();
|
||||
|
||||
xAxis.ticks( width / 100 );
|
||||
yAxis.ticks( height / 36 ).tickSize(-(width - margin.right - margin.left), 0);
|
||||
|
||||
var parent = d3.select(this)
|
||||
.on("click", function(d,i) {
|
||||
dispatch.chartClick({
|
||||
data: d,
|
||||
index: i,
|
||||
pos: d3.event,
|
||||
id: id
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var wrap = parent.selectAll('g.wrap').data([data]);
|
||||
var gEnter = wrap.enter();
|
||||
gEnter.append("text")
|
||||
.attr("class", "title")
|
||||
.attr("dy", ".91em")
|
||||
.attr("text-anchor", "start")
|
||||
.text(title);
|
||||
gEnter = gEnter.append('g').attr('class', 'nvd3 wrap').attr('id','wrap-'+id).append('g');
|
||||
|
||||
|
||||
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'bars');
|
||||
|
||||
|
||||
wrap.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
var g = wrap.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
var bars = wrap.select('.bars').selectAll('.bar')
|
||||
.data(function(d) { return d; });
|
||||
|
||||
bars.exit().remove();
|
||||
|
||||
|
||||
var barsEnter = bars.enter().append('svg:rect')
|
||||
.attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
|
||||
.attr("fill", function(d, i) { return color(i); })
|
||||
.attr('x', 0 )
|
||||
.on('mouseover', function(d,i){
|
||||
d3.select(this).classed('hover', true);
|
||||
dispatch.tooltipShow({
|
||||
label: d[label],
|
||||
value: d[field],
|
||||
data: d,
|
||||
index: i,
|
||||
// TODO: Calculate the center to the bar
|
||||
pos: [d3.event.pageX, d3.event.pageY],
|
||||
id: id
|
||||
});
|
||||
|
||||
})
|
||||
.on('mouseout', function(d,i){
|
||||
d3.select(this).classed('hover', false);
|
||||
dispatch.tooltipHide({
|
||||
label: d[label],
|
||||
value: d[field],
|
||||
data: d,
|
||||
index: i,
|
||||
id: id
|
||||
});
|
||||
})
|
||||
.on('click', function(d,i) {
|
||||
dispatch.elementClick({
|
||||
label: d[label],
|
||||
value: d[field],
|
||||
data: d,
|
||||
index: i,
|
||||
pos: d3.event,
|
||||
id: id
|
||||
});
|
||||
d3.event.stopPropagation();
|
||||
})
|
||||
.on('dblclick', function(d,i) {
|
||||
dispatch.elementDblClick({
|
||||
label: d[label],
|
||||
value: d[field],
|
||||
data: d,
|
||||
index: i,
|
||||
pos: d3.event,
|
||||
id: id
|
||||
});
|
||||
d3.event.stopPropagation();
|
||||
});
|
||||
|
||||
|
||||
bars
|
||||
.attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
|
||||
.attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; })
|
||||
.attr('width', x.rangeBand )
|
||||
.order()
|
||||
.transition()
|
||||
.duration(animate)
|
||||
.attr('y', function(d) { return y(Math.max(0, d[field])); })
|
||||
.attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
|
||||
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')')
|
||||
.call(xAxis);
|
||||
|
||||
|
||||
if (rotatedLabel) {
|
||||
g.select('.x.axis').selectAll('text').attr('text-anchor','start').attr("transform", function(d) {
|
||||
return "rotate(35)translate(" + this.getBBox().height/2 + "," + '0' + ")";
|
||||
});
|
||||
}
|
||||
if (!showLabels) {
|
||||
g.select('.x.axis').selectAll('text').attr('fill', 'rgba(0,0,0,0)');
|
||||
g.select('.x.axis').selectAll('line').attr('style', 'opacity: 0');
|
||||
}
|
||||
/*else {
|
||||
g.select('.x.axis').selectAll('text').attr('fill', 'rgba(0,0,0,1)');
|
||||
g.select('.x.axis').selectAll('line').attr('style', 'opacity: 1');
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
g.select('.y.axis')
|
||||
.call(yAxis);
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
if (margin.left + margin.right + 20 > _)
|
||||
width = margin.left + margin.right + 20; // Min width
|
||||
else
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
if (margin.top + margin.bottom + 20 > _)
|
||||
height = margin.top + margin.bottom + 20; // Min height
|
||||
else
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.animate = function(_) {
|
||||
if (!arguments.length) return animate;
|
||||
animate = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.labelField = function(_) {
|
||||
if (!arguments.length) return (label);
|
||||
label = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.dataField = function(_) {
|
||||
if (!arguments.length) return (field);
|
||||
field = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.id = function(_) {
|
||||
if (!arguments.length) return id;
|
||||
id = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.rotatedLabel = function(_) {
|
||||
if (!arguments.length) return rotatedLabel;
|
||||
rotatedLabel = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showLabels = function(_) {
|
||||
if (!arguments.length) return (showLabels);
|
||||
showLabels = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.title = function(_) {
|
||||
if (!arguments.length) return (title);
|
||||
title = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xaxis = {};
|
||||
// Expose the x-axis' tickFormat method.
|
||||
d3.rebind(chart.xaxis, xAxis, 'tickFormat');
|
||||
|
||||
chart.yaxis = {};
|
||||
// Expose the y-axis' tickFormat method.
|
||||
d3.rebind(chart.yaxis, yAxis, 'tickFormat');
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,174 +0,0 @@
|
||||
|
||||
// This technique works AS IS for month end data points
|
||||
// In fact, this works for any series where each value is evenly spaced,
|
||||
// and every series starts at the same value and is 1 to 1
|
||||
// In other words, values at the same index, need to have the same x value
|
||||
// for all series
|
||||
//
|
||||
// TODO: now that tooltips don't use jquery, could likely get rid of the charts
|
||||
// collection by simply adding some optional functionality to the model
|
||||
nv.charts.cumulativeLineChartDaily = function() {
|
||||
var selector = null,
|
||||
data = [],
|
||||
duration = 500,
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + key + '</h3>' +
|
||||
'<p>' + y + ' at ' + x + '</p>'
|
||||
};
|
||||
|
||||
|
||||
var graph = nv.models.cumulativeLine()
|
||||
.x(function(d,i) { return i })
|
||||
.color(d3.scale.category10().range()),
|
||||
showTooltip = function(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatX = graph.xAxis.tickFormat(),
|
||||
formatY = graph.yAxis.tickFormat(),
|
||||
x = formatX(graph.x()(e, e.pointIndex)),
|
||||
//x = formatX(graph.x()(e.point)),
|
||||
y = formatY(graph.y()(e.point)),
|
||||
content = tooltip(e.series.key, x, y, e, graph);
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
};
|
||||
|
||||
//setting component defaults
|
||||
//graph.xAxis.tickFormat(d3.format(',r'));
|
||||
graph.xAxis.tickFormat(function(d) {
|
||||
//return d3.time.format('%x')(new Date(d))
|
||||
return d3.time.format('%x')(new Date(data[0].values[d].x))
|
||||
});
|
||||
|
||||
//graph.yAxis.tickFormat(d3.format(',.2f'));
|
||||
graph.yAxis.tickFormat(d3.format(',.2%'));
|
||||
|
||||
|
||||
//TODO: consider a method more similar to how the models are built
|
||||
function chart() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
d3.select(selector).select('svg')
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph); //consider using transition chaining like in the models
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
// This should always only be called once, then update should be used after,
|
||||
// in which case should consider the 'd3 way' and merge this with update,
|
||||
// but simply do this on enter... will try another example the d3 way
|
||||
chart.build = function() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph);
|
||||
|
||||
return graph;
|
||||
},
|
||||
callback: function(graph) {
|
||||
graph.dispatch.on('tooltipShow', showTooltip);
|
||||
graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
//TODO: fix issue of multiple graphs failing on resize
|
||||
//TODO: create resize queue and have nv core handle resize instead of binding all to window resize
|
||||
window.onresize =
|
||||
function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
d3.select(selector + ' svg')
|
||||
.attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', graph.height()())
|
||||
.call(graph);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
// moved to chart()
|
||||
chart.update = function() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
d3.select(selector).select('svg')
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph);
|
||||
|
||||
return chart;
|
||||
};
|
||||
*/
|
||||
|
||||
chart.data = function(_) {
|
||||
if (!arguments.length) return data;
|
||||
data = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.selector = function(_) {
|
||||
if (!arguments.length) return selector;
|
||||
selector = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.duration = function(_) {
|
||||
if (!arguments.length) return duration;
|
||||
duration = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltip = function(_) {
|
||||
if (!arguments.length) return tooltip;
|
||||
tooltip = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xTickFormat = function(_) {
|
||||
if (!arguments.length) return graph.xAxis.tickFormat();
|
||||
graph.xAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yTickFormat = function(_) {
|
||||
if (!arguments.length) return graph.yAxis.tickFormat();
|
||||
graph.yAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xAxisLabel = function(_) {
|
||||
if (!arguments.length) return graph.xAxis.axisLabel();
|
||||
graph.xAxis.axisLabel(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yAxisLabel = function(_) {
|
||||
if (!arguments.length) return graph.yAxis.axisLabel();
|
||||
graph.yAxis.axisLabel(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
d3.rebind(chart, graph, 'x', 'y');
|
||||
|
||||
chart.graph = graph; // Give direct access for getter/setters, and dispatchers
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
@ -1,157 +0,0 @@
|
||||
|
||||
nv.charts.discreteBar = function() {
|
||||
var selector = null,
|
||||
data = [],
|
||||
duration = 500,
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + x + '</h3>' +
|
||||
'<p>' + y + '</p>'
|
||||
};
|
||||
|
||||
|
||||
var graph = nv.models.discreteBarWithAxes(),
|
||||
showTooltip = function(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatY = graph.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
|
||||
formatX = graph.xAxis.tickFormat(),
|
||||
x = formatX(graph.x()(e.point)),
|
||||
y = formatY(graph.y()(e.point)),
|
||||
content = tooltip(e.series.key, x, y, e, graph);
|
||||
|
||||
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
|
||||
};
|
||||
|
||||
//setting component defaults
|
||||
graph.xAxis.tickFormat(function(d) { return d });
|
||||
graph.yAxis.tickFormat(d3.format(',.f'));
|
||||
|
||||
|
||||
//TODO: consider a method more similar to how the models are built
|
||||
function chart() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
d3.select(selector).select('svg')
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph); //consider using transition chaining like in the models
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
// This should always only be called once, then update should be used after,
|
||||
// in which case should consider the 'd3 way' and merge this with update,
|
||||
// but simply do this on enter... should try anoter example that way
|
||||
chart.build = function() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph);
|
||||
|
||||
return graph;
|
||||
},
|
||||
callback: function(graph) {
|
||||
graph.dispatch.on('tooltipShow', showTooltip);
|
||||
graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
//TODO: create resize queue and have nv core handle resize instead of binding all to window resize
|
||||
nv.utils.windowResize(
|
||||
function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
d3.select(selector + ' svg')
|
||||
.attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', graph.height()())
|
||||
.transition().duration(duration).call(graph);
|
||||
//.call(graph);
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
// moved to chart()
|
||||
chart.update = function() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
d3.select(selector).select('svg')
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph);
|
||||
|
||||
return chart;
|
||||
};
|
||||
*/
|
||||
|
||||
chart.data = function(_) {
|
||||
if (!arguments.length) return data;
|
||||
data = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.selector = function(_) {
|
||||
if (!arguments.length) return selector;
|
||||
selector = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.duration = function(_) {
|
||||
if (!arguments.length) return duration;
|
||||
duration = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltip = function(_) {
|
||||
if (!arguments.length) return tooltip;
|
||||
tooltip = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xTickFormat = function(_) {
|
||||
if (!arguments.length) return graph.xAxis.tickFormat();
|
||||
graph.xAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yTickFormat = function(_) {
|
||||
if (!arguments.length) return graph.yAxis.tickFormat();
|
||||
graph.yAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xAxisLabel = function(_) {
|
||||
if (!arguments.length) return graph.xAxis.axisLabel();
|
||||
graph.xAxis.axisLabel(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yAxisLabel = function(_) {
|
||||
if (!arguments.length) return graph.yAxis.axisLabel();
|
||||
graph.yAxis.axisLabel(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
d3.rebind(chart, graph, 'x', 'y', 'staggerLabels');
|
||||
|
||||
chart.graph = graph; // Give direct access for getter/setters, and dispatchers
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
@ -1,159 +0,0 @@
|
||||
|
||||
// This is an attempt to make an extremely easy to use chart that is ready to go,
|
||||
// basically the chart models with the extra glue... Queuing, tooltips, automatic resize, etc.
|
||||
// I may make these more specific, like 'time series line with month end data points', etc.
|
||||
// or may make yet another layer of abstraction... common settings.
|
||||
nv.charts.line = function() {
|
||||
var selector = null,
|
||||
data = [],
|
||||
duration = 500,
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + key + '</h3>' +
|
||||
'<p>' + y + ' at ' + x + '</p>'
|
||||
};
|
||||
|
||||
|
||||
var graph = nv.models.lineWithLegend(),
|
||||
showTooltip = function(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatX = graph.xAxis.tickFormat(),
|
||||
formatY = graph.yAxis.tickFormat(),
|
||||
x = formatX(graph.x()(e.point)),
|
||||
y = formatY(graph.y()(e.point)),
|
||||
content = tooltip(e.series.key, x, y, e, graph);
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
};
|
||||
|
||||
//setting component defaults
|
||||
graph.xAxis.tickFormat(d3.format(',r'));
|
||||
graph.yAxis.tickFormat(d3.format(',.2f'));
|
||||
|
||||
|
||||
//TODO: consider a method more similar to how the models are built
|
||||
function chart() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
d3.select(selector).select('svg')
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph); //consider using transition chaining like in the models
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
// This should always only be called once, then update should be used after,
|
||||
// in which case should consider the 'd3 way' and merge this with update,
|
||||
// but simply do this on enter... should try anoter example that way
|
||||
chart.build = function() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph);
|
||||
|
||||
return graph;
|
||||
},
|
||||
callback: function(graph) {
|
||||
graph.dispatch.on('tooltipShow', showTooltip);
|
||||
graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
//TODO: create resize queue and have nv core handle resize instead of binding all to window resize
|
||||
window.onresize =
|
||||
function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
d3.select(selector + ' svg')
|
||||
.attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', graph.height()())
|
||||
.call(graph);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
// moved to chart()
|
||||
chart.update = function() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
d3.select(selector).select('svg')
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph);
|
||||
|
||||
return chart;
|
||||
};
|
||||
*/
|
||||
|
||||
chart.data = function(_) {
|
||||
if (!arguments.length) return data;
|
||||
data = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.selector = function(_) {
|
||||
if (!arguments.length) return selector;
|
||||
selector = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.duration = function(_) {
|
||||
if (!arguments.length) return duration;
|
||||
duration = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltip = function(_) {
|
||||
if (!arguments.length) return tooltip;
|
||||
tooltip = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xTickFormat = function(_) {
|
||||
if (!arguments.length) return graph.xAxis.tickFormat();
|
||||
graph.xAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yTickFormat = function(_) {
|
||||
if (!arguments.length) return graph.yAxis.tickFormat();
|
||||
graph.yAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xAxisLabel = function(_) {
|
||||
if (!arguments.length) return graph.xAxis.axisLabel();
|
||||
graph.xAxis.axisLabel(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yAxisLabel = function(_) {
|
||||
if (!arguments.length) return graph.yAxis.axisLabel();
|
||||
graph.yAxis.axisLabel(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
d3.rebind(chart, graph, 'x', 'y');
|
||||
|
||||
chart.graph = graph; // Give direct access for getter/setters, and dispatchers
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
@ -1,168 +0,0 @@
|
||||
|
||||
// This is an attempt to make an extremely easy to use chart that is ready to go,
|
||||
// basically the chart models with the extra glue... Queuing, tooltips, automatic resize, etc.
|
||||
// I may make these more specific, like 'time series line with month end data points', etc.
|
||||
// or may make yet another layer of abstraction... common settings.
|
||||
nv.charts.lineChartDaily = function() {
|
||||
var selector = null,
|
||||
data = [],
|
||||
duration = 500,
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + key + '</h3>' +
|
||||
'<p>' + y + ' at ' + x + '</p>'
|
||||
};
|
||||
|
||||
|
||||
var graph = nv.models.lineWithLegend()
|
||||
.x(function(d,i) { return i }),
|
||||
showTooltip = function(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatX = graph.xAxis.tickFormat(),
|
||||
formatY = graph.yAxis.tickFormat(),
|
||||
x = formatX(graph.x()(e, e.pointIndex)),
|
||||
//x = formatX(graph.x()(e.point)),
|
||||
y = formatY(graph.y()(e.point)),
|
||||
content = tooltip(e.series.key, x, y, e, graph);
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
};
|
||||
|
||||
//setting component defaults
|
||||
//graph.xAxis.tickFormat(d3.format(',r'));
|
||||
graph.xAxis.tickFormat(function(d) {
|
||||
//return d3.time.format('%x')(new Date(d))
|
||||
//log(d, data[0].values[d]);
|
||||
return d3.time.format('%x')(new Date(data[0].values[d].x))
|
||||
});
|
||||
|
||||
//graph.yAxis.tickFormat(d3.format(',.2f'));
|
||||
graph.yAxis.tickFormat(d3.format(',.2%'));
|
||||
|
||||
|
||||
//TODO: consider a method more similar to how the models are built
|
||||
function chart() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
d3.select(selector).select('svg')
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph); //consider using transition chaining like in the models
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
// This should always only be called once, then update should be used after,
|
||||
// in which case should consider the 'd3 way' and merge this with update,
|
||||
// but simply do this on enter... should try anoter example that way
|
||||
chart.build = function() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph);
|
||||
|
||||
return graph;
|
||||
},
|
||||
callback: function(graph) {
|
||||
graph.dispatch.on('tooltipShow', showTooltip);
|
||||
graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
//TODO: create resize queue and have nv core handle resize instead of binding all to window resize
|
||||
window.onresize =
|
||||
function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
d3.select(selector + ' svg')
|
||||
.attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', graph.height()())
|
||||
.call(graph);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
// moved to chart()
|
||||
chart.update = function() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
d3.select(selector).select('svg')
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph);
|
||||
|
||||
return chart;
|
||||
};
|
||||
*/
|
||||
|
||||
chart.data = function(_) {
|
||||
if (!arguments.length) return data;
|
||||
data = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.selector = function(_) {
|
||||
if (!arguments.length) return selector;
|
||||
selector = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.duration = function(_) {
|
||||
if (!arguments.length) return duration;
|
||||
duration = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltip = function(_) {
|
||||
if (!arguments.length) return tooltip;
|
||||
tooltip = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xTickFormat = function(_) {
|
||||
if (!arguments.length) return graph.xAxis.tickFormat();
|
||||
graph.xAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yTickFormat = function(_) {
|
||||
if (!arguments.length) return graph.yAxis.tickFormat();
|
||||
graph.yAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xAxisLabel = function(_) {
|
||||
if (!arguments.length) return graph.xAxis.axisLabel();
|
||||
graph.xAxis.axisLabel(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yAxisLabel = function(_) {
|
||||
if (!arguments.length) return graph.yAxis.axisLabel();
|
||||
graph.yAxis.axisLabel(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
d3.rebind(chart, graph, 'x', 'y');
|
||||
|
||||
chart.graph = graph; // Give direct access for getter/setters, and dispatchers
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
@ -1,177 +0,0 @@
|
||||
|
||||
/***
|
||||
* This chart treats the X position as the INDEX, not the value
|
||||
* Each series at the same index MUST be the same x value for a valid representation
|
||||
* This is needed specifically for daily data where the gap between Friday and Monday
|
||||
* should be equal to the gap from Monday to Tuesday. (and of course, holidays can be
|
||||
* omitted without issue, as long as ALL series omit the same days).
|
||||
* An intentional side effect is that ALL ticks will land on actual data points,
|
||||
* so this visualization can also be used for Month End data points, showing Month End
|
||||
* ticks on the X axis
|
||||
***/
|
||||
|
||||
nv.charts.stackedAreaChart = function() {
|
||||
var selector = null,
|
||||
data = [],
|
||||
duration = 500,
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + key + '</h3>' +
|
||||
'<p>' + y + ' at ' + x + '</p>'
|
||||
};
|
||||
|
||||
|
||||
var graph = nv.models.stackedAreaWithLegend()
|
||||
.x(function(d,i) { return i }),
|
||||
showTooltip = function(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatX = graph.xAxis.tickFormat(),
|
||||
formatY = graph.yAxis.tickFormat(),
|
||||
x = formatX(graph.x()(e, e.pointIndex)),
|
||||
//x = formatX(graph.x()(e.point)),
|
||||
y = formatY(graph.y()(e.point)),
|
||||
content = tooltip(e.series.key, x, y, e, graph);
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
};
|
||||
|
||||
//setting component defaults
|
||||
//graph.xAxis.tickFormat(d3.format(',r'));
|
||||
graph.xAxis.tickFormat(function(d) {
|
||||
//return d3.time.format('%x')(new Date(d))
|
||||
//log(d, data[0].values[d]);
|
||||
return d3.time.format('%x')(new Date(data[0].values[d].x))
|
||||
});
|
||||
|
||||
//graph.yAxis.tickFormat(d3.format(',.2f'));
|
||||
graph.yAxis.tickFormat(d3.format(',.2%'));
|
||||
|
||||
|
||||
//TODO: consider a method more similar to how the models are built
|
||||
function chart() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
d3.select(selector).select('svg')
|
||||
.datum(data)
|
||||
.transition().duration(duration)
|
||||
.call(graph); //consider using transition chaining like in the models
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
// This should always only be called once, then update should be used after,
|
||||
// in which case should consider the 'd3 way' and merge this with update,
|
||||
// but simply do this on enter... should try anoter example that way
|
||||
chart.build = function() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration)
|
||||
.call(graph);
|
||||
|
||||
return graph;
|
||||
},
|
||||
callback: function(graph) {
|
||||
graph.dispatch.on('tooltipShow', showTooltip);
|
||||
graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
//TODO: create resize queue and have nv core handle resize instead of binding all to window resize
|
||||
window.onresize =
|
||||
function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
d3.select(selector + ' svg')
|
||||
.attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', graph.height()())
|
||||
.call(graph);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
// moved to chart()
|
||||
chart.update = function() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
d3.select(selector).select('svg')
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph);
|
||||
|
||||
return chart;
|
||||
};
|
||||
*/
|
||||
|
||||
chart.data = function(_) {
|
||||
if (!arguments.length) return data;
|
||||
data = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.selector = function(_) {
|
||||
if (!arguments.length) return selector;
|
||||
selector = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.duration = function(_) {
|
||||
if (!arguments.length) return duration;
|
||||
duration = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltip = function(_) {
|
||||
if (!arguments.length) return tooltip;
|
||||
tooltip = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xTickFormat = function(_) {
|
||||
if (!arguments.length) return graph.xAxis.tickFormat();
|
||||
graph.xAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yTickFormat = function(_) {
|
||||
if (!arguments.length) return graph.yAxis.tickFormat();
|
||||
graph.yAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xAxisLabel = function(_) {
|
||||
if (!arguments.length) return graph.xAxis.axisLabel();
|
||||
graph.xAxis.axisLabel(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yAxisLabel = function(_) {
|
||||
if (!arguments.length) return graph.yAxis.axisLabel();
|
||||
graph.yAxis.axisLabel(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
d3.rebind(chart, graph, 'x', 'y');
|
||||
|
||||
chart.graph = graph; // Give direct access for getter/setters, and dispatchers
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
@ -1,171 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="test1">
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/cumulativeLine.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
var cumulativeMonthEndTestData = [
|
||||
{
|
||||
key: "Long",
|
||||
values: [ [ 1025409600000 , 0] , [ 1028088000000 , -6.3382185140371] , [ 1030766400000 , -5.9507873460847] , [ 1033358400000 , -11.569146943813] , [ 1036040400000 , -5.4767332317425] , [ 1038632400000 , 0.50794682203014] , [ 1041310800000 , -5.5310285460542] , [ 1043989200000 , -5.7838296963382] , [ 1046408400000 , -7.3249341615649] , [ 1049086800000 , -6.7078630712489] , [ 1051675200000 , 0.44227126150934] , [ 1054353600000 , 7.2481659343222] , [ 1056945600000 , 9.2512381306992] , [ 1059624000000 , 11.341210982529] , [ 1062302400000 , 14.734820409020] , [ 1064894400000 , 12.387148007542] , [ 1067576400000 , 18.436471461827] , [ 1070168400000 , 19.830742266977] , [ 1072846800000 , 22.643205829887] , [ 1075525200000 , 26.743156781239] , [ 1078030800000 , 29.597478802228] , [ 1080709200000 , 30.831697585341] , [ 1083297600000 , 28.054068024708] , [ 1085976000000 , 29.294079423832] , [ 1088568000000 , 30.269264061274] , [ 1091246400000 , 24.934526898906] , [ 1093924800000 , 24.265982759406] , [ 1096516800000 , 27.217794897473] , [ 1099195200000 , 30.802601992077] , [ 1101790800000 , 36.331003758254] , [ 1104469200000 , 43.142498700060] , [ 1107147600000 , 40.558263931958] , [ 1109566800000 , 42.543622385800] , [ 1112245200000 , 41.683584710331] , [ 1114833600000 , 36.375367302328] , [ 1117512000000 , 40.719688980730] , [ 1120104000000 , 43.897963036919] , [ 1122782400000 , 49.797033975368] , [ 1125460800000 , 47.085993935989] , [ 1128052800000 , 46.601972859745] , [ 1130734800000 , 41.567784572762] , [ 1133326800000 , 47.296923737245] , [ 1136005200000 , 47.642969612080] , [ 1138683600000 , 50.781515820954] , [ 1141102800000 , 52.600229204305] , [ 1143781200000 , 55.599684490628] , [ 1146369600000 , 57.920388436633] , [ 1149048000000 , 53.503593218971] , [ 1151640000000 , 53.522973979964] , [ 1154318400000 , 49.846822298548] , [ 1156996800000 , 54.721341614650] , [ 1159588800000 , 58.186236223191] , [ 1162270800000 , 63.908065540997] , [ 1164862800000 , 69.767285129367] , [ 1167541200000 , 72.534013373592] , [ 1170219600000 , 77.991819436573] , [ 1172638800000 , 78.143584404990] , [ 1175313600000 , 83.702398665233] , [ 1177905600000 , 91.140859312418] , [ 1180584000000 , 98.590960607028] , [ 1183176000000 , 96.245634754228] , [ 1185854400000 , 92.326364432615] , [ 1188532800000 , 97.068765332230] , [ 1191124800000 , 105.81025556260] , [ 1193803200000 , 114.38348777791] , [ 1196398800000 , 103.59604949810] , [ 1199077200000 , 101.72488429307] , [ 1201755600000 , 89.840147735028] , [ 1204261200000 , 86.963597532664] , [ 1206936000000 , 84.075505208491] , [ 1209528000000 , 93.170105645831] , [ 1212206400000 , 103.62838083121] , [ 1214798400000 , 87.458241365091] , [ 1217476800000 , 85.808374141319] , [ 1220155200000 , 93.158054469193] , [ 1222747200000 , 65.973252382360] , [ 1225425600000 , 44.580686638224] , [ 1228021200000 , 36.418977140128] , [ 1230699600000 , 38.727678144761] , [ 1233378000000 , 36.692674173387] , [ 1235797200000 , 30.033022809480] , [ 1238472000000 , 36.707532162718] , [ 1241064000000 , 52.191457688389] , [ 1243742400000 , 56.357883979735] , [ 1246334400000 , 57.629002180305] , [ 1249012800000 , 66.650985790166] , [ 1251691200000 , 70.839243432186] , [ 1254283200000 , 78.731998491499] , [ 1256961600000 , 72.375528540349] , [ 1259557200000 , 81.738387881630] , [ 1262235600000 , 87.539792394232] , [ 1264914000000 , 84.320762662273] , [ 1267333200000 , 90.621278391889] , [ 1270008000000 , 102.47144881651] , [ 1272600000000 , 102.79320353429] , [ 1275278400000 , 90.529736050479] , [ 1277870400000 , 76.580859994531] , [ 1280548800000 , 86.548979376972] , [ 1283227200000 , 81.879653334089] , [ 1285819200000 , 101.72550015956] , [ 1288497600000 , 107.97964852260] , [ 1291093200000 , 106.16240630785] , [ 1293771600000 , 114.84268599533] , [ 1296450000000 , 121.60793322282] , [ 1298869200000 , 133.41437346605] , [ 1301544000000 , 125.46646042904] , [ 1304136000000 , 129.76784954301] , [ 1306814400000 , 128.15798861044] , [ 1309406400000 , 121.92388706072] , [ 1312084800000 , 116.70036100870] , [ 1314763200000 , 88.367701837033] , [ 1317355200000 , 59.159665765725] , [ 1320033600000 , 79.793568139753] , [ 1322629200000 , 75.903834028417] , [ 1325307600000 , 72.704218209157] , [ 1327986000000 , 84.936990804097] , [ 1330491600000 , 93.388148670744]]
|
||||
},
|
||||
{
|
||||
key: "Short",
|
||||
values: [ [ 1025409600000 , 0] , [ 1028088000000 , 0] , [ 1030766400000 , 0] , [ 1033358400000 , 0] , [ 1036040400000 , 0] , [ 1038632400000 , 0] , [ 1041310800000 , 0] , [ 1043989200000 , 0] , [ 1046408400000 , 0] , [ 1049086800000 , 0] , [ 1051675200000 , 0] , [ 1054353600000 , 0] , [ 1056945600000 , 0] , [ 1059624000000 , 0] , [ 1062302400000 , 0] , [ 1064894400000 , 0] , [ 1067576400000 , 0] , [ 1070168400000 , 0] , [ 1072846800000 , 0] , [ 1075525200000 , -0.049184266875945] , [ 1078030800000 , -0.10757569491991] , [ 1080709200000 , -0.075601531307242] , [ 1083297600000 , -0.061245277988149] , [ 1085976000000 , -0.068227316401169] , [ 1088568000000 , -0.11242758058502] , [ 1091246400000 , -0.074848439408270] , [ 1093924800000 , -0.11465623676497] , [ 1096516800000 , -0.24370633342416] , [ 1099195200000 , -0.21523268478893] , [ 1101790800000 , -0.37859370911822] , [ 1104469200000 , -0.41932884345151] , [ 1107147600000 , -0.45393735984802] , [ 1109566800000 , -0.50868179522598] , [ 1112245200000 , -0.48164396881207] , [ 1114833600000 , -0.41605962887194] , [ 1117512000000 , -0.48490348490240] , [ 1120104000000 , -0.55071036101311] , [ 1122782400000 , -0.67489170505394] , [ 1125460800000 , -0.74978070939342] , [ 1128052800000 , -0.86395050745343] , [ 1130734800000 , -0.78524898506764] , [ 1133326800000 , -0.99800440950854] , [ 1136005200000 , -1.1177951153878] , [ 1138683600000 , -1.4119975432964] , [ 1141102800000 , -1.2409959736465] , [ 1143781200000 , -1.3088936375431] , [ 1146369600000 , -1.5495785469683] , [ 1149048000000 , -1.1563414981293] , [ 1151640000000 , -0.87192471725994] , [ 1154318400000 , -0.84073995183442] , [ 1156996800000 , -0.88761892867370] , [ 1159588800000 , -0.81748513917485] , [ 1162270800000 , -1.2874081041274] , [ 1164862800000 , -1.9234702981339] , [ 1167541200000 , -1.8377768147648] , [ 1170219600000 , -2.7107654031830] , [ 1172638800000 , -2.6493268125418] , [ 1175313600000 , -3.0814553134551] , [ 1177905600000 , -3.8509837783574] , [ 1180584000000 , -5.2919167850718] , [ 1183176000000 , -5.2297750650773] , [ 1185854400000 , -3.9335668501451] , [ 1188532800000 , -2.3695525190114] , [ 1191124800000 , -2.3084243151854] , [ 1193803200000 , -3.0753680726738] , [ 1196398800000 , -2.2346609938962] , [ 1199077200000 , -3.0598810361615] , [ 1201755600000 , -1.8410154270386] , [ 1204261200000 , -1.6479442038620] , [ 1206936000000 , -1.9293858622780] , [ 1209528000000 , -3.0769590460943] , [ 1212206400000 , -4.2423933501421] , [ 1214798400000 , -2.6951491617768] , [ 1217476800000 , -2.8981825939957] , [ 1220155200000 , -2.9662727940324] , [ 1222747200000 , 0.21556750497498] , [ 1225425600000 , 2.6784995167088] , [ 1228021200000 , 4.1296711248958] , [ 1230699600000 , 3.7311068218734] , [ 1233378000000 , 4.7695330866954] , [ 1235797200000 , 5.1919133040990] , [ 1238472000000 , 4.1025856045660] , [ 1241064000000 , 2.8498939666225] , [ 1243742400000 , 2.8106017222851] , [ 1246334400000 , 2.8456526669963] , [ 1249012800000 , 0.65563070754298] , [ 1251691200000 , -0.30022343874633] , [ 1254283200000 , -1.1600358228964] , [ 1256961600000 , -0.26674408835052] , [ 1259557200000 , -1.4693389757812] , [ 1262235600000 , -2.7855421590594] , [ 1264914000000 , -1.2668244065703] , [ 1267333200000 , -2.5537804115548] , [ 1270008000000 , -4.9144552474502] , [ 1272600000000 , -6.0484408234831] , [ 1275278400000 , -3.3834349033750] , [ 1277870400000 , -0.46752826932523] , [ 1280548800000 , -1.8030186027963] , [ 1283227200000 , -0.99623230097881] , [ 1285819200000 , -3.3475370235594] , [ 1288497600000 , -3.8187026520342] , [ 1291093200000 , -4.2354146250353] , [ 1293771600000 , -5.6795404292885] , [ 1296450000000 , -6.2928665328172] , [ 1298869200000 , -6.8549277434419] , [ 1301544000000 , -6.9925308360918] , [ 1304136000000 , -8.3216548655839] , [ 1306814400000 , -7.7682867271435] , [ 1309406400000 , -6.9244213301058] , [ 1312084800000 , -5.7407624451404] , [ 1314763200000 , -2.1813149077927] , [ 1317355200000 , 2.9407596325999] , [ 1320033600000 , -1.1130607112134] , [ 1322629200000 , -2.0274822307752] , [ 1325307600000 , -1.8372559072154] , [ 1327986000000 , -4.0732815531148] , [ 1330491600000 , -6.4417038470291]]
|
||||
},
|
||||
{
|
||||
key: "Gross",
|
||||
values: [ [ 1025409600000 , 0] , [ 1028088000000 , -6.3382185140371] , [ 1030766400000 , -5.9507873460847] , [ 1033358400000 , -11.569146943813] , [ 1036040400000 , -5.4767332317425] , [ 1038632400000 , 0.50794682203014] , [ 1041310800000 , -5.5310285460542] , [ 1043989200000 , -5.7838296963382] , [ 1046408400000 , -7.3249341615649] , [ 1049086800000 , -6.7078630712489] , [ 1051675200000 , 0.44227126150934] , [ 1054353600000 , 7.2481659343222] , [ 1056945600000 , 9.2512381306992] , [ 1059624000000 , 11.341210982529] , [ 1062302400000 , 14.734820409020] , [ 1064894400000 , 12.387148007542] , [ 1067576400000 , 18.436471461827] , [ 1070168400000 , 19.830742266977] , [ 1072846800000 , 22.643205829887] , [ 1075525200000 , 26.693972514363] , [ 1078030800000 , 29.489903107308] , [ 1080709200000 , 30.756096054034] , [ 1083297600000 , 27.992822746720] , [ 1085976000000 , 29.225852107431] , [ 1088568000000 , 30.156836480689] , [ 1091246400000 , 24.859678459498] , [ 1093924800000 , 24.151326522641] , [ 1096516800000 , 26.974088564049] , [ 1099195200000 , 30.587369307288] , [ 1101790800000 , 35.952410049136] , [ 1104469200000 , 42.723169856608] , [ 1107147600000 , 40.104326572110] , [ 1109566800000 , 42.034940590574] , [ 1112245200000 , 41.201940741519] , [ 1114833600000 , 35.959307673456] , [ 1117512000000 , 40.234785495828] , [ 1120104000000 , 43.347252675906] , [ 1122782400000 , 49.122142270314] , [ 1125460800000 , 46.336213226596] , [ 1128052800000 , 45.738022352292] , [ 1130734800000 , 40.782535587694] , [ 1133326800000 , 46.298919327736] , [ 1136005200000 , 46.525174496692] , [ 1138683600000 , 49.369518277658] , [ 1141102800000 , 51.359233230659] , [ 1143781200000 , 54.290790853085] , [ 1146369600000 , 56.370809889665] , [ 1149048000000 , 52.347251720842] , [ 1151640000000 , 52.651049262704] , [ 1154318400000 , 49.006082346714] , [ 1156996800000 , 53.833722685976] , [ 1159588800000 , 57.368751084016] , [ 1162270800000 , 62.620657436870] , [ 1164862800000 , 67.843814831233] , [ 1167541200000 , 70.696236558827] , [ 1170219600000 , 75.281054033390] , [ 1172638800000 , 75.494257592448] , [ 1175313600000 , 80.620943351778] , [ 1177905600000 , 87.289875534061] , [ 1180584000000 , 93.299043821956] , [ 1183176000000 , 91.015859689151] , [ 1185854400000 , 88.392797582470] , [ 1188532800000 , 94.699212813219] , [ 1191124800000 , 103.50183124741] , [ 1193803200000 , 111.30811970524] , [ 1196398800000 , 101.36138850420] , [ 1199077200000 , 98.665003256909] , [ 1201755600000 , 87.999132307989] , [ 1204261200000 , 85.315653328802] , [ 1206936000000 , 82.146119346213] , [ 1209528000000 , 90.093146599737] , [ 1212206400000 , 99.385987481068] , [ 1214798400000 , 84.763092203314] , [ 1217476800000 , 82.910191547323] , [ 1220155200000 , 90.191781675161] , [ 1222747200000 , 66.188819887335] , [ 1225425600000 , 47.259186154933] , [ 1228021200000 , 40.548648265024] , [ 1230699600000 , 42.458784966634] , [ 1233378000000 , 41.462207260082] , [ 1235797200000 , 35.224936113579] , [ 1238472000000 , 40.810117767284] , [ 1241064000000 , 55.041351655012] , [ 1243742400000 , 59.168485702020] , [ 1246334400000 , 60.474654847301] , [ 1249012800000 , 67.306616497709] , [ 1251691200000 , 70.539019993440] , [ 1254283200000 , 77.571962668603] , [ 1256961600000 , 72.108784451998] , [ 1259557200000 , 80.269048905849] , [ 1262235600000 , 84.754250235173] , [ 1264914000000 , 83.053938255703] , [ 1267333200000 , 88.067497980334] , [ 1270008000000 , 97.556993569060] , [ 1272600000000 , 96.744762710807] , [ 1275278400000 , 87.146301147104] , [ 1277870400000 , 76.113331725206] , [ 1280548800000 , 84.745960774176] , [ 1283227200000 , 80.883421033110] , [ 1285819200000 , 98.377963136001] , [ 1288497600000 , 104.16094587057] , [ 1291093200000 , 101.92699168281] , [ 1293771600000 , 109.16314556604] , [ 1296450000000 , 115.31506669000] , [ 1298869200000 , 126.55944572261] , [ 1301544000000 , 118.47392959295] , [ 1304136000000 , 121.44619467743] , [ 1306814400000 , 120.38970188330] , [ 1309406400000 , 114.99946573061] , [ 1312084800000 , 110.95959856356] , [ 1314763200000 , 86.186386929240] , [ 1317355200000 , 62.100425398325] , [ 1320033600000 , 78.680507428540] , [ 1322629200000 , 73.876351797642] , [ 1325307600000 , 70.866962301942] , [ 1327986000000 , 80.863709250982] , [ 1330491600000 , 86.946444823715]]
|
||||
},
|
||||
{
|
||||
key: "S&P 1500",
|
||||
values: [ [ 1025409600000 , -7.0674410638835] , [ 1028088000000 , -14.663359292964] , [ 1030766400000 , -14.104393060540] , [ 1033358400000 , -23.114477037218] , [ 1036040400000 , -16.774256687841] , [ 1038632400000 , -11.902028464000] , [ 1041310800000 , -16.883038668422] , [ 1043989200000 , -19.104223676831] , [ 1046408400000 , -20.420523282736] , [ 1049086800000 , -19.660555051587] , [ 1051675200000 , -13.106911231646] , [ 1054353600000 , -8.2448460302143] , [ 1056945600000 , -7.0313058730976] , [ 1059624000000 , -5.1485118700389] , [ 1062302400000 , -3.0011028761469] , [ 1064894400000 , -4.1367265281467] , [ 1067576400000 , 1.5425209565025] , [ 1070168400000 , 2.7673533607299] , [ 1072846800000 , 7.7077114755360] , [ 1075525200000 , 9.7565015112434] , [ 1078030800000 , 11.396888609473] , [ 1080709200000 , 10.013964745578] , [ 1083297600000 , 8.0558890950562] , [ 1085976000000 , 9.6081966657458] , [ 1088568000000 , 11.918590426432] , [ 1091246400000 , 7.9945345523982] , [ 1093924800000 , 8.3201276776796] , [ 1096516800000 , 9.8283954846342] , [ 1099195200000 , 11.527125859650] , [ 1101790800000 , 16.413657596527] , [ 1104469200000 , 20.393798297928] , [ 1107147600000 , 17.456308413907] , [ 1109566800000 , 20.087778400999] , [ 1112245200000 , 17.988336990817] , [ 1114833600000 , 15.378490151331] , [ 1117512000000 , 19.474322935730] , [ 1120104000000 , 20.013851070354] , [ 1122782400000 , 24.749943726975] , [ 1125460800000 , 23.558710274826] , [ 1128052800000 , 24.558915040889] , [ 1130734800000 , 22.355860488034] , [ 1133326800000 , 27.138026265756] , [ 1136005200000 , 27.202220808591] , [ 1138683600000 , 31.219437344964] , [ 1141102800000 , 31.392355525125] , [ 1143781200000 , 33.373099232542] , [ 1146369600000 , 35.095277582309] , [ 1149048000000 , 30.923356507615] , [ 1151640000000 , 31.083717332561] , [ 1154318400000 , 31.290690671561] , [ 1156996800000 , 34.247769216679] , [ 1159588800000 , 37.411073177620] , [ 1162270800000 , 42.079177096411] , [ 1164862800000 , 44.978191659648] , [ 1167541200000 , 46.713271025310] , [ 1170219600000 , 49.203892437699] , [ 1172638800000 , 46.684723471826] , [ 1175313600000 , 48.385458973500] , [ 1177905600000 , 54.660197840305] , [ 1180584000000 , 60.311838415602] , [ 1183176000000 , 57.583282204682] , [ 1185854400000 , 52.425398898751] , [ 1188532800000 , 54.663538086985] , [ 1191124800000 , 60.181844325224] , [ 1193803200000 , 62.877219773621] , [ 1196398800000 , 55.760611512951] , [ 1199077200000 , 54.735280367784] , [ 1201755600000 , 45.495912959474] , [ 1204261200000 , 40.934919015876] , [ 1206936000000 , 40.303777633187] , [ 1209528000000 , 47.403740368773] , [ 1212206400000 , 49.951960898839] , [ 1214798400000 , 37.534590035098] , [ 1217476800000 , 36.405758293321] , [ 1220155200000 , 38.545373001858] , [ 1222747200000 , 26.106358664455] , [ 1225425600000 , 4.2658006768744] , [ 1228021200000 , -3.5517839867557] , [ 1230699600000 , -2.0878920761513] , [ 1233378000000 , -10.408879093829] , [ 1235797200000 , -19.924242196038] , [ 1238472000000 , -12.906491912782] , [ 1241064000000 , -3.9774866468346] , [ 1243742400000 , 1.0319171601402] , [ 1246334400000 , 1.3109350357718] , [ 1249012800000 , 9.1668309061935] , [ 1251691200000 , 13.121178985954] , [ 1254283200000 , 17.578680237511] , [ 1256961600000 , 14.971294355085] , [ 1259557200000 , 21.551327027338] , [ 1262235600000 , 24.592328423819] , [ 1264914000000 , 20.158087829555] , [ 1267333200000 , 24.135661929185] , [ 1270008000000 , 31.815205405903] , [ 1272600000000 , 34.389524768466] , [ 1275278400000 , 23.785555857522] , [ 1277870400000 , 17.082756649072] , [ 1280548800000 , 25.248007727100] , [ 1283227200000 , 19.415179069165] , [ 1285819200000 , 30.413636349327] , [ 1288497600000 , 35.357952964550] , [ 1291093200000 , 35.886413535859] , [ 1293771600000 , 45.003601951959] , [ 1296450000000 , 48.274893564020] , [ 1298869200000 , 53.562864914648] , [ 1301544000000 , 54.108274337412] , [ 1304136000000 , 58.618190111927] , [ 1306814400000 , 56.806793965598] , [ 1309406400000 , 54.135477252994] , [ 1312084800000 , 50.735258942442] , [ 1314763200000 , 42.208170945813] , [ 1317355200000 , 31.617916826724] , [ 1320033600000 , 46.492005006737] , [ 1322629200000 , 46.203116922145] , [ 1325307600000 , 47.541427643137] , [ 1327986000000 , 54.518998440993] , [ 1330491600000 , 61.099720234693]]
|
||||
}
|
||||
].map(function(line) {
|
||||
line.values = line.values.map(function(d) { return {x: d[0], y: d[1]/100 }});
|
||||
return line;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
var chart = nv.models.cumulativeLine()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.color(d3.scale.category10().range())
|
||||
//.margin({top: 20, right: 10, bottom: 50, left: 80})
|
||||
|
||||
//chart.yAxis.axisLabel('Cumulative');
|
||||
//chart.xAxis.axisLabel('Date');
|
||||
|
||||
//these are specific for a chart containing only month end data points
|
||||
chart.xAxis.scale(d3.time.scale());
|
||||
chart.xAxis.ticks(d3.time.monthEnds, 12); //need to figure out the best way to calculate the step here... preferably without knowledge of the data domain
|
||||
|
||||
chart.yAxis.tickFormat(d3.format(',%'));
|
||||
chart.xAxis.tickFormat(function(d) {
|
||||
return d3.time.format('%x')(new Date(d))
|
||||
});
|
||||
|
||||
//chart.xaxis.tickFormat(d3.format(".02f"))
|
||||
|
||||
var svg = d3.select('#test1 svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(cumulativeMonthEndTestData)
|
||||
|
||||
svg.transition().duration(500).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
|
||||
graph.dispatch.on('tooltipShow', function(e) {
|
||||
var offsetElement = document.getElementById("test1"),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatterY = d3.format(",.2%"),
|
||||
formatterX = function(d) {
|
||||
return d3.time.format('%x')(new Date(d))
|
||||
};
|
||||
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
formatterY(graph.y()(e.point)) + ' on ' + formatterX(graph.x()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
});
|
||||
|
||||
graph.dispatch.on('tooltipHide', function(e) {
|
||||
nv.tooltip.cleanup();
|
||||
});
|
||||
|
||||
|
||||
|
||||
window.onresize = function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40,
|
||||
margin = graph.margin();
|
||||
|
||||
|
||||
if (width < margin.left + margin.right + 20)
|
||||
width = margin.left + margin.right + 20;
|
||||
|
||||
if (height < margin.top + margin.bottom + 20)
|
||||
height = margin.top + margin.bottom + 20;
|
||||
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select('#test1 svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(graph);
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,334 +0,0 @@
|
||||
|
||||
nv.models.cumulativeLine = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 30, left: 60},
|
||||
getWidth = function() { return 960 },
|
||||
getHeight = function() { return 500 },
|
||||
color = d3.scale.category20().range(),
|
||||
dotRadius = function() { return 2.5 },
|
||||
getX = function(d) { return d.x },
|
||||
getY = function(d) { return d.y },
|
||||
id = Math.floor(Math.random() * 10000), //Create semi-unique ID incase user doesn't select one
|
||||
showRescaleToggle = true,
|
||||
rescaleY = true;
|
||||
|
||||
var x = d3.scale.linear(),
|
||||
dx = d3.scale.linear(),
|
||||
y = d3.scale.linear(),
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom'),
|
||||
yAxis = nv.models.axis().scale(y).orient('left'),
|
||||
legend = nv.models.legend().height(30),
|
||||
controls = nv.models.legend().height(30),
|
||||
lines = nv.models.line(),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
|
||||
index = {i: 0, x: 0};
|
||||
|
||||
//TODO: let user select default
|
||||
var controlsData = [
|
||||
{ key: 'Re-scale y-axis' }
|
||||
];
|
||||
|
||||
var indexDrag = d3.behavior.drag()
|
||||
.on('dragstart', dragStart)
|
||||
.on('drag', dragMove)
|
||||
.on('dragend', dragEnd);
|
||||
|
||||
function dragStart(d,i) {}
|
||||
|
||||
function dragMove(d,i) {
|
||||
d.x += d3.event.dx;
|
||||
d.i = Math.round(dx.invert(d.x));
|
||||
|
||||
//d3.transition(d3.select('.chart-' + id)).call(chart);
|
||||
d3.select(this).attr("transform", "translate(" + dx(d.i) + ",0)");
|
||||
}
|
||||
|
||||
function dragEnd(d,i) {
|
||||
d3.transition(d3.select('.chart-' + id)).call(chart);
|
||||
}
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var width = getWidth(),
|
||||
height = getHeight(),
|
||||
availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
|
||||
var series = indexify(index.i, data);
|
||||
|
||||
var seriesData = series
|
||||
.filter(function(d) { return !rescaleY || !d.disabled }) // only filter out if rescaling y axis
|
||||
.map(function(d) { return d.values });
|
||||
|
||||
|
||||
x .domain(d3.extent(d3.merge(seriesData), function(d) { return d.x } ))
|
||||
.range([0, availableWidth]);
|
||||
|
||||
dx .domain([0, data[0].values.length - 1]) //Assumes all series have same length
|
||||
.range([0, availableWidth])
|
||||
.clamp(true);
|
||||
|
||||
y .domain(d3.extent(d3.merge(seriesData), function(d) { return d.y } ))
|
||||
.range([availableHeight, 0]);
|
||||
|
||||
|
||||
lines
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % color.length];
|
||||
}).filter(function(d,i) { return !data[i].disabled }))
|
||||
|
||||
|
||||
var wrap = d3.select(this).classed('chart-' + id, true).selectAll('g.wrap').data([series]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 cumulativeLine').append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'linesWrap');
|
||||
gEnter.append('g').attr('class', 'legendWrap');
|
||||
gEnter.append('g').attr('class', 'controlsWrap');
|
||||
|
||||
|
||||
|
||||
//TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
|
||||
margin.top = legend.height();
|
||||
|
||||
var g = wrap.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
legend.width(width/2 - margin.right);
|
||||
|
||||
g.select('.legendWrap')
|
||||
.datum(data)
|
||||
.attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-margin.top) +')')
|
||||
.call(legend);
|
||||
|
||||
if (showRescaleToggle) {
|
||||
controls.width(140).color(['#444', '#444', '#444']);
|
||||
g.select('.controlsWrap')
|
||||
.datum(controlsData)
|
||||
.attr('transform', 'translate(0,' + (-margin.top) +')')
|
||||
.call(controls);
|
||||
}
|
||||
|
||||
|
||||
var linesWrap = g.select('.linesWrap')
|
||||
.datum(series.filter(function(d) { return !d.disabled }))
|
||||
|
||||
|
||||
d3.transition(linesWrap).call(lines);
|
||||
|
||||
|
||||
var indexLine = linesWrap.selectAll('.indexLine')
|
||||
.data([index]);
|
||||
indexLine.enter().append('rect').attr('class', 'indexLine')
|
||||
.attr('width', 3)
|
||||
.attr('x', -2)
|
||||
.attr('fill', 'red')
|
||||
.attr('fill-opacity', .5)
|
||||
.call(indexDrag)
|
||||
|
||||
indexLine
|
||||
.attr("transform", function(d) { return "translate(" + dx(d.i) + ",0)" })
|
||||
.attr('height', availableHeight)
|
||||
|
||||
|
||||
xAxis
|
||||
.domain(x.domain())
|
||||
.range(x.range())
|
||||
.ticks( width / 100 )
|
||||
.tickSize(-availableHeight, 0);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
yAxis
|
||||
.domain(y.domain())
|
||||
.range(y.range())
|
||||
.ticks( height / 36 )
|
||||
.tickSize(-availableWidth, 0);
|
||||
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ********** EVENT LISTENERS **********
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
wrap.selectAll('.series').classed('disabled', false);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
/*
|
||||
legend.dispatch.on('legendMouseover', function(d, i) {
|
||||
d.hover = true;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
|
||||
legend.dispatch.on('legendMouseout', function(d, i) {
|
||||
d.hover = false;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
controls.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
rescaleY = !d.disabled;
|
||||
|
||||
//console.log(d,i,arguments);
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
lines.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
dispatch.tooltipShow({
|
||||
point: e.point,
|
||||
series: e.series,
|
||||
pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
seriesIndex: e.seriesIndex,
|
||||
pointIndex: e.pointIndex
|
||||
});
|
||||
});
|
||||
|
||||
lines.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ********** FUNCTIONS **********
|
||||
|
||||
/* Normalize the data according to an index point. */
|
||||
function indexify(idx, data) {
|
||||
return data.map(function(line, i) {
|
||||
var v = getY(line.values[idx], idx);
|
||||
|
||||
return {
|
||||
key: line.key,
|
||||
values: line.values.map(function(point, pointIndex) {
|
||||
return {'x': getX(point, pointIndex), 'y': (getY(point, pointIndex) - v) / (1 + v) };
|
||||
}),
|
||||
disabled: line.disabled,
|
||||
hover: line.hover
|
||||
/*
|
||||
if (v < -.9) {
|
||||
//if a series loses more than 100%, calculations fail.. anything close can cause major distortion (but is mathematically currect till it hits 100)
|
||||
}
|
||||
*/
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// ********** PUBLIC ACCESSORS **********
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = _;
|
||||
//lines.x(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = _;
|
||||
//lines.y(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
/*
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
*/
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return getWidth;
|
||||
getWidth = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return getHeight;
|
||||
getHeight = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
legend.color(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.dotRadius = function(_) {
|
||||
if (!arguments.length) return dotRadius;
|
||||
dotRadius = d3.functor(_);
|
||||
lines.dotRadius = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showRescaleToggle = function(_) {
|
||||
if (!arguments.length) return showRescaleToggle;
|
||||
showRescaleToggle = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
// Expose the x-axis' tickFormat method.
|
||||
//chart.xAxis = {};
|
||||
//d3.rebind(chart.xAxis, xAxis, 'tickFormat');
|
||||
chart.xAxis = xAxis;
|
||||
|
||||
// Expose the y-axis' tickFormat method.
|
||||
//chart.yAxis = {};
|
||||
//d3.rebind(chart.yAxis, yAxis, 'tickFormat');
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,129 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 960;
|
||||
padding: 100px;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
width: 960px;
|
||||
}
|
||||
|
||||
#chart1 svg{
|
||||
height: 500px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
margin: 10px;
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<div id="chart1">
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<!-- including all the components so I don't have to minify every time I test in development -->
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/discreteBar.js"></script>
|
||||
<script src="../src/models/discreteBarChartWithEnabledTooltip.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
historicalBarChart = [
|
||||
{
|
||||
key: "Cumulative Return",
|
||||
values: [
|
||||
{
|
||||
"label" : "CDS / Options" ,
|
||||
"value" : -29.765957771107
|
||||
} ,
|
||||
{
|
||||
"label" : "Cash" ,
|
||||
"value" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "Corporate Bonds" ,
|
||||
"value" : 32.807804682612
|
||||
} ,
|
||||
{
|
||||
"label" : "Equity" ,
|
||||
"value" : 196.45946739256
|
||||
} ,
|
||||
{
|
||||
"label" : "Index Futures" ,
|
||||
"value" : 0.19434030906893
|
||||
} ,
|
||||
{
|
||||
"label" : "Options" ,
|
||||
"value" : -98.079782601442
|
||||
} ,
|
||||
{
|
||||
"label" : "Preferred" ,
|
||||
"value" : -13.925743130903
|
||||
} ,
|
||||
{
|
||||
"label" : "Not Available" ,
|
||||
"value" : -5.1387322875705
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.discreteBarChart()
|
||||
.x(function(d) { return d.label })
|
||||
.y(function(d) { return d.value })
|
||||
.staggerLabels(true)
|
||||
//.staggerLabels(historicalBarChart[0].values.length > 8)
|
||||
.tooltips(true)
|
||||
.showValues(true)
|
||||
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(historicalBarChart)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
@ -1,222 +0,0 @@
|
||||
|
||||
nv.models.discreteBarChart = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
width = null,
|
||||
height = null,
|
||||
color = d3.scale.category20().range(),
|
||||
staggerLabels = false,
|
||||
tooltips = true,
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + x + '</h3>' +
|
||||
'<p>' + y + '</p>'
|
||||
};
|
||||
|
||||
|
||||
var discretebar = nv.models.discreteBar(),
|
||||
x = discretebar.xScale(),
|
||||
y = discretebar.yScale(),
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false).showMaxMin(false),
|
||||
yAxis = nv.models.axis().scale(y).orient('left'),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
|
||||
|
||||
xAxis.tickFormat(function(d) { return d });
|
||||
yAxis.tickFormat(d3.format(',.1f'));
|
||||
|
||||
|
||||
var showTooltip = function(e, offsetElement) {
|
||||
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
|
||||
top = e.pos[1] + ( offsetElement.offsetTop || 0),
|
||||
x = xAxis.tickFormat()(discretebar.x()(e.point)),
|
||||
y = yAxis.tickFormat()(discretebar.y()(e.point)),
|
||||
content = tooltip(e.series.key, x, y, e, chart);
|
||||
|
||||
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
|
||||
};
|
||||
|
||||
|
||||
//TODO: let user select default
|
||||
var controlsData = [
|
||||
{ key: 'Grouped' },
|
||||
{ key: 'Stacked', disabled: true }
|
||||
];
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var container = d3.select(this),
|
||||
that = this;
|
||||
|
||||
var availableWidth = (width || parseInt(container.style('width')) || 960)
|
||||
- margin.left - margin.right,
|
||||
availableHeight = (height || parseInt(container.style('height')) || 400)
|
||||
- margin.top - margin.bottom;
|
||||
|
||||
|
||||
discretebar
|
||||
.width(availableWidth)
|
||||
.height(availableHeight);
|
||||
|
||||
|
||||
var wrap = container.selectAll('g.wrap.discreteBarWithAxes').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 discreteBarWithAxes').append('g');
|
||||
var defsEnter = gEnter.append('defs');
|
||||
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'barsWrap');
|
||||
|
||||
|
||||
|
||||
var g = wrap.select('g');
|
||||
|
||||
|
||||
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
var barsWrap = g.select('.barsWrap')
|
||||
.datum(data.filter(function(d) { return !d.disabled }))
|
||||
|
||||
|
||||
d3.transition(barsWrap).call(discretebar);
|
||||
|
||||
|
||||
defsEnter.append('clipPath')
|
||||
.attr('id', 'x-label-clip-' + discretebar.id())
|
||||
.append('rect')
|
||||
|
||||
g.select('#x-label-clip-' + discretebar.id() + ' rect')
|
||||
.attr('width', x.rangeBand() * (staggerLabels ? 2 : 1))
|
||||
.attr('height', 16)
|
||||
.attr('x', -x.rangeBand() / (staggerLabels ? 1 : 2 ));
|
||||
|
||||
/*
|
||||
var evenLabelClips = defsEnter.append('clipPath')
|
||||
.attr('id', 'x-label-clip-even-' + discretebar.id())
|
||||
.selectAll('rect')
|
||||
.data(function(d) { return d[0].values.filter(function(d,i) { return i % 2 === 0 }) });
|
||||
|
||||
evenLabelClips.enter().append('rect')
|
||||
.attr('width', x.rangeBand())
|
||||
.attr('height', 32)
|
||||
.attr('y', y.range()[0])
|
||||
.attr('x', function(d,i) { return x(discretebar.x()(d,i)) });
|
||||
|
||||
var oddLabelClips = defsEnter.append('clipPath')
|
||||
.attr('id', 'x-label-clip-odd-' + discretebar.id())
|
||||
.selectAll('rect')
|
||||
.data(function(d) { return d[0].values.filter(function(d,i) { return i % 2 === 1 }) });
|
||||
|
||||
oddLabelClips.enter().append('rect')
|
||||
.attr('width', x.rangeBand())
|
||||
.attr('height', 16)
|
||||
.attr('y', y.range()[0] + 16 + (staggerLabels ? 12: 0))
|
||||
.attr('x', function(d,i) { return x(discretebar.x()(d,i)) });
|
||||
*/
|
||||
|
||||
|
||||
|
||||
xAxis
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize(-availableHeight, 0);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + (y.range()[0] + (discretebar.showValues() ? 16 : 0)) + ')')
|
||||
//d3.transition(g.select('.x.axis'))
|
||||
g.select('.x.axis').transition().duration(0)
|
||||
.call(xAxis);
|
||||
|
||||
|
||||
var xTicks = g.select('.x.axis').selectAll('g');
|
||||
|
||||
if (staggerLabels)
|
||||
xTicks
|
||||
.selectAll('text')
|
||||
.attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '0' : '12') + ')' })
|
||||
|
||||
xTicks
|
||||
.selectAll('text')
|
||||
.attr('clip-path', function(d,i,j) { return 'url(#x-label-clip-' + discretebar.id() + ')' });
|
||||
|
||||
|
||||
yAxis
|
||||
.ticks( availableHeight / 36 )
|
||||
.tickSize( -availableWidth, 0);
|
||||
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
discretebar.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, that.parentNode) } ); // TODO: maybe merge with above?
|
||||
|
||||
discretebar.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
//TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection)
|
||||
chart.update = function() { selection.transition().call(chart); };
|
||||
chart.container = this; // I need a reference to the container in order to have outside code check if the chart is visible or not
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.discretebar = discretebar; // really just makign the accessible for discretebar.dispatch, may rethink slightly
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
d3.rebind(chart, discretebar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'id', 'showValues', 'valueFormat');
|
||||
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
discretebar.color(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.staggerLabels = function(_) {
|
||||
if (!arguments.length) return staggerLabels;
|
||||
staggerLabels = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltips = function(_) {
|
||||
if (!arguments.length) return tooltips;
|
||||
tooltips = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltipContent = function(_) {
|
||||
if (!arguments.length) return tooltip;
|
||||
tooltip = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,172 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1">
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/discreteBar.js"></script>
|
||||
<script src="../src/models/discreteBarWithAxes.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
historicalBarChart = [
|
||||
{
|
||||
key: "Cumulative Return",
|
||||
values: [
|
||||
{
|
||||
"label" : "CDS / Options" ,
|
||||
"value" : -29.765957771107
|
||||
} ,
|
||||
{
|
||||
"label" : "Cash" ,
|
||||
"value" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "Corporate Bonds" ,
|
||||
"value" : 32.807804682612
|
||||
} ,
|
||||
{
|
||||
"label" : "Equity" ,
|
||||
"value" : 196.45946739256
|
||||
} ,
|
||||
{
|
||||
"label" : "Index Futures" ,
|
||||
"value" : 0.19434030906893
|
||||
} ,
|
||||
{
|
||||
"label" : "Options" ,
|
||||
"value" : -98.079782601442
|
||||
} ,
|
||||
{
|
||||
"label" : "Preferred" ,
|
||||
"value" : -13.925743130903
|
||||
} ,
|
||||
{
|
||||
"label" : "Not Available" ,
|
||||
"value" : -5.1387322875705
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var selector = '#chart1',
|
||||
chart = nv.models.discreteBarWithAxes()
|
||||
.color(d3.scale.category10().range())
|
||||
.x(function(d) { return d.label })
|
||||
.y(function(d) { return d.value }),
|
||||
data = historicalBarChart,
|
||||
xTickFormat = function(d) { return d },
|
||||
yTickFormat = d3.format(',.2f'),
|
||||
xAxisLabel = null,
|
||||
yAxisLabel = null,
|
||||
duration = 500;
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
chart
|
||||
.width(width)
|
||||
.height(height)
|
||||
.staggerLabels(true);
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(xTickFormat);
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(yTickFormat)
|
||||
.axisLabel(yAxisLabel);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(chart) {
|
||||
var showTooltip = function(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
|
||||
formatX = chart.xAxis.tickFormat();
|
||||
|
||||
// uses the chart's getX and getY, you may customize if x position is not the same as the value you want
|
||||
// ex. daily data without weekends, x is the index, while you want the date
|
||||
var content = '<h3>' + formatX(chart.x()(e.point)) + '</h3>' +
|
||||
'<p>' +
|
||||
formatY(chart.y()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
|
||||
};
|
||||
|
||||
chart.dispatch.on('tooltipShow', showTooltip);
|
||||
chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
window.onresize= function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', chart.height()())
|
||||
.transition().duration(duration)
|
||||
.call(chart);
|
||||
|
||||
/*
|
||||
d3.select('#chart1 svg')
|
||||
.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', chart.height()())
|
||||
.call(chart);
|
||||
*/
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,152 +0,0 @@
|
||||
|
||||
nv.models.discreteBarWithAxes = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
width = function() { return 960 },
|
||||
height = function() { return 500 },
|
||||
color = d3.scale.category20().range(),
|
||||
staggerLabels = false;
|
||||
|
||||
var discretebar = nv.models.discreteBar(),
|
||||
x = discretebar.xScale(),
|
||||
y = discretebar.yScale(),
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false),
|
||||
yAxis = nv.models.axis().scale(y).orient('left'),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
|
||||
|
||||
//TODO: let user select default
|
||||
var controlsData = [
|
||||
{ key: 'Grouped' },
|
||||
{ key: 'Stacked', disabled: true }
|
||||
];
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var availableWidth = width() - margin.left - margin.right,
|
||||
availableHeight = height() - margin.top - margin.bottom;
|
||||
|
||||
var seriesData = data.filter(function(d) { return !d.disabled })
|
||||
.map(function(d) {
|
||||
return d.values.map(function(d,i) {
|
||||
return { x: discretebar.x()(d,i), y: discretebar.y()(d,i) }
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
||||
discretebar
|
||||
.width(availableWidth)
|
||||
.height(availableHeight);
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.wrap.discreteBarWithAxes').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 discreteBarWithAxes').append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'barsWrap');
|
||||
|
||||
|
||||
|
||||
var g = wrap.select('g');
|
||||
|
||||
|
||||
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
var barsWrap = g.select('.barsWrap')
|
||||
.datum(data.filter(function(d) { return !d.disabled }))
|
||||
|
||||
|
||||
d3.transition(barsWrap).call(discretebar);
|
||||
|
||||
|
||||
xAxis
|
||||
.scale(x)
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize(-availableHeight, 0);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
|
||||
var xTicks = g.select('.x.axis').selectAll('g');
|
||||
|
||||
if (staggerLabels)
|
||||
xTicks
|
||||
.selectAll('text')
|
||||
.attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '0' : '12') + ')' })
|
||||
|
||||
/*
|
||||
xTicks.filter(function(d,i) {
|
||||
return i % Math.ceil(data[0].values.length / (availableWidth / 100)) !== 0;
|
||||
})
|
||||
.selectAll('line, text')
|
||||
.style('opacity', 0)
|
||||
*/
|
||||
|
||||
yAxis
|
||||
.scale(y)
|
||||
.ticks( availableHeight / 36 )
|
||||
.tickSize( -availableWidth, 0);
|
||||
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
discretebar.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
|
||||
discretebar.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
d3.rebind(chart, discretebar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id');
|
||||
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
discretebar.color(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.staggerLabels = function(_) {
|
||||
if (!arguments.length) return staggerLabels;
|
||||
staggerLabels = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,83 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1">
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<!-- including all the components so I don't have to minify every time I test in development -->
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineWithLegend.js"></script>
|
||||
<script src="../src/charts/lineChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
nv.charts.line()
|
||||
.selector('#chart1')
|
||||
.data(sinAndCos())
|
||||
.y(function(d) { return d.voltage })
|
||||
.yAxisLabel('Voltage (v)')
|
||||
.build();
|
||||
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [],
|
||||
r1 = Math.random(),
|
||||
r2 = Math.random();
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, voltage: r2 * Math.sin(i/10)});
|
||||
cos.push({x: i, voltage: r1 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@ -1,173 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1">
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/historicalBar.js"></script>
|
||||
<script src="../src/models/linePlusBar.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
var valueVsQuantity = [
|
||||
{
|
||||
"key" : "Quantity" ,
|
||||
"bar": true,
|
||||
"values" : [ [ 1136005200000 , 1271000.0] , [ 1138683600000 , 1271000.0] , [ 1141102800000 , 1271000.0] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 3899486.0] , [ 1162270800000 , 3899486.0] , [ 1164862800000 , 3899486.0] , [ 1167541200000 , 3564700.0] , [ 1170219600000 , 3564700.0] , [ 1172638800000 , 3564700.0] , [ 1175313600000 , 2648493.0] , [ 1177905600000 , 2648493.0] , [ 1180584000000 , 2648493.0] , [ 1183176000000 , 2522993.0] , [ 1185854400000 , 2522993.0] , [ 1188532800000 , 2522993.0] , [ 1191124800000 , 2906501.0] , [ 1193803200000 , 2906501.0] , [ 1196398800000 , 2906501.0] , [ 1199077200000 , 2206761.0] , [ 1201755600000 , 2206761.0] , [ 1204261200000 , 2206761.0] , [ 1206936000000 , 2287726.0] , [ 1209528000000 , 2287726.0] , [ 1212206400000 , 2287726.0] , [ 1214798400000 , 2732646.0] , [ 1217476800000 , 2732646.0] , [ 1220155200000 , 2732646.0] , [ 1222747200000 , 2599196.0] , [ 1225425600000 , 2599196.0] , [ 1228021200000 , 2599196.0] , [ 1230699600000 , 1924387.0] , [ 1233378000000 , 1924387.0] , [ 1235797200000 , 1924387.0] , [ 1238472000000 , 1756311.0] , [ 1241064000000 , 1756311.0] , [ 1243742400000 , 1756311.0] , [ 1246334400000 , 1743470.0] , [ 1249012800000 , 1743470.0] , [ 1251691200000 , 1743470.0] , [ 1254283200000 , 1519010.0] , [ 1256961600000 , 1519010.0] , [ 1259557200000 , 1519010.0] , [ 1262235600000 , 1591444.0] , [ 1264914000000 , 1591444.0] , [ 1267333200000 , 1591444.0] , [ 1270008000000 , 1543784.0] , [ 1272600000000 , 1543784.0] , [ 1275278400000 , 1543784.0] , [ 1277870400000 , 1309915.0] , [ 1280548800000 , 1309915.0] , [ 1283227200000 , 1309915.0] , [ 1285819200000 , 1331875.0] , [ 1288497600000 , 1331875.0] , [ 1291093200000 , 1331875.0] , [ 1293771600000 , 1331875.0] , [ 1296450000000 , 1154695.0] , [ 1298869200000 , 1154695.0] , [ 1301544000000 , 1194025.0] , [ 1304136000000 , 1194025.0] , [ 1306814400000 , 1194025.0] , [ 1309406400000 , 1194025.0] , [ 1312084800000 , 1194025.0] , [ 1314763200000 , 1244525.0] , [ 1317355200000 , 475000.0] , [ 1320033600000 , 475000.0] , [ 1322629200000 , 475000.0] , [ 1325307600000 , 690033.0] , [ 1327986000000 , 690033.0] , [ 1330491600000 , 690033.0] , [ 1333166400000 , 514733.0] , [ 1335758400000 , 514733.0]]
|
||||
} ,
|
||||
|
||||
{
|
||||
"key" : "Price" ,
|
||||
"values" : [ [ 1136005200000 , 71.89] , [ 1138683600000 , 75.51] , [ 1141102800000 , 68.49] , [ 1143781200000 , 62.72] , [ 1146369600000 , 70.39] , [ 1149048000000 , 59.77] , [ 1151640000000 , 57.27] , [ 1154318400000 , 67.96] , [ 1156996800000 , 67.85] , [ 1159588800000 , 76.98] , [ 1162270800000 , 81.08] , [ 1164862800000 , 91.66] , [ 1167541200000 , 84.84] , [ 1170219600000 , 85.73] , [ 1172638800000 , 84.61] , [ 1175313600000 , 92.91] , [ 1177905600000 , 99.8] , [ 1180584000000 , 121.191] , [ 1183176000000 , 122.04] , [ 1185854400000 , 131.76] , [ 1188532800000 , 138.48] , [ 1191124800000 , 153.47] , [ 1193803200000 , 189.95] , [ 1196398800000 , 182.22] , [ 1199077200000 , 198.08] , [ 1201755600000 , 135.36] , [ 1204261200000 , 125.02] , [ 1206936000000 , 143.5] , [ 1209528000000 , 173.95] , [ 1212206400000 , 188.75] , [ 1214798400000 , 167.44] , [ 1217476800000 , 158.95] , [ 1220155200000 , 169.53] , [ 1222747200000 , 113.66] , [ 1225425600000 , 107.59] , [ 1228021200000 , 92.67] , [ 1230699600000 , 85.35] , [ 1233378000000 , 90.13] , [ 1235797200000 , 89.31] , [ 1238472000000 , 105.12] , [ 1241064000000 , 125.83] , [ 1243742400000 , 135.81] , [ 1246334400000 , 142.43] , [ 1249012800000 , 163.39] , [ 1251691200000 , 168.21] , [ 1254283200000 , 185.35] , [ 1256961600000 , 188.5] , [ 1259557200000 , 199.91] , [ 1262235600000 , 210.732] , [ 1264914000000 , 192.063] , [ 1267333200000 , 204.62] , [ 1270008000000 , 235.0] , [ 1272600000000 , 261.09] , [ 1275278400000 , 256.88] , [ 1277870400000 , 251.53] , [ 1280548800000 , 257.25] , [ 1283227200000 , 243.1] , [ 1285819200000 , 283.75] , [ 1288497600000 , 300.98] , [ 1291093200000 , 311.15] , [ 1293771600000 , 322.56] , [ 1296450000000 , 339.32] , [ 1298869200000 , 353.21] , [ 1301544000000 , 348.5075] , [ 1304136000000 , 350.13] , [ 1306814400000 , 347.83] , [ 1309406400000 , 335.67] , [ 1312084800000 , 390.48] , [ 1314763200000 , 384.83] , [ 1317355200000 , 381.32] , [ 1320033600000 , 404.78] , [ 1322629200000 , 382.2] , [ 1325307600000 , 405.0] , [ 1327986000000 , 456.48] , [ 1330491600000 , 542.44] , [ 1333166400000 , 599.55] , [ 1335758400000 , 583.98]]
|
||||
}
|
||||
].map(function(series) {
|
||||
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
|
||||
return series;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var selector = '#chart1',
|
||||
chart = nv.models.linePlusBar(),
|
||||
//data = sinAndCos(),
|
||||
data = valueVsQuantity,
|
||||
xTickFormat = d3.format(',r'),
|
||||
y1TickFormat = d3.format(',f'),
|
||||
y2TickFormat = function(d) { return '$' + d3.format(',f')(d) },
|
||||
duration = 500;
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
chart
|
||||
.x(function(d,i) { return i })
|
||||
.width(width)
|
||||
.height(height)
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
chart.xAxis.tickFormat(function(d) {
|
||||
var dx = data[0].values[d] && data[0].values[d].x || 0;
|
||||
return d3.time.format('%x')(new Date(dx))
|
||||
//return d3.time.format('%x')(new Date(data[0].values[d].x))
|
||||
});
|
||||
|
||||
chart.yAxis1
|
||||
.tickFormat(y1TickFormat)
|
||||
chart.yAxis2
|
||||
.tickFormat(y2TickFormat)
|
||||
|
||||
chart.bars.forceY([0]);
|
||||
//chart.lines.forceY([0]);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(chart) {
|
||||
var showTooltip = function(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatY1 = chart.yAxis1.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
|
||||
formatY2 = chart.yAxis2.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
|
||||
formatX = chart.xAxis.tickFormat(),
|
||||
x = formatX(chart.x()(e, e.pointIndex)),
|
||||
y = e.series.bar ? formatY1(chart.y()(e.point)) : formatY2(chart.y()(e.point));
|
||||
|
||||
|
||||
|
||||
// uses the chart's getX and getY, you may customize if x position is not the same as the value you want
|
||||
// ex. daily data without weekends, x is the index, while you want the date
|
||||
var content = '<h3>' + e.series.key.replace(/\s*\(.*\)/, '') + '</h3>' + //removing the (left/right axis) note from series label in tooltip
|
||||
'<p>' +
|
||||
y + ' at ' + x +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content, chart.y()(e.point) < 0 ? 'n' : 's' );
|
||||
};
|
||||
|
||||
chart.dispatch.on('tooltipShow', showTooltip);
|
||||
chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
window.onresize= function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
d3.select('#chart1 svg')
|
||||
.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', chart.height()())
|
||||
.call(chart);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10) + 1});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10) + .5});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
bar: true
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,250 +0,0 @@
|
||||
|
||||
nv.models.linePlusBar = function() {
|
||||
var margin = {top: 30, right: 60, bottom: 50, left: 60},
|
||||
getWidth = function() { return 960 },
|
||||
getHeight = function() { return 500 },
|
||||
dotRadius = function() { return 2.5 },
|
||||
getX = function(d) { return d.x },
|
||||
getY = function(d) { return d.y },
|
||||
color = d3.scale.category20().range(),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
|
||||
|
||||
var x = d3.scale.linear(),
|
||||
y1 = d3.scale.linear(),
|
||||
y2 = d3.scale.linear(),
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom'),
|
||||
yAxis1 = nv.models.axis().scale(y1).orient('left'),
|
||||
yAxis2 = nv.models.axis().scale(y2).orient('right'),
|
||||
legend = nv.models.legend().height(30),
|
||||
lines = nv.models.line(),
|
||||
bars = nv.models.historicalBar();
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var width = getWidth(),
|
||||
height = getHeight(),
|
||||
availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
|
||||
var series1 = data.filter(function(d) { return !d.disabled && d.bar })
|
||||
.map(function(d) {
|
||||
return d.values.map(function(d,i) {
|
||||
return { x: getX(d,i), y: getY(d,i) }
|
||||
})
|
||||
});
|
||||
|
||||
var series2 = data.filter(function(d) { return !d.disabled && !d.bar })
|
||||
.map(function(d) {
|
||||
return d.values.map(function(d,i) {
|
||||
return { x: getX(d,i), y: getY(d,i) }
|
||||
})
|
||||
});
|
||||
|
||||
x .domain(d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } ))
|
||||
.range([0, availableWidth]);
|
||||
|
||||
y1 .domain(d3.extent(d3.merge(series1), function(d) { return d.y } ))
|
||||
.range([availableHeight, 0]);
|
||||
|
||||
y2 .domain(d3.extent(d3.merge(series2), function(d) { return d.y } ))
|
||||
.range([availableHeight, 0]);
|
||||
|
||||
lines
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % 10];
|
||||
}).filter(function(d,i) { return !data[i].disabled && !data[i].bar }))
|
||||
|
||||
bars
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % 10];
|
||||
}).filter(function(d,i) { return !data[i].disabled && data[i].bar }))
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.wrap.linePlusBar').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 linePlusBar').append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y1 axis');
|
||||
gEnter.append('g').attr('class', 'y2 axis');
|
||||
gEnter.append('g').attr('class', 'barsWrap');
|
||||
gEnter.append('g').attr('class', 'linesWrap');
|
||||
gEnter.append('g').attr('class', 'legendWrap');
|
||||
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
wrap.selectAll('.series').classed('disabled', false);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
|
||||
lines.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
dispatch.tooltipShow({
|
||||
point: e.point,
|
||||
series: e.series,
|
||||
pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
seriesIndex: e.seriesIndex,
|
||||
pointIndex: e.pointIndex
|
||||
});
|
||||
});
|
||||
|
||||
lines.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
|
||||
|
||||
bars.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
|
||||
bars.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
|
||||
|
||||
//TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
|
||||
margin.top = legend.height();
|
||||
|
||||
var g = wrap.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
legend.width(width/2 - margin.right);
|
||||
|
||||
g.select('.legendWrap')
|
||||
.datum(data.map(function(series) {
|
||||
series.key = series.key + (series.bar ? ' (left axis)' : ' (right axis)');
|
||||
return series;
|
||||
}))
|
||||
.attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-margin.top) +')')
|
||||
.call(legend);
|
||||
|
||||
|
||||
var barsData = data.filter(function(d) { return !d.disabled && d.bar });
|
||||
|
||||
var barsWrap = g.select('.barsWrap')
|
||||
.datum(barsData.length ? barsData : [{values:[]}])
|
||||
//.datum(data.filter(function(d) { return !d.disabled && d.bar }))
|
||||
|
||||
var linesWrap = g.select('.linesWrap')
|
||||
.datum(data.filter(function(d) { return !d.disabled && !d.bar }))
|
||||
|
||||
|
||||
d3.transition(barsWrap).call(bars);
|
||||
d3.transition(linesWrap).call(lines);
|
||||
|
||||
|
||||
xAxis
|
||||
.domain(x.domain())
|
||||
.range(x.range())
|
||||
.ticks( width / 100 )
|
||||
.tickSize(-availableHeight, 0);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + y1.range()[0] + ')');
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
yAxis1
|
||||
.domain(y1.domain())
|
||||
.range(y1.range())
|
||||
.ticks( height / 36 )
|
||||
.tickSize(-availableWidth, 0);
|
||||
|
||||
d3.transition(g.select('.y1.axis'))
|
||||
.call(yAxis1);
|
||||
|
||||
yAxis2
|
||||
.domain(y2.domain())
|
||||
.range(y2.range())
|
||||
.ticks( height / 36 )
|
||||
.tickSize(series1.length ? 0 : -availableWidth, 0); // Show the y2 rules only if y1 has none
|
||||
|
||||
g.select('.y2.axis')
|
||||
.attr('transform', 'translate(' + x.range()[1] + ',0)');
|
||||
|
||||
d3.transition(g.select('.y2.axis'))
|
||||
.call(yAxis2);
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.legend = legend;
|
||||
chart.lines = lines;
|
||||
chart.bars = bars;
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis1 = yAxis1;
|
||||
chart.yAxis2 = yAxis2;
|
||||
|
||||
//d3.rebind(chart, lines, 'interactive');
|
||||
//consider rebinding x and y as well
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = _;
|
||||
lines.x(_);
|
||||
bars.x(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = _;
|
||||
lines.y(_);
|
||||
bars.y(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return getWidth;
|
||||
getWidth = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return getHeight;
|
||||
getHeight = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.dotRadius = function(_) {
|
||||
if (!arguments.length) return dotRadius;
|
||||
dotRadius = d3.functor(_);
|
||||
lines.dotRadius = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
legend.color(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,137 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="test1">
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineWithFocus.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
var test_data = stream_layers(3,128,.1).map(function(data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: data
|
||||
};
|
||||
});
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
var chart = nv.models.lineWithFocus()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.yTickFormat(d3.format('.2r'))
|
||||
.xTickFormat(d3.format('.2r'))
|
||||
|
||||
|
||||
var svg = d3.select('#test1 svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(test_data);
|
||||
|
||||
svg.transition().duration(500).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
|
||||
graph.dispatch.on('tooltipShow', function(e) {
|
||||
var offsetElement = document.getElementById("test1"),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatter = d3.format('.2r');
|
||||
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
formatter(graph.y()(e.point)) + ', ' + formatter(graph.x()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
});
|
||||
|
||||
graph.dispatch.on('tooltipHide', function(e) {
|
||||
nv.tooltip.cleanup();
|
||||
});
|
||||
|
||||
|
||||
|
||||
window.onresize = function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40,
|
||||
margin = graph.margin();
|
||||
|
||||
|
||||
if (width < margin.left + margin.right + 20)
|
||||
width = margin.left + margin.right + 20;
|
||||
|
||||
if (height < margin.top + margin.bottom + 20)
|
||||
height = margin.top + margin.bottom + 20;
|
||||
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select('#test1 svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(graph);
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,354 +0,0 @@
|
||||
|
||||
nv.models.lineWithFocus = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 30, left: 60},
|
||||
margin2 = {top: 0, right: 20, bottom: 20, left: 60},
|
||||
width = 960,
|
||||
height = 500,
|
||||
height1 = 400,
|
||||
height2 = 100,
|
||||
color = d3.scale.category20().range(),
|
||||
getX = function(d) { return d.x },
|
||||
getY = function(d) { return d.y },
|
||||
id = Math.floor(Math.random() * 10000); //Create semi-unique ID incase user doesn't select one
|
||||
|
||||
var x = d3.scale.linear(),
|
||||
y = d3.scale.linear(),
|
||||
x2 = d3.scale.linear(),
|
||||
y2 = d3.scale.linear(),
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom'),
|
||||
yAxis = nv.models.axis().scale(y).orient('left'),
|
||||
xAxis2 = nv.models.axis().scale(x2).orient('bottom'),
|
||||
yAxis2 = nv.models.axis().scale(y2).orient('left'),
|
||||
legend = nv.models.legend().height(30),
|
||||
focus = nv.models.line().clipEdge(true),
|
||||
context = nv.models.line().interactive(false),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
|
||||
brush = d3.svg.brush()
|
||||
.x(x2);
|
||||
|
||||
|
||||
//var wrap, gEnter, g, focus, focusLines, contextWrap, focusWrap, contextLines; //brought all variables to this scope for use within brush function... is this a bad idea?
|
||||
|
||||
//var seriesData; //Temporarily bringing this data to this scope.... may be bad idea (same with above).. may need to rethink brushing
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var seriesData = data.filter(function(d) { return !d.disabled })
|
||||
.map(function(d) { return d.values }),
|
||||
availableWidth = width - margin.left - margin.right,
|
||||
availableHeight1 = height1 - margin.top - margin.bottom,
|
||||
availableHeight2 = height2 - margin2.top - margin2.bottom;
|
||||
|
||||
x2 .domain(d3.extent(d3.merge(seriesData), getX ))
|
||||
.range([0, availableWidth]);
|
||||
y2 .domain(d3.extent(d3.merge(seriesData), getY ))
|
||||
.range([availableHeight2, 0]);
|
||||
|
||||
x .domain(brush.empty() ? x2.domain() : brush.extent())
|
||||
.range([0, availableWidth]);
|
||||
y .domain(y2.domain())
|
||||
.range([availableHeight1, 0]);
|
||||
|
||||
brush.on('brush', onBrush);
|
||||
|
||||
focus
|
||||
.width(availableWidth)
|
||||
.height(availableHeight1)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % 10];
|
||||
}).filter(function(d,i) { return !data[i].disabled }))
|
||||
|
||||
context
|
||||
.width(availableWidth)
|
||||
.height(availableHeight2)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % 10];
|
||||
}).filter(function(d,i) { return !data[i].disabled }))
|
||||
|
||||
|
||||
updateFocus();
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.wrap').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 lineWithFocus').append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'focus');
|
||||
gEnter.append('g').attr('class', 'context');
|
||||
gEnter.append('g').attr('class', 'legendWrap');
|
||||
|
||||
|
||||
|
||||
var g = wrap.select('g')
|
||||
//.attr('transform', 'translate(0,0)');
|
||||
|
||||
|
||||
|
||||
|
||||
// ********** LEGEND **********
|
||||
|
||||
legend.width(width/2 - margin.right);
|
||||
|
||||
g.select('.legendWrap')
|
||||
.datum(data)
|
||||
.attr('transform', 'translate(' + (availableWidth / 2) + ',0)')
|
||||
.call(legend);
|
||||
|
||||
|
||||
//TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
|
||||
margin.top = legend.height();
|
||||
|
||||
|
||||
|
||||
|
||||
// ********** FOCUS **********
|
||||
|
||||
var focusWrap = g.select('.focus')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
gEnter.select('.focus').append('g').attr('class', 'x axis');
|
||||
gEnter.select('.focus').append('g').attr('class', 'y axis');
|
||||
gEnter.select('.focus').append('g').attr('class', 'focusLines');
|
||||
|
||||
|
||||
var focusLines = focusWrap.select('.focusLines')
|
||||
.datum(data.filter(function(d) { return !d.disabled }))
|
||||
|
||||
d3.transition(focusLines).call(focus);
|
||||
|
||||
|
||||
xAxis
|
||||
.domain(x.domain())
|
||||
.range(x.range())
|
||||
.ticks( width / 100 )
|
||||
.tickSize(-(availableHeight1), 0);
|
||||
|
||||
focusWrap.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
yAxis
|
||||
.domain(y.domain())
|
||||
.range(y.range())
|
||||
.ticks( height / 36 )
|
||||
.tickSize(-(availableWidth), 0);
|
||||
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
|
||||
|
||||
// ********** CONTEXT **********
|
||||
|
||||
var contextWrap = g.select('.context')
|
||||
.attr('transform', 'translate(' + margin2.left + ',' + height1 + ')');
|
||||
|
||||
gEnter.select('.context').append('g').attr('class', 'x2 axis');
|
||||
gEnter.select('.context').append('g').attr('class', 'y2 axis');
|
||||
gEnter.select('.context').append('g').attr('class', 'contextLines');
|
||||
gEnter.select('.context').append('g').attr('class', 'x brush')
|
||||
.attr('class', 'x brush')
|
||||
.call(brush)
|
||||
.selectAll('rect')
|
||||
.attr('y', -5)
|
||||
.attr('height', height2 + 4);
|
||||
|
||||
var contextLines = contextWrap.select('.contextLines')
|
||||
.datum(data.filter(function(d) { return !d.disabled }))
|
||||
|
||||
d3.transition(contextLines).call(context);
|
||||
|
||||
|
||||
xAxis2
|
||||
.domain(x2.domain())
|
||||
.range(x2.range())
|
||||
.ticks( width / 100 )
|
||||
.tickSize(-(availableHeight2), 0);
|
||||
|
||||
contextWrap.select('.x2.axis')
|
||||
.attr('transform', 'translate(0,' + y2.range()[0] + ')');
|
||||
d3.transition(contextWrap.select('.x2.axis'))
|
||||
.call(xAxis2);
|
||||
|
||||
|
||||
yAxis2
|
||||
.domain(y2.domain())
|
||||
.range(y2.range())
|
||||
.ticks( availableHeight2 / 24 )
|
||||
.tickSize(-(availableWidth), 0);
|
||||
|
||||
contextWrap.select('.y2.axis');
|
||||
|
||||
d3.transition(contextWrap.select('.y2.axis'))
|
||||
.call(yAxis2);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ********** EVENT LISTENERS **********
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
wrap.selectAll('.series').classed('disabled', false);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
/*
|
||||
legend.dispatch.on('legendMouseover', function(d, i) {
|
||||
d.hover = true;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
legend.dispatch.on('legendMouseout', function(d, i) {
|
||||
d.hover = false;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
*/
|
||||
|
||||
focus.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
dispatch.tooltipShow({
|
||||
point: e.point,
|
||||
series: e.series,
|
||||
pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
seriesIndex: e.seriesIndex,
|
||||
pointIndex: e.pointIndex
|
||||
});
|
||||
});
|
||||
focus.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function onBrush() {
|
||||
updateFocus();
|
||||
|
||||
focusLines.call(focus)
|
||||
wrap.select('.x.axis').call(xAxis);
|
||||
wrap.select('.y.axis').call(yAxis);
|
||||
}
|
||||
|
||||
function updateFocus() {
|
||||
var yDomain = brush.empty() ? y2.domain() : d3.extent(d3.merge(seriesData).filter(function(d) {
|
||||
return getX(d) >= brush.extent()[0] && getX(d) <= brush.extent()[1];
|
||||
}), getY); //This doesn't account for the 1 point before and the 1 point after the domain. Would fix, but likely need to change entire methodology here
|
||||
|
||||
if (typeof yDomain[0] == 'undefined') yDomain = y2.domain(); //incase the brush doesn't cover a single point
|
||||
|
||||
|
||||
x.domain(brush.empty() ? x2.domain() : brush.extent());
|
||||
y.domain(yDomain);
|
||||
|
||||
//TODO: Rethink this... performance is horrible, likely need to cut off focus data to within the range
|
||||
// If I limit the data for focusLines would want to include 1 point before and after the extent,
|
||||
// Need to figure out an optimized way to accomplish this.
|
||||
// ***One concern is to try not to make the assumption that all lines are of the same length, and
|
||||
// points with the same index have the same x value (while this is true in our test cases, may
|
||||
// not always be)
|
||||
|
||||
focus.xDomain(x.domain());
|
||||
focus.yDomain(y.domain());
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ********** FUNCTIONS **********
|
||||
|
||||
|
||||
|
||||
|
||||
// ********** PUBLIC ACCESSORS **********
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = _;
|
||||
focus.x(_);
|
||||
context.x(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = _;
|
||||
focus.y(_);
|
||||
context.y(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = _;
|
||||
height1 = _ - height2;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.contextHeight = function(_) {
|
||||
if (!arguments.length) return height2;
|
||||
height2 = _;
|
||||
height1 = height - _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.id = function(_) {
|
||||
if (!arguments.length) return id;
|
||||
id = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
// Chart has multiple similar Axes, to prevent code duplication, probably need to link all axis functions manually like below
|
||||
chart.xTickFormat = function(_) {
|
||||
if (!arguments.length) return x.tickFormat();
|
||||
xAxis.tickFormat(_);
|
||||
xAxis2.tickFormat(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yTickFormat = function(_) {
|
||||
if (!arguments.length) return y.tickFormat();
|
||||
yAxis.tickFormat(_);
|
||||
yAxis2.tickFormat(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
|
||||
//TODO: allow for both focus and context axes to be linked
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,144 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1">
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineWithFourAxes.js"></script>
|
||||
<script>
|
||||
|
||||
/************
|
||||
* Considering making an nv.charts object which will contain abstractions similar to the one below,
|
||||
* but with the usual d3 reusable style.
|
||||
* I could make this abstraction inside the layer above, but this layer incorporates some jQuery, so
|
||||
* thinking nv.charts can be the glue that's not 100% d3
|
||||
************/
|
||||
|
||||
var selector = '#chart1',
|
||||
chart = nv.models.lineWithLegend(),
|
||||
data = sinAndCos(),
|
||||
xTickFormat = d3.format(',r'),
|
||||
yTickFormat = d3.format(',.2f'),
|
||||
xAxisLabel = null,
|
||||
yAxisLabel = 'Voltage (v)',
|
||||
duration = 500;
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
chart
|
||||
.width(width)
|
||||
.height(height)
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(xTickFormat);
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(yTickFormat)
|
||||
.axisLabel(yAxisLabel);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(chart) {
|
||||
var showTooltip = function(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
|
||||
formatX = chart.xAxis.tickFormat();
|
||||
|
||||
// uses the chart's getX and getY, you may customize if x position is not the same as the value you want
|
||||
// ex. daily data without weekends, x is the index, while you want the date
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
};
|
||||
|
||||
chart.dispatch.on('tooltipShow', showTooltip);
|
||||
chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
window.onresize =
|
||||
function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
d3.select('#chart1 svg')
|
||||
.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', chart.height()())
|
||||
.call(chart);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,218 +0,0 @@
|
||||
|
||||
nv.models.lineWithLegend = function() {
|
||||
var margin = {top: 60, right: 60, bottom: 40, left: 60},
|
||||
getWidth = function() { return 960 },
|
||||
getHeight = function() { return 500 },
|
||||
dotRadius = function() { return 2.5 },
|
||||
getX = function(d) { return d.x },
|
||||
getY = function(d) { return d.y },
|
||||
color = d3.scale.category20().range(),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
|
||||
|
||||
var x = d3.scale.linear(),
|
||||
y = d3.scale.linear(),
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom'),
|
||||
yAxis = nv.models.axis().scale(y).orient('left'),
|
||||
x2Axis = nv.models.axis().scale(x).orient('top'),
|
||||
y2Axis = nv.models.axis().scale(y).orient('right'),
|
||||
legend = nv.models.legend().height(30),
|
||||
lines = nv.models.line();
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var width = getWidth(),
|
||||
height = getHeight(),
|
||||
availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
|
||||
var series = data.filter(function(d) { return !d.disabled })
|
||||
.map(function(d) {
|
||||
return d.values.map(function(d,i) {
|
||||
return { x: getX(d,i), y: getY(d,i) }
|
||||
})
|
||||
});
|
||||
|
||||
x .domain(d3.extent(d3.merge(series), function(d) { return d.x } ))
|
||||
.range([0, availableWidth]);
|
||||
|
||||
y .domain(d3.extent(d3.merge(series), function(d) { return d.y } ))
|
||||
.range([availableHeight, 0]);
|
||||
|
||||
lines
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % 10];
|
||||
}).filter(function(d,i) { return !data[i].disabled }))
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.wrap').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 lineWithLegend').append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'x2 axis');
|
||||
gEnter.append('g').attr('class', 'y2 axis');
|
||||
gEnter.append('g').attr('class', 'linesWrap');
|
||||
gEnter.append('g').attr('class', 'legendWrap');
|
||||
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
wrap.selectAll('.series').classed('disabled', false);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
/*
|
||||
//
|
||||
legend.dispatch.on('legendMouseover', function(d, i) {
|
||||
d.hover = true;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
|
||||
legend.dispatch.on('legendMouseout', function(d, i) {
|
||||
d.hover = false;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
*/
|
||||
|
||||
lines.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
dispatch.tooltipShow({
|
||||
point: e.point,
|
||||
series: e.series,
|
||||
pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
seriesIndex: e.seriesIndex,
|
||||
pointIndex: e.pointIndex
|
||||
});
|
||||
});
|
||||
|
||||
lines.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
|
||||
//TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
|
||||
margin.top = legend.height() + 20; // 20 is for the x2 axis... this should be done in a better place, but just doing this to show the 4 axes in an example
|
||||
|
||||
var g = wrap.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
legend.width(width/2 - margin.right);
|
||||
|
||||
g.select('.legendWrap')
|
||||
.datum(data)
|
||||
.attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-margin.top) +')')
|
||||
.call(legend);
|
||||
|
||||
|
||||
var linesWrap = g.select('.linesWrap')
|
||||
.datum(data.filter(function(d) { return !d.disabled }))
|
||||
|
||||
|
||||
d3.transition(linesWrap).call(lines);
|
||||
|
||||
|
||||
xAxis
|
||||
.domain(x.domain())
|
||||
.range(x.range())
|
||||
.ticks( width / 100 )
|
||||
.tickSize(-availableHeight, 0);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
yAxis
|
||||
.domain(y.domain())
|
||||
.range(y.range())
|
||||
.ticks( height / 36 )
|
||||
.tickSize(-availableWidth, 0);
|
||||
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
x2Axis
|
||||
.domain(x.domain())
|
||||
.range(x.range())
|
||||
.ticks( width / 100 )
|
||||
.tickSize(-availableHeight, 0);
|
||||
|
||||
d3.transition(g.select('.x2.axis'))
|
||||
.call(x2Axis);
|
||||
|
||||
y2Axis
|
||||
.domain(y.domain())
|
||||
.range(y.range())
|
||||
.ticks( height / 36 )
|
||||
.tickSize(-availableWidth, 0);
|
||||
|
||||
g.select('.y2.axis')
|
||||
.attr('transform', 'translate('+ x.range()[1] + ',0)');
|
||||
d3.transition(g.select('.y2.axis'))
|
||||
.call(y2Axis);
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.legend = legend;
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
d3.rebind(chart, lines, 'interactive');
|
||||
//consider rebinding x and y as well
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = _;
|
||||
lines.x(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = _;
|
||||
lines.y(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return getWidth;
|
||||
getWidth = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return getHeight;
|
||||
getHeight = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.dotRadius = function(_) {
|
||||
if (!arguments.length) return dotRadius;
|
||||
dotRadius = d3.functor(_);
|
||||
lines.dotRadius = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,142 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1">
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineWithLegend.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
var selector = '#chart1',
|
||||
chart = nv.models.lineWithLegend(),
|
||||
data = sinAndCos(),
|
||||
xTickFormat = d3.format(',r'),
|
||||
yTickFormat = d3.format(',.2f'),
|
||||
xAxisLabel = null,
|
||||
yAxisLabel = 'Voltage (v)',
|
||||
duration = 500;
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg').style('height', '500px');
|
||||
|
||||
chart
|
||||
//.width(width)
|
||||
//.height(height);
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(xTickFormat);
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(yTickFormat)
|
||||
.axisLabel(yAxisLabel);
|
||||
|
||||
svg
|
||||
//.attr('width', width())
|
||||
//.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(chart) {
|
||||
var showTooltip = function(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
|
||||
formatX = chart.xAxis.tickFormat();
|
||||
|
||||
// uses the chart's getX and getY, you may customize if x position is not the same as the value you want
|
||||
// ex. daily data without weekends, x is the index, while you want the date
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
};
|
||||
|
||||
chart.dispatch.on('tooltipShow', showTooltip);
|
||||
chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
window.onresize= function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
d3.select('#chart1 svg')
|
||||
//.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
//.attr('height', chart.height()())
|
||||
.call(chart);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,176 +0,0 @@
|
||||
|
||||
nv.models.lineWithLegend = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
color = d3.scale.category20().range(),
|
||||
width, height;
|
||||
|
||||
var lines = nv.models.line(),
|
||||
//x = d3.scale.linear(),
|
||||
//y = d3.scale.linear(),
|
||||
x = lines.xScale(),
|
||||
y = lines.yScale(),
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom'),
|
||||
yAxis = nv.models.axis().scale(y).orient('left'),
|
||||
legend = nv.models.legend().height(30),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
|
||||
var availableWidth = (width || parseInt(d3.select(this).style('width')) || 960)
|
||||
- margin.left - margin.right,
|
||||
availableHeight = (height || parseInt(d3.select(this).style('height')) || 400)
|
||||
- margin.top - margin.bottom;
|
||||
|
||||
|
||||
lines
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % 10];
|
||||
}).filter(function(d,i) { return !data[i].disabled }));
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.wrap.lineWithLegend').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 lineWithLegend').append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'linesWrap');
|
||||
gEnter.append('g').attr('class', 'legendWrap');
|
||||
|
||||
|
||||
|
||||
//TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
|
||||
margin.top = legend.height();
|
||||
|
||||
var g = wrap.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
|
||||
legend.width(availableWidth / 2);
|
||||
|
||||
g.select('.legendWrap')
|
||||
.datum(data)
|
||||
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')')
|
||||
.call(legend);
|
||||
|
||||
|
||||
|
||||
var linesWrap = g.select('.linesWrap')
|
||||
.datum(data.filter(function(d) { return !d.disabled }))
|
||||
|
||||
d3.transition(linesWrap).call(lines);
|
||||
|
||||
|
||||
|
||||
xAxis
|
||||
.domain(x.domain())
|
||||
.range(x.range())
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize(-availableHeight, 0);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
|
||||
yAxis
|
||||
.domain(y.domain())
|
||||
.range(y.range())
|
||||
.ticks( availableHeight / 36 )
|
||||
.tickSize( -availableWidth, 0);
|
||||
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
wrap.selectAll('.series').classed('disabled', false);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
/*
|
||||
//
|
||||
legend.dispatch.on('legendMouseover', function(d, i) {
|
||||
d.hover = true;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
|
||||
legend.dispatch.on('legendMouseout', function(d, i) {
|
||||
d.hover = false;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
*/
|
||||
|
||||
lines.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
dispatch.tooltipShow({
|
||||
point: e.point,
|
||||
series: e.series,
|
||||
pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
seriesIndex: e.seriesIndex,
|
||||
pointIndex: e.pointIndex
|
||||
});
|
||||
});
|
||||
|
||||
lines.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
// If the legend changed the margin's height, need to recalc positions... should think of a better way to prevent duplicate work
|
||||
if (margin.top != legend.height())
|
||||
chart(selection);
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.legend = legend;
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
d3.rebind(chart, lines, 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
|
||||
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = _;
|
||||
//width = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = _;
|
||||
//height = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,99 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script>
|
||||
|
||||
function ilog(text) {
|
||||
console.log(text);
|
||||
return text;
|
||||
}
|
||||
|
||||
|
||||
function daysInMonth(month,year) {
|
||||
var m = [31,28,31,30,31,30,31,31,30,31,30,31];
|
||||
if (month != 2) return m[month - 1];
|
||||
if (year%4 != 0) return m[1];
|
||||
if (year%100 == 0 && year%400 != 0) return m[1];
|
||||
return m[1] + 1;
|
||||
}
|
||||
|
||||
|
||||
function d3_time_range(floor, step, number) {
|
||||
return function(t0, t1, dt) {
|
||||
var time = floor(t0), times = [];
|
||||
if (time < t0) step(time);
|
||||
if (dt > 1) {
|
||||
while (time < t1) {
|
||||
var date = new Date(+time);
|
||||
if (!(number(date) % dt)) times.push(date);
|
||||
step(time);
|
||||
}
|
||||
} else {
|
||||
while (time < t1) times.push(new Date(+time)), step(time);
|
||||
}
|
||||
return times;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
d3.time.monthEnd = function(date) {
|
||||
return new Date(date.getFullYear(), date.getMonth(), 0);
|
||||
};
|
||||
|
||||
|
||||
d3.time.monthEnds = d3_time_range(d3.time.monthEnd, function(date) {
|
||||
date.setUTCDate(date.getUTCDate() + 1);
|
||||
date.setDate(daysInMonth(date.getMonth() + 1, date.getFullYear()));
|
||||
}, function(date) {
|
||||
return date.getMonth();
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
var margin = {top: 10, right: 40, bottom: 40, left: 40},
|
||||
width = 960 - margin.left - margin.right,
|
||||
height = 80 - margin.top - margin.bottom;
|
||||
|
||||
var x = d3.time.scale()
|
||||
.domain([new Date(2010, 0, 1), new Date(2011, 0, 1)])
|
||||
.range([0, width]);
|
||||
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom")
|
||||
//.ticks(d3.time.months)
|
||||
.ticks(d3.time.monthEnds)
|
||||
//.tickSubdivide(3)
|
||||
.tickSize(8, 4, 0)
|
||||
.tickFormat(d3.time.format("%x"));
|
||||
//.tickFormat(d3.time.format("%B"));
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis)
|
||||
|
||||
.selectAll("text")
|
||||
.attr("text-anchor", "middle")
|
||||
//.attr("text-anchor", "start")
|
||||
.attr("x", 0)
|
||||
.attr("y", 12);
|
||||
|
||||
</script>
|
||||
@ -1,258 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1">
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/multiBarHorizontal.js"></script>
|
||||
<script src="../src/models/multiBarHorizontalWithLegend.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
var test_data = stream_layers(3,12,.1).map(function(data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: data
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
||||
long_short_data = [
|
||||
{
|
||||
key: 'Short',
|
||||
color: '#d62728',
|
||||
values: [
|
||||
{
|
||||
"label" : "Information Technology" ,
|
||||
"y" : -1.8746444827653
|
||||
} ,
|
||||
{
|
||||
"label" : "Consumer Discretionary" ,
|
||||
"y" : -8.0961543492239
|
||||
} ,
|
||||
{
|
||||
"label" : "Health Care" ,
|
||||
"y" : -0.57072943117674
|
||||
} ,
|
||||
{
|
||||
"label" : "Consumer Staples" ,
|
||||
"y" : -2.4174010336624
|
||||
} ,
|
||||
{
|
||||
"label" : "Financials" ,
|
||||
"y" : -0.72009071426284
|
||||
} ,
|
||||
{
|
||||
"label" : "Industrials" ,
|
||||
"y" : -0.77154485523777
|
||||
} ,
|
||||
{
|
||||
"label" : "Energy" ,
|
||||
"y" : -0.90152097798131
|
||||
} ,
|
||||
{
|
||||
"label" : "Materials" ,
|
||||
"y" : -0.91445417330854
|
||||
} ,
|
||||
{
|
||||
"label" : "Telecommunication Services" ,
|
||||
"y" : -0.055746319141851
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'Long',
|
||||
color: '#1f77b4',
|
||||
values: [
|
||||
{
|
||||
"label" : "Information Technology" ,
|
||||
"y" : 25.307646510375
|
||||
} ,
|
||||
{
|
||||
"label" : "Consumer Discretionary" ,
|
||||
"y" : 16.756779544553
|
||||
} ,
|
||||
{
|
||||
"label" : "Health Care" ,
|
||||
"y" : 18.451534877007
|
||||
} ,
|
||||
{
|
||||
"label" : "Consumer Staples" ,
|
||||
"y" : 8.6142352811805
|
||||
} ,
|
||||
{
|
||||
"label" : "Financials" ,
|
||||
"y" : 7.8082472075876
|
||||
} ,
|
||||
{
|
||||
"label" : "Industrials" ,
|
||||
"y" : 5.259101026956
|
||||
} ,
|
||||
{
|
||||
"label" : "Energy" ,
|
||||
"y" : 0.30947953487127
|
||||
} ,
|
||||
{
|
||||
"label" : "Materials" ,
|
||||
"y" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "Telecommunication Services" ,
|
||||
"y" : 0
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
var selector = '#chart1',
|
||||
chart = nv.models.multiBarHorizontalWithLegend()
|
||||
.x(function(d) { return d.label })
|
||||
.margin({top: 30, right: 20, bottom: 50, left: 160})
|
||||
.showControls(false),
|
||||
data = long_short_data,
|
||||
//data = test_data,
|
||||
xTickFormat = function(d) { return d },
|
||||
//xTickFormat = d3.format(',r'),
|
||||
yTickFormat = d3.format(',.2f'),
|
||||
xAxisLabel = null,
|
||||
yAxisLabel = null,
|
||||
duration = 500;
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
chart
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(xTickFormat);
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(yTickFormat)
|
||||
.axisLabel(yAxisLabel);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(chart) {
|
||||
var showTooltip = function showTooltip(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
|
||||
formatX = chart.xAxis.tickFormat();
|
||||
|
||||
// uses the chart's getX and getY, you may customize if x position is not the same as the value you want
|
||||
// ex. daily data without weekends, x is the index, while you want the date
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
formatX(chart.x()(e.point)) + ': ' + formatY(chart.y()(e.point)) +
|
||||
//formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
var tooltip = nv.tooltip.show([left, top], content, e.value < 0 ? 'e' : 'w');
|
||||
|
||||
/*
|
||||
if (!arguments[1]) {
|
||||
tooltip.onmouseenter = function() { showTooltip(e, 1) }; //working on geting tooltips to stay if mouse hovers over them
|
||||
//tooltip.onmouseout = function() { console.log('mouseout'); };
|
||||
tooltip.onmouseout = nv.tooltip.cleanup;
|
||||
}
|
||||
*/
|
||||
};
|
||||
|
||||
chart.dispatch.on('tooltipShow', showTooltip);
|
||||
chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
window.onresize= function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', chart.height()())
|
||||
.transition().duration(duration)
|
||||
.call(chart);
|
||||
|
||||
/*
|
||||
d3.select('#chart1 svg')
|
||||
.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', chart.height()())
|
||||
.call(chart);
|
||||
*/
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,226 +0,0 @@
|
||||
|
||||
nv.models.multiBarHorizontalWithLegend = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
width = function() { return 960 },
|
||||
height = function() { return 500 },
|
||||
color = d3.scale.category20().range(),
|
||||
showControls = true;
|
||||
|
||||
//var x = d3.scale.linear(),
|
||||
var x = d3.scale.ordinal(),
|
||||
y = d3.scale.linear(),
|
||||
xAxis = nv.models.axis().scale(x).orient('left').highlightZero(false),
|
||||
yAxis = nv.models.axis().scale(y).orient('bottom'),
|
||||
legend = nv.models.legend().height(30),
|
||||
controls = nv.models.legend().height(30),
|
||||
multibar = nv.models.multiBarHorizontal().stacked(false),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
|
||||
|
||||
//TODO: let user select default
|
||||
var controlsData = [
|
||||
{ key: 'Grouped' },
|
||||
{ key: 'Stacked', disabled: true },
|
||||
];
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var availableWidth = width() - margin.left - margin.right,
|
||||
availableHeight = height() - margin.top - margin.bottom,
|
||||
seriesData;
|
||||
|
||||
if (multibar.stacked()) {
|
||||
seriesData = data.filter(function(d) { return !d.disabled })
|
||||
.reduce(function(prev, curr, index) { //sum up all the y's
|
||||
curr.values.forEach(function(d,i) {
|
||||
if (!index) prev[i] = {x: multibar.x()(d,i), y:0};
|
||||
prev[i].y += multibar.y()(d,i);
|
||||
});
|
||||
return prev;
|
||||
}, []);
|
||||
} else {
|
||||
seriesData = data.filter(function(d) { return !d.disabled })
|
||||
.map(function(d) {
|
||||
return d.values.map(function(d,i) {
|
||||
return { x: multibar.x()(d,i), y: multibar.y()(d,i) }
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
x .domain(d3.merge(seriesData).map(function(d) { return d.x }))
|
||||
.rangeBands([0, availableHeight], .1);
|
||||
|
||||
y .domain(d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(multibar.forceY) ))
|
||||
.range([0, availableWidth]);
|
||||
|
||||
multibar
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % 10];
|
||||
}).filter(function(d,i) { return !data[i].disabled }))
|
||||
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.wrap').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multiBarHorizontalWithLegend').append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'linesWrap');
|
||||
gEnter.append('g').attr('class', 'legendWrap');
|
||||
gEnter.append('g').attr('class', 'controlsWrap');
|
||||
|
||||
|
||||
|
||||
//TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
|
||||
margin.top = legend.height();
|
||||
|
||||
var g = wrap.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
legend.width(availableWidth / 2);
|
||||
|
||||
g.select('.legendWrap')
|
||||
.datum(data)
|
||||
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')')
|
||||
.call(legend);
|
||||
|
||||
if (showControls) {
|
||||
controls.width(180).color(['#444', '#444', '#444']);
|
||||
g.select('.controlsWrap')
|
||||
.datum(controlsData)
|
||||
.attr('transform', 'translate(0,' + (-margin.top) +')')
|
||||
.call(controls);
|
||||
}
|
||||
|
||||
|
||||
var linesWrap = g.select('.linesWrap')
|
||||
.datum(data.filter(function(d) { return !d.disabled }))
|
||||
|
||||
|
||||
d3.transition(linesWrap).call(multibar);
|
||||
|
||||
|
||||
xAxis
|
||||
.scale(x)
|
||||
.ticks( availableHeight / 24 )
|
||||
.tickSize(-availableWidth, 0);
|
||||
|
||||
//g.select('.x.axis')
|
||||
//.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
var xTicks = g.select('.x.axis').selectAll('g');
|
||||
|
||||
xTicks
|
||||
.selectAll('line, text')
|
||||
.style('opacity', 1)
|
||||
|
||||
xTicks.filter(function(d,i) {
|
||||
return i % Math.ceil(data[0].values.length / (availableWidth / 100)) !== 0;
|
||||
})
|
||||
.selectAll('line, text')
|
||||
.style('opacity', 0)
|
||||
|
||||
yAxis
|
||||
.domain(y.domain())
|
||||
.range(y.range())
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize( -availableHeight, 0);
|
||||
|
||||
g.select('.y.axis')
|
||||
.attr('transform', 'translate(0,' + availableHeight + ')');
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
wrap.selectAll('.series').classed('disabled', false);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
controls.dispatch.on('legendClick', function(d,i) {
|
||||
if (!d.disabled) return;
|
||||
controlsData = controlsData.map(function(s) {
|
||||
s.disabled = true;
|
||||
return s;
|
||||
});
|
||||
d.disabled = false;
|
||||
|
||||
switch (d.key) {
|
||||
case 'Grouped':
|
||||
multibar.stacked(false);
|
||||
break;
|
||||
case 'Stacked':
|
||||
multibar.stacked(true);
|
||||
break;
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
|
||||
multibar.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
|
||||
multibar.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.legend = legend;
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id');
|
||||
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showControls = function(_) {
|
||||
if (!arguments.length) return showControls;
|
||||
showControls = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,162 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1">
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/multiBar.js"></script>
|
||||
<script src="../src/models/multiBarWithLegend.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
var test_data = stream_layers(3,Math.random()*200,.1).map(function(data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: data
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var selector = '#chart1',
|
||||
chart = nv.models.multiBarWithLegend(),
|
||||
//.x(function(d) { return d.label })
|
||||
//.y(function(d) { return d.value })
|
||||
data = test_data,
|
||||
xTickFormat = d3.format(',f'),
|
||||
yTickFormat = d3.format(',.2f'),
|
||||
xAxisLabel = null,
|
||||
yAxisLabel = null,
|
||||
duration = 500;
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
chart
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(xTickFormat);
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(yTickFormat)
|
||||
.axisLabel(yAxisLabel);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(chart) {
|
||||
var showTooltip = function(e) {
|
||||
var offsetElement = document.getElementById(selector.substr(1)),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
|
||||
formatX = chart.xAxis.tickFormat();
|
||||
|
||||
// uses the chart's getX and getY, you may customize if x position is not the same as the value you want
|
||||
// ex. daily data without weekends, x is the index, while you want the date
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
|
||||
};
|
||||
|
||||
chart.dispatch.on('tooltipShow', showTooltip);
|
||||
chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
window.onresize= function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', chart.height()())
|
||||
.transition().duration(duration)
|
||||
.call(chart);
|
||||
|
||||
/*
|
||||
d3.select('#chart1 svg')
|
||||
.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', chart.height()())
|
||||
.call(chart);
|
||||
*/
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,249 +0,0 @@
|
||||
|
||||
nv.models.multiBarWithLegend = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
width = function() { return 960 },
|
||||
height = function() { return 500 },
|
||||
color = d3.scale.category20().range(),
|
||||
showControls = true,
|
||||
showLegend = true;
|
||||
|
||||
//var x = d3.scale.linear(),
|
||||
var x = d3.scale.ordinal(),
|
||||
y = d3.scale.linear(),
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false),
|
||||
yAxis = nv.models.axis().scale(y).orient('left'),
|
||||
legend = nv.models.legend().height(30),
|
||||
controls = nv.models.legend().height(30),
|
||||
multibar = nv.models.multiBar().stacked(false),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
|
||||
|
||||
//TODO: let user select default
|
||||
var controlsData = [
|
||||
{ key: 'Grouped' },
|
||||
{ key: 'Stacked', disabled: true }
|
||||
];
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var availableWidth = width() - margin.left - margin.right,
|
||||
availableHeight = height() - margin.top - margin.bottom,
|
||||
seriesData;
|
||||
|
||||
if (multibar.stacked()) {
|
||||
seriesData = data.filter(function(d) { return !d.disabled })
|
||||
.reduce(function(prev, curr, index) { //sum up all the y's
|
||||
curr.values.forEach(function(d,i) {
|
||||
if (!index) prev[i] = {x: multibar.x()(d,i), y:0};
|
||||
prev[i].y += multibar.y()(d,i);
|
||||
});
|
||||
return prev;
|
||||
}, []);
|
||||
} else {
|
||||
seriesData = data.filter(function(d) { return !d.disabled })
|
||||
.map(function(d) {
|
||||
return d.values.map(function(d,i) {
|
||||
return { x: multibar.x()(d,i), y: multibar.y()(d,i) }
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//x .domain(d3.extent(d3.merge(seriesData).map(function(d) { return d.x }).concat(multibar.forceX) ))
|
||||
//.range([0, availableWidth]);
|
||||
|
||||
x .domain(d3.merge(seriesData).map(function(d) { return d.x }))
|
||||
.rangeBands([0, availableWidth], .1);
|
||||
//.rangeRoundBands([0, availableWidth], .1);
|
||||
|
||||
y .domain(d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(multibar.forceY) ))
|
||||
.range([availableHeight, 0]);
|
||||
|
||||
multibar
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
//.xDomain(x.domain())
|
||||
//.yDomain(y.domain())
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % 20];
|
||||
}).filter(function(d,i) { return !data[i].disabled }))
|
||||
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.wrap.multiBarWithLegend').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multiBarWithLegend').append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'linesWrap');
|
||||
gEnter.append('g').attr('class', 'legendWrap');
|
||||
gEnter.append('g').attr('class', 'controlsWrap');
|
||||
|
||||
|
||||
|
||||
var g = wrap.select('g');
|
||||
|
||||
|
||||
if (showLegend) {
|
||||
//TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
|
||||
margin.top = legend.height();
|
||||
|
||||
legend.width(availableWidth / 2);
|
||||
|
||||
g.select('.legendWrap')
|
||||
.datum(data)
|
||||
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')')
|
||||
.call(legend);
|
||||
}
|
||||
|
||||
if (showControls) {
|
||||
controls.width(180).color(['#444', '#444', '#444']);
|
||||
g.select('.controlsWrap')
|
||||
.datum(controlsData)
|
||||
.attr('transform', 'translate(0,' + (-margin.top) +')')
|
||||
.call(controls);
|
||||
}
|
||||
|
||||
|
||||
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
var linesWrap = g.select('.linesWrap')
|
||||
.datum(data.filter(function(d) { return !d.disabled }))
|
||||
|
||||
|
||||
d3.transition(linesWrap).call(multibar);
|
||||
|
||||
|
||||
xAxis
|
||||
.scale(x)
|
||||
//.domain(x.domain())
|
||||
//.range(x.range())
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize(-availableHeight, 0);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
var xTicks = g.select('.x.axis').selectAll('g');
|
||||
|
||||
xTicks
|
||||
.selectAll('line, text')
|
||||
.style('opacity', 1)
|
||||
|
||||
xTicks.filter(function(d,i) {
|
||||
return i % Math.ceil(data[0].values.length / (availableWidth / 100)) !== 0;
|
||||
})
|
||||
.selectAll('line, text')
|
||||
.style('opacity', 0)
|
||||
|
||||
yAxis
|
||||
.domain(y.domain())
|
||||
.range(y.range())
|
||||
.ticks( availableHeight / 36 )
|
||||
.tickSize( -availableWidth, 0);
|
||||
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
wrap.selectAll('.series').classed('disabled', false);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
controls.dispatch.on('legendClick', function(d,i) {
|
||||
if (!d.disabled) return;
|
||||
controlsData = controlsData.map(function(s) {
|
||||
s.disabled = true;
|
||||
return s;
|
||||
});
|
||||
d.disabled = false;
|
||||
|
||||
switch (d.key) {
|
||||
case 'Grouped':
|
||||
multibar.stacked(false);
|
||||
break;
|
||||
case 'Stacked':
|
||||
multibar.stacked(true);
|
||||
break;
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
|
||||
multibar.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
|
||||
multibar.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.legend = legend;
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'stacked');
|
||||
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
legend.color(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showControls = function(_) {
|
||||
if (!arguments.length) return showControls;
|
||||
showControls = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showLegend = function(_) {
|
||||
if (!arguments.length) return showLegend;
|
||||
showLegend = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,263 +0,0 @@
|
||||
|
||||
nv.models.pie = function() {
|
||||
var margin = {top: 20, right: 20, bottom: 20, left: 20},
|
||||
width = 500,
|
||||
height = 500,
|
||||
animate = 2000,
|
||||
radius = Math.min(width-(margin.right+margin.left), height-(margin.top+margin.bottom)) / 2,
|
||||
label ='label',
|
||||
field ='y',
|
||||
id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
|
||||
color = d3.scale.category20(),
|
||||
showLabels = true,
|
||||
donut = false,
|
||||
title = '';
|
||||
|
||||
var lastWidth = 0,
|
||||
lastHeight = 0;
|
||||
|
||||
|
||||
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
|
||||
var svg = d3.select(this)
|
||||
.on("click", function(d,i) {
|
||||
dispatch.chartClick({
|
||||
data: d,
|
||||
index: i,
|
||||
pos: d3.event,
|
||||
id: id
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
var background = svg.selectAll('svg.margin').data([data]);
|
||||
var parent = background.enter();
|
||||
parent.append("text")
|
||||
.attr("class", "title")
|
||||
.attr("dy", ".91em")
|
||||
.attr("text-anchor", "start")
|
||||
.text(title);
|
||||
parent.append('svg')
|
||||
.attr('class','margin')
|
||||
.attr('x', margin.left)
|
||||
.attr('y', margin.top)
|
||||
.style('overflow','visible');
|
||||
|
||||
var wrap = background.selectAll('g.wrap').data([data]);
|
||||
wrap.exit().remove();
|
||||
var wEnter = wrap.enter();
|
||||
|
||||
wEnter
|
||||
.append('g')
|
||||
.attr('class', 'wrap')
|
||||
.attr('id','wrap-'+id)
|
||||
.append('g')
|
||||
.attr('class', 'pie');
|
||||
|
||||
|
||||
|
||||
wrap
|
||||
.attr('width', width) //-(margin.left+margin.right))
|
||||
.attr('height', height) //-(margin.top+margin.bottom))
|
||||
.attr("transform", "translate(" + radius + "," + radius + ")");
|
||||
|
||||
|
||||
|
||||
|
||||
var arc = d3.svg.arc()
|
||||
.outerRadius((radius-(radius / 5)));
|
||||
|
||||
if (donut) arc.innerRadius(radius / 2);
|
||||
|
||||
|
||||
// Setup the Pie chart and choose the data element
|
||||
var pie = d3.layout.pie()
|
||||
.value(function (d) { return d[field]; });
|
||||
|
||||
var slices = background.select('.pie').selectAll(".slice")
|
||||
.data(pie);
|
||||
|
||||
slices.exit().remove();
|
||||
|
||||
var ae = slices.enter().append("svg:g")
|
||||
.attr("class", "slice")
|
||||
.on('mouseover', function(d,i){
|
||||
d3.select(this).classed('hover', true);
|
||||
dispatch.tooltipShow({
|
||||
label: d.data[label],
|
||||
value: d.data[field],
|
||||
data: d.data,
|
||||
index: i,
|
||||
pos: [d3.event.pageX, d3.event.pageY],
|
||||
id: id
|
||||
});
|
||||
|
||||
})
|
||||
.on('mouseout', function(d,i){
|
||||
d3.select(this).classed('hover', false);
|
||||
dispatch.tooltipHide({
|
||||
label: d.data[label],
|
||||
value: d.data[field],
|
||||
data: d.data,
|
||||
index: i,
|
||||
id: id
|
||||
});
|
||||
})
|
||||
.on('click', function(d,i) {
|
||||
dispatch.elementClick({
|
||||
label: d.data[label],
|
||||
value: d.data[field],
|
||||
data: d.data,
|
||||
index: i,
|
||||
pos: d3.event,
|
||||
id: id
|
||||
});
|
||||
d3.event.stopPropagation();
|
||||
})
|
||||
.on('dblclick', function(d,i) {
|
||||
dispatch.elementDblClick({
|
||||
label: d.data[label],
|
||||
value: d.data[field],
|
||||
data: d.data,
|
||||
index: i,
|
||||
pos: d3.event,
|
||||
id: id
|
||||
});
|
||||
d3.event.stopPropagation();
|
||||
});
|
||||
|
||||
var paths = ae.append("svg:path")
|
||||
.attr('class','path')
|
||||
.attr("fill", function(d, i) { return color(i); });
|
||||
//.attr('d', arc);
|
||||
|
||||
slices.select('.path')
|
||||
.attr('d', arc)
|
||||
.transition()
|
||||
.ease("bounce")
|
||||
.duration(animate)
|
||||
.attrTween("d", tweenPie);
|
||||
|
||||
if (showLabels) {
|
||||
// This does the normal label
|
||||
ae.append("text");
|
||||
|
||||
slices.select("text")
|
||||
.transition()
|
||||
.duration(animate)
|
||||
.ease('bounce')
|
||||
.attr("transform", function(d) {
|
||||
d.outerRadius = radius + 10; // Set Outer Coordinate
|
||||
d.innerRadius = radius + 15; // Set Inner Coordinate
|
||||
return "translate(" + arc.centroid(d) + ")";
|
||||
})
|
||||
.attr("text-anchor", "middle") //center the text on it's origin
|
||||
.style("font", "bold 12px Arial")
|
||||
.text(function(d, i) { return d.data[label]; });
|
||||
}
|
||||
|
||||
|
||||
// Computes the angle of an arc, converting from radians to degrees.
|
||||
function angle(d) {
|
||||
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
|
||||
return a > 90 ? a - 180 : a;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function tweenPie(b) {
|
||||
b.innerRadius = 0;
|
||||
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
|
||||
return function(t) {
|
||||
return arc(i(t));
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
if (margin.left + margin.right + 20 > _) {
|
||||
width = margin.left + margin.right + 20; // Min width
|
||||
} else {
|
||||
width = _;
|
||||
}
|
||||
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
if (margin.top + margin.bottom + 20 > _) {
|
||||
height = margin.top + margin.bottom + 20; // Min height
|
||||
} else {
|
||||
height = _;
|
||||
}
|
||||
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.animate = function(_) {
|
||||
if (!arguments.length) return animate;
|
||||
animate = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.labelField = function(_) {
|
||||
if (!arguments.length) return (label);
|
||||
label = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.dataField = function(_) {
|
||||
if (!arguments.length) return (field);
|
||||
field = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showLabels = function(_) {
|
||||
if (!arguments.length) return (showLabels);
|
||||
showLabels = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.donut = function(_) {
|
||||
if (!arguments.length) return (donut);
|
||||
donut = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.title = function(_) {
|
||||
if (!arguments.length) return (title);
|
||||
title = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.id = function(_) {
|
||||
if (!arguments.length) return id;
|
||||
id = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
#offsetDiv {
|
||||
margin-left: 100px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
*/
|
||||
|
||||
#test1 {
|
||||
margin: 0;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#test1 svg {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="offsetDiv">
|
||||
<div id="test1" class="chartWrap">
|
||||
<svg></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../lib/fisheye.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/distribution.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/scatterChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
//Format A
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.scatterChart()
|
||||
.showDistX(true)
|
||||
.showDistY(true)
|
||||
//.height(500)
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
chart.xAxis.tickFormat(d3.format('.02f'))
|
||||
chart.yAxis.tickFormat(d3.format('.02f'))
|
||||
|
||||
d3.select('#test1 svg')
|
||||
.datum(randomData(4,40))
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
function randomData(groups, points) { //# groups,# points per group
|
||||
var data = [],
|
||||
shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
|
||||
random = d3.random.normal();
|
||||
|
||||
for (i = 0; i < groups; i++) {
|
||||
data.push({
|
||||
key: 'Group ' + i,
|
||||
values: []
|
||||
});
|
||||
|
||||
for (j = 0; j < points; j++) {
|
||||
data[i].values.push({
|
||||
x: random(),
|
||||
y: random(),
|
||||
size: Math.random(),
|
||||
shape: shapes[j % 6]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,293 +0,0 @@
|
||||
nv.models.scatterChart = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
width = null,
|
||||
height = null,
|
||||
color = d3.scale.category20().range(),
|
||||
showDistX = false,
|
||||
showDistY = false,
|
||||
showLegend = true,
|
||||
tooltips = true,
|
||||
tooltipX = function(key, x, y) { return '<strong>' + x + '</strong>' },
|
||||
tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' },
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + key + '</h3>' +
|
||||
'<p>' + y + ' at ' + x + '</p>'
|
||||
};
|
||||
|
||||
|
||||
var scatter = nv.models.scatter(),
|
||||
x = scatter.xScale(),
|
||||
y = scatter.yScale(),
|
||||
xAxis = nv.models.axis().orient('bottom').scale(x).tickPadding(10),
|
||||
yAxis = nv.models.axis().orient('left').scale(y).tickPadding(10),
|
||||
legend = nv.models.legend().height(30),
|
||||
distX = nv.models.distribution().axis('x').scale(x),
|
||||
distY = nv.models.distribution().axis('y').scale(y),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
|
||||
x0, y0; //TODO: abstract distribution component and have old scales stored there
|
||||
|
||||
var showTooltip = function(e, offsetElement) {
|
||||
//TODO: make tooltip style an option between single or dual on axes (maybe on all charts with axes?)
|
||||
|
||||
//var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
|
||||
//top = e.pos[1] + ( offsetElement.offsetTop || 0),
|
||||
var leftX = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
|
||||
topX = y.range()[0] + margin.top + ( offsetElement.offsetTop || 0),
|
||||
leftY = x.range()[0] + margin.left + ( offsetElement.offsetLeft || 0 ),
|
||||
topY = e.pos[1] + ( offsetElement.offsetTop || 0),
|
||||
xVal = xAxis.tickFormat()(scatter.x()(e.point)),
|
||||
yVal = yAxis.tickFormat()(scatter.y()(e.point)),
|
||||
contentX = tooltipX(e.series.key, xVal, yVal, e, chart),
|
||||
contentY = tooltipY(e.series.key, xVal, yVal, e, chart);
|
||||
//content = tooltip(e.series.key, xVal, yVal, e, chart);
|
||||
|
||||
nv.tooltip.show([leftX, topX], contentX, 'n', 1);
|
||||
nv.tooltip.show([leftY, topY], contentY, 'e', 1);
|
||||
//nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
|
||||
};
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var container = d3.select(this),
|
||||
that = this;
|
||||
|
||||
//TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection)
|
||||
chart.update = function() { container.transition().call(chart) };
|
||||
|
||||
|
||||
var availableWidth = (width || parseInt(container.style('width')) || 960)
|
||||
- margin.left - margin.right,
|
||||
availableHeight = (height || parseInt(container.style('height')) || 400)
|
||||
- margin.top - margin.bottom;
|
||||
|
||||
|
||||
|
||||
x0 = x0 || scatter.xScale();
|
||||
y0 = y0 || scatter.yScale();
|
||||
|
||||
|
||||
|
||||
var wrap = container.selectAll('g.wrap.scatterChart').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 scatterChart chart-' + scatter.id()).append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'legendWrap');
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'scatterWrap');
|
||||
gEnter.append('g').attr('class', 'distWrap');
|
||||
|
||||
var g = wrap.select('g')
|
||||
|
||||
if (showLegend) {
|
||||
legend.width( availableWidth / 2 );
|
||||
|
||||
wrap.select('.legendWrap')
|
||||
.datum(data)
|
||||
.call(legend);
|
||||
|
||||
if ( margin.top != legend.height()) {
|
||||
margin.top = legend.height();
|
||||
availableHeight = (height || parseInt(container.style('height')) || 400)
|
||||
- margin.top - margin.bottom;
|
||||
}
|
||||
|
||||
wrap.select('.legendWrap')
|
||||
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
|
||||
}
|
||||
|
||||
|
||||
scatter
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % color.length];
|
||||
}).filter(function(d,i) { return !data[i].disabled }))
|
||||
|
||||
|
||||
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
var scatterWrap = wrap.select('.scatterWrap')
|
||||
.datum(data.filter(function(d) { return !d.disabled }));
|
||||
d3.transition(scatterWrap).call(scatter);
|
||||
|
||||
|
||||
xAxis
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize( -availableHeight , 0);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
|
||||
yAxis
|
||||
.ticks( availableHeight / 36 )
|
||||
.tickSize( -availableWidth, 0);
|
||||
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
distX
|
||||
.width(availableWidth)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % color.length];
|
||||
}).filter(function(d,i) { return !data[i].disabled }));
|
||||
gEnter.select('.distWrap').append('g')
|
||||
.attr('class', 'distributionX')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
g.select('.distributionX')
|
||||
.datum(data.filter(function(d) { return !d.disabled }))
|
||||
.call(distX);
|
||||
|
||||
|
||||
distY
|
||||
.width(availableHeight)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % color.length];
|
||||
}).filter(function(d,i) { return !data[i].disabled }));
|
||||
gEnter.select('.distWrap').append('g')
|
||||
.attr('class', 'distributionY')
|
||||
.attr('transform', 'translate(-' + distY.size() + ',0)');
|
||||
g.select('.distributionY')
|
||||
.datum(data.filter(function(d) { return !d.disabled }))
|
||||
.call(distY);
|
||||
|
||||
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i, that) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
wrap.selectAll('.series').classed('disabled', false);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
chart.update();
|
||||
});
|
||||
|
||||
/*
|
||||
legend.dispatch.on('legendMouseover', function(d, i) {
|
||||
d.hover = true;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
|
||||
legend.dispatch.on('legendMouseout', function(d, i) {
|
||||
d.hover = false;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
scatter.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .distx-' + e.pointIndex)
|
||||
.attr('y1', e.pos[1] - availableHeight);
|
||||
d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .disty-' + e.pointIndex)
|
||||
.attr('x2', e.pos[0] + distX.size());
|
||||
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, that.parentNode) } ); // TODO: maybe merge with above?
|
||||
|
||||
scatter.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
|
||||
d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .distx-' + e.pointIndex)
|
||||
.attr('y1', 0);
|
||||
d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .disty-' + e.pointIndex)
|
||||
.attr('x2', distY.size());
|
||||
});
|
||||
if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
//store old scales for use in transitions on update, to animate from old to new positions, and sizes
|
||||
x0 = x.copy();
|
||||
y0 = y.copy();
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.legend = legend;
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
d3.rebind(chart, scatter, 'interactive', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'fisheye', 'fisheyeRadius');
|
||||
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
legend.color(_);
|
||||
distX.color(_);
|
||||
distY.color(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showDistX = function(_) {
|
||||
if (!arguments.length) return showDistX;
|
||||
showDistX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showDistY = function(_) {
|
||||
if (!arguments.length) return showDistY;
|
||||
showDistY = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showControls = function(_) {
|
||||
if (!arguments.length) return showControls;
|
||||
showControls = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showLegend = function(_) {
|
||||
if (!arguments.length) return showLegend;
|
||||
showLegend = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltips = function(_) {
|
||||
if (!arguments.length) return tooltips;
|
||||
tooltips = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltipContent = function(_) {
|
||||
if (!arguments.length) return tooltip;
|
||||
tooltip = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,418 +0,0 @@
|
||||
|
||||
nv.models.scatterFisheyeChart = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
width = null,
|
||||
height = null,
|
||||
color = nv.utils.defaultColor(),
|
||||
showDistX = false,
|
||||
showDistY = false,
|
||||
showLegend = true,
|
||||
showControls = true,
|
||||
fisheye = 0,
|
||||
tooltips = true,
|
||||
tooltipX = function(key, x, y) { return '<strong>' + x + '</strong>' },
|
||||
tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' },
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + key + '</h3>' +
|
||||
'<p>' + y + ' at ' + x + '</p>'
|
||||
},
|
||||
noData = "No Data Available."
|
||||
;
|
||||
|
||||
var x = d3.fisheye.scale(d3.scale.linear).distortion(0),
|
||||
y = d3.fisheye.scale(d3.scale.linear).distortion(0);
|
||||
|
||||
var scatter = nv.models.scatter().xScale(x).yScale(y),
|
||||
//x = scatter.xScale(),
|
||||
//y = scatter.yScale(),
|
||||
xAxis = nv.models.axis().orient('bottom').scale(x).tickPadding(10),
|
||||
yAxis = nv.models.axis().orient('left').scale(y).tickPadding(10),
|
||||
legend = nv.models.legend().height(30),
|
||||
controls = nv.models.legend().height(30),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
|
||||
x0, y0; //TODO: abstract distribution component and have old scales stored there
|
||||
|
||||
var showTooltip = function(e, offsetElement) {
|
||||
//TODO: make tooltip style an option between single or dual on axes (maybe on all charts with axes?)
|
||||
|
||||
//var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
|
||||
//top = e.pos[1] + ( offsetElement.offsetTop || 0),
|
||||
var leftX = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
|
||||
topX = y.range()[0] + margin.top + ( offsetElement.offsetTop || 0),
|
||||
leftY = x.range()[0] + margin.left + ( offsetElement.offsetLeft || 0 ),
|
||||
topY = e.pos[1] + ( offsetElement.offsetTop || 0),
|
||||
xVal = xAxis.tickFormat()(scatter.x()(e.point, e.pointIndex)),
|
||||
yVal = yAxis.tickFormat()(scatter.y()(e.point, e.pointIndex)),
|
||||
contentX = tooltipX(e.series.key, xVal, yVal, e, chart),
|
||||
contentY = tooltipY(e.series.key, xVal, yVal, e, chart);
|
||||
//content = tooltip(e.series.key, xVal, yVal, e, chart);
|
||||
|
||||
nv.tooltip.show([leftX, topX], contentX, 'n', 1, offsetElement);
|
||||
nv.tooltip.show([leftY, topY], contentY, 'e', 1, offsetElement);
|
||||
//nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
|
||||
};
|
||||
|
||||
var controlsData = [
|
||||
{ key: 'Magnify', disabled: true }
|
||||
];
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var container = d3.select(this),
|
||||
that = this;
|
||||
|
||||
//TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection)
|
||||
chart.update = function() { selection.transition().call(chart) };
|
||||
|
||||
|
||||
var availableWidth = (width || parseInt(container.style('width')) || 960)
|
||||
- margin.left - margin.right,
|
||||
availableHeight = (height || parseInt(container.style('height')) || 400)
|
||||
- margin.top - margin.bottom;
|
||||
|
||||
|
||||
//------------------------------------------------------------
|
||||
// Display No Data message if there's nothing to show.
|
||||
|
||||
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
||||
container.append('text')
|
||||
.attr('class', 'nvd3 nv-noData')
|
||||
.attr('x', availableWidth / 2)
|
||||
.attr('y', availableHeight / 2)
|
||||
.attr('dy', '-.7em')
|
||||
.style('text-anchor', 'middle')
|
||||
.text(noData);
|
||||
return chart;
|
||||
} else {
|
||||
container.select('.nv-noData').remove();
|
||||
}
|
||||
|
||||
//------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
x0 = x0 || scatter.xScale();
|
||||
y0 = y0 || scatter.yScale();
|
||||
|
||||
|
||||
var wrap = container.selectAll('g.nv-wrap.nv-scatterChart').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatterChart nv-chart-' + scatter.id()).append('g');
|
||||
|
||||
|
||||
gEnter.append('rect')
|
||||
.attr('class', 'nvd3 nv-background')
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
|
||||
gEnter.append('g').attr('class', 'nv-legendWrap');
|
||||
gEnter.append('g').attr('class', 'nv-x nv-axis');
|
||||
gEnter.append('g').attr('class', 'nv-y nv-axis');
|
||||
gEnter.append('g').attr('class', 'nv-scatterWrap');
|
||||
gEnter.append('g').attr('class', 'nv-controlsWrap');
|
||||
//gEnter.append('g').attr('class', 'nv-distWrap');
|
||||
|
||||
var g = wrap.select('g')
|
||||
|
||||
if (showLegend) {
|
||||
legend.width( availableWidth / 2 );
|
||||
|
||||
wrap.select('.nv-legendWrap')
|
||||
.datum(data)
|
||||
.call(legend);
|
||||
|
||||
if ( margin.top != legend.height()) {
|
||||
margin.top = legend.height();
|
||||
availableHeight = (height || parseInt(container.style('height')) || 400)
|
||||
- margin.top - margin.bottom;
|
||||
}
|
||||
|
||||
wrap.select('.nv-legendWrap')
|
||||
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
|
||||
}
|
||||
|
||||
|
||||
scatter
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color(d, i);
|
||||
}).filter(function(d,i) { return !data[i].disabled }))
|
||||
|
||||
|
||||
if (showControls) {
|
||||
controls.width(180).color(['#444']);
|
||||
g.select('.nv-controlsWrap')
|
||||
.datum(controlsData)
|
||||
.attr('transform', 'translate(0,' + (-margin.top) +')')
|
||||
.call(controls);
|
||||
}
|
||||
|
||||
|
||||
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
var scatterWrap = wrap.select('.nv-scatterWrap')
|
||||
.datum(data.filter(function(d) { return !d.disabled }));
|
||||
d3.transition(scatterWrap).call(scatter);
|
||||
|
||||
|
||||
xAxis
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize( -availableHeight , 0);
|
||||
|
||||
g.select('.nv-x.nv-axis')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
d3.transition(g.select('.nv-x.nv-axis'))
|
||||
.call(xAxis);
|
||||
|
||||
|
||||
yAxis
|
||||
.ticks( availableHeight / 36 )
|
||||
.tickSize( -availableWidth, 0);
|
||||
|
||||
d3.transition(g.select('.nv-y.nv-axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
|
||||
|
||||
//TODO abstract Distribution into its own component
|
||||
if ( showDistX || showDistY) {
|
||||
var distWrap = scatterWrap.selectAll('g.nv-distribution')
|
||||
.data(function(d) { return d }, function(d) { return d.key });
|
||||
|
||||
distWrap.enter().append('g').attr('class', function(d,i) { return 'nv-distribution nv-series-' + i })
|
||||
|
||||
distWrap.style('stroke', function(d,i) { return color.filter(function(d,i) { return data[i] && !data[i].disabled })[i % color.length] })
|
||||
}
|
||||
|
||||
if (showDistX) {
|
||||
var distX = distWrap.selectAll('line.nv-distX')
|
||||
.data(function(d) { return d.values })
|
||||
distX.enter().append('line')
|
||||
.attr('x1', function(d,i) { return x0(scatter.x()(d,i)) })
|
||||
.attr('x2', function(d,i) { return x0(scatter.x()(d,i)) })
|
||||
//d3.transition(distX.exit())
|
||||
d3.transition(distWrap.exit().selectAll('line.nv-distX'))
|
||||
.attr('x1', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
.attr('x2', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
.remove();
|
||||
distX
|
||||
.attr('class', function(d,i) { return 'nv-distX nv-distX-' + i })
|
||||
.attr('y1', y.range()[0])
|
||||
.attr('y2', y.range()[0] + 8);
|
||||
d3.transition(distX)
|
||||
.attr('x1', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
.attr('x2', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
}
|
||||
|
||||
|
||||
if (showDistY) {
|
||||
var distY = distWrap.selectAll('line.nv-distY')
|
||||
.data(function(d) { return d.values })
|
||||
distY.enter().append('line')
|
||||
.attr('y1', function(d,i) { return y0(scatter.y()(d,i)) })
|
||||
.attr('y2', function(d,i) { return y0(scatter.y()(d,i)) });
|
||||
//d3.transition(distY.exit())
|
||||
d3.transition(distWrap.exit().selectAll('line.nv-distY'))
|
||||
.attr('y1', function(d,i) { return y(scatter.y()(d,i)) })
|
||||
.attr('y2', function(d,i) { return y(scatter.y()(d,i)) })
|
||||
.remove();
|
||||
distY
|
||||
.attr('class', function(d,i) { return 'nv-distY nv-distY-' + i })
|
||||
.attr('x1', x.range()[0])
|
||||
.attr('x2', x.range()[0] - 8)
|
||||
d3.transition(distY)
|
||||
.attr('y1', function(d,i) { return y(scatter.y()(d,i)) })
|
||||
.attr('y2', function(d,i) { return y(scatter.y()(d,i)) });
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i, that) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
wrap.selectAll('.nv-series').classed('disabled', false);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
|
||||
controls.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
fisheye = d.disabled ? 0 : 2.5;
|
||||
g.select('.nv-background').style('pointer-events', d.disabled ? 'none' : 'all');
|
||||
scatter.interactive(d.disabled);
|
||||
tooltips = d.disabled;
|
||||
|
||||
if (d.disabled) {
|
||||
x.distortion(fisheye).focus(0);
|
||||
y.distortion(fisheye).focus(0);
|
||||
|
||||
scatterWrap.call(scatter);
|
||||
g.select('.nv-x.nv-axis').call(xAxis);
|
||||
g.select('.nv-y.nv-axis').call(yAxis);
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
/*
|
||||
legend.dispatch.on('legendMouseover', function(d, i) {
|
||||
d.hover = true;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
|
||||
legend.dispatch.on('legendMouseout', function(d, i) {
|
||||
d.hover = false;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
scatter.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
//scatterWrap.select('.series-' + e.seriesIndex + ' .distX-' + e.pointIndex)
|
||||
d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distX-' + e.pointIndex)
|
||||
.attr('y1', e.pos[1]);
|
||||
//scatterWrap.select('.series-' + e.seriesIndex + ' .distY-' + e.pointIndex)
|
||||
d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distY-' + e.pointIndex)
|
||||
.attr('x1', e.pos[0]);
|
||||
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
//if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, container[0][0].parentNode) } ); // TODO: maybe merge with above?
|
||||
dispatch.on('tooltipShow', function(e) {
|
||||
if (tooltips) showTooltip(e, that.parentNode);
|
||||
});
|
||||
|
||||
scatter.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
|
||||
//scatterWrap.select('.series-' + e.seriesIndex + ' .distX-' + e.pointIndex)
|
||||
d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distX-' + e.pointIndex)
|
||||
.attr('y1', y.range()[0]);
|
||||
//scatterWrap.select('.series-' + e.seriesIndex + ' .distY-' + e.pointIndex)
|
||||
d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distY-' + e.pointIndex)
|
||||
.attr('x1', x.range()[0]);
|
||||
});
|
||||
dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
|
||||
//TODO: get distributions to work with fisheye
|
||||
g.select('.nv-background').on('mousemove', updateFisheye);
|
||||
g.select('.nv-point-paths').on('mousemove', updateFisheye);
|
||||
|
||||
function updateFisheye() {
|
||||
var mouse = d3.mouse(this);
|
||||
x.distortion(fisheye).focus(mouse[0]);
|
||||
y.distortion(fisheye).focus(mouse[1]);
|
||||
|
||||
scatterWrap.call(scatter);
|
||||
g.select('.nv-x.nv-axis').call(xAxis);
|
||||
g.select('.nv-y.nv-axis').call(yAxis);
|
||||
}
|
||||
|
||||
//store old scales for use in transitions on update, to animate from old to new positions, and sizes
|
||||
x0 = x.copy();
|
||||
y0 = y.copy();
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.legend = legend;
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
d3.rebind(chart, scatter, 'interactive', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'fisheye', 'fisheyeRadius');
|
||||
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = nv.utils.getColor(_);
|
||||
legend.color(color);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showDistX = function(_) {
|
||||
if (!arguments.length) return showDistX;
|
||||
showDistX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showDistY = function(_) {
|
||||
if (!arguments.length) return showDistY;
|
||||
showDistY = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showControls = function(_) {
|
||||
if (!arguments.length) return showControls;
|
||||
showControls = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showLegend = function(_) {
|
||||
if (!arguments.length) return showLegend;
|
||||
showLegend = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.fisheye = function(_) {
|
||||
if (!arguments.length) return fisheye;
|
||||
fisheye = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltips = function(_) {
|
||||
if (!arguments.length) return tooltips;
|
||||
tooltips = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltipContent = function(_) {
|
||||
if (!arguments.length) return tooltip;
|
||||
tooltip = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.noData = function(_) {
|
||||
if (!arguments.length) return noData;
|
||||
noData = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,167 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
#offsetDiv {
|
||||
}
|
||||
|
||||
|
||||
#test1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="offsetDiv">
|
||||
<div id="test1" class="chartWrap">
|
||||
<svg></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/scatterWithLegend.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
//Format A
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
var chart = nv.models.scatterWithLegend()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.showDistX(true)
|
||||
.showDistY(true)
|
||||
.color(d3.scale.category10().range());
|
||||
//.width(width)
|
||||
//.height(height)
|
||||
//.forceX([-4,4])
|
||||
//.forceY([-4,4])
|
||||
//.margin({top: 20, right: 10, bottom: 50, left: 80})
|
||||
|
||||
|
||||
//chart.xaxis.tickFormat(d3.format(".02f"))
|
||||
|
||||
var svg =d3.select('#test1 svg')
|
||||
.datum(randomData());
|
||||
|
||||
|
||||
svg.transition().duration(500)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart)
|
||||
//.attr('width', wid0th)
|
||||
//.attr('height', height)
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
|
||||
graph.dispatch.on('tooltipShow', function(e) {
|
||||
var offsetElement = document.getElementById("test1"),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatter = d3.format(".2f");
|
||||
|
||||
|
||||
/*
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
'<span class="value"><span class="label">x:</span><span class="val">' + formatter(e.point.x) + '</span></span><br>' +
|
||||
'<s0pan class="value"><span class="label">y:</span><span class="val">' + formatter(e.point.y) + '</span></span>' +
|
||||
'</p>';
|
||||
|
||||
nvtooltip.show([left, top], content);
|
||||
*/
|
||||
|
||||
var contentX = '<strong>' + formatter(e.point.x) + '</strong>';
|
||||
var contentY = '<strong>' + formatter(e.point.y) + '</strong>';
|
||||
var height = nv.utils.windowSize().height - 40;
|
||||
|
||||
nv.tooltip.show([left, height - 50], contentX, 'n', 1);
|
||||
nv.tooltip.show([5, top], contentY, 'w', 1);
|
||||
});
|
||||
|
||||
|
||||
graph.dispatch.on('tooltipHide', function(e) {
|
||||
nv.tooltip.cleanup();
|
||||
});
|
||||
|
||||
window.onresize = function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40,
|
||||
margin = graph.margin();
|
||||
|
||||
|
||||
if (width < margin.left + margin.right + 20)
|
||||
width = margin.left + margin.right + 20;
|
||||
|
||||
if (height < margin.top + margin.bottom + 20)
|
||||
height = margin.top + margin.bottom + 20;
|
||||
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select('#test1 svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(graph);
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function randomData() {
|
||||
var data = [],
|
||||
random = d3.random.normal();
|
||||
|
||||
for (i = 0; i < 2; i++) {
|
||||
data.push({
|
||||
key: 'Group ' + i,
|
||||
values: []
|
||||
});
|
||||
|
||||
for (j = 0; j < 100; j++) {
|
||||
data[i].values.push({x: random(), y: random(), size: Math.random()});
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,261 +0,0 @@
|
||||
|
||||
nv.models.scatterWithLegend = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
width = function() { return 960 }, //TODO: should probably make this consistent... or maybe constant in the models, closure in the charts
|
||||
height = function() { return 500 },
|
||||
xAxisLabelText = false,
|
||||
yAxisLabelText = false,
|
||||
showDistX = false,
|
||||
showDistY = false,
|
||||
color = d3.scale.category20().range();
|
||||
|
||||
var xAxis = nv.models.axis().orient('bottom').tickPadding(10),
|
||||
yAxis = nv.models.axis().orient('left').tickPadding(10),
|
||||
legend = nv.models.legend().height(30),
|
||||
scatter = nv.models.scatter(),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
|
||||
x, y, x0, y0;
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var availableWidth = width() - margin.left - margin.right,
|
||||
availableHeight = height() - margin.top - margin.bottom;
|
||||
|
||||
x0 = x0 || scatter.xScale();
|
||||
y0 = y0 || scatter.yScale();
|
||||
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.wrap.scatterWithLegend').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 scatterWithLegend').append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'legendWrap');
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'scatterWrap');
|
||||
//gEnter.append('g').attr('class', 'distWrap');
|
||||
|
||||
|
||||
|
||||
scatter
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
//.xDomain(x.domain())
|
||||
//.yDomain(y.domain())
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % 20];
|
||||
}).filter(function(d,i) { return !data[i].disabled }))
|
||||
|
||||
var scatterWrap = wrap.select('.scatterWrap')
|
||||
.datum(data.filter(function(d) { return !d.disabled }));
|
||||
|
||||
d3.transition(scatterWrap).call(scatter);
|
||||
|
||||
|
||||
x = scatter.xScale();
|
||||
y = scatter.yScale();
|
||||
|
||||
xAxis.scale(x);
|
||||
yAxis.scale(y);
|
||||
|
||||
|
||||
//TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
|
||||
//TODO: Fix height issue on first render if legend height is larger than margin.top, NEED TO FIX EVERY MODEL WITH A LEGEND
|
||||
margin.top = legend.height();
|
||||
|
||||
var g = wrap.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
legend.width(availableWidth / 2);
|
||||
|
||||
wrap.select('.legendWrap')
|
||||
.datum(data)
|
||||
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')')
|
||||
.call(legend);
|
||||
|
||||
|
||||
|
||||
|
||||
if ( showDistX || showDistY) {
|
||||
var distWrap = scatterWrap.selectAll('g.distribution')
|
||||
.data(function(d) { return d }, function(d) { return d.key });
|
||||
|
||||
distWrap.enter().append('g').attr('class', function(d,i) { return 'distribution series-' + i })
|
||||
|
||||
distWrap.style('stroke', function(d,i) { return color.filter(function(d,i) { return data[i] && !data[i].disabled })[i % 10] })
|
||||
}
|
||||
|
||||
if (showDistX) {
|
||||
var distX = distWrap.selectAll('line.distX')
|
||||
.data(function(d) { return d.values })
|
||||
distX.enter().append('line')
|
||||
.attr('x1', function(d,i) { return x0(scatter.x()(d,i)) })
|
||||
.attr('x2', function(d,i) { return x0(scatter.x()(d,i)) })
|
||||
//d3.transition(distX.exit())
|
||||
d3.transition(distWrap.exit().selectAll('line.distX'))
|
||||
.attr('x1', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
.attr('x2', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
.remove();
|
||||
distX
|
||||
.attr('class', function(d,i) { return 'distX distX-' + i })
|
||||
.attr('y1', y.range()[0])
|
||||
.attr('y2', y.range()[0] + 8);
|
||||
d3.transition(distX)
|
||||
.attr('x1', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
.attr('x2', function(d,i) { return x(scatter.x()(d,i)) })
|
||||
}
|
||||
|
||||
|
||||
if (showDistY) {
|
||||
var distY = distWrap.selectAll('line.distY')
|
||||
.data(function(d) { return d.values })
|
||||
distY.enter().append('line')
|
||||
.attr('y1', function(d,i) { return y0(scatter.y()(d,i)) })
|
||||
.attr('y2', function(d,i) { return y0(scatter.y()(d,i)) });
|
||||
//d3.transition(distY.exit())
|
||||
d3.transition(distWrap.exit().selectAll('line.distY'))
|
||||
.attr('y1', function(d,i) { return y(scatter.y()(d,i)) })
|
||||
.attr('y2', function(d,i) { return y(scatter.y()(d,i)) })
|
||||
.remove();
|
||||
distY
|
||||
.attr('class', function(d,i) { return 'distY distY-' + i })
|
||||
.attr('x1', x.range()[0])
|
||||
.attr('x2', x.range()[0] - 8)
|
||||
d3.transition(distY)
|
||||
.attr('y1', function(d,i) { return y(scatter.y()(d,i)) }) .attr('y2', function(d,i) { return y(scatter.y()(d,i)) });
|
||||
}
|
||||
|
||||
|
||||
xAxis
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize( -availableHeight , 0);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + y.range()[0] + ')');
|
||||
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
|
||||
yAxis
|
||||
.ticks( availableHeight / 36 )
|
||||
.tickSize( -availableWidth, 0);
|
||||
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i, that) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
wrap.selectAll('.series').classed('disabled', false);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
|
||||
/*
|
||||
legend.dispatch.on('legendMouseover', function(d, i) {
|
||||
d.hover = true;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
|
||||
legend.dispatch.on('legendMouseout', function(d, i) {
|
||||
d.hover = false;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
scatter.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
dispatch.tooltipShow({
|
||||
point: e.point,
|
||||
series: e.series,
|
||||
pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
seriesIndex: e.seriesIndex,
|
||||
pointIndex: e.pointIndex
|
||||
});
|
||||
|
||||
scatterWrap.select('.series-' + e.seriesIndex + ' .distX-' + e.pointIndex)
|
||||
.attr('y1', e.pos[1]);
|
||||
scatterWrap.select('.series-' + e.seriesIndex + ' .distY-' + e.pointIndex)
|
||||
.attr('x1', e.pos[0]);
|
||||
});
|
||||
|
||||
scatter.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
|
||||
scatterWrap.select('.series-' + e.seriesIndex + ' .distX-' + e.pointIndex)
|
||||
.attr('y1', y.range()[0]);
|
||||
scatterWrap.select('.series-' + e.seriesIndex + ' .distY-' + e.pointIndex)
|
||||
.attr('x1', x.range()[0]);
|
||||
});
|
||||
|
||||
|
||||
//store old scales for use in transitions on update, to animate from old to new positions, and sizes
|
||||
x0 = x.copy();
|
||||
y0 = y.copy();
|
||||
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.legend = legend;
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
d3.rebind(chart, scatter, 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
|
||||
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
legend.color(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showDistX = function(_) {
|
||||
if (!arguments.length) return showDistX;
|
||||
showDistX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showDistY = function(_) {
|
||||
if (!arguments.length) return showDistY;
|
||||
showDistY = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,286 +0,0 @@
|
||||
|
||||
nv.models.stackedArea = function() {
|
||||
//Default Settings
|
||||
var margin = {top: 0, right: 0, bottom: 0, left: 0},
|
||||
width = 960,
|
||||
height = 500,
|
||||
color = d3.scale.category20().range(), // array of colors to be used in order
|
||||
id = Math.floor(Math.random() * 100000), //Create semi-unique ID incase user doesn't selet one
|
||||
getX = function(d) { return d.x }, // accessor to get the x value from a data point
|
||||
getY = function(d) { return d.y }, // accessor to get the y value from a data point
|
||||
style = 'stack',
|
||||
offset = 'zero',
|
||||
order = 'default',
|
||||
clipEdge = false; // if true, masks lines within x and y scale
|
||||
|
||||
/************************************
|
||||
* offset:
|
||||
* 'wiggle' (stream)
|
||||
* 'zero' (stacked)
|
||||
* 'expand' (normalize to 100%)
|
||||
* 'silhouette' (simple centered)
|
||||
*
|
||||
* order:
|
||||
* 'inside-out' (stream)
|
||||
* 'default' (input order)
|
||||
************************************/
|
||||
|
||||
var scatter= nv.models.scatter()
|
||||
.size(2.2) // default size
|
||||
.sizeDomain([2.5]), //set to speed up calculation, needs to be unset if there is a cstom size accessor
|
||||
x = scatter.xScale(),
|
||||
y = scatter.yScale(),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'areaClick', 'areaMouseover', 'areaMouseout');
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
// Need to leave data alone to switch between stacked, stream, and expanded
|
||||
var dataCopy = JSON.parse(JSON.stringify(data)),
|
||||
availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
|
||||
//TODO: try to get rid of the need for copying the data, and use the data directly
|
||||
|
||||
//console.log(dataCopy);
|
||||
dataCopy = dataCopy.map(function(series,i) {
|
||||
if (series.disabled)
|
||||
series.values = series.values.map(function(d,i) {
|
||||
d._y = d.y || d._y;
|
||||
d.y = 0; //TODO: need to use value from getY, not always d.y
|
||||
return d
|
||||
});
|
||||
return series;
|
||||
});
|
||||
|
||||
|
||||
//TODO: deal with negative stacked charts
|
||||
|
||||
//compute the data based on offset and order (calc's y0 for every point)
|
||||
dataCopy = d3.layout.stack()
|
||||
.offset(offset)
|
||||
.order(order)
|
||||
.values(function(d){ return d.values })
|
||||
.y(getY)
|
||||
(dataCopy);
|
||||
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.wrap.stackedarea').data([dataCopy]);
|
||||
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 stackedarea');
|
||||
var defsEnter = wrapEnter.append('defs');
|
||||
var gEnter = wrapEnter.append('g');
|
||||
var g = wrap.select('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'areaWrap');
|
||||
|
||||
|
||||
scatter
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
//.x(getX)
|
||||
.y(function(d) { return d.y + d.y0 }) // TODO: allow for getY to be other than d.y
|
||||
.forceY([0])
|
||||
.color(dataCopy.map(function(d,i) {
|
||||
return d.color || color[i % color.length];
|
||||
}).filter(function(d,i) { return !dataCopy[i].disabled }));
|
||||
|
||||
gEnter.append('g').attr('class', 'scatterWrap');
|
||||
var scatterWrap= g.select('.scatterWrap')
|
||||
.datum(dataCopy.filter(function(d) { return !d.disabled }))
|
||||
|
||||
d3.transition(scatterWrap).call(scatter);
|
||||
|
||||
|
||||
|
||||
|
||||
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
defsEnter.append('clipPath')
|
||||
.attr('id', 'edge-clip-' + id)
|
||||
.append('rect');
|
||||
|
||||
wrap.select('#edge-clip-' + id + ' rect')
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
g .attr('clip-path', clipEdge ? 'url(#edge-clip-' + id + ')' : '');
|
||||
|
||||
|
||||
|
||||
|
||||
var area = d3.svg.area()
|
||||
.x(function(d,i) { return x(scatter.x()(d,i)) })
|
||||
.y0(function(d) { return y(d.y0) })
|
||||
.y1(function(d) { return y(d.y + d.y0) });
|
||||
|
||||
var zeroArea = d3.svg.area()
|
||||
.x(function(d,i) { return x(scatter.x()(d,i)) })
|
||||
.y0(function(d) { return y(d.y0) })
|
||||
.y1(function(d) { return y(d.y0) });
|
||||
|
||||
|
||||
var path = g.select('.areaWrap').selectAll('path.area')
|
||||
.data(function(d) { return d });
|
||||
//.data(function(d) { return d }, function(d) { return d.key });
|
||||
path.enter().append('path').attr('class', function(d,i) { return 'area area-' + i })
|
||||
.on('mouseover', function(d,i) {
|
||||
d3.select(this).classed('hover', true);
|
||||
dispatch.areaMouseover({
|
||||
point: d,
|
||||
series: d.key,
|
||||
//pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
|
||||
pos: [d3.event.pageX, d3.event.pageY],
|
||||
seriesIndex: i
|
||||
//pointIndex: d.point
|
||||
});
|
||||
})
|
||||
.on('mouseout', function(d,i) {
|
||||
d3.select(this).classed('hover', false);
|
||||
dispatch.areaMouseout({
|
||||
point: d,
|
||||
series: d.key,
|
||||
//pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
|
||||
pos: [d3.event.pageX, d3.event.pageY],
|
||||
seriesIndex: i
|
||||
//pointIndex: d.point
|
||||
});
|
||||
})
|
||||
.on('click', function(d,i) {
|
||||
d3.select(this).classed('hover', false);
|
||||
dispatch.areaClick({
|
||||
point: d,
|
||||
series: d.key,
|
||||
//pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
|
||||
pos: [d3.event.pageX, d3.event.pageY],
|
||||
seriesIndex: i
|
||||
//pointIndex: d.point
|
||||
});
|
||||
})
|
||||
d3.transition(path.exit())
|
||||
.attr('d', function(d,i) { return zeroArea(d.values,i) }) // TODO: fix this so transition is still fluid
|
||||
.remove();
|
||||
path
|
||||
.style('fill', function(d,i){ return d.color || color[i % color.length] })
|
||||
.style('stroke', function(d,i){ return d.color || color[i % color.length] });
|
||||
d3.transition(path)
|
||||
.attr('d', function(d,i) { return area(d.values,i) })
|
||||
|
||||
|
||||
scatter.dispatch.on('elementClick.area', function(e) {
|
||||
dispatch.areaClick(e);
|
||||
})
|
||||
scatter.dispatch.on('elementMouseover.area', function(e) {
|
||||
g.select('.area-' + e.seriesIndex).classed('hover', true);
|
||||
});
|
||||
scatter.dispatch.on('elementMouseout.area', function(e) {
|
||||
g.select('.area-' + e.seriesIndex).classed('hover', false);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.scatter = scatter;
|
||||
|
||||
d3.rebind(chart, scatter, 'x', 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
|
||||
|
||||
/*
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = d3.functor(_);
|
||||
scatter.x(_);
|
||||
return chart;
|
||||
};
|
||||
*/
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = d3.functor(_);
|
||||
//scatter.y(_);
|
||||
return chart;
|
||||
}
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.clipEdge = function(_) {
|
||||
if (!arguments.length) return clipEdge;
|
||||
clipEdge = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.offset = function(_) {
|
||||
if (!arguments.length) return offset;
|
||||
offset = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.order = function(_) {
|
||||
if (!arguments.length) return order;
|
||||
order = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
//shortcut for offset + order
|
||||
chart.style = function(_) {
|
||||
if (!arguments.length) return style;
|
||||
style = _;
|
||||
|
||||
switch (style) {
|
||||
case 'stack':
|
||||
offset = 'zero';
|
||||
order = 'default';
|
||||
break;
|
||||
case 'stream':
|
||||
offset = 'wiggle';
|
||||
order = 'inside-out';
|
||||
break;
|
||||
case 'expand':
|
||||
offset = 'expand';
|
||||
order = 'default';
|
||||
break;
|
||||
}
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
|
||||
scatter.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
|
||||
scatter.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,183 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1, #chart2 {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<svg id="chart1"></svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<svg id="chart2"></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/stackedArea.js"></script>
|
||||
<script src="../src/models/stackedAreaChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
var histcatexplong = [
|
||||
{
|
||||
"key" : "Consumer Discretionary" ,
|
||||
"values" : [ [ 1138683600000 , 27.38478809681] , [ 1141102800000 , 27.371377218208] , [ 1143781200000 , 26.309915460827] , [ 1146369600000 , 26.425199957521] , [ 1149048000000 , 26.823411519395] , [ 1151640000000 , 23.850443591584] , [ 1154318400000 , 23.158355444054] , [ 1156996800000 , 22.998689393694] , [ 1159588800000 , 27.977128511299] , [ 1162270800000 , 29.073672469721] , [ 1164862800000 , 28.587640408904] , [ 1167541200000 , 22.788453687638] , [ 1170219600000 , 22.429199073597] , [ 1172638800000 , 22.324103271051] , [ 1175313600000 , 17.558388444186] , [ 1177905600000 , 16.769518096208] , [ 1180584000000 , 16.214738201302] , [ 1183176000000 , 18.729632971228] , [ 1185854400000 , 18.814523318848] , [ 1188532800000 , 19.789986451358] , [ 1191124800000 , 17.070049054933] , [ 1193803200000 , 16.121349575715] , [ 1196398800000 , 15.141659430091] , [ 1199077200000 , 17.175388025298] , [ 1201755600000 , 17.286592443521] , [ 1204261200000 , 16.323141626569] , [ 1206936000000 , 19.231263773952] , [ 1209528000000 , 18.446256391094] , [ 1212206400000 , 17.822632399764] , [ 1214798400000 , 15.539366475979] , [ 1217476800000 , 15.255131790216] , [ 1220155200000 , 15.660963922593] , [ 1222747200000 , 13.254482273697] , [ 1225425600000 , 11.920796202299] , [ 1228021200000 , 12.122809090925] , [ 1230699600000 , 15.691026271393] , [ 1233378000000 , 14.720881635107] , [ 1235797200000 , 15.387939360044] , [ 1238472000000 , 13.765436672229] , [ 1241064000000 , 14.6314458648] , [ 1243742400000 , 14.292446536221] , [ 1246334400000 , 16.170071367016] , [ 1249012800000 , 15.948135554337] , [ 1251691200000 , 16.612872685134] , [ 1254283200000 , 18.778338719091] , [ 1256961600000 , 16.75602606542] , [ 1259557200000 , 19.385804443147] , [ 1262235600000 , 22.950590240168] , [ 1264914000000 , 23.61159018141] , [ 1267333200000 , 25.708586989581] , [ 1270008000000 , 26.883915999885] , [ 1272600000000 , 25.893486687065] , [ 1275278400000 , 24.678914263176] , [ 1277870400000 , 25.937275793023] , [ 1280548800000 , 29.46138169384] , [ 1283227200000 , 27.357322961862] , [ 1285819200000 , 29.057235285673] , [ 1288497600000 , 28.549434189386] , [ 1291093200000 , 28.506352379723] , [ 1293771600000 , 29.449241421597] , [ 1296450000000 , 25.796838168807] , [ 1298869200000 , 28.740145449189] , [ 1301544000000 , 22.091744141872] , [ 1304136000000 , 25.079662545409] , [ 1306814400000 , 23.674906973064] , [ 1309406400000 , 23.41800274293] , [ 1312084800000 , 23.243644138871] , [ 1314763200000 , 31.591854066817] , [ 1317355200000 , 31.497112374114] , [ 1320033600000 , 26.672380820431] , [ 1322629200000 , 27.297080015495] , [ 1325307600000 , 20.174315530051] , [ 1327986000000 , 19.631084213899] , [ 1330491600000 , 20.366462219462] , [ 1333166400000 , 17.429019937289] , [ 1335758400000 , 16.75543633539] , [ 1338436800000 , 16.182906906042]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Consumer Staples" ,
|
||||
"values" : [ [ 1138683600000 , 7.2800122043237] , [ 1141102800000 , 7.1187787503354] , [ 1143781200000 , 8.351887016482] , [ 1146369600000 , 8.4156698763993] , [ 1149048000000 , 8.1673298604231] , [ 1151640000000 , 5.5132447126042] , [ 1154318400000 , 6.1152537710599] , [ 1156996800000 , 6.076765091942] , [ 1159588800000 , 4.6304473798646] , [ 1162270800000 , 4.6301068469402] , [ 1164862800000 , 4.3466656309389] , [ 1167541200000 , 6.830104897003] , [ 1170219600000 , 7.241633040029] , [ 1172638800000 , 7.1432372054153] , [ 1175313600000 , 10.608942063374] , [ 1177905600000 , 10.914964549494] , [ 1180584000000 , 10.933223880565] , [ 1183176000000 , 8.3457524851265] , [ 1185854400000 , 8.1078413081882] , [ 1188532800000 , 8.2697185922474] , [ 1191124800000 , 8.4742436475968] , [ 1193803200000 , 8.4994601179319] , [ 1196398800000 , 8.7387319683243] , [ 1199077200000 , 6.8829183612895] , [ 1201755600000 , 6.984133637885] , [ 1204261200000 , 7.0860136043287] , [ 1206936000000 , 4.3961787956053] , [ 1209528000000 , 3.8699674365231] , [ 1212206400000 , 3.6928925238305] , [ 1214798400000 , 6.7571718894253] , [ 1217476800000 , 6.4367313362344] , [ 1220155200000 , 6.4048441521454] , [ 1222747200000 , 5.4643833239669] , [ 1225425600000 , 5.3150786833374] , [ 1228021200000 , 5.3011272612576] , [ 1230699600000 , 4.1203601430809] , [ 1233378000000 , 4.0881783200525] , [ 1235797200000 , 4.1928665957189] , [ 1238472000000 , 7.0249415663205] , [ 1241064000000 , 7.006530880769] , [ 1243742400000 , 6.994835633224] , [ 1246334400000 , 6.1220222336254] , [ 1249012800000 , 6.1177436137653] , [ 1251691200000 , 6.1413396231981] , [ 1254283200000 , 4.8046006145874] , [ 1256961600000 , 4.6647600660544] , [ 1259557200000 , 4.544865006255] , [ 1262235600000 , 6.0488249316539] , [ 1264914000000 , 6.3188669540206] , [ 1267333200000 , 6.5873958262306] , [ 1270008000000 , 6.2281189839578] , [ 1272600000000 , 5.8948915746059] , [ 1275278400000 , 5.5967320482214] , [ 1277870400000 , 0.99784432084837] , [ 1280548800000 , 1.0950794175359] , [ 1283227200000 , 0.94479734407491] , [ 1285819200000 , 1.222093988688] , [ 1288497600000 , 1.335093106856] , [ 1291093200000 , 1.3302565104985] , [ 1293771600000 , 1.340824670897] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 0] , [ 1317355200000 , 4.4583692315] , [ 1320033600000 , 3.6493043348059] , [ 1322629200000 , 3.8610064091761] , [ 1325307600000 , 5.5144800685202] , [ 1327986000000 , 5.1750695220792] , [ 1330491600000 , 5.6710066952691] , [ 1333166400000 , 8.5658461590953] , [ 1335758400000 , 8.6135447714243] , [ 1338436800000 , 8.0231460925212]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Energy" ,
|
||||
"values" : [ [ 1138683600000 , 1.544303464167] , [ 1141102800000 , 1.4387289432421] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 1.328626801128] , [ 1154318400000 , 1.2874050802627] , [ 1156996800000 , 1.0872743105593] , [ 1159588800000 , 0.96042562635813] , [ 1162270800000 , 0.93139372870616] , [ 1164862800000 , 0.94432167305385] , [ 1167541200000 , 1.277750166208] , [ 1170219600000 , 1.2204893886811] , [ 1172638800000 , 1.207489123122] , [ 1175313600000 , 1.2490651414113] , [ 1177905600000 , 1.2593129913052] , [ 1180584000000 , 1.373329808388] , [ 1183176000000 , 0] , [ 1185854400000 , 0] , [ 1188532800000 , 0] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , 0] , [ 1209528000000 , 0] , [ 1212206400000 , 0] , [ 1214798400000 , 0] , [ 1217476800000 , 0] , [ 1220155200000 , 0] , [ 1222747200000 , 1.4516108933695] , [ 1225425600000 , 1.1856025268225] , [ 1228021200000 , 1.3430470355439] , [ 1230699600000 , 2.2752595354509] , [ 1233378000000 , 2.4031560010523] , [ 1235797200000 , 2.0822430731926] , [ 1238472000000 , 1.5640902826938] , [ 1241064000000 , 1.5812873972356] , [ 1243742400000 , 1.9462448548894] , [ 1246334400000 , 2.9464870223957] , [ 1249012800000 , 3.0744699383222] , [ 1251691200000 , 2.9422304628446] , [ 1254283200000 , 2.7503075599999] , [ 1256961600000 , 2.6506701800427] , [ 1259557200000 , 2.8005425319977] , [ 1262235600000 , 2.6816184971185] , [ 1264914000000 , 2.681206271327] , [ 1267333200000 , 2.8195488011259] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 1.0687057346382] , [ 1280548800000 , 1.2539400544134] , [ 1283227200000 , 1.1862969445955] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 1.941972859484] , [ 1298869200000 , 2.1142247697552] , [ 1301544000000 , 2.3788590206824] , [ 1304136000000 , 2.5337302877545] , [ 1306814400000 , 2.3163370395199] , [ 1309406400000 , 2.0645451843195] , [ 1312084800000 , 2.1004446672411] , [ 1314763200000 , 3.6301875804303] , [ 1317355200000 , 2.454204664652] , [ 1320033600000 , 2.196082370894] , [ 1322629200000 , 2.3358418255202] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0.39001201038526] , [ 1335758400000 , 0.30945472725559] , [ 1338436800000 , 0.31062439305591]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Financials" ,
|
||||
"values" : [ [ 1138683600000 , 13.356778764352] , [ 1141102800000 , 13.611196863271] , [ 1143781200000 , 6.895903006119] , [ 1146369600000 , 6.9939633271352] , [ 1149048000000 , 6.7241510257675] , [ 1151640000000 , 5.5611293669516] , [ 1154318400000 , 5.6086488714041] , [ 1156996800000 , 5.4962849907033] , [ 1159588800000 , 6.9193153169279] , [ 1162270800000 , 7.0016334389777] , [ 1164862800000 , 6.7865422443273] , [ 1167541200000 , 9.0006454225383] , [ 1170219600000 , 9.2233916171431] , [ 1172638800000 , 8.8929316009479] , [ 1175313600000 , 10.345937520404] , [ 1177905600000 , 10.075914677026] , [ 1180584000000 , 10.089006188111] , [ 1183176000000 , 10.598330295008] , [ 1185854400000 , 9.968954653301] , [ 1188532800000 , 9.7740580198146] , [ 1191124800000 , 10.558483060626] , [ 1193803200000 , 9.9314651823603] , [ 1196398800000 , 9.3997715873769] , [ 1199077200000 , 8.4086493387262] , [ 1201755600000 , 8.9698309085926] , [ 1204261200000 , 8.2778357995396] , [ 1206936000000 , 8.8585045600123] , [ 1209528000000 , 8.7013756413322] , [ 1212206400000 , 7.7933605469443] , [ 1214798400000 , 7.0236183483064] , [ 1217476800000 , 6.9873088186829] , [ 1220155200000 , 6.8031713070097] , [ 1222747200000 , 6.6869531315723] , [ 1225425600000 , 6.138256993963] , [ 1228021200000 , 5.6434994016354] , [ 1230699600000 , 5.495220262512] , [ 1233378000000 , 4.6885326869846] , [ 1235797200000 , 4.4524349883438] , [ 1238472000000 , 5.6766520778185] , [ 1241064000000 , 5.7675774480752] , [ 1243742400000 , 5.7882863168337] , [ 1246334400000 , 7.2666010034924] , [ 1249012800000 , 7.519182132226] , [ 1251691200000 , 7.849651451445] , [ 1254283200000 , 10.383992037985] , [ 1256961600000 , 9.0653691861818] , [ 1259557200000 , 9.6705248324159] , [ 1262235600000 , 10.856380561349] , [ 1264914000000 , 11.27452370892] , [ 1267333200000 , 11.754156529088] , [ 1270008000000 , 8.2870811422456] , [ 1272600000000 , 8.0210264360699] , [ 1275278400000 , 7.5375074474865] , [ 1277870400000 , 8.3419527338039] , [ 1280548800000 , 9.4197471818443] , [ 1283227200000 , 8.7321733185797] , [ 1285819200000 , 9.6627062648126] , [ 1288497600000 , 10.187962234549] , [ 1291093200000 , 9.8144201733476] , [ 1293771600000 , 10.275723361713] , [ 1296450000000 , 16.796066079353] , [ 1298869200000 , 17.543254984075] , [ 1301544000000 , 16.673660675084] , [ 1304136000000 , 17.963944353609] , [ 1306814400000 , 16.637740867211] , [ 1309406400000 , 15.84857094609] , [ 1312084800000 , 14.767303362182] , [ 1314763200000 , 24.778452182432] , [ 1317355200000 , 18.370353229999] , [ 1320033600000 , 15.2531374291] , [ 1322629200000 , 14.989600840649] , [ 1325307600000 , 16.052539160125] , [ 1327986000000 , 16.424390322793] , [ 1330491600000 , 17.884020741105] , [ 1333166400000 , 7.1424929577921] , [ 1335758400000 , 7.8076213051482] , [ 1338436800000 , 7.2462684949232]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Health Care" ,
|
||||
"values" : [ [ 1138683600000 , 14.212410956029] , [ 1141102800000 , 13.973193618249] , [ 1143781200000 , 15.218233920665] , [ 1146369600000 , 14.38210972745] , [ 1149048000000 , 13.894310878491] , [ 1151640000000 , 15.593086090032] , [ 1154318400000 , 16.244839695188] , [ 1156996800000 , 16.017088850646] , [ 1159588800000 , 14.183951830055] , [ 1162270800000 , 14.148523245697] , [ 1164862800000 , 13.424326059972] , [ 1167541200000 , 12.974450435753] , [ 1170219600000 , 13.23247041802] , [ 1172638800000 , 13.318762655574] , [ 1175313600000 , 15.961407746104] , [ 1177905600000 , 16.287714639805] , [ 1180584000000 , 16.246590583889] , [ 1183176000000 , 17.564505594809] , [ 1185854400000 , 17.872725373165] , [ 1188532800000 , 18.018998508757] , [ 1191124800000 , 15.584518016603] , [ 1193803200000 , 15.480850647181] , [ 1196398800000 , 15.699120036984] , [ 1199077200000 , 19.184281817226] , [ 1201755600000 , 19.691226605207] , [ 1204261200000 , 18.982314051295] , [ 1206936000000 , 18.707820309008] , [ 1209528000000 , 17.459630929761] , [ 1212206400000 , 16.500616076782] , [ 1214798400000 , 18.086324003979] , [ 1217476800000 , 18.929464156258] , [ 1220155200000 , 18.233728682084] , [ 1222747200000 , 16.315776297325] , [ 1225425600000 , 14.63289219025] , [ 1228021200000 , 14.667835024478] , [ 1230699600000 , 13.946993947308] , [ 1233378000000 , 14.394304684397] , [ 1235797200000 , 13.724462792967] , [ 1238472000000 , 10.930879035806] , [ 1241064000000 , 9.8339915513708] , [ 1243742400000 , 10.053858541872] , [ 1246334400000 , 11.786998438287] , [ 1249012800000 , 11.780994901769] , [ 1251691200000 , 11.305889670276] , [ 1254283200000 , 10.918452290083] , [ 1256961600000 , 9.6811395055706] , [ 1259557200000 , 10.971529744038] , [ 1262235600000 , 13.330210480209] , [ 1264914000000 , 14.592637568961] , [ 1267333200000 , 14.605329141157] , [ 1270008000000 , 13.936853794037] , [ 1272600000000 , 12.189480759072] , [ 1275278400000 , 11.676151385046] , [ 1277870400000 , 13.058852800017] , [ 1280548800000 , 13.62891543203] , [ 1283227200000 , 13.811107569918] , [ 1285819200000 , 13.786494560787] , [ 1288497600000 , 14.04516285753] , [ 1291093200000 , 13.697412447288] , [ 1293771600000 , 13.677681376221] , [ 1296450000000 , 19.961511864531] , [ 1298869200000 , 21.049198298158] , [ 1301544000000 , 22.687631094008] , [ 1304136000000 , 25.469010617433] , [ 1306814400000 , 24.883799437121] , [ 1309406400000 , 24.203843814248] , [ 1312084800000 , 22.138760964038] , [ 1314763200000 , 16.034636966228] , [ 1317355200000 , 15.394958944556] , [ 1320033600000 , 12.625642461969] , [ 1322629200000 , 12.973735699739] , [ 1325307600000 , 15.786018336149] , [ 1327986000000 , 15.227368020134] , [ 1330491600000 , 15.899752650734] , [ 1333166400000 , 18.994731295388] , [ 1335758400000 , 18.450055817702] , [ 1338436800000 , 17.863719889669]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Industrials" ,
|
||||
"values" : [ [ 1138683600000 , 7.1590087090398] , [ 1141102800000 , 7.1297210970108] , [ 1143781200000 , 5.5774588290586] , [ 1146369600000 , 5.4977254491156] , [ 1149048000000 , 5.5138153113634] , [ 1151640000000 , 4.3198084032122] , [ 1154318400000 , 3.9179295839125] , [ 1156996800000 , 3.8110093051479] , [ 1159588800000 , 5.5629020916939] , [ 1162270800000 , 5.7241673711336] , [ 1164862800000 , 5.4715049695004] , [ 1167541200000 , 4.9193763571618] , [ 1170219600000 , 5.136053947247] , [ 1172638800000 , 5.1327258759766] , [ 1175313600000 , 5.1888943925082] , [ 1177905600000 , 5.5191481293345] , [ 1180584000000 , 5.6093625614921] , [ 1183176000000 , 4.2706312987397] , [ 1185854400000 , 4.4453235132117] , [ 1188532800000 , 4.6228003109761] , [ 1191124800000 , 5.0645764756954] , [ 1193803200000 , 5.0723447230959] , [ 1196398800000 , 5.1457765818846] , [ 1199077200000 , 5.4067851597282] , [ 1201755600000 , 5.472241916816] , [ 1204261200000 , 5.3742740389688] , [ 1206936000000 , 6.251751933664] , [ 1209528000000 , 6.1406852153472] , [ 1212206400000 , 5.8164385627465] , [ 1214798400000 , 5.4255846656171] , [ 1217476800000 , 5.3738499417204] , [ 1220155200000 , 5.1815627753979] , [ 1222747200000 , 5.0305983235349] , [ 1225425600000 , 4.6823058607165] , [ 1228021200000 , 4.5941481589093] , [ 1230699600000 , 5.4669598474575] , [ 1233378000000 , 5.1249037357] , [ 1235797200000 , 4.3504421250742] , [ 1238472000000 , 4.6260881026002] , [ 1241064000000 , 5.0140402458946] , [ 1243742400000 , 4.7458462454774] , [ 1246334400000 , 6.0437019654564] , [ 1249012800000 , 6.4595216249754] , [ 1251691200000 , 6.6420468254155] , [ 1254283200000 , 5.8927271960913] , [ 1256961600000 , 5.4712108838003] , [ 1259557200000 , 6.1220254207747] , [ 1262235600000 , 5.5385935169255] , [ 1264914000000 , 5.7383377612639] , [ 1267333200000 , 6.1715976730415] , [ 1270008000000 , 4.0102262681174] , [ 1272600000000 , 3.769389679692] , [ 1275278400000 , 3.5301571031152] , [ 1277870400000 , 2.7660252652526] , [ 1280548800000 , 3.1409983385775] , [ 1283227200000 , 3.0528024863055] , [ 1285819200000 , 4.3126123157971] , [ 1288497600000 , 4.594654041683] , [ 1291093200000 , 4.5424126126793] , [ 1293771600000 , 4.7790043987302] , [ 1296450000000 , 7.4969154058289] , [ 1298869200000 , 7.9424751557821] , [ 1301544000000 , 7.1560736250547] , [ 1304136000000 , 7.9478117337855] , [ 1306814400000 , 7.4109214848895] , [ 1309406400000 , 7.5966457641101] , [ 1312084800000 , 7.165754444071] , [ 1314763200000 , 5.4816702524302] , [ 1317355200000 , 4.9893656089584] , [ 1320033600000 , 4.498385105327] , [ 1322629200000 , 4.6776090358151] , [ 1325307600000 , 8.1350814368063] , [ 1327986000000 , 8.0732769990652] , [ 1330491600000 , 8.5602340387277] , [ 1333166400000 , 5.1293714074325] , [ 1335758400000 , 5.2586794619016] , [ 1338436800000 , 5.1100853569977]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Information Technology" ,
|
||||
"values" : [ [ 1138683600000 , 13.242301508051] , [ 1141102800000 , 12.863536342042] , [ 1143781200000 , 21.034044171629] , [ 1146369600000 , 21.419084618803] , [ 1149048000000 , 21.142678863691] , [ 1151640000000 , 26.568489677529] , [ 1154318400000 , 24.839144939905] , [ 1156996800000 , 25.456187462167] , [ 1159588800000 , 26.350164502826] , [ 1162270800000 , 26.47833320519] , [ 1164862800000 , 26.425979547847] , [ 1167541200000 , 28.191461582256] , [ 1170219600000 , 28.930307448808] , [ 1172638800000 , 29.521413891117] , [ 1175313600000 , 28.188285966466] , [ 1177905600000 , 27.704619625832] , [ 1180584000000 , 27.490862424829] , [ 1183176000000 , 28.770679721286] , [ 1185854400000 , 29.060480671449] , [ 1188532800000 , 28.240998844973] , [ 1191124800000 , 33.004893194127] , [ 1193803200000 , 34.075180359928] , [ 1196398800000 , 32.548560664833] , [ 1199077200000 , 30.629727432728] , [ 1201755600000 , 28.642858788159] , [ 1204261200000 , 27.973575227842] , [ 1206936000000 , 27.393351882726] , [ 1209528000000 , 28.476095288523] , [ 1212206400000 , 29.29667866426] , [ 1214798400000 , 29.222333802896] , [ 1217476800000 , 28.092966093843] , [ 1220155200000 , 28.107159262922] , [ 1222747200000 , 25.482974832098] , [ 1225425600000 , 21.208115993834] , [ 1228021200000 , 20.295043095268] , [ 1230699600000 , 15.925754618401] , [ 1233378000000 , 17.162864628346] , [ 1235797200000 , 17.084345773174] , [ 1238472000000 , 22.246007102281] , [ 1241064000000 , 24.530543998509] , [ 1243742400000 , 25.084184918242] , [ 1246334400000 , 16.606166527358] , [ 1249012800000 , 17.239620011628] , [ 1251691200000 , 17.336739127379] , [ 1254283200000 , 25.478492475753] , [ 1256961600000 , 23.017152085245] , [ 1259557200000 , 25.617745423683] , [ 1262235600000 , 24.061133998642] , [ 1264914000000 , 23.223933318644] , [ 1267333200000 , 24.425887263937] , [ 1270008000000 , 35.501471156693] , [ 1272600000000 , 33.775013878676] , [ 1275278400000 , 30.417993630285] , [ 1277870400000 , 30.023598978467] , [ 1280548800000 , 33.327519522436] , [ 1283227200000 , 31.963388450371] , [ 1285819200000 , 30.498967232092] , [ 1288497600000 , 32.403696817912] , [ 1291093200000 , 31.47736071922] , [ 1293771600000 , 31.53259666241] , [ 1296450000000 , 41.760282761548] , [ 1298869200000 , 45.605771243237] , [ 1301544000000 , 39.986557966215] , [ 1304136000000 , 43.846330510051] , [ 1306814400000 , 39.857316881857] , [ 1309406400000 , 37.675127768208] , [ 1312084800000 , 35.775077970313] , [ 1314763200000 , 48.631009702577] , [ 1317355200000 , 42.830831754505] , [ 1320033600000 , 35.611502589362] , [ 1322629200000 , 35.320136981738] , [ 1325307600000 , 31.564136901516] , [ 1327986000000 , 32.074407502433] , [ 1330491600000 , 35.053013769976] , [ 1333166400000 , 26.434568573937] , [ 1335758400000 , 25.305617871002] , [ 1338436800000 , 24.520919418236]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Materials" ,
|
||||
"values" : [ [ 1138683600000 , 5.5806167415681] , [ 1141102800000 , 5.4539047069985] , [ 1143781200000 , 7.6728842432362] , [ 1146369600000 , 7.719946716654] , [ 1149048000000 , 8.0144619912942] , [ 1151640000000 , 7.942223133434] , [ 1154318400000 , 8.3998279827444] , [ 1156996800000 , 8.532324572605] , [ 1159588800000 , 4.7324285199763] , [ 1162270800000 , 4.7402397487697] , [ 1164862800000 , 4.9042069355168] , [ 1167541200000 , 5.9583963430882] , [ 1170219600000 , 6.3693899239171] , [ 1172638800000 , 6.261153903813] , [ 1175313600000 , 5.3443942184584] , [ 1177905600000 , 5.4932111235361] , [ 1180584000000 , 5.5747393101109] , [ 1183176000000 , 5.3833633060013] , [ 1185854400000 , 5.5125898831832] , [ 1188532800000 , 5.8116112661327] , [ 1191124800000 , 4.3962296939996] , [ 1193803200000 , 4.6967663605521] , [ 1196398800000 , 4.7963004350914] , [ 1199077200000 , 4.1817985183351] , [ 1201755600000 , 4.3797643870182] , [ 1204261200000 , 4.6966642197965] , [ 1206936000000 , 4.3609995132565] , [ 1209528000000 , 4.4736290996496] , [ 1212206400000 , 4.3749762738128] , [ 1214798400000 , 3.3274661194507] , [ 1217476800000 , 3.0316184691337] , [ 1220155200000 , 2.5718140204728] , [ 1222747200000 , 2.7034994044603] , [ 1225425600000 , 2.2033786591364] , [ 1228021200000 , 1.9850621240805] , [ 1230699600000 , 0] , [ 1233378000000 , 0] , [ 1235797200000 , 0] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , 0] , [ 1249012800000 , 0] , [ 1251691200000 , 0] , [ 1254283200000 , 0.44495950017788] , [ 1256961600000 , 0.33945469262483] , [ 1259557200000 , 0.38348269455195] , [ 1262235600000 , 0] , [ 1264914000000 , 0] , [ 1267333200000 , 0] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 0.52216435716176] , [ 1298869200000 , 0.59275786698454] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 0] , [ 1317355200000 , 0] , [ 1320033600000 , 0] , [ 1322629200000 , 0] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0] , [ 1338436800000 , 0]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Telecommunication Services" ,
|
||||
"values" : [ [ 1138683600000 , 3.7056975170243] , [ 1141102800000 , 3.7561118692318] , [ 1143781200000 , 2.861913700854] , [ 1146369600000 , 2.9933744103381] , [ 1149048000000 , 2.7127537218463] , [ 1151640000000 , 3.1195497076283] , [ 1154318400000 , 3.4066964004508] , [ 1156996800000 , 3.3754571113569] , [ 1159588800000 , 2.2965579982924] , [ 1162270800000 , 2.4486818633018] , [ 1164862800000 , 2.4002308848517] , [ 1167541200000 , 1.9649579750349] , [ 1170219600000 , 1.9385263638056] , [ 1172638800000 , 1.9128975336387] , [ 1175313600000 , 2.3412869836298] , [ 1177905600000 , 2.4337870351445] , [ 1180584000000 , 2.62179703171] , [ 1183176000000 , 3.2642864957929] , [ 1185854400000 , 3.3200396223709] , [ 1188532800000 , 3.3934212707572] , [ 1191124800000 , 4.2822327088179] , [ 1193803200000 , 4.1474964228541] , [ 1196398800000 , 4.1477082879801] , [ 1199077200000 , 5.2947122916128] , [ 1201755600000 , 5.2919843508028] , [ 1204261200000 , 5.1989783050309] , [ 1206936000000 , 3.5603057673513] , [ 1209528000000 , 3.3009087690692] , [ 1212206400000 , 3.1784852603792] , [ 1214798400000 , 4.5889503538868] , [ 1217476800000 , 4.401779617494] , [ 1220155200000 , 4.2208301828278] , [ 1222747200000 , 3.89396671475] , [ 1225425600000 , 3.0423832241354] , [ 1228021200000 , 3.135520611578] , [ 1230699600000 , 1.9631418164089] , [ 1233378000000 , 1.8963543874958] , [ 1235797200000 , 1.8266636017025] , [ 1238472000000 , 0.93136635895188] , [ 1241064000000 , 0.92737801918888] , [ 1243742400000 , 0.97591889805002] , [ 1246334400000 , 2.6841193805515] , [ 1249012800000 , 2.5664341140531] , [ 1251691200000 , 2.3887523699873] , [ 1254283200000 , 1.1737801663681] , [ 1256961600000 , 1.0953582317281] , [ 1259557200000 , 1.2495674976653] , [ 1262235600000 , 0.36607452464754] , [ 1264914000000 , 0.3548719047291] , [ 1267333200000 , 0.36769242398939] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0.85450741275337] , [ 1288497600000 , 0.91360317921637] , [ 1291093200000 , 0.89647678692269] , [ 1293771600000 , 0.87800687192639] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0.43668720882994] , [ 1304136000000 , 0.4756523602692] , [ 1306814400000 , 0.46947368328469] , [ 1309406400000 , 0.45138896152316] , [ 1312084800000 , 0.43828726648117] , [ 1314763200000 , 2.0820861395316] , [ 1317355200000 , 0.9364411075395] , [ 1320033600000 , 0.60583907839773] , [ 1322629200000 , 0.61096950747437] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0] , [ 1338436800000 , 0]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Utilities" ,
|
||||
"values" : [ [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 0] , [ 1162270800000 , 0] , [ 1164862800000 , 0] , [ 1167541200000 , 0] , [ 1170219600000 , 0] , [ 1172638800000 , 0] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , 0] , [ 1185854400000 , 0] , [ 1188532800000 , 0] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , 0] , [ 1209528000000 , 0] , [ 1212206400000 , 0] , [ 1214798400000 , 0] , [ 1217476800000 , 0] , [ 1220155200000 , 0] , [ 1222747200000 , 0] , [ 1225425600000 , 0] , [ 1228021200000 , 0] , [ 1230699600000 , 0] , [ 1233378000000 , 0] , [ 1235797200000 , 0] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , 0] , [ 1249012800000 , 0] , [ 1251691200000 , 0] , [ 1254283200000 , 0] , [ 1256961600000 , 0] , [ 1259557200000 , 0] , [ 1262235600000 , 0] , [ 1264914000000 , 0] , [ 1267333200000 , 0] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 0] , [ 1317355200000 , 0] , [ 1320033600000 , 0] , [ 1322629200000 , 0] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0] , [ 1338436800000 , 0]]
|
||||
}
|
||||
].map(function(series) {
|
||||
series.values = series.values.map(function(d) {
|
||||
return { x: d[0], y: d[1] }
|
||||
});
|
||||
return series;
|
||||
});
|
||||
|
||||
|
||||
|
||||
var histcatexpshort = [
|
||||
{
|
||||
"key" : "Consumer Discretionary" ,
|
||||
"values" : [ [ 1138683600000 , -0.62238434102863] , [ 1141102800000 , -0.61484565039024] , [ 1143781200000 , -1.0769367918668] , [ 1146369600000 , -1.2221156604129] , [ 1149048000000 , -1.2434858263377] , [ 1151640000000 , -0.58606435489597] , [ 1154318400000 , -0.61478911495141] , [ 1156996800000 , -0.61429362688591] , [ 1159588800000 , -1.1168614112788] , [ 1162270800000 , -1.1510268716612] , [ 1164862800000 , -1.1104724164222] , [ 1167541200000 , -1.2298338563471] , [ 1170219600000 , -1.5053664389104] , [ 1172638800000 , -1.5535266372193] , [ 1175313600000 , -3.1690472535854] , [ 1177905600000 , -3.1273013967041] , [ 1180584000000 , -3.155466271777] , [ 1183176000000 , -3.7158562579437] , [ 1185854400000 , -3.8244546635586] , [ 1188532800000 , -3.5524464859972] , [ 1191124800000 , -3.0472339109128] , [ 1193803200000 , -3.064978140815] , [ 1196398800000 , -3.0818130124986] , [ 1199077200000 , -2.9806791138312] , [ 1201755600000 , -3.7360958775824] , [ 1204261200000 , -3.4687841733263] , [ 1206936000000 , -3.3702018615806] , [ 1209528000000 , -3.1982756208679] , [ 1212206400000 , -3.0489433155104] , [ 1214798400000 , -3.7008275605963] , [ 1217476800000 , -3.8980507260892] , [ 1220155200000 , -3.7680083260241] , [ 1222747200000 , -3.2061890012391] , [ 1225425600000 , -2.6727551440484] , [ 1228021200000 , -2.4469327462935] , [ 1230699600000 , -3.0192419668784] , [ 1233378000000 , -2.892958553476] , [ 1235797200000 , -3.1153570053479] , [ 1238472000000 , -2.9927580570711] , [ 1241064000000 , -3.5061796706294] , [ 1243742400000 , -3.2944159516725] , [ 1246334400000 , -3.4154213240617] , [ 1249012800000 , -3.6492125438171] , [ 1251691200000 , -3.6674164998394] , [ 1254283200000 , -4.6271484977727] , [ 1256961600000 , -4.2433407292676] , [ 1259557200000 , -4.4742625247274] , [ 1262235600000 , -5.2078214612359] , [ 1264914000000 , -5.2209579214469] , [ 1267333200000 , -5.4596395756061] , [ 1270008000000 , -5.6906459276584] , [ 1272600000000 , -6.4981737808665] , [ 1275278400000 , -6.2563044048578] , [ 1277870400000 , -6.175479487959] , [ 1280548800000 , -6.6641002427295] , [ 1283227200000 , -6.3648667745556] , [ 1285819200000 , -5.0270168607884] , [ 1288497600000 , -5.1186072976233] , [ 1291093200000 , -5.1127601587872] , [ 1293771600000 , -5.3015262972641] , [ 1296450000000 , -4.4295728671596] , [ 1298869200000 , -4.5488139745696] , [ 1301544000000 , -2.9021260315957] , [ 1304136000000 , -3.1482096241139] , [ 1306814400000 , -2.8648831814763] , [ 1309406400000 , -2.8149423433441] , [ 1312084800000 , -2.6350669145713] , [ 1314763200000 , -5.9871754759038] , [ 1317355200000 , -8.6127555816399] , [ 1320033600000 , -7.0712887348892] , [ 1322629200000 , -7.3930257999857] , [ 1325307600000 , -6.5183071556304] , [ 1327986000000 , -7.4388913793503] , [ 1330491600000 , -8.2134465182649] , [ 1333166400000 , -7.7836036697105] , [ 1335758400000 , -8.0955053683936] , [ 1338436800000 , -8.0981845818893]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Consumer Staples" ,
|
||||
"values" : [ [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 0] , [ 1162270800000 , 0] , [ 1164862800000 , 0] , [ 1167541200000 , -0.24102139376003] , [ 1170219600000 , -0.69960584365035] , [ 1172638800000 , -0.67365051426185] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , -0.31429312464988] , [ 1185854400000 , -0.90018700397153] , [ 1188532800000 , -0.96926214328714] , [ 1191124800000 , -1.1343386468131] , [ 1193803200000 , -1.1335426595455] , [ 1196398800000 , -1.2327663032424] , [ 1199077200000 , -0.41027135492155] , [ 1201755600000 , -0.41779167524802] , [ 1204261200000 , -0.38133883625885] , [ 1206936000000 , 0] , [ 1209528000000 , -0.32550520320253] , [ 1212206400000 , -0.33185144615505] , [ 1214798400000 , -0.68609668877894] , [ 1217476800000 , -0.70001207744308] , [ 1220155200000 , -0.68378680840919] , [ 1222747200000 , -0.40908783182034] , [ 1225425600000 , -0.39074266525646] , [ 1228021200000 , -0.40358490474562] , [ 1230699600000 , -0.85752207262267] , [ 1233378000000 , -0.74395750438805] , [ 1235797200000 , -0.70718832429489] , [ 1238472000000 , -0.76244465406965] , [ 1241064000000 , -0.67618572591984] , [ 1243742400000 , -0.67649596761402] , [ 1246334400000 , -0.94618002703247] , [ 1249012800000 , -0.95408485581014] , [ 1251691200000 , -0.96272139504276] , [ 1254283200000 , 0] , [ 1256961600000 , 0] , [ 1259557200000 , 0] , [ 1262235600000 , 0] , [ 1264914000000 , 0] , [ 1267333200000 , 0] , [ 1270008000000 , -0.25516420149471] , [ 1272600000000 , -0.24106264576017] , [ 1275278400000 , -0.22802547751448] , [ 1277870400000 , -0.62187524046697] , [ 1280548800000 , -0.72155608677106] , [ 1283227200000 , -0.70221659944774] , [ 1285819200000 , -1.1117002584543] , [ 1288497600000 , -1.190911001336] , [ 1291093200000 , -1.1781082003972] , [ 1293771600000 , -1.2125860264875] , [ 1296450000000 , -1.7748010365657] , [ 1298869200000 , -1.8919594178596] , [ 1301544000000 , -1.7077946421533] , [ 1304136000000 , -2.024238803094] , [ 1306814400000 , -1.9769844081819] , [ 1309406400000 , -2.0730275464065] , [ 1312084800000 , -1.9690128240888] , [ 1314763200000 , -5.5557852269348] , [ 1317355200000 , -7.2527933190641] , [ 1320033600000 , -5.7367677053109] , [ 1322629200000 , -6.0409316206662] , [ 1325307600000 , -4.6511525539195] , [ 1327986000000 , -4.526116059083] , [ 1330491600000 , -4.846292325197] , [ 1333166400000 , -2.2663198779425] , [ 1335758400000 , -2.4172072568564] , [ 1338436800000 , -2.3204729601189]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Energy" ,
|
||||
"values" : [ [ 1138683600000 , -0.95707527558303] , [ 1141102800000 , -0.78324346694487] , [ 1143781200000 , -1.2905241058019] , [ 1146369600000 , -1.3880880486779] , [ 1149048000000 , -1.3337247185993] , [ 1151640000000 , -1.0342112071924] , [ 1154318400000 , -1.1264764100183] , [ 1156996800000 , -1.0001002640852] , [ 1159588800000 , -0.85341153093953] , [ 1162270800000 , -0.88452017844596] , [ 1164862800000 , -0.84305725300642] , [ 1167541200000 , -1.0874455682301] , [ 1170219600000 , -1.1714969043168] , [ 1172638800000 , -1.1445856467934] , [ 1175313600000 , -1.1928513334073] , [ 1177905600000 , -1.2365691634265] , [ 1180584000000 , -1.2690940962478] , [ 1183176000000 , -1.662233774695] , [ 1185854400000 , -1.745760538781] , [ 1188532800000 , -1.5209200931271] , [ 1191124800000 , -1.7874791820886] , [ 1193803200000 , -1.7755668105117] , [ 1196398800000 , -1.5456069064618] , [ 1199077200000 , -1.7077541586335] , [ 1201755600000 , -1.6462081650757] , [ 1204261200000 , -1.8624735339628] , [ 1206936000000 , -0.71073453533048] , [ 1209528000000 , -0.75380709640219] , [ 1212206400000 , -0.71020554911716] , [ 1214798400000 , -1.2077850914504] , [ 1217476800000 , -1.0505576787644] , [ 1220155200000 , -0.97804595164878] , [ 1222747200000 , -0.34591294663671] , [ 1225425600000 , -0.19958331514025] , [ 1228021200000 , -0.17599782216296] , [ 1230699600000 , -0.49577714121027] , [ 1233378000000 , -0.51644059173978] , [ 1235797200000 , -0.48576859637083] , [ 1238472000000 , -0.75596531126452] , [ 1241064000000 , -0.72073358315801] , [ 1243742400000 , -0.82125996732294] , [ 1246334400000 , -1.4933216860121] , [ 1249012800000 , -1.5003760525933] , [ 1251691200000 , -1.4744921420596] , [ 1254283200000 , -1.8197844060652] , [ 1256961600000 , -1.6558574419626] , [ 1259557200000 , -1.7256149254159] , [ 1262235600000 , -2.7667194124217] , [ 1264914000000 , -2.9113351806903] , [ 1267333200000 , -3.0172806042796] , [ 1270008000000 , -2.8607175559701] , [ 1272600000000 , -2.629226972169] , [ 1275278400000 , -2.1855196883832] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , -1.3788733828844] , [ 1288497600000 , -1.4136792139765] , [ 1291093200000 , -1.5176522942901] , [ 1293771600000 , -1.5776651933208] , [ 1296450000000 , -1.7171675182182] , [ 1298869200000 , -1.8121885250566] , [ 1301544000000 , -1.2221934283206] , [ 1304136000000 , -1.2910715239439] , [ 1306814400000 , -1.1492301612576] , [ 1309406400000 , -1.0613891302841] , [ 1312084800000 , -0.99605193205308] , [ 1314763200000 , -1.7324212072278] , [ 1317355200000 , -1.5226856867477] , [ 1320033600000 , -1.3159138896549] , [ 1322629200000 , -1.3925952659299] , [ 1325307600000 , -1.59624913621] , [ 1327986000000 , -1.5235879880296] , [ 1330491600000 , -1.7315573519279] , [ 1333166400000 , -0.86883431220926] , [ 1335758400000 , -0.90144871282829] , [ 1338436800000 , -0.7010492182517]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Financials" ,
|
||||
"values" : [ [ 1138683600000 , -0.56797103580254] , [ 1141102800000 , -0.57324319174933] , [ 1143781200000 , -1.1014818753272] , [ 1146369600000 , -1.1480256918118] , [ 1149048000000 , -1.0709335336775] , [ 1151640000000 , -0.84876993929658] , [ 1154318400000 , -0.88122638919979] , [ 1156996800000 , -0.86421146074279] , [ 1159588800000 , -0.95093689377974] , [ 1162270800000 , -0.96646862382248] , [ 1164862800000 , -0.96726919442167] , [ 1167541200000 , -0.99874655234936] , [ 1170219600000 , -1.0004843898938] , [ 1172638800000 , -0.9925349676815] , [ 1175313600000 , -1.1888941931287] , [ 1177905600000 , -1.9402228220929] , [ 1180584000000 , -2.03915987194] , [ 1183176000000 , -2.4620526931074] , [ 1185854400000 , -2.2423544651877] , [ 1188532800000 , -1.8790998536037] , [ 1191124800000 , -0.43246873489492] , [ 1193803200000 , -0.40142684216371] , [ 1196398800000 , -0.35646635110466] , [ 1199077200000 , -0.90385702817642] , [ 1201755600000 , -0.86997575249605] , [ 1204261200000 , -0.80101406775415] , [ 1206936000000 , 0] , [ 1209528000000 , 0] , [ 1212206400000 , 0] , [ 1214798400000 , -0.31816167663298] , [ 1217476800000 , -0.309250081849] , [ 1220155200000 , -0.27723698582762] , [ 1222747200000 , -0.32001379372079] , [ 1225425600000 , -0.1940212908561] , [ 1228021200000 , -0.051964569203423] , [ 1230699600000 , -0.68342686502452] , [ 1233378000000 , -0.57645644730726] , [ 1235797200000 , -0.50860972184555] , [ 1238472000000 , -0.44405217759605] , [ 1241064000000 , -0.45224333626901] , [ 1243742400000 , -0.41691818252313] , [ 1246334400000 , -2.4654561579904] , [ 1249012800000 , -2.5473566378551] , [ 1251691200000 , -2.8340604021307] , [ 1254283200000 , -1.8452445924041] , [ 1256961600000 , -1.5626544265386] , [ 1259557200000 , -1.707842764916] , [ 1262235600000 , -1.2237258567344] , [ 1264914000000 , -1.9756896168227] , [ 1267333200000 , -2.0920321696833] , [ 1270008000000 , -1.9782327706952] , [ 1272600000000 , -2.0416328165753] , [ 1275278400000 , -1.7816736134798] , [ 1277870400000 , -0.66092275437689] , [ 1280548800000 , -0.73608099025756] , [ 1283227200000 , -0.63686713461189] , [ 1285819200000 , -0.0024159482973197] , [ 1288497600000 , -0.0023052643588188] , [ 1291093200000 , -0.0023008251965446] , [ 1293771600000 , -0.002247807834351] , [ 1296450000000 , -0.62004345920743] , [ 1298869200000 , -0.69634926653235] , [ 1301544000000 , -0.76013525555354] , [ 1304136000000 , -1.505368495849] , [ 1306814400000 , -1.3456949237707] , [ 1309406400000 , -1.3013934898695] , [ 1312084800000 , -1.183199519395] , [ 1314763200000 , -0.0074317809719494] , [ 1317355200000 , -0.019430458325379] , [ 1320033600000 , -0.015777413509084] , [ 1322629200000 , -0.016463879837718] , [ 1325307600000 , -0.0031338919976225] , [ 1327986000000 , -0.0029770278967514] , [ 1330491600000 , -0.003048902987439] , [ 1333166400000 , -0.71171545945298] , [ 1335758400000 , -0.72003299240508] , [ 1338436800000 , -0.72961974845039]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Health Care" ,
|
||||
"values" : [ [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 0] , [ 1162270800000 , 0] , [ 1164862800000 , 0] , [ 1167541200000 , 0] , [ 1170219600000 , 0] , [ 1172638800000 , 0] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , -0.16816074963595] , [ 1185854400000 , -0.19318598121302] , [ 1188532800000 , -0.20130864403797] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , 0] , [ 1209528000000 , 0] , [ 1212206400000 , 0] , [ 1214798400000 , -0.30476443991021] , [ 1217476800000 , -0.31836730824777] , [ 1220155200000 , -0.30797427879366] , [ 1222747200000 , -0.48318623977865] , [ 1225425600000 , -0.50834562674351] , [ 1228021200000 , -0.47936068182503] , [ 1230699600000 , -0.61753010081956] , [ 1233378000000 , -0.59493587396819] , [ 1235797200000 , -0.62664324339064] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , 0] , [ 1249012800000 , 0] , [ 1251691200000 , 0] , [ 1254283200000 , -1.3076157801726] , [ 1256961600000 , -1.2306204787628] , [ 1259557200000 , -1.4728435992801] , [ 1262235600000 , -1.7729831226837] , [ 1264914000000 , -1.7711733839842] , [ 1267333200000 , -1.8233584472099] , [ 1270008000000 , -1.8505979461969] , [ 1272600000000 , -1.5989071613823] , [ 1275278400000 , -1.6636770720413] , [ 1277870400000 , -1.4523909758725] , [ 1280548800000 , -1.503771584105] , [ 1283227200000 , -1.5458561450475] , [ 1285819200000 , -1.457331837483] , [ 1288497600000 , -1.4217332434071] , [ 1291093200000 , -1.4687927303394] , [ 1293771600000 , -1.437223057967] , [ 1296450000000 , -0.72221871524334] , [ 1298869200000 , -0.7399575414588] , [ 1301544000000 , -1.9712239746745] , [ 1304136000000 , -2.2360949351942] , [ 1306814400000 , -2.2147572530541] , [ 1309406400000 , -2.0440932285023] , [ 1312084800000 , -1.9438209561938] , [ 1314763200000 , -4.9035620630386] , [ 1317355200000 , -4.9036674804213] , [ 1320033600000 , -4.1900706458801] , [ 1322629200000 , -4.5602615827955] , [ 1325307600000 , -1.9194421885814] , [ 1327986000000 , -1.8854470816382] , [ 1330491600000 , -1.9514785018245] , [ 1333166400000 , -0.65282205870454] , [ 1335758400000 , -0.57068368199209] , [ 1338436800000 , -0.55902563384907]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Industrials" ,
|
||||
"values" : [ [ 1138683600000 , -0.390983707093] , [ 1141102800000 , -0.38471122730537] , [ 1143781200000 , -0.22897173467143] , [ 1146369600000 , -0.23798946472286] , [ 1149048000000 , -0.20721233428173] , [ 1151640000000 , -0.54577697700394] , [ 1154318400000 , -0.50300252995937] , [ 1156996800000 , -0.49609518628103] , [ 1159588800000 , -0.19582276889273] , [ 1162270800000 , -0.60399139945108] , [ 1164862800000 , -0.61477368082886] , [ 1167541200000 , -0.13665869881705] , [ 1170219600000 , -0.13147565243332] , [ 1172638800000 , -0.11819441593356] , [ 1175313600000 , -0.41610825689528] , [ 1177905600000 , -0.38815419659358] , [ 1180584000000 , -0.3703838943035] , [ 1183176000000 , -1.6193903804534] , [ 1185854400000 , -1.6502660417328] , [ 1188532800000 , -1.481875010149] , [ 1191124800000 , -0.96180099322536] , [ 1193803200000 , -0.97017301394967] , [ 1196398800000 , -0.97432971260093] , [ 1199077200000 , -0.36071934518387] , [ 1201755600000 , -0.42150070991777] , [ 1204261200000 , -0.41784042793202] , [ 1206936000000 , -0.70494708349169] , [ 1209528000000 , -0.73449590911984] , [ 1212206400000 , -0.7400163600788] , [ 1214798400000 , -0.52584502195668] , [ 1217476800000 , -0.56224806965368] , [ 1220155200000 , -0.50830855192741] , [ 1222747200000 , -0.79494637898049] , [ 1225425600000 , -0.70391433947286] , [ 1228021200000 , -0.61420660317009] , [ 1230699600000 , -0.41699636242004] , [ 1233378000000 , -0.3779041158185] , [ 1235797200000 , -0.34282498854047] , [ 1238472000000 , -0.83845630450592] , [ 1241064000000 , -0.85937944918912] , [ 1243742400000 , -0.85530287999615] , [ 1246334400000 , -1.2819866264007] , [ 1249012800000 , -1.4598491663715] , [ 1251691200000 , -1.5261472177779] , [ 1254283200000 , -1.2503948993549] , [ 1256961600000 , -1.1767079775724] , [ 1259557200000 , -1.2585538260386] , [ 1262235600000 , -3.420972598165] , [ 1264914000000 , -3.3381337072954] , [ 1267333200000 , -3.7043129330694] , [ 1270008000000 , -4.6924500756609] , [ 1272600000000 , -4.6880683704908] , [ 1275278400000 , -4.3335249071719] , [ 1277870400000 , -3.6545810416445] , [ 1280548800000 , -4.1639787701262] , [ 1283227200000 , -3.8249597612047] , [ 1285819200000 , -0.33221815335641] , [ 1288497600000 , -0.33346468179047] , [ 1291093200000 , -0.34546911228789] , [ 1293771600000 , -0.36609971997147] , [ 1296450000000 , -0.42502545672607] , [ 1298869200000 , -0.38192733348507] , [ 1301544000000 , -0.01991033447621] , [ 1304136000000 , -0.020319195299659] , [ 1306814400000 , -0.018147820835144] , [ 1309406400000 , -0.017923186209383] , [ 1312084800000 , -0.016133999253684] , [ 1314763200000 , -0.72058656278977] , [ 1317355200000 , -0.42812646564889] , [ 1320033600000 , -0.35896134792589] , [ 1322629200000 , -0.38637896444549] , [ 1325307600000 , -0.31794663984021] , [ 1327986000000 , -0.32220831831888] , [ 1330491600000 , -0.37107872672214] , [ 1333166400000 , -0.81968633933695] , [ 1335758400000 , -0.77148300885994] , [ 1338436800000 , -0.77392261735539]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Information Technology" ,
|
||||
"values" : [ [ 1138683600000 , -0.86346955704548] , [ 1141102800000 , -0.88352373534584] , [ 1143781200000 , -1.2630802711685] , [ 1146369600000 , -1.2352593999242] , [ 1149048000000 , -1.2086379045093] , [ 1151640000000 , -1.0416778473647] , [ 1154318400000 , -0.99326278105154] , [ 1156996800000 , -1.0095045907007] , [ 1159588800000 , -2.0762515478576] , [ 1162270800000 , -2.13066829429] , [ 1164862800000 , -2.2458400474235] , [ 1167541200000 , -2.1315262677135] , [ 1170219600000 , -2.4063108252146] , [ 1172638800000 , -2.3753290631454] , [ 1175313600000 , -2.1119577565913] , [ 1177905600000 , -2.1546804750397] , [ 1180584000000 , -2.3768374034303] , [ 1183176000000 , -1.244878330098] , [ 1185854400000 , -1.2233210265236] , [ 1188532800000 , -1.1715073644317] , [ 1191124800000 , -1.0036136395928] , [ 1193803200000 , -0.9510676777939] , [ 1196398800000 , -0.97553526602196] , [ 1199077200000 , -1.9083849411912] , [ 1201755600000 , -1.855965027796] , [ 1204261200000 , -1.7343633512402] , [ 1206936000000 , -2.1847032903649] , [ 1209528000000 , -2.2095446284368] , [ 1212206400000 , -2.2060678671735] , [ 1214798400000 , -1.0941627910924] , [ 1217476800000 , -1.0004352405294] , [ 1220155200000 , -0.93563501378075] , [ 1222747200000 , 0] , [ 1225425600000 , -0.65155092645953] , [ 1228021200000 , -0.66021585164047] , [ 1230699600000 , 0] , [ 1233378000000 , 0] , [ 1235797200000 , 0] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , 0] , [ 1249012800000 , 0] , [ 1251691200000 , 0] , [ 1254283200000 , -0.29297573068109] , [ 1256961600000 , -0.75043756379084] , [ 1259557200000 , -0.85690846482745] , [ 1262235600000 , -0.21937480770873] , [ 1264914000000 , -0.93232569935343] , [ 1267333200000 , -0.94180327525084] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , -0.21253553193891] , [ 1288497600000 , -0.23178244747722] , [ 1291093200000 , -0.21481706129968] , [ 1293771600000 , -0.23306463011242] , [ 1296450000000 , -0.90244048159158] , [ 1298869200000 , -1.0410052083529] , [ 1301544000000 , -2.209350937089] , [ 1304136000000 , -2.6540796712932] , [ 1306814400000 , -3.2481210590957] , [ 1309406400000 , -3.0717986354635] , [ 1312084800000 , -2.7493296528921] , [ 1314763200000 , -2.1973991293256] , [ 1317355200000 , -0.86403111842659] , [ 1320033600000 , -0.87824756160219] , [ 1322629200000 , -0.80812571482871] , [ 1325307600000 , -1.6419820357151] , [ 1327986000000 , -1.6893790342619] , [ 1330491600000 , -1.8614499455474] , [ 1333166400000 , -1.814727017516] , [ 1335758400000 , -1.8744942128618] , [ 1338436800000 , -1.7880124850882]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Materials" ,
|
||||
"values" : [ [ 1138683600000 , -0.26079769654951] , [ 1141102800000 , -0.23368425410881] , [ 1143781200000 , -0.46285283466193] , [ 1146369600000 , -0.4588429059205] , [ 1149048000000 , -0.43055120080853] , [ 1151640000000 , -0.26428963363642] , [ 1154318400000 , -0.26203611963364] , [ 1156996800000 , -0.26706156717825] , [ 1159588800000 , -0.024613610779192] , [ 1162270800000 , -0.024351047945929] , [ 1164862800000 , -0.031497065480344] , [ 1167541200000 , 0] , [ 1170219600000 , 0] , [ 1172638800000 , 0] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , 0] , [ 1185854400000 , 0] , [ 1188532800000 , 0] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , -0.83875613435932] , [ 1209528000000 , -0.84367445572656] , [ 1212206400000 , -0.78928126005463] , [ 1214798400000 , -1.1075954825404] , [ 1217476800000 , -1.2704836497926] , [ 1220155200000 , -1.307504052056] , [ 1222747200000 , -0.70440409992826] , [ 1225425600000 , -0.74122140007729] , [ 1228021200000 , -0.82224393045109] , [ 1230699600000 , -1.8719055314571] , [ 1233378000000 , -1.5200311233975] , [ 1235797200000 , -1.5552386899059] , [ 1238472000000 , -1.1576593040773] , [ 1241064000000 , -1.0757811060575] , [ 1243742400000 , -1.0250125722511] , [ 1246334400000 , -2.2747597224127] , [ 1249012800000 , -2.3125499227974] , [ 1251691200000 , -2.2784386530745] , [ 1254283200000 , -1.1518806233757] , [ 1256961600000 , -1.0075503399018] , [ 1259557200000 , -1.1400577929481] , [ 1262235600000 , -0.50677891891165] , [ 1264914000000 , -0.54332908490051] , [ 1267333200000 , -0.55473181189807] , [ 1270008000000 , -0.3633796157757] , [ 1272600000000 , -0.30361861470847] , [ 1275278400000 , -0.24614951229153] , [ 1277870400000 , -1.0959443687647] , [ 1280548800000 , -1.1881529264637] , [ 1283227200000 , -1.1835349242596] , [ 1285819200000 , -0.92507477884561] , [ 1288497600000 , -0.94531016133473] , [ 1291093200000 , -0.93519433603434] , [ 1293771600000 , -1.009221344252] , [ 1296450000000 , -2.3640716285835] , [ 1298869200000 , -2.4914494188556] , [ 1301544000000 , -1.7979456141716] , [ 1304136000000 , -2.1389760840247] , [ 1306814400000 , -1.9721362241269] , [ 1309406400000 , -1.9170229522382] , [ 1312084800000 , -1.8076246545605] , [ 1314763200000 , -2.1010686108381] , [ 1317355200000 , -2.2396373791195] , [ 1320033600000 , -1.8469012813015] , [ 1322629200000 , -2.0079125997321] , [ 1325307600000 , -1.9170007806182] , [ 1327986000000 , -1.9239118384243] , [ 1330491600000 , -2.0649464738798] , [ 1333166400000 , -0.88385747789351] , [ 1335758400000 , -0.91438087144161] , [ 1338436800000 , -0.96513752020965]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Telecommunication Services" ,
|
||||
"values" : [ [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , -0.077395192503573] , [ 1146369600000 , -0.079342784160835] , [ 1149048000000 , -0.07376956808809] , [ 1151640000000 , -0.041850521681201] , [ 1154318400000 , -0.037598545052499] , [ 1156996800000 , -0.040984079427717] , [ 1159588800000 , -0.19335817797448] , [ 1162270800000 , -0.18578493919925] , [ 1164862800000 , -0.1769473933101] , [ 1167541200000 , -0.57245352054975] , [ 1170219600000 , -0.61554187332911] , [ 1172638800000 , -0.63016714701151] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , -0.12118014109021] , [ 1185854400000 , -0.11085831487208] , [ 1188532800000 , -0.10901265358445] , [ 1191124800000 , -0.17205583275088] , [ 1193803200000 , -0.16573676303991] , [ 1196398800000 , -0.17954841680392] , [ 1199077200000 , -0.82703336198161] , [ 1201755600000 , -0.76741763304227] , [ 1204261200000 , -0.79430844816827] , [ 1206936000000 , -1.0279404050708] , [ 1209528000000 , -1.0342425093761] , [ 1212206400000 , -1.0903083860383] , [ 1214798400000 , -1.0895432841007] , [ 1217476800000 , -1.1392703218146] , [ 1220155200000 , -0.98872086340391] , [ 1222747200000 , -1.227654651568] , [ 1225425600000 , -1.0527419580394] , [ 1228021200000 , -0.84338280322309] , [ 1230699600000 , -0.5982617279246] , [ 1233378000000 , -0.74123723862634] , [ 1235797200000 , -0.81665712408277] , [ 1238472000000 , -0.89868760705228] , [ 1241064000000 , -0.86338472153689] , [ 1243742400000 , -0.85040889603889] , [ 1246334400000 , -0.82872733882926] , [ 1249012800000 , -1.2797824676355] , [ 1251691200000 , -1.152043882336] , [ 1254283200000 , -0.70125890680538] , [ 1256961600000 , -0.69496338525418] , [ 1259557200000 , -0.81982038022784] , [ 1262235600000 , -0.42841700219624] , [ 1264914000000 , -0.43298861575253] , [ 1267333200000 , -0.46951194437705] , [ 1270008000000 , -0.46723980191721] , [ 1272600000000 , -0.43139262322841] , [ 1275278400000 , -0.4052075794202] , [ 1277870400000 , -0.45399431179247] , [ 1280548800000 , -0.50492374473014] , [ 1283227200000 , -0.49032976375464] , [ 1285819200000 , -0.95769381063728] , [ 1288497600000 , -0.92968381683254] , [ 1291093200000 , -0.90984207437415] , [ 1293771600000 , -0.91448295661871] , [ 1296450000000 , -1.3204103334172] , [ 1298869200000 , -1.3896989018] , [ 1301544000000 , -1.8536993972883] , [ 1304136000000 , -1.9901582471947] , [ 1306814400000 , -1.8731097808809] , [ 1309406400000 , -1.8109819859122] , [ 1312084800000 , -1.7946593386661] , [ 1314763200000 , -1.6002716669781] , [ 1317355200000 , -0.056479286204019] , [ 1320033600000 , -0.046232413998891] , [ 1322629200000 , -0.051182355563531] , [ 1325307600000 , -0.032858749040145] , [ 1327986000000 , -0.032326418106178] , [ 1330491600000 , -0.033980477379241] , [ 1333166400000 , -0.053069550536519] , [ 1335758400000 , -0.055741850564434] , [ 1338436800000 , -0.055851808568252]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Utilities" ,
|
||||
"values" : [ [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , -0.073769471773675] , [ 1146369600000 , -0.077824496315782] , [ 1149048000000 , -0.080696288096361] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 0] , [ 1162270800000 , 0] , [ 1164862800000 , 0] , [ 1167541200000 , 0] , [ 1170219600000 , 0] , [ 1172638800000 , 0] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , -0.16073291656515] , [ 1185854400000 , -0.1646253606633] , [ 1188532800000 , -0.1655815581449] , [ 1191124800000 , -0.74417496631713] , [ 1193803200000 , -0.76230340423681] , [ 1196398800000 , -0.73882938190048] , [ 1199077200000 , -0.3820573391806] , [ 1201755600000 , -0.360757285179] , [ 1204261200000 , -0.38081058463615] , [ 1206936000000 , -0.92767439811083] , [ 1209528000000 , -0.92774728028789] , [ 1212206400000 , -0.85273481694714] , [ 1214798400000 , -1.69407085613] , [ 1217476800000 , -1.5179726219101] , [ 1220155200000 , -1.3576700600738] , [ 1222747200000 , -1.0404839864076] , [ 1225425600000 , -0.95251478838915] , [ 1228021200000 , -1.0610509118017] , [ 1230699600000 , -0.3316792294278] , [ 1233378000000 , -0.33745002288524] , [ 1235797200000 , -0.28806366796683] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , -0.6338555382785] , [ 1249012800000 , -0.62797265130959] , [ 1251691200000 , -0.60264057253794] , [ 1254283200000 , -0.28687231077181] , [ 1256961600000 , -0.22215649778327] , [ 1259557200000 , -0.24027664555676] , [ 1262235600000 , 0] , [ 1264914000000 , 0] , [ 1267333200000 , 0] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 0] , [ 1317355200000 , 0] , [ 1320033600000 , 0] , [ 1322629200000 , 0] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0] , [ 1338436800000 , 0]]
|
||||
}
|
||||
].map(function(series) {
|
||||
series.values = series.values.map(function(d) {
|
||||
return { x: d[0], y: d[1] }
|
||||
});
|
||||
return series;
|
||||
});
|
||||
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.stackedAreaChart()
|
||||
.clipEdge(true);
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
d3.select('#chart1')
|
||||
.datum(histcatexplong)
|
||||
.transition().duration(500).call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.stackedAreaChart()
|
||||
.clipEdge(true);
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
d3.select('#chart2')
|
||||
.datum(histcatexpshort)
|
||||
.transition().duration(500).call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@ -1,222 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart {
|
||||
margin: 10px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart">
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/stackedArea.js"></script>
|
||||
<script src="../src/models/stackedAreaWithLegend.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
var n = 4, // number of layers
|
||||
m = 120; // number of samples per layer
|
||||
//color = d3.interpolateRgb("#aad", "#556");
|
||||
|
||||
//format data to our liking, add keys
|
||||
var data = stream_layers(n,m).map(function(data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: data
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var histcatexplong = [
|
||||
{
|
||||
"key" : "Consumer Discretionary" ,
|
||||
"values" : [ [ 1025409600000 , 23.041422681023] , [ 1028088000000 , 19.854291255832] , [ 1030766400000 , 21.02286281168] , [ 1033358400000 , 22.093608385173] , [ 1036040400000 , 25.108079299458] , [ 1038632400000 , 26.982389242348] , [ 1041310800000 , 19.828984957662] , [ 1043989200000 , 19.914055036294] , [ 1046408400000 , 19.436150539916] , [ 1049086800000 , 21.558650338602] , [ 1051675200000 , 24.395594061773] , [ 1054353600000 , 24.747089309384] , [ 1056945600000 , 23.491755498807] , [ 1059624000000 , 23.376634878164] , [ 1062302400000 , 24.581223154533] , [ 1064894400000 , 24.922476843538] , [ 1067576400000 , 27.357712939042] , [ 1070168400000 , 26.503020572593] , [ 1072846800000 , 26.658901244878] , [ 1075525200000 , 27.065704156445] , [ 1078030800000 , 28.735320452588] , [ 1080709200000 , 31.572277846319] , [ 1083297600000 , 30.932161503638] , [ 1085976000000 , 31.627029785554] , [ 1088568000000 , 28.728743674232] , [ 1091246400000 , 26.858365172675] , [ 1093924800000 , 27.279922830032] , [ 1096516800000 , 34.408301211324] , [ 1099195200000 , 34.794362930439] , [ 1101790800000 , 35.609978198951] , [ 1104469200000 , 33.574394968037] , [ 1107147600000 , 31.979405070598] , [ 1109566800000 , 31.19009040297] , [ 1112245200000 , 31.083933968994] , [ 1114833600000 , 29.668971113185] , [ 1117512000000 , 31.490638014379] , [ 1120104000000 , 31.818617451128] , [ 1122782400000 , 32.960314008183] , [ 1125460800000 , 31.313383196209] , [ 1128052800000 , 33.125486081852] , [ 1130734800000 , 32.791805509149] , [ 1133326800000 , 33.506038030366] , [ 1136005200000 , 26.96501697216] , [ 1138683600000 , 27.38478809681] , [ 1141102800000 , 27.371377218209] , [ 1143781200000 , 26.309915460827] , [ 1146369600000 , 26.425199957518] , [ 1149048000000 , 26.823411519396] , [ 1151640000000 , 23.850443591587] , [ 1154318400000 , 23.158355444054] , [ 1156996800000 , 22.998689393695] , [ 1159588800000 , 27.9771285113] , [ 1162270800000 , 29.073672469719] , [ 1164862800000 , 28.587640408904] , [ 1167541200000 , 22.788453687637] , [ 1170219600000 , 22.429199073597] , [ 1172638800000 , 22.324103271052] , [ 1175313600000 , 17.558388444187] , [ 1177905600000 , 16.769518096208] , [ 1180584000000 , 16.214738201301] , [ 1183176000000 , 18.729632971229] , [ 1185854400000 , 18.814523318847] , [ 1188532800000 , 19.789986451358] , [ 1191124800000 , 17.070049054933] , [ 1193803200000 , 16.121349575716] , [ 1196398800000 , 15.141659430091] , [ 1199077200000 , 17.175388025297] , [ 1201755600000 , 17.286592443522] , [ 1204261200000 , 16.323141626568] , [ 1206936000000 , 19.231263773952] , [ 1209528000000 , 18.446256391095] , [ 1212206400000 , 17.822632399764] , [ 1214798400000 , 15.53936647598] , [ 1217476800000 , 15.255131790217] , [ 1220155200000 , 15.660963922592] , [ 1222747200000 , 13.254482273698] , [ 1225425600000 , 11.920796202299] , [ 1228021200000 , 12.122809090924] , [ 1230699600000 , 15.691026271393] , [ 1233378000000 , 14.720881635107] , [ 1235797200000 , 15.387939360044] , [ 1238472000000 , 13.765436672228] , [ 1241064000000 , 14.631445864799] , [ 1243742400000 , 14.292446536221] , [ 1246334400000 , 16.170071367017] , [ 1249012800000 , 15.948135554337] , [ 1251691200000 , 16.612872685134] , [ 1254283200000 , 18.778338719091] , [ 1256961600000 , 16.756026065421] , [ 1259557200000 , 19.385804443146] , [ 1262235600000 , 22.950590240168] , [ 1264914000000 , 23.61159018141] , [ 1267333200000 , 25.708586989581] , [ 1270008000000 , 26.883915999885] , [ 1272600000000 , 25.893486687065] , [ 1275278400000 , 24.678914263176] , [ 1277870400000 , 25.937275793024] , [ 1280548800000 , 29.461381693838] , [ 1283227200000 , 27.357322961861] , [ 1285819200000 , 29.057235285673] , [ 1288497600000 , 28.549434189386] , [ 1291093200000 , 28.506352379724] , [ 1293771600000 , 29.449241421598] , [ 1296450000000 , 25.796838168807] , [ 1298869200000 , 28.740145449188] , [ 1301544000000 , 22.091744141872] , [ 1304136000000 , 25.07966254541] , [ 1306814400000 , 23.674906973064] , [ 1309406400000 , 23.418002742929] , [ 1312084800000 , 23.24364413887] , [ 1314763200000 , 31.591854066817] , [ 1317355200000 , 31.497112374114] , [ 1320033600000 , 26.67238082043] , [ 1322629200000 , 27.297080015495] , [ 1325307600000 , 20.174315530051] , [ 1327986000000 , 19.631084213898] , [ 1330491600000 , 20.366462219461] , [ 1333166400000 , 19.284784434185] , [ 1335758400000 , 19.157810257624]]
|
||||
},
|
||||
|
||||
{
|
||||
"key" : "Consumer Staples" ,
|
||||
"values" : [ [ 1025409600000 , 7.9356392949025] , [ 1028088000000 , 7.4514668527298] , [ 1030766400000 , 7.9085410566608] , [ 1033358400000 , 5.8996782364764] , [ 1036040400000 , 6.0591869346923] , [ 1038632400000 , 5.9667815800451] , [ 1041310800000 , 8.65528925664] , [ 1043989200000 , 8.7690763386254] , [ 1046408400000 , 8.6386160387453] , [ 1049086800000 , 5.9895557449743] , [ 1051675200000 , 6.3840324338159] , [ 1054353600000 , 6.5196511461441] , [ 1056945600000 , 7.0738618553114] , [ 1059624000000 , 6.5745957367133] , [ 1062302400000 , 6.4658359184444] , [ 1064894400000 , 2.7622758754954] , [ 1067576400000 , 2.9794782986241] , [ 1070168400000 , 2.8735432712019] , [ 1072846800000 , 1.6344817513645] , [ 1075525200000 , 1.5869248754883] , [ 1078030800000 , 1.7172279157246] , [ 1080709200000 , 1.9649927409867] , [ 1083297600000 , 2.0261695079196] , [ 1085976000000 , 2.0541261923929] , [ 1088568000000 , 3.9466318927569] , [ 1091246400000 , 3.7826770946089] , [ 1093924800000 , 3.9543021004028] , [ 1096516800000 , 3.8309891064711] , [ 1099195200000 , 3.6340958946166] , [ 1101790800000 , 3.5289755762525] , [ 1104469200000 , 5.702378559857] , [ 1107147600000 , 5.6539569019223] , [ 1109566800000 , 5.5449506370392] , [ 1112245200000 , 4.7579993280677] , [ 1114833600000 , 4.4816139372906] , [ 1117512000000 , 4.5965558568606] , [ 1120104000000 , 4.3747066116976] , [ 1122782400000 , 4.4588822917087] , [ 1125460800000 , 4.4460351848286] , [ 1128052800000 , 3.7989113035136] , [ 1130734800000 , 3.7743883140088] , [ 1133326800000 , 3.7727852823828] , [ 1136005200000 , 7.2968111448895] , [ 1138683600000 , 7.2800122043237] , [ 1141102800000 , 7.1187787503354] , [ 1143781200000 , 8.351887016482] , [ 1146369600000 , 8.4156698763993] , [ 1149048000000 , 8.1673298604231] , [ 1151640000000 , 5.5132447126042] , [ 1154318400000 , 6.1152537710599] , [ 1156996800000 , 6.076765091942] , [ 1159588800000 , 4.6304473798646] , [ 1162270800000 , 4.6301068469402] , [ 1164862800000 , 4.3466656309389] , [ 1167541200000 , 6.830104897003] , [ 1170219600000 , 7.241633040029] , [ 1172638800000 , 7.1432372054153] , [ 1175313600000 , 10.608942063374] , [ 1177905600000 , 10.914964549494] , [ 1180584000000 , 10.933223880565] , [ 1183176000000 , 8.3457524851265] , [ 1185854400000 , 8.1078413081882] , [ 1188532800000 , 8.2697185922474] , [ 1191124800000 , 8.4742436475968] , [ 1193803200000 , 8.4994601179319] , [ 1196398800000 , 8.7387319683243] , [ 1199077200000 , 6.8829183612895] , [ 1201755600000 , 6.984133637885] , [ 1204261200000 , 7.0860136043287] , [ 1206936000000 , 4.3961787956053] , [ 1209528000000 , 3.8699674365231] , [ 1212206400000 , 3.6928925238305] , [ 1214798400000 , 6.7571718894253] , [ 1217476800000 , 6.4367313362344] , [ 1220155200000 , 6.4048441521454] , [ 1222747200000 , 5.4643833239669] , [ 1225425600000 , 5.3150786833374] , [ 1228021200000 , 5.3011272612576] , [ 1230699600000 , 4.1203601430809] , [ 1233378000000 , 4.0881783200525] , [ 1235797200000 , 4.1928665957189] , [ 1238472000000 , 7.0249415663205] , [ 1241064000000 , 7.006530880769] , [ 1243742400000 , 6.994835633224] , [ 1246334400000 , 6.1220222336254] , [ 1249012800000 , 6.1177436137653] , [ 1251691200000 , 6.1413396231981] , [ 1254283200000 , 4.8046006145874] , [ 1256961600000 , 4.6647600660544] , [ 1259557200000 , 4.544865006255] , [ 1262235600000 , 6.0488249316539] , [ 1264914000000 , 6.3188669540206] , [ 1267333200000 , 6.5873958262306] , [ 1270008000000 , 6.2281189839578] , [ 1272600000000 , 5.8948915746059] , [ 1275278400000 , 5.5967320482214] , [ 1277870400000 , 0.99784432084837] , [ 1280548800000 , 1.0950794175359] , [ 1283227200000 , 0.94479734407491] , [ 1285819200000 , 1.222093988688] , [ 1288497600000 , 1.335093106856] , [ 1291093200000 , 1.3302565104985] , [ 1293771600000 , 1.340824670897] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 0] , [ 1317355200000 , 4.4583692315] , [ 1320033600000 , 3.6493043348059] , [ 1322629200000 , 3.8610064091761] , [ 1325307600000 , 5.5144800685202] , [ 1327986000000 , 5.1750695220791] , [ 1330491600000 , 5.6710066952691] , [ 1333166400000 , 5.5611890039181] , [ 1335758400000 , 5.5979368839939]]
|
||||
},
|
||||
|
||||
{
|
||||
"key" : "Energy" ,
|
||||
"values" : [ [ 1025409600000 , 1.4646843173806] , [ 1028088000000 , 1.2255947178893] , [ 1030766400000 , 1.4158447149914] , [ 1033358400000 , 1.0079176473732] , [ 1036040400000 , 1.30237558984] , [ 1038632400000 , 1.688609181773] , [ 1041310800000 , 2.084300956831] , [ 1043989200000 , 2.1374370551873] , [ 1046408400000 , 2.3282783517776] , [ 1049086800000 , 2.1973076058812] , [ 1051675200000 , 2.157261693164] , [ 1054353600000 , 2.2517863434814] , [ 1056945600000 , 1.2228256346504] , [ 1059624000000 , 1.1440109589209] , [ 1062302400000 , 1.2064470359759] , [ 1064894400000 , 2.500656510238] , [ 1067576400000 , 2.5387208947759] , [ 1070168400000 , 2.4603613044678] , [ 1072846800000 , 3.0150440824201] , [ 1075525200000 , 3.0543883162347] , [ 1078030800000 , 3.2706600781893] , [ 1080709200000 , 3.6312746608013] , [ 1083297600000 , 3.7328532659082] , [ 1085976000000 , 3.766358446065] , [ 1088568000000 , 2.6344481471685] , [ 1091246400000 , 2.763489510345] , [ 1093924800000 , 2.8565862394721] , [ 1096516800000 , 3.8555975117279] , [ 1099195200000 , 3.7062421881707] , [ 1101790800000 , 3.8020128704686] , [ 1104469200000 , 4.309131851142] , [ 1107147600000 , 4.3553997741931] , [ 1109566800000 , 4.8208488504576] , [ 1112245200000 , 4.1337237657138] , [ 1114833600000 , 3.8976502361354] , [ 1117512000000 , 4.0038454785722] , [ 1120104000000 , 3.6457285169699] , [ 1122782400000 , 3.7645930389974] , [ 1125460800000 , 3.9638322190019] , [ 1128052800000 , 4.2470697064323] , [ 1130734800000 , 3.9259866763827] , [ 1133326800000 , 3.8872767584613] , [ 1136005200000 , 1.4275237035221] , [ 1138683600000 , 1.544303464167] , [ 1141102800000 , 1.4387289432421] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 1.328626801128] , [ 1154318400000 , 1.2874050802627] , [ 1156996800000 , 1.0872743105593] , [ 1159588800000 , 0.96042562635813] , [ 1162270800000 , 0.93139372870616] , [ 1164862800000 , 0.94432167305385] , [ 1167541200000 , 1.277750166208] , [ 1170219600000 , 1.2204893886811] , [ 1172638800000 , 1.207489123122] , [ 1175313600000 , 1.2490651414113] , [ 1177905600000 , 1.2593129913052] , [ 1180584000000 , 1.373329808388] , [ 1183176000000 , 0] , [ 1185854400000 , 0] , [ 1188532800000 , 0] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , 0] , [ 1209528000000 , 0] , [ 1212206400000 , 0] , [ 1214798400000 , 0] , [ 1217476800000 , 0] , [ 1220155200000 , 0] , [ 1222747200000 , 1.4516108933695] , [ 1225425600000 , 1.1856025268225] , [ 1228021200000 , 1.3430470355439] , [ 1230699600000 , 2.2752595354509] , [ 1233378000000 , 2.4031560010523] , [ 1235797200000 , 2.0822430731926] , [ 1238472000000 , 1.5640902826938] , [ 1241064000000 , 1.5812873972356] , [ 1243742400000 , 1.9462448548894] , [ 1246334400000 , 2.9464870223957] , [ 1249012800000 , 3.0744699383222] , [ 1251691200000 , 2.9422304628446] , [ 1254283200000 , 2.7503075599999] , [ 1256961600000 , 2.6506701800427] , [ 1259557200000 , 2.8005425319977] , [ 1262235600000 , 2.6816184971185] , [ 1264914000000 , 2.681206271327] , [ 1267333200000 , 2.8195488011259] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 1.0687057346382] , [ 1280548800000 , 1.2539400544134] , [ 1283227200000 , 1.1862969445955] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 1.941972859484] , [ 1298869200000 , 2.1142247697552] , [ 1301544000000 , 2.3788590206824] , [ 1304136000000 , 2.5337302877545] , [ 1306814400000 , 2.3163370395199] , [ 1309406400000 , 2.0645451843195] , [ 1312084800000 , 2.1004446672411] , [ 1314763200000 , 3.6301875804303] , [ 1317355200000 , 2.454204664652] , [ 1320033600000 , 2.196082370894] , [ 1322629200000 , 2.3358418255202] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0]]
|
||||
},
|
||||
|
||||
{
|
||||
"key" : "Financials" ,
|
||||
"values" : [ [ 1025409600000 , 7.9149900245423] , [ 1028088000000 , 7.0899888751059] , [ 1030766400000 , 7.5996132380614] , [ 1033358400000 , 8.2741174301034] , [ 1036040400000 , 9.3564460833513] , [ 1038632400000 , 9.7066786059904] , [ 1041310800000 , 10.213363052343] , [ 1043989200000 , 10.285809585273] , [ 1046408400000 , 10.222053149228] , [ 1049086800000 , 8.6188592137975] , [ 1051675200000 , 9.3335447543566] , [ 1054353600000 , 8.9312402186628] , [ 1056945600000 , 8.1895089343658] , [ 1059624000000 , 8.260622135079] , [ 1062302400000 , 7.7700786851364] , [ 1064894400000 , 7.9907428771318] , [ 1067576400000 , 8.7769091865606] , [ 1070168400000 , 8.4855077060661] , [ 1072846800000 , 9.6277203033655] , [ 1075525200000 , 9.9685913452624] , [ 1078030800000 , 10.615085181759] , [ 1080709200000 , 9.2902488079646] , [ 1083297600000 , 8.8610439830061] , [ 1085976000000 , 9.1075344931229] , [ 1088568000000 , 9.9156737639203] , [ 1091246400000 , 9.7826003238782] , [ 1093924800000 , 10.55403610555] , [ 1096516800000 , 10.926900264097] , [ 1099195200000 , 10.903144818736] , [ 1101790800000 , 10.862890389067] , [ 1104469200000 , 10.64604998964] , [ 1107147600000 , 10.042790814087] , [ 1109566800000 , 9.7173391591038] , [ 1112245200000 , 9.6122415755443] , [ 1114833600000 , 9.4337921146562] , [ 1117512000000 , 9.814827171183] , [ 1120104000000 , 12.059260396788] , [ 1122782400000 , 12.139649903873] , [ 1125460800000 , 12.281290663822] , [ 1128052800000 , 8.8037085409056] , [ 1130734800000 , 8.6300618239176] , [ 1133326800000 , 9.1225708491432] , [ 1136005200000 , 12.988124170836] , [ 1138683600000 , 13.356778764353] , [ 1141102800000 , 13.611196863271] , [ 1143781200000 , 6.8959030061189] , [ 1146369600000 , 6.9939633271353] , [ 1149048000000 , 6.7241510257676] , [ 1151640000000 , 5.5611293669517] , [ 1154318400000 , 5.6086488714041] , [ 1156996800000 , 5.4962849907033] , [ 1159588800000 , 6.9193153169278] , [ 1162270800000 , 7.0016334389778] , [ 1164862800000 , 6.7865422443273] , [ 1167541200000 , 9.0006454225383] , [ 1170219600000 , 9.2233916171431] , [ 1172638800000 , 8.8929316009479] , [ 1175313600000 , 10.345937520404] , [ 1177905600000 , 10.075914677026] , [ 1180584000000 , 10.089006188111] , [ 1183176000000 , 10.598330295008] , [ 1185854400000 , 9.9689546533009] , [ 1188532800000 , 9.7740580198146] , [ 1191124800000 , 10.558483060626] , [ 1193803200000 , 9.9314651823603] , [ 1196398800000 , 9.3997715873769] , [ 1199077200000 , 8.4086493387262] , [ 1201755600000 , 8.9698309085926] , [ 1204261200000 , 8.2778357995396] , [ 1206936000000 , 8.8585045600123] , [ 1209528000000 , 8.7013756413322] , [ 1212206400000 , 7.7933605469443] , [ 1214798400000 , 7.0236183483064] , [ 1217476800000 , 6.9873088186829] , [ 1220155200000 , 6.8031713070097] , [ 1222747200000 , 6.6869531315723] , [ 1225425600000 , 6.138256993963] , [ 1228021200000 , 5.6434994016354] , [ 1230699600000 , 5.495220262512] , [ 1233378000000 , 4.6885326869846] , [ 1235797200000 , 4.4524349883438] , [ 1238472000000 , 5.6766520778185] , [ 1241064000000 , 5.7675774480752] , [ 1243742400000 , 5.7882863168337] , [ 1246334400000 , 7.2666010034924] , [ 1249012800000 , 7.5191821322261] , [ 1251691200000 , 7.849651451445] , [ 1254283200000 , 10.383992037985] , [ 1256961600000 , 9.0653691861818] , [ 1259557200000 , 9.6705248324159] , [ 1262235600000 , 10.856380561349] , [ 1264914000000 , 11.27452370892] , [ 1267333200000 , 11.754156529088] , [ 1270008000000 , 8.2870811422455] , [ 1272600000000 , 8.0210264360699] , [ 1275278400000 , 7.5375074474865] , [ 1277870400000 , 8.3419527338039] , [ 1280548800000 , 9.4197471818443] , [ 1283227200000 , 8.7321733185797] , [ 1285819200000 , 9.6627062648126] , [ 1288497600000 , 10.187962234548] , [ 1291093200000 , 9.8144201733476] , [ 1293771600000 , 10.275723361712] , [ 1296450000000 , 16.796066079353] , [ 1298869200000 , 17.543254984075] , [ 1301544000000 , 16.673660675083] , [ 1304136000000 , 17.963944353609] , [ 1306814400000 , 16.63774086721] , [ 1309406400000 , 15.84857094609] , [ 1312084800000 , 14.767303362181] , [ 1314763200000 , 24.778452182433] , [ 1317355200000 , 18.370353229999] , [ 1320033600000 , 15.253137429099] , [ 1322629200000 , 14.989600840649] , [ 1325307600000 , 16.052539160125] , [ 1327986000000 , 16.424390322793] , [ 1330491600000 , 17.884020741104] , [ 1333166400000 , 18.372698836036] , [ 1335758400000 , 18.315881576096]]
|
||||
},
|
||||
|
||||
{
|
||||
"key" : "Health Care" ,
|
||||
"values" : [ [ 1025409600000 , 13.153938631352] , [ 1028088000000 , 12.456410521864] , [ 1030766400000 , 12.537048663919] , [ 1033358400000 , 13.947386398309] , [ 1036040400000 , 14.421680682568] , [ 1038632400000 , 14.143238262286] , [ 1041310800000 , 12.229635347478] , [ 1043989200000 , 12.508479916948] , [ 1046408400000 , 12.155368409526] , [ 1049086800000 , 13.335455563994] , [ 1051675200000 , 12.888210138167] , [ 1054353600000 , 12.842092790511] , [ 1056945600000 , 12.513816474199] , [ 1059624000000 , 12.21453674494] , [ 1062302400000 , 11.750848343935] , [ 1064894400000 , 10.526579636787] , [ 1067576400000 , 10.873596086087] , [ 1070168400000 , 11.019967131519] , [ 1072846800000 , 11.235789380602] , [ 1075525200000 , 11.859910850657] , [ 1078030800000 , 12.531031616536] , [ 1080709200000 , 11.360451067019] , [ 1083297600000 , 11.456244780202] , [ 1085976000000 , 11.436991407309] , [ 1088568000000 , 11.638595744327] , [ 1091246400000 , 11.190418301469] , [ 1093924800000 , 11.835608007589] , [ 1096516800000 , 11.540980244475] , [ 1099195200000 , 10.958762325687] , [ 1101790800000 , 10.885791159509] , [ 1104469200000 , 13.605810720109] , [ 1107147600000 , 13.128978067437] , [ 1109566800000 , 13.119012086882] , [ 1112245200000 , 13.003706129783] , [ 1114833600000 , 13.326996807689] , [ 1117512000000 , 13.547947991743] , [ 1120104000000 , 12.807959646616] , [ 1122782400000 , 12.931763821068] , [ 1125460800000 , 12.795359993008] , [ 1128052800000 , 9.6998935538319] , [ 1130734800000 , 9.3473740089131] , [ 1133326800000 , 9.36902067716] , [ 1136005200000 , 14.258619539875] , [ 1138683600000 , 14.21241095603] , [ 1141102800000 , 13.973193618249] , [ 1143781200000 , 15.218233920664] , [ 1146369600000 , 14.382109727451] , [ 1149048000000 , 13.894310878491] , [ 1151640000000 , 15.593086090031] , [ 1154318400000 , 16.244839695189] , [ 1156996800000 , 16.017088850647] , [ 1159588800000 , 14.183951830057] , [ 1162270800000 , 14.148523245696] , [ 1164862800000 , 13.424326059971] , [ 1167541200000 , 12.974450435754] , [ 1170219600000 , 13.232470418021] , [ 1172638800000 , 13.318762655574] , [ 1175313600000 , 15.961407746104] , [ 1177905600000 , 16.287714639805] , [ 1180584000000 , 16.24659058389] , [ 1183176000000 , 17.564505594808] , [ 1185854400000 , 17.872725373164] , [ 1188532800000 , 18.018998508756] , [ 1191124800000 , 15.584518016602] , [ 1193803200000 , 15.480850647182] , [ 1196398800000 , 15.699120036985] , [ 1199077200000 , 19.184281817226] , [ 1201755600000 , 19.691226605205] , [ 1204261200000 , 18.982314051293] , [ 1206936000000 , 18.707820309008] , [ 1209528000000 , 17.459630929759] , [ 1212206400000 , 16.500616076782] , [ 1214798400000 , 18.086324003978] , [ 1217476800000 , 18.929464156259] , [ 1220155200000 , 18.233728682084] , [ 1222747200000 , 16.315776297325] , [ 1225425600000 , 14.632892190251] , [ 1228021200000 , 14.667835024479] , [ 1230699600000 , 13.946993947309] , [ 1233378000000 , 14.394304684398] , [ 1235797200000 , 13.724462792967] , [ 1238472000000 , 10.930879035807] , [ 1241064000000 , 9.8339915513708] , [ 1243742400000 , 10.053858541872] , [ 1246334400000 , 11.786998438286] , [ 1249012800000 , 11.780994901769] , [ 1251691200000 , 11.305889670277] , [ 1254283200000 , 10.918452290083] , [ 1256961600000 , 9.6811395055706] , [ 1259557200000 , 10.971529744038] , [ 1262235600000 , 13.330210480209] , [ 1264914000000 , 14.592637568961] , [ 1267333200000 , 14.605329141157] , [ 1270008000000 , 13.936853794037] , [ 1272600000000 , 12.189480759072] , [ 1275278400000 , 11.676151385046] , [ 1277870400000 , 13.058852800018] , [ 1280548800000 , 13.62891543203] , [ 1283227200000 , 13.811107569918] , [ 1285819200000 , 13.786494560786] , [ 1288497600000 , 14.045162857531] , [ 1291093200000 , 13.697412447286] , [ 1293771600000 , 13.677681376221] , [ 1296450000000 , 19.96151186453] , [ 1298869200000 , 21.049198298156] , [ 1301544000000 , 22.687631094009] , [ 1304136000000 , 25.469010617433] , [ 1306814400000 , 24.88379943712] , [ 1309406400000 , 24.203843814249] , [ 1312084800000 , 22.138760964036] , [ 1314763200000 , 16.034636966228] , [ 1317355200000 , 15.394958944555] , [ 1320033600000 , 12.62564246197] , [ 1322629200000 , 12.973735699739] , [ 1325307600000 , 15.78601833615] , [ 1327986000000 , 15.227368020134] , [ 1330491600000 , 15.899752650733] , [ 1333166400000 , 15.661317319168] , [ 1335758400000 , 15.359891177281]]
|
||||
} ,
|
||||
|
||||
{
|
||||
"key" : "Industrials" ,
|
||||
"values" : [ [ 1025409600000 , 3.9133244953315] , [ 1028088000000 , 3.518489051173] , [ 1030766400000 , 3.7355675327774] , [ 1033358400000 , 2.6282873198607] , [ 1036040400000 , 2.8090400696474] , [ 1038632400000 , 3.0820718825965] , [ 1041310800000 , 4.2312761636941] , [ 1043989200000 , 4.2510922012943] , [ 1046408400000 , 4.07193350752] , [ 1049086800000 , 4.4040931689245] , [ 1051675200000 , 4.9759379689913] , [ 1054353600000 , 5.0856875680608] , [ 1056945600000 , 4.2233639497997] , [ 1059624000000 , 4.1845715132052] , [ 1062302400000 , 4.3055194312575] , [ 1064894400000 , 3.349297776236] , [ 1067576400000 , 3.7023871871544] , [ 1070168400000 , 3.7170568683668] , [ 1072846800000 , 3.9155694541972] , [ 1075525200000 , 3.9774182471036] , [ 1078030800000 , 4.1580444091887] , [ 1080709200000 , 4.5495573666535] , [ 1083297600000 , 4.5050302469253] , [ 1085976000000 , 4.7094278163836] , [ 1088568000000 , 6.1937658979517] , [ 1091246400000 , 6.0412923676877] , [ 1093924800000 , 6.1747253413885] , [ 1096516800000 , 6.0800072674329] , [ 1099195200000 , 5.7092602419448] , [ 1101790800000 , 6.092841893499] , [ 1104469200000 , 5.7466125264224] , [ 1107147600000 , 5.5824356250394] , [ 1109566800000 , 5.5727222001361] , [ 1112245200000 , 6.2116832774493] , [ 1114833600000 , 5.8847941423832] , [ 1117512000000 , 5.8120124594798] , [ 1120104000000 , 5.9445727342442] , [ 1122782400000 , 6.1631035517269] , [ 1125460800000 , 5.8577541392534] , [ 1128052800000 , 4.6507957123369] , [ 1130734800000 , 4.4741764311828] , [ 1133326800000 , 4.7062417975264] , [ 1136005200000 , 7.2759032827647] , [ 1138683600000 , 7.1590087090399] , [ 1141102800000 , 7.1297210970108] , [ 1143781200000 , 5.5774588290586] , [ 1146369600000 , 5.4977254491156] , [ 1149048000000 , 5.5138153113634] , [ 1151640000000 , 4.3198084032122] , [ 1154318400000 , 3.9179295839125] , [ 1156996800000 , 3.8110093051479] , [ 1159588800000 , 5.5629020916939] , [ 1162270800000 , 5.7241673711336] , [ 1164862800000 , 5.4715049695004] , [ 1167541200000 , 4.9193763571618] , [ 1170219600000 , 5.1360539472469] , [ 1172638800000 , 5.1327258759766] , [ 1175313600000 , 5.1888943925083] , [ 1177905600000 , 5.5191481293346] , [ 1180584000000 , 5.6093625614921] , [ 1183176000000 , 4.2706312987397] , [ 1185854400000 , 4.4453235132117] , [ 1188532800000 , 4.6228003109761] , [ 1191124800000 , 5.0645764756954] , [ 1193803200000 , 5.0723447230959] , [ 1196398800000 , 5.1457765818846] , [ 1199077200000 , 5.4067851597282] , [ 1201755600000 , 5.472241916816] , [ 1204261200000 , 5.3742740389688] , [ 1206936000000 , 6.251751933664] , [ 1209528000000 , 6.1406852153472] , [ 1212206400000 , 5.8164385627465] , [ 1214798400000 , 5.4255846656171] , [ 1217476800000 , 5.3738499417204] , [ 1220155200000 , 5.1815627753979] , [ 1222747200000 , 5.0305983235349] , [ 1225425600000 , 4.6823058607165] , [ 1228021200000 , 4.5941481589093] , [ 1230699600000 , 5.4669598474574] , [ 1233378000000 , 5.1249037357] , [ 1235797200000 , 4.3504421250742] , [ 1238472000000 , 4.6260881026002] , [ 1241064000000 , 5.0140402458945] , [ 1243742400000 , 4.7458462454773] , [ 1246334400000 , 6.0437019654564] , [ 1249012800000 , 6.4595216249754] , [ 1251691200000 , 6.6420468254156] , [ 1254283200000 , 5.8927271960913] , [ 1256961600000 , 5.4712108838002] , [ 1259557200000 , 6.1220254207747] , [ 1262235600000 , 5.5385935169255] , [ 1264914000000 , 5.7383377612639] , [ 1267333200000 , 6.1715976730415] , [ 1270008000000 , 4.0102262681174] , [ 1272600000000 , 3.769389679692] , [ 1275278400000 , 3.5301571031152] , [ 1277870400000 , 2.7660252652526] , [ 1280548800000 , 3.1409983385775] , [ 1283227200000 , 3.0528024863055] , [ 1285819200000 , 4.3126123157971] , [ 1288497600000 , 4.594654041683] , [ 1291093200000 , 4.5424126126793] , [ 1293771600000 , 4.7790043987302] , [ 1296450000000 , 7.4969154058289] , [ 1298869200000 , 7.9424751557821] , [ 1301544000000 , 7.1560736250547] , [ 1304136000000 , 7.9478117337855] , [ 1306814400000 , 7.4109214848895] , [ 1309406400000 , 7.5966457641101] , [ 1312084800000 , 7.165754444071] , [ 1314763200000 , 5.4816702524302] , [ 1317355200000 , 4.9893656089584] , [ 1320033600000 , 4.498385105327] , [ 1322629200000 , 4.6776090358151] , [ 1325307600000 , 8.1350814368063] , [ 1327986000000 , 8.0732769990652] , [ 1330491600000 , 8.5602340387277] , [ 1333166400000 , 8.5387619987197] , [ 1335758400000 , 8.5984656985168]]
|
||||
} ,
|
||||
|
||||
{
|
||||
"key" : "Information Technology" ,
|
||||
"values" : [ [ 1025409600000 , 9.3433263069351] , [ 1028088000000 , 8.4583069475546] , [ 1030766400000 , 8.0342398154196] , [ 1033358400000 , 8.1538966876572] , [ 1036040400000 , 10.743604786849] , [ 1038632400000 , 12.349366155851] , [ 1041310800000 , 10.742682503899] , [ 1043989200000 , 11.360983869935] , [ 1046408400000 , 11.441336039535] , [ 1049086800000 , 10.897508791837] , [ 1051675200000 , 11.469101547709] , [ 1054353600000 , 12.086311476742] , [ 1056945600000 , 8.0697180773504] , [ 1059624000000 , 8.2004392233445] , [ 1062302400000 , 8.4566434900643] , [ 1064894400000 , 7.9565760979059] , [ 1067576400000 , 9.3764619255827] , [ 1070168400000 , 9.0747664160538] , [ 1072846800000 , 10.508939004673] , [ 1075525200000 , 10.69936754483] , [ 1078030800000 , 10.681562399145] , [ 1080709200000 , 13.184786109406] , [ 1083297600000 , 12.668213052351] , [ 1085976000000 , 13.430509403986] , [ 1088568000000 , 12.393086349213] , [ 1091246400000 , 11.942374044842] , [ 1093924800000 , 12.062227685742] , [ 1096516800000 , 11.969974363623] , [ 1099195200000 , 12.14374574055] , [ 1101790800000 , 12.69422821995] , [ 1104469200000 , 9.1235211044692] , [ 1107147600000 , 8.758211757584] , [ 1109566800000 , 8.8072309258443] , [ 1112245200000 , 11.687595946835] , [ 1114833600000 , 11.079723082664] , [ 1117512000000 , 12.049712896076] , [ 1120104000000 , 10.725319428684] , [ 1122782400000 , 10.844849996286] , [ 1125460800000 , 10.833535488461] , [ 1128052800000 , 17.180932407865] , [ 1130734800000 , 15.894764896516] , [ 1133326800000 , 16.412751299498] , [ 1136005200000 , 12.573569093402] , [ 1138683600000 , 13.242301508051] , [ 1141102800000 , 12.863536342041] , [ 1143781200000 , 21.034044171629] , [ 1146369600000 , 21.419084618802] , [ 1149048000000 , 21.142678863692] , [ 1151640000000 , 26.56848967753] , [ 1154318400000 , 24.839144939906] , [ 1156996800000 , 25.456187462166] , [ 1159588800000 , 26.350164502825] , [ 1162270800000 , 26.478333205189] , [ 1164862800000 , 26.425979547846] , [ 1167541200000 , 28.191461582256] , [ 1170219600000 , 28.930307448808] , [ 1172638800000 , 29.521413891117] , [ 1175313600000 , 28.188285966466] , [ 1177905600000 , 27.704619625831] , [ 1180584000000 , 27.49086242483] , [ 1183176000000 , 28.770679721286] , [ 1185854400000 , 29.06048067145] , [ 1188532800000 , 28.240998844973] , [ 1191124800000 , 33.004893194128] , [ 1193803200000 , 34.075180359928] , [ 1196398800000 , 32.548560664834] , [ 1199077200000 , 30.629727432729] , [ 1201755600000 , 28.642858788159] , [ 1204261200000 , 27.973575227843] , [ 1206936000000 , 27.393351882726] , [ 1209528000000 , 28.476095288522] , [ 1212206400000 , 29.29667866426] , [ 1214798400000 , 29.222333802896] , [ 1217476800000 , 28.092966093842] , [ 1220155200000 , 28.107159262922] , [ 1222747200000 , 25.482974832099] , [ 1225425600000 , 21.208115993834] , [ 1228021200000 , 20.295043095268] , [ 1230699600000 , 15.925754618402] , [ 1233378000000 , 17.162864628346] , [ 1235797200000 , 17.084345773174] , [ 1238472000000 , 22.24600710228] , [ 1241064000000 , 24.530543998508] , [ 1243742400000 , 25.084184918241] , [ 1246334400000 , 16.606166527359] , [ 1249012800000 , 17.239620011628] , [ 1251691200000 , 17.336739127379] , [ 1254283200000 , 25.478492475754] , [ 1256961600000 , 23.017152085244] , [ 1259557200000 , 25.617745423684] , [ 1262235600000 , 24.061133998641] , [ 1264914000000 , 23.223933318646] , [ 1267333200000 , 24.425887263936] , [ 1270008000000 , 35.501471156693] , [ 1272600000000 , 33.775013878675] , [ 1275278400000 , 30.417993630285] , [ 1277870400000 , 30.023598978467] , [ 1280548800000 , 33.327519522436] , [ 1283227200000 , 31.963388450372] , [ 1285819200000 , 30.49896723209] , [ 1288497600000 , 32.403696817913] , [ 1291093200000 , 31.47736071922] , [ 1293771600000 , 31.53259666241] , [ 1296450000000 , 41.760282761548] , [ 1298869200000 , 45.605771243237] , [ 1301544000000 , 39.986557966215] , [ 1304136000000 , 43.84633051005] , [ 1306814400000 , 39.857316881858] , [ 1309406400000 , 37.675127768207] , [ 1312084800000 , 35.775077970313] , [ 1314763200000 , 48.631009702578] , [ 1317355200000 , 42.830831754505] , [ 1320033600000 , 35.611502589362] , [ 1322629200000 , 35.320136981738] , [ 1325307600000 , 31.564136901516] , [ 1327986000000 , 32.074407502433] , [ 1330491600000 , 35.053013769977] , [ 1333166400000 , 33.873085184128] , [ 1335758400000 , 32.321039427046]]
|
||||
} ,
|
||||
|
||||
{
|
||||
"key" : "Materials" ,
|
||||
"values" : [ [ 1025409600000 , 5.1162447683392] , [ 1028088000000 , 4.2022848306513] , [ 1030766400000 , 4.3543715758736] , [ 1033358400000 , 5.4641223667245] , [ 1036040400000 , 6.0041275884577] , [ 1038632400000 , 6.6050520064486] , [ 1041310800000 , 5.0154059912793] , [ 1043989200000 , 5.1835708554647] , [ 1046408400000 , 5.1142682006164] , [ 1049086800000 , 5.0271381717695] , [ 1051675200000 , 5.3437782653456] , [ 1054353600000 , 5.2105844515767] , [ 1056945600000 , 6.552565997799] , [ 1059624000000 , 6.9873363581831] , [ 1062302400000 , 7.010986789097] , [ 1064894400000 , 4.4254242025515] , [ 1067576400000 , 4.9613848042174] , [ 1070168400000 , 4.8854920484764] , [ 1072846800000 , 4.0441111794228] , [ 1075525200000 , 4.0219596813179] , [ 1078030800000 , 4.3065749225355] , [ 1080709200000 , 3.9148434915404] , [ 1083297600000 , 3.8659430654512] , [ 1085976000000 , 3.9572824600686] , [ 1088568000000 , 4.7372190641522] , [ 1091246400000 , 4.6871476374455] , [ 1093924800000 , 5.0398702564196] , [ 1096516800000 , 5.5221787544964] , [ 1099195200000 , 5.424646299798] , [ 1101790800000 , 5.9240223067349] , [ 1104469200000 , 5.9936860983601] , [ 1107147600000 , 5.8499523215019] , [ 1109566800000 , 6.4149040329325] , [ 1112245200000 , 6.4547895561969] , [ 1114833600000 , 5.9385382611161] , [ 1117512000000 , 6.0486751030592] , [ 1120104000000 , 5.23108613838] , [ 1122782400000 , 5.5857797121029] , [ 1125460800000 , 5.3454665096987] , [ 1128052800000 , 5.0439154120119] , [ 1130734800000 , 5.054634702913] , [ 1133326800000 , 5.3819451380848] , [ 1136005200000 , 5.2638869269803] , [ 1138683600000 , 5.5806167415681] , [ 1141102800000 , 5.4539047069985] , [ 1143781200000 , 7.6728842432362] , [ 1146369600000 , 7.719946716654] , [ 1149048000000 , 8.0144619912942] , [ 1151640000000 , 7.942223133434] , [ 1154318400000 , 8.3998279827444] , [ 1156996800000 , 8.532324572605] , [ 1159588800000 , 4.7324285199763] , [ 1162270800000 , 4.7402397487697] , [ 1164862800000 , 4.9042069355168] , [ 1167541200000 , 5.9583963430882] , [ 1170219600000 , 6.3693899239171] , [ 1172638800000 , 6.261153903813] , [ 1175313600000 , 5.3443942184584] , [ 1177905600000 , 5.4932111235361] , [ 1180584000000 , 5.5747393101109] , [ 1183176000000 , 5.3833633060013] , [ 1185854400000 , 5.5125898831832] , [ 1188532800000 , 5.8116112661327] , [ 1191124800000 , 4.3962296939996] , [ 1193803200000 , 4.6967663605521] , [ 1196398800000 , 4.7963004350914] , [ 1199077200000 , 4.1817985183351] , [ 1201755600000 , 4.3797643870182] , [ 1204261200000 , 4.6966642197965] , [ 1206936000000 , 4.3609995132565] , [ 1209528000000 , 4.4736290996496] , [ 1212206400000 , 4.3749762738128] , [ 1214798400000 , 3.3274661194507] , [ 1217476800000 , 3.0316184691337] , [ 1220155200000 , 2.5718140204728] , [ 1222747200000 , 2.7034994044603] , [ 1225425600000 , 2.2033786591364] , [ 1228021200000 , 1.9850621240805] , [ 1230699600000 , 0] , [ 1233378000000 , 0] , [ 1235797200000 , 0] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , 0] , [ 1249012800000 , 0] , [ 1251691200000 , 0] , [ 1254283200000 , 0.44495950017788] , [ 1256961600000 , 0.33945469262483] , [ 1259557200000 , 0.38348269455195] , [ 1262235600000 , 0] , [ 1264914000000 , 0] , [ 1267333200000 , 0] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 0.52216435716176] , [ 1298869200000 , 0.59275786698454] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 0] , [ 1317355200000 , 0] , [ 1320033600000 , 0] , [ 1322629200000 , 0] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0]]
|
||||
} ,
|
||||
|
||||
{
|
||||
"key" : "Telecommunication Services" ,
|
||||
"values" : [ [ 1025409600000 , 1.3503144674343] , [ 1028088000000 , 1.2232741112434] , [ 1030766400000 , 1.3930470790784] , [ 1033358400000 , 1.2631275030593] , [ 1036040400000 , 1.5842699103708] , [ 1038632400000 , 1.9546996043116] , [ 1041310800000 , 0.8504048300986] , [ 1043989200000 , 0.85340686311353] , [ 1046408400000 , 0.843061357391] , [ 1049086800000 , 2.119846992476] , [ 1051675200000 , 2.5285382124858] , [ 1054353600000 , 2.5056570712835] , [ 1056945600000 , 2.5212789901005] , [ 1059624000000 , 2.6192011642534] , [ 1062302400000 , 2.5382187823805] , [ 1064894400000 , 2.3393223047168] , [ 1067576400000 , 2.491219888698] , [ 1070168400000 , 2.497555874906] , [ 1072846800000 , 1.734018115546] , [ 1075525200000 , 1.9307268299646] , [ 1078030800000 , 2.2261679836799] , [ 1080709200000 , 1.7608893704206] , [ 1083297600000 , 1.6242690616808] , [ 1085976000000 , 1.7161663801295] , [ 1088568000000 , 1.7183554537038] , [ 1091246400000 , 1.7179780759145] , [ 1093924800000 , 1.7314274801784] , [ 1096516800000 , 1.2596883356752] , [ 1099195200000 , 1.381177053009] , [ 1101790800000 , 1.4408819615814] , [ 1104469200000 , 3.4743581836444] , [ 1107147600000 , 3.3603749903192] , [ 1109566800000 , 3.5350883257893] , [ 1112245200000 , 3.0949644237828] , [ 1114833600000 , 3.0796455899995] , [ 1117512000000 , 3.3441247640644] , [ 1120104000000 , 4.0947643978168] , [ 1122782400000 , 4.4072631274052] , [ 1125460800000 , 4.4870979780825] , [ 1128052800000 , 4.8404549457934] , [ 1130734800000 , 4.8293016233697] , [ 1133326800000 , 5.2238093263952] , [ 1136005200000 , 3.382306337815] , [ 1138683600000 , 3.7056975170243] , [ 1141102800000 , 3.7561118692318] , [ 1143781200000 , 2.861913700854] , [ 1146369600000 , 2.9933744103381] , [ 1149048000000 , 2.7127537218463] , [ 1151640000000 , 3.1195497076283] , [ 1154318400000 , 3.4066964004508] , [ 1156996800000 , 3.3754571113569] , [ 1159588800000 , 2.2965579982924] , [ 1162270800000 , 2.4486818633018] , [ 1164862800000 , 2.4002308848517] , [ 1167541200000 , 1.9649579750349] , [ 1170219600000 , 1.9385263638056] , [ 1172638800000 , 1.9128975336387] , [ 1175313600000 , 2.3412869836298] , [ 1177905600000 , 2.4337870351445] , [ 1180584000000 , 2.62179703171] , [ 1183176000000 , 3.2642864957929] , [ 1185854400000 , 3.3200396223709] , [ 1188532800000 , 3.3934212707572] , [ 1191124800000 , 4.2822327088179] , [ 1193803200000 , 4.1474964228541] , [ 1196398800000 , 4.1477082879801] , [ 1199077200000 , 5.2947122916128] , [ 1201755600000 , 5.2919843508028] , [ 1204261200000 , 5.198978305031] , [ 1206936000000 , 3.5603057673513] , [ 1209528000000 , 3.3009087690692] , [ 1212206400000 , 3.1784852603792] , [ 1214798400000 , 4.5889503538868] , [ 1217476800000 , 4.401779617494] , [ 1220155200000 , 4.2208301828278] , [ 1222747200000 , 3.89396671475] , [ 1225425600000 , 3.0423832241354] , [ 1228021200000 , 3.135520611578] , [ 1230699600000 , 1.9631418164089] , [ 1233378000000 , 1.8963543874958] , [ 1235797200000 , 1.8266636017025] , [ 1238472000000 , 0.93136635895188] , [ 1241064000000 , 0.92737801918888] , [ 1243742400000 , 0.97591889805002] , [ 1246334400000 , 2.6841193805515] , [ 1249012800000 , 2.5664341140531] , [ 1251691200000 , 2.3887523699873] , [ 1254283200000 , 1.1737801663681] , [ 1256961600000 , 1.0953582317281] , [ 1259557200000 , 1.2495674976653] , [ 1262235600000 , 0.36607452464754] , [ 1264914000000 , 0.3548719047291] , [ 1267333200000 , 0.36769242398939] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0.85450741275337] , [ 1288497600000 , 0.91360317921637] , [ 1291093200000 , 0.89647678692269] , [ 1293771600000 , 0.87800687192639] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0.43668720882994] , [ 1304136000000 , 0.4756523602692] , [ 1306814400000 , 0.46947368328469] , [ 1309406400000 , 0.45138896152316] , [ 1312084800000 , 0.43828726648117] , [ 1314763200000 , 2.0820861395316] , [ 1317355200000 , 0.9364411075395] , [ 1320033600000 , 0.60583907839773] , [ 1322629200000 , 0.61096950747437] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0]]
|
||||
} ,
|
||||
|
||||
{
|
||||
"key" : "Utilities" ,
|
||||
"values" : [ [ 1025409600000 , 0] , [ 1028088000000 , 0] , [ 1030766400000 , 0] , [ 1033358400000 , 0.17112421375328] , [ 1036040400000 , 0.16363405009242] , [ 1038632400000 , 0.21933570171591] , [ 1041310800000 , 0] , [ 1043989200000 , 0] , [ 1046408400000 , 0] , [ 1049086800000 , 0] , [ 1051675200000 , 0] , [ 1054353600000 , 0] , [ 1056945600000 , 0] , [ 1059624000000 , 0] , [ 1062302400000 , 0] , [ 1064894400000 , 0] , [ 1067576400000 , 0] , [ 1070168400000 , 0] , [ 1072846800000 , 0] , [ 1075525200000 , 0] , [ 1078030800000 , 0] , [ 1080709200000 , 0] , [ 1083297600000 , 0] , [ 1085976000000 , 0] , [ 1088568000000 , 0] , [ 1091246400000 , 0] , [ 1093924800000 , 0] , [ 1096516800000 , 0] , [ 1099195200000 , 0] , [ 1101790800000 , 0] , [ 1104469200000 , 0] , [ 1107147600000 , 0] , [ 1109566800000 , 0] , [ 1112245200000 , 0] , [ 1114833600000 , 0] , [ 1117512000000 , 0] , [ 1120104000000 , 0] , [ 1122782400000 , 0] , [ 1125460800000 , 0] , [ 1128052800000 , 0] , [ 1130734800000 , 0] , [ 1133326800000 , 0] , [ 1136005200000 , 0] , [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 0] , [ 1162270800000 , 0] , [ 1164862800000 , 0] , [ 1167541200000 , 0] , [ 1170219600000 , 0] , [ 1172638800000 , 0] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , 0] , [ 1185854400000 , 0] , [ 1188532800000 , 0] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , 0] , [ 1209528000000 , 0] , [ 1212206400000 , 0] , [ 1214798400000 , 0] , [ 1217476800000 , 0] , [ 1220155200000 , 0] , [ 1222747200000 , 0] , [ 1225425600000 , 0] , [ 1228021200000 , 0] , [ 1230699600000 , 0] , [ 1233378000000 , 0] , [ 1235797200000 , 0] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , 0] , [ 1249012800000 , 0] , [ 1251691200000 , 0] , [ 1254283200000 , 0] , [ 1256961600000 , 0] , [ 1259557200000 , 0] , [ 1262235600000 , 0] , [ 1264914000000 , 0] , [ 1267333200000 , 0] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 0] , [ 1317355200000 , 0] , [ 1320033600000 , 0] , [ 1322629200000 , 0] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0]]
|
||||
} ,
|
||||
|
||||
{
|
||||
"key" : "Not Available" ,
|
||||
"values" : [ [ 1025409600000 , 0] , [ 1028088000000 , 0] , [ 1030766400000 , 0] , [ 1033358400000 , 0] , [ 1036040400000 , 0] , [ 1038632400000 , 0] , [ 1041310800000 , 0] , [ 1043989200000 , 0] , [ 1046408400000 , 0] , [ 1049086800000 , 0] , [ 1051675200000 , 0] , [ 1054353600000 , 0] , [ 1056945600000 , 0] , [ 1059624000000 , 0] , [ 1062302400000 , 0] , [ 1064894400000 , 0] , [ 1067576400000 , 0] , [ 1070168400000 , 0] , [ 1072846800000 , 0] , [ 1075525200000 , 0] , [ 1078030800000 , 0] , [ 1080709200000 , 0] , [ 1083297600000 , 0] , [ 1085976000000 , 0] , [ 1088568000000 , 0] , [ 1091246400000 , 0] , [ 1093924800000 , 0] , [ 1096516800000 , 0] , [ 1099195200000 , 0] , [ 1101790800000 , 0] , [ 1104469200000 , 0] , [ 1107147600000 , 0] , [ 1109566800000 , 0] , [ 1112245200000 , 0] , [ 1114833600000 , 0] , [ 1117512000000 , 0] , [ 1120104000000 , 0] , [ 1122782400000 , 0] , [ 1125460800000 , 0] , [ 1128052800000 , 0] , [ 1130734800000 , 0] , [ 1133326800000 , 0] , [ 1136005200000 , 0] , [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 0] , [ 1162270800000 , 0] , [ 1164862800000 , 0] , [ 1167541200000 , 0.050172677311163] , [ 1170219600000 , 0.05010459739003] , [ 1172638800000 , 0.050681828777765] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , 0] , [ 1185854400000 , 0] , [ 1188532800000 , 0] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , 0.18678212114368] , [ 1209528000000 , 0.17442959307088] , [ 1212206400000 , 0.16359572139598] , [ 1214798400000 , 0.15837381236842] , [ 1217476800000 , 0.15577933366753] , [ 1220155200000 , 0.14891802647046] , [ 1222747200000 , 0.1770757948046] , [ 1225425600000 , 0.18278762496453] , [ 1228021200000 , 0.19687349078343] , [ 1230699600000 , 0.23551013647077] , [ 1233378000000 , 0.25042391829233] , [ 1235797200000 , 0.26937282915476] , [ 1238472000000 , 0.23271248456665] , [ 1241064000000 , 0.20745841982123] , [ 1243742400000 , 0.2011712690448] , [ 1246334400000 , 0.21168244254666] , [ 1249012800000 , 0.20333696030696] , [ 1251691200000 , 0.19775078467844] , [ 1254283200000 , 0] , [ 1256961600000 , 0] , [ 1259557200000 , 0] , [ 1262235600000 , 0] , [ 1264914000000 , 0] , [ 1267333200000 , 0] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 1.3103821402664] , [ 1317355200000 , 1.0444700235618] , [ 1320033600000 , 0.81900499903221] , [ 1322629200000 , 0.81445352296526] , [ 1325307600000 , 0.27519092496306] , [ 1327986000000 , 0.28953340933973] , [ 1330491600000 , 0.31305944539777] , [ 1333166400000 , 0.28710464914403] , [ 1335758400000 , 0.27229889783707]]
|
||||
}
|
||||
].map(function(series) {
|
||||
series.values = series.values.map(function(d) {
|
||||
return { x: d[0], y: d[1] }
|
||||
});
|
||||
return series;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
|
||||
|
||||
var width = function() { return parseInt(d3.select('#chart').style('width')) },
|
||||
height = function() { return parseInt(d3.select('#chart').style('height')) };
|
||||
//xTickFormat = d3.format(',r'),
|
||||
xTickFormat = function(d) { return d3.time.format('%x')(new Date(d)) },
|
||||
yTickFormat = d3.format(',.2f');
|
||||
|
||||
var chart = nv.models.stackedAreaWithLegend()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.clipEdge(true)
|
||||
//.y(function(d) { return d.ytest }) //not ready yet for custom accessor, almost there
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(xTickFormat);
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(yTickFormat);
|
||||
|
||||
|
||||
|
||||
var svg = d3.select('#chart svg')
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(histcatexplong)
|
||||
//.datum(data)
|
||||
|
||||
svg.transition().duration(500).call(chart);
|
||||
|
||||
|
||||
chart.dispatch.on('tooltipShow', function(e) {
|
||||
var offsetElement = document.getElementById("chart"),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatterY = chart.stacked.offset() == 'expand' ? d3.format(',.2%') : d3.format(',.2f'); //TODO: stacked format should be set by caller
|
||||
//formatterX = function(d) { return d };
|
||||
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
formatterY(chart.y()(e.point)) + ' on ' + xTickFormat(chart.x()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
});
|
||||
|
||||
chart.dispatch.on('tooltipHide', function(e) {
|
||||
nv.tooltip.cleanup();
|
||||
});
|
||||
|
||||
|
||||
|
||||
window.onresize = function() {
|
||||
d3.select('#chart svg')
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.call(chart);
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
|
||||
/* Inspired by Lee Byron's test data generator. */
|
||||
function stream_layers(n, m, o) {
|
||||
if (arguments.length < 3) o = 0;
|
||||
function bump(a) {
|
||||
var x = 1 / (.1 + Math.random()),
|
||||
y = 2 * Math.random() - .5,
|
||||
z = 10 / (.1 + Math.random());
|
||||
for (var i = 0; i < m; i++) {
|
||||
var w = (i / m - y) * z;
|
||||
a[i] += x * Math.exp(-w * w);
|
||||
}
|
||||
}
|
||||
return d3.range(n).map(function() {
|
||||
var a = [], i;
|
||||
for (i = 0; i < m; i++) a[i] = o + o * Math.random();
|
||||
for (i = 0; i < 5; i++) bump(a);
|
||||
return a.map(stream_index);
|
||||
});
|
||||
}
|
||||
|
||||
/* Another layer generator using gamma distributions. */
|
||||
function stream_waves(n, m) {
|
||||
return d3.range(n).map(function(i) {
|
||||
return d3.range(m).map(function(j) {
|
||||
var x = 20 * j / m - i / 3;
|
||||
return 2 * x * Math.exp(-.5 * x);
|
||||
}).map(stream_index);
|
||||
});
|
||||
}
|
||||
|
||||
function stream_index(d, i) {
|
||||
//return {x: i, ytest: Math.max(0, d)}; //Minor error with custom y getter/setter and stacked, need to fix
|
||||
return {x: i, y: Math.max(0, d)};
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,297 +0,0 @@
|
||||
|
||||
nv.models.stackedAreaWithLegend = function() {
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
getWidth = function() { return 960 },
|
||||
getHeight = function() { return 500 },
|
||||
color = d3.scale.category20().range(),
|
||||
showControls = true,
|
||||
showLegend = true;
|
||||
|
||||
var x = d3.scale.linear(),
|
||||
y = d3.scale.linear(),
|
||||
getX = function(d) { return d.x },
|
||||
getY = function(d) { return d.y },
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom'),
|
||||
yAxis = nv.models.axis().scale(y).orient('left'),
|
||||
legend = nv.models.legend().height(30),
|
||||
controls = nv.models.legend().height(30),
|
||||
stacked = nv.models.stackedArea(),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
|
||||
|
||||
//TODO: let user select default
|
||||
var controlsData = [
|
||||
{ key: 'Stacked' },
|
||||
{ key: 'Stream', disabled: true },
|
||||
{ key: 'Expanded', disabled: true }
|
||||
];
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var width = getWidth(),
|
||||
height = getHeight(),
|
||||
availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
|
||||
var seriesData = data.filter(function(d) { return !d.disabled })
|
||||
.reduce(function(prev, curr, index) { //sum up all the y's
|
||||
curr.values.forEach(function(d,i) {
|
||||
if (!index) prev[i] = {x: getX(d,i), y:0};
|
||||
prev[i].y += getY(d,i);
|
||||
});
|
||||
return prev;
|
||||
}, []);
|
||||
|
||||
|
||||
x .domain(d3.extent(d3.merge(seriesData), function(d) { return d.x } ))
|
||||
.range([0, availableWidth]);
|
||||
|
||||
y .domain(stacked.offset() == 'zero' ?
|
||||
[0, d3.max(seriesData, function(d) { return d.y } )] :
|
||||
[0, 1] // 0 - 100%
|
||||
)
|
||||
.range([availableHeight, 0]);
|
||||
|
||||
stacked
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
//.color(color)
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % 20];
|
||||
}).filter(function(d,i) { return !data[i].disabled }))
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.wrap.stackedAreaWithLegend').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 stackedAreaWithLegend').append('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'stackedWrap');
|
||||
gEnter.append('g').attr('class', 'legendWrap');
|
||||
gEnter.append('g').attr('class', 'controlsWrap');
|
||||
|
||||
|
||||
var g = wrap.select('g');
|
||||
|
||||
|
||||
if (showLegend) {
|
||||
//TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
|
||||
margin.top = legend.height();
|
||||
|
||||
legend
|
||||
.width(width/2 - margin.right)
|
||||
.color(color);
|
||||
|
||||
g.select('.legendWrap')
|
||||
.datum(data)
|
||||
.attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-margin.top) +')')
|
||||
.call(legend);
|
||||
}
|
||||
|
||||
|
||||
if (showControls) {
|
||||
controls.width(280).color(['#444', '#444', '#444']);
|
||||
g.select('.controlsWrap')
|
||||
.datum(controlsData)
|
||||
.attr('transform', 'translate(0,' + (-margin.top) +')')
|
||||
.call(controls);
|
||||
}
|
||||
|
||||
|
||||
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
var stackedWrap = g.select('.stackedWrap')
|
||||
.datum(data);
|
||||
d3.transition(stackedWrap).call(stacked);
|
||||
|
||||
|
||||
xAxis
|
||||
.domain(x.domain())
|
||||
.range(x.range())
|
||||
.ticks( width / 100 )
|
||||
.tickSize(-availableHeight, 0);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + availableHeight + ')');
|
||||
d3.transition(g.select('.x.axis'))
|
||||
.call(xAxis);
|
||||
|
||||
yAxis
|
||||
.domain(y.domain())
|
||||
.range(y.range())
|
||||
.ticks(stacked.offset() == 'wiggle' ? 0 : height / 36)
|
||||
.tickSize(-availableWidth, 0)
|
||||
.tickFormat(stacked.offset() == 'zero' ? d3.format(',.2f') : d3.format('%')); //TODO: stacked format should be set by caller
|
||||
|
||||
d3.transition(g.select('.y.axis'))
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
|
||||
//TODO: FIX Logic error, screws up when series are disabled by clicking legend, then series are desiabled by clicking the area
|
||||
stacked.dispatch.on('areaClick.toggle', function(e) {
|
||||
if (data.filter(function(d) { return !d.disabled }).length === 1)
|
||||
data = data.map(function(d) {
|
||||
if (d.disabled)
|
||||
d.values.map(function(p) { p.y = p._y || p.y; return p }); // ....
|
||||
|
||||
d.disabled = false;
|
||||
|
||||
return d
|
||||
});
|
||||
else
|
||||
data = data.map(function(d,i) {
|
||||
if (!d.disabled && i !== e.seriesIndex)
|
||||
d.values.map(function(p) { p._y = p.y; p.y = 0; return p }); //TODO: need to use value from getY, not always d.y
|
||||
|
||||
if (d.disabled && i === e.seriesIndex)
|
||||
d.values.map(function(p) { p.y = p._y || p.y; return p }); // ....
|
||||
|
||||
d.disabled = (i != e.seriesIndex);
|
||||
|
||||
return d
|
||||
});
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
legend.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
|
||||
if (d.disabled)
|
||||
d.values.map(function(p) { p._y = p.y; p.y = 0; return p }); //TODO: need to use value from getY, not always d.y
|
||||
else
|
||||
d.values.map(function(p) { p.y = p._y; return p }); // ....
|
||||
|
||||
if (!data.filter(function(d) { return !d.disabled }).length) {
|
||||
data.map(function(d) {
|
||||
d.disabled = false;
|
||||
d.values.map(function(p) { p.y = p._y; return p }); // ....
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
controls.dispatch.on('legendClick', function(d,i) {
|
||||
if (!d.disabled) return;
|
||||
|
||||
controlsData = controlsData.map(function(s) {
|
||||
s.disabled = true;
|
||||
return s;
|
||||
});
|
||||
d.disabled = false;
|
||||
|
||||
switch (d.key) {
|
||||
case 'Stacked':
|
||||
stacked.style('stack');
|
||||
break;
|
||||
case 'Stream':
|
||||
stacked.style('stream');
|
||||
break;
|
||||
case 'Expanded':
|
||||
stacked.style('expand');
|
||||
break;
|
||||
}
|
||||
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
legend.dispatch.on('legendMouseover', function(d, i) {
|
||||
d.hover = true;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
|
||||
legend.dispatch.on('legendMouseout', function(d, i) {
|
||||
d.hover = false;
|
||||
selection.transition().call(chart)
|
||||
});
|
||||
*/
|
||||
|
||||
stacked.dispatch.on('tooltipShow', function(e) {
|
||||
//disable tooltips when value ~= 0
|
||||
//// TODO: consider removing points from voronoi that have 0 value instead of this hack
|
||||
if (!Math.round(getY(e.point) * 100)) { // 100 will not be good for very small numbers... will have to think about making this valu dynamic, based on data range
|
||||
setTimeout(function() { d3.selectAll('.point.hover').classed('hover', false) }, 0);
|
||||
return false;
|
||||
}
|
||||
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
|
||||
stacked.dispatch.on('tooltipHide', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
/*
|
||||
// If the legend changed the margin's height, need to recalc positions... should think of a better way to prevent duplicate work
|
||||
if (margin.top != legend.height())
|
||||
chart(selection);
|
||||
*/
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.stacked = stacked;
|
||||
chart.xAxis = xAxis;
|
||||
chart.yAxis = yAxis;
|
||||
|
||||
d3.rebind(chart, stacked, 'interactive', 'offset', 'order', 'style', 'clipEdge', 'size', 'forceX', 'forceY', 'forceSize');
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = d3.functor(_); //not used locally, so could jsut be a rebind
|
||||
stacked.x(getX);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = d3.functor(_);
|
||||
stacked.y(getY);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return getWidth;
|
||||
getWidth = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return getHeight;
|
||||
getHeight = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showControls = function(_) {
|
||||
if (!arguments.length) return showControls;
|
||||
showControls = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.showLegend = function(_) {
|
||||
if (!arguments.length) return showLegend;
|
||||
showLegend = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
@ -1,97 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<br> <br> <br> <br> <br>
|
||||
|
||||
<div class="gallery" id="chart"></div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/bullet.js"></script>
|
||||
<script>
|
||||
|
||||
var width = 960,
|
||||
height = 55,
|
||||
margin = {top: 5, right: 40, bottom: 20, left: 120};
|
||||
|
||||
var chart = nv.models.bullet()
|
||||
.width(width - margin.right - margin.left)
|
||||
.height(height - margin.top - margin.bottom);
|
||||
|
||||
|
||||
data = [
|
||||
{"title":"Revenue","subtitle":"US$, in thousands","ranges":[-150,-225,-300],"measures":[-220],"markers":[-250]}
|
||||
/*
|
||||
//TODO: fix the tooltip offset if multiple
|
||||
,
|
||||
{"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21],"markers":[26]},
|
||||
{"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100],"markers":[550]},
|
||||
{"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000],"markers":[1000]},
|
||||
{"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
|
||||
*/
|
||||
];
|
||||
|
||||
//TODO: to be consistent with other models, should be appending a g to an already made svg, not creating the svg element
|
||||
var vis = d3.select("#chart").selectAll("svg")
|
||||
.data(data)
|
||||
.enter().append("svg")
|
||||
.attr("class", "bullet nvd3")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
//.append("g")
|
||||
//.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
|
||||
|
||||
vis
|
||||
.transition()
|
||||
.duration(1000)
|
||||
.call(chart);
|
||||
|
||||
|
||||
window.transition = function() {
|
||||
vis.datum(randomize);
|
||||
|
||||
vis
|
||||
.transition()
|
||||
.duration(1000)
|
||||
.call(chart);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function randomize(d) {
|
||||
if (!d.randomizer) d.randomizer = randomizer(d);
|
||||
d.ranges = d.ranges.map(d.randomizer);
|
||||
d.markers = d.markers.map(d.randomizer);
|
||||
d.measures = d.measures.map(d.randomizer);
|
||||
return d;
|
||||
}
|
||||
|
||||
function randomizer(d) {
|
||||
var k = d3.max(d.ranges) * .2;
|
||||
return function(d) {
|
||||
return Math.max(0, d + k * (Math.random() - .5));
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
d3.select('body').on('click', window.transition);
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,116 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<br> <br> <br> <br> <br>
|
||||
|
||||
Normal Bullet Chart
|
||||
<div class="gallery with-transitions" id="chart"></div>
|
||||
|
||||
Bullet Chart with Custom Labels
|
||||
<div class='gallery with-transitions' id='chart2'></div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/bullet.js"></script>
|
||||
<script src="../src/models/bulletChart.js"></script>
|
||||
<script>
|
||||
|
||||
var width = 960,
|
||||
height = 80,
|
||||
margin = {top: 5, right: 40, bottom: 20, left: 120};
|
||||
|
||||
var chart = nv.models.bulletChart()
|
||||
.width(width - margin.right - margin.left)
|
||||
.height(height - margin.top - margin.bottom);
|
||||
|
||||
var chart2 = nv.models.bulletChart()
|
||||
.width(width - margin.right - margin.left)
|
||||
.height(height - margin.top - margin.bottom);
|
||||
|
||||
data = [
|
||||
{"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220],"markers":[250]}
|
||||
/*
|
||||
//TODO: fix the tooltip offset if multiple
|
||||
,
|
||||
{"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21],"markers":[26]},
|
||||
{"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100],"markers":[550]},
|
||||
{"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000],"markers":[1000]},
|
||||
{"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
|
||||
*/
|
||||
];
|
||||
|
||||
dataWithLabels = [
|
||||
{"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220],"markers":[250],
|
||||
"rangeLabels":['Maximum Inventory','Average Inventory','Minimum Inventory'], "measureLabels":['Current Inventory'], "markerLabels":['Target Inventory'] }
|
||||
];
|
||||
|
||||
//TODO: to be consistent with other models, should be appending a g to an already made svg, not creating the svg element
|
||||
var vis = d3.select("#chart").selectAll("svg")
|
||||
.data(data)
|
||||
.enter().append("svg")
|
||||
.attr("class", "bullet nvd3")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
vis
|
||||
.transition()
|
||||
.duration(1000)
|
||||
.call(chart);
|
||||
|
||||
|
||||
var vis2 = d3.select("#chart2").selectAll("svg")
|
||||
.data(dataWithLabels)
|
||||
.enter().append('svg')
|
||||
.attr('class',"bullet nvd3")
|
||||
.attr("width",width)
|
||||
.attr("height",height);
|
||||
|
||||
vis2.transition().duration(1000).call(chart2);
|
||||
|
||||
|
||||
window.transition = function() {
|
||||
vis.datum(randomize)
|
||||
.transition()
|
||||
.duration(1000)
|
||||
.call(chart);
|
||||
|
||||
vis2.datum(randomize)
|
||||
.transition()
|
||||
.duration(1000)
|
||||
.call(chart2);
|
||||
};
|
||||
|
||||
|
||||
function randomize(d) {
|
||||
if (!d.randomizer) d.randomizer = randomizer(d);
|
||||
d.ranges = d.ranges.map(d.randomizer);
|
||||
d.markers = d.markers.map(d.randomizer);
|
||||
d.measures = d.measures.map(d.randomizer);
|
||||
return d;
|
||||
}
|
||||
|
||||
function randomizer(d) {
|
||||
var k = d3.max(d.ranges) * .2;
|
||||
return function(d) {
|
||||
return Math.max(0, d + k * (Math.random() - .5));
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
d3.select('body').on('click', window.transition);
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,167 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chart1 svg {
|
||||
height: 500px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
margin: 50px;
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart">
|
||||
<svg style="height: 500px;"></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../lib/crossfilter.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineWithFocusChart.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
extend = function(destination, source) {
|
||||
for (var property in source) {
|
||||
if (property in destination) {
|
||||
if ( typeof source[property] === "object" &&
|
||||
typeof destination[property] === "object") {
|
||||
destination[property] = extend(destination[property], source[property]);
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
} else {
|
||||
destination[property] = source[property];
|
||||
};
|
||||
}
|
||||
return destination;
|
||||
};
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.lineWithFocusChart();
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(d3.format(',f'));
|
||||
chart.x2Axis
|
||||
.tickFormat(d3.format(',f'));
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
chart.y2Axis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
var dimension = testCrossfilterData().data;
|
||||
|
||||
var data = normalizeData(dimension.top(Infinity),
|
||||
[
|
||||
{
|
||||
name: 'Stream #1',
|
||||
key: 'stream1'
|
||||
},
|
||||
{
|
||||
name: 'Stream #2',
|
||||
key: 'stream2'
|
||||
},
|
||||
{
|
||||
name: 'Stream #3',
|
||||
key: 'stream3'
|
||||
}
|
||||
], 'x');
|
||||
|
||||
d3.select('#chart svg')
|
||||
.datum(data)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function normalizeData(data, series, xAxis)
|
||||
{
|
||||
var sort = crossfilter.quicksort.by(function(d) { return d[xAxis]; });
|
||||
var sorted = sort(data, 0, data.length);
|
||||
|
||||
var result = [];
|
||||
|
||||
series.forEach(function(serie, index)
|
||||
{
|
||||
result.push({key: serie.name, values: [], color: serie.color});
|
||||
});
|
||||
|
||||
data.forEach(function(data, dataIndex)
|
||||
{
|
||||
series.forEach(function(serie, serieIndex)
|
||||
{
|
||||
result[serieIndex].values.push({x: data[xAxis], y: data[serie.key]});
|
||||
});
|
||||
});
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
function testCrossfilterData() {
|
||||
var data = crossfilter(testData());
|
||||
|
||||
try
|
||||
{
|
||||
data.data = data.dimension(function(d) { return d.y; });
|
||||
} catch (e)
|
||||
{
|
||||
console.log(e.stack);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function testData() {
|
||||
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
stream_layers(3,128,.1).map(function(layer, index) {
|
||||
layer.forEach(function(item, i) {
|
||||
var object = { x: item.x };
|
||||
object['stream' + (index + 1)] = item.y;
|
||||
eval('data' + (index + 1)).push(object);
|
||||
});
|
||||
});
|
||||
|
||||
var data = extend(data1, data2);
|
||||
var result = extend(data, data3);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,180 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chart1 svg {
|
||||
height: 500px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
margin: 50px;
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart">
|
||||
<svg style="height: 500px;"></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../lib/crossfilter.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineWithFocusChart.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
extend = function(destination, source) {
|
||||
for (var property in source) {
|
||||
if (property in destination) {
|
||||
if ( typeof source[property] === "object" &&
|
||||
typeof destination[property] === "object") {
|
||||
destination[property] = extend(destination[property], source[property]);
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
} else {
|
||||
destination[property] = source[property];
|
||||
};
|
||||
}
|
||||
return destination;
|
||||
};
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.lineWithFocusChart();
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(d3.format(',f'));
|
||||
chart.x2Axis
|
||||
.tickFormat(d3.format(',f'));
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
chart.y2Axis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
var rawData = testCrossfilterData();
|
||||
var data = normalizeData(rawData.datum,
|
||||
[
|
||||
{
|
||||
name: 'Stream #1',
|
||||
key: 'stream1'
|
||||
},
|
||||
{
|
||||
name: 'Stream #2',
|
||||
key: 'stream2'
|
||||
},
|
||||
{
|
||||
name: 'Stream #3',
|
||||
key: 'stream3'
|
||||
}
|
||||
]);
|
||||
|
||||
d3.select('#chart svg')
|
||||
.datum(data)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function normalizeData(data, series)
|
||||
{
|
||||
var sort = crossfilter.quicksort.by(function(d) { return d.key; });
|
||||
var result = [];
|
||||
|
||||
for (var i = 0; i < series.length; i++)
|
||||
{
|
||||
var seriesData = data.top(Infinity);
|
||||
var sorted = sort(seriesData, 0, seriesData.length);
|
||||
var values = [];
|
||||
|
||||
|
||||
seriesData.forEach(function(item, index)
|
||||
{
|
||||
values.push({x: item.key, y: item.value[series[i].key]});
|
||||
});
|
||||
|
||||
result.push({key: series[i].name, values: values, color: series[i].color});
|
||||
};
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
function testCrossfilterData() {
|
||||
var data = crossfilter(testData());
|
||||
|
||||
try
|
||||
{
|
||||
data.data = data.dimension(function(d) { return d.x; });
|
||||
data.datum = data.data.group(function(d) { return d; });
|
||||
data.datum.reduce(function (p, v) {
|
||||
p.count++;
|
||||
p.stream1 += v.stream1;
|
||||
p.stream2 += v.stream2;
|
||||
p.stream3 += v.stream3;
|
||||
return p; },
|
||||
function (p, v) {
|
||||
p.count--;
|
||||
p.stream1 -= v.stream1;
|
||||
p.stream2 -= v.stream2;
|
||||
p.stream3 -= v.stream3;
|
||||
return p; },
|
||||
function () { return {count: 0, stream1: 0, stream2: 0, stream3: 0}; });
|
||||
} catch (e)
|
||||
{
|
||||
console.log(e.stack);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function testData() {
|
||||
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
stream_layers(3,128,.1).map(function(layer, index) {
|
||||
layer.forEach(function(item, i) {
|
||||
var object = { x: item.x };
|
||||
object['stream' + (index + 1)] = item.y;
|
||||
eval('data' + (index + 1)).push(object);
|
||||
});
|
||||
});
|
||||
|
||||
var data = extend(data1, data2);
|
||||
var result = extend(data, data3);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,288 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chart1 svg {
|
||||
height: 500px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
margin: 50px;
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart">
|
||||
<svg style="height: 500px;"></svg>
|
||||
</div>
|
||||
<div id="stream1" style="float: left; margin-left: 15px;">
|
||||
<div><h1>Stream #1</h1></div>
|
||||
</div>
|
||||
<div id="stream2" style="float: left; margin-left: 15px;">
|
||||
<div><h1>Stream #2</h1></div>
|
||||
</div>
|
||||
<div id="stream3" style="float: left; margin-left: 15px;">
|
||||
<div><h1>Stream #3</h1></div>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../lib/crossfilter.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineWithFocusChart.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
extend = function(destination, source) {
|
||||
for (var property in source) {
|
||||
if (property in destination) {
|
||||
if ( typeof source[property] === "object" &&
|
||||
typeof destination[property] === "object") {
|
||||
destination[property] = extend(destination[property], source[property]);
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
} else {
|
||||
destination[property] = source[property];
|
||||
};
|
||||
}
|
||||
return destination;
|
||||
};
|
||||
|
||||
var rawData = testCrossfilterData();
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.lineWithFocusChart();
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(d3.format(',f'));
|
||||
chart.x2Axis
|
||||
.tickFormat(d3.format(',f'));
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
chart.y2Axis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
chart.dispatch.on('brush', click);
|
||||
|
||||
var data = normalizeData(rawData.datum,
|
||||
[
|
||||
{
|
||||
name: 'Stream #1',
|
||||
key: 'stream1'
|
||||
},
|
||||
{
|
||||
name: 'Stream #2',
|
||||
key: 'stream2'
|
||||
},
|
||||
{
|
||||
name: 'Stream #3',
|
||||
key: 'stream3'
|
||||
}
|
||||
]);
|
||||
nv.log(data);
|
||||
d3.select('#chart svg')
|
||||
.datum(data)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function click(e) {
|
||||
extent = e.extent;
|
||||
|
||||
rawData.data.filter([extent[0], extent[1]]);
|
||||
streams("stream1");
|
||||
streams("stream2");
|
||||
streams("stream3");
|
||||
}
|
||||
|
||||
function streams(key) {
|
||||
var topData = rawData.data.top(5);
|
||||
|
||||
var stream = d3.select("div#" + key).selectAll(".stream-data")
|
||||
.data(topData, function(d) {
|
||||
return d.key;
|
||||
});
|
||||
|
||||
stream
|
||||
.html(function(d) {
|
||||
return d[key];
|
||||
})
|
||||
|
||||
stream.enter().append("div")
|
||||
.attr("class", "stream-data")
|
||||
.html(function(d) {
|
||||
return d[key];
|
||||
})
|
||||
|
||||
stream.exit().remove();
|
||||
|
||||
stream.order();
|
||||
}
|
||||
|
||||
function normalizeData(data, series) {
|
||||
var sort = crossfilter.quicksort.by(function(d) { return d.key; });
|
||||
var result = [];
|
||||
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
var seriesData = data.top(Infinity);
|
||||
var sorted = sort(seriesData, 0, seriesData.length);
|
||||
var values = [];
|
||||
|
||||
seriesData.forEach(function(item, index) {
|
||||
values.push({x: item.key, y: item.value[series[i].key]});
|
||||
});
|
||||
|
||||
result.push({key: series[i].name, values: values, color: series[i].color});
|
||||
};
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
function testCrossfilterData() {
|
||||
var data = crossfilter(testData());
|
||||
|
||||
try {
|
||||
data.data = data.dimension(function(d) { return d.x; });
|
||||
data.datum = data.data.group(function(d) { return d; });
|
||||
data.datum.reduce(
|
||||
function (p, v) {
|
||||
p.count++;
|
||||
p.stream1 += v.stream1;
|
||||
p.stream2 += v.stream2;
|
||||
p.stream3 += v.stream3;
|
||||
return p;
|
||||
},
|
||||
function (p, v) {
|
||||
p.count--;
|
||||
p.stream1 -= v.stream1;
|
||||
p.stream2 -= v.stream2;
|
||||
p.stream3 -= v.stream3;
|
||||
return p;
|
||||
},
|
||||
function () {
|
||||
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
|
||||
});
|
||||
|
||||
data.stream1 = data.dimension(function(d) { return d.stream1; });
|
||||
data.stream1datum = data.data.group(function(d) { return d; });
|
||||
data.stream1datum.reduce(
|
||||
function (p, v) {
|
||||
p.count++;
|
||||
p.stream1 += v.stream1;
|
||||
p.stream2 += v.stream2;
|
||||
p.stream3 += v.stream3;
|
||||
return p;
|
||||
},
|
||||
function (p, v) {
|
||||
p.count--;
|
||||
p.stream1 -= v.stream1;
|
||||
p.stream2 -= v.stream2;
|
||||
p.stream3 -= v.stream3;
|
||||
return p;
|
||||
},
|
||||
function () {
|
||||
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
|
||||
}
|
||||
);
|
||||
|
||||
data.stream2 = data.dimension(function(d) { return d.stream2; });
|
||||
data.stream2datum = data.data.group(function(d) { return d; });
|
||||
data.stream2datum.reduce(
|
||||
function (p, v) {
|
||||
p.count++;
|
||||
p.stream1 += v.stream1;
|
||||
p.stream2 += v.stream2;
|
||||
p.stream3 += v.stream3;
|
||||
return p;
|
||||
},
|
||||
function (p, v) {
|
||||
p.count--;
|
||||
p.stream1 -= v.stream1;
|
||||
p.stream2 -= v.stream2;
|
||||
p.stream3 -= v.stream3;
|
||||
return p;
|
||||
},
|
||||
function () {
|
||||
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
|
||||
}
|
||||
);
|
||||
|
||||
data.stream3 = data.dimension(function(d) { return d.stream3; });
|
||||
data.stream3datum = data.data.group(function(d) { return d; });
|
||||
data.stream3datum.reduce(
|
||||
function (p, v) {
|
||||
p.count++;
|
||||
p.stream1 += v.stream1;
|
||||
p.stream2 += v.stream2;
|
||||
p.stream3 += v.stream3;
|
||||
return p; },
|
||||
function (p, v) {
|
||||
p.count--;
|
||||
p.stream1 -= v.stream1;
|
||||
p.stream2 -= v.stream2;
|
||||
p.stream3 -= v.stream3;
|
||||
return p;
|
||||
},
|
||||
function () {
|
||||
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
|
||||
}
|
||||
);
|
||||
} catch (e) {
|
||||
nv.log(e.stack);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function testData() {
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
stream_layers(3,128,.1).map(function(layer, index) {
|
||||
layer.forEach(function(item, i) {
|
||||
var object = { x: item.x };
|
||||
object['stream' + (index + 1)] = item.y;
|
||||
eval('data' + (index + 1)).push(object);
|
||||
});
|
||||
});
|
||||
|
||||
var data = extend(data1, data2);
|
||||
var result = extend(data, data3);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,200 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.chart svg {
|
||||
height: 450px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
margin: 50px;
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div class='navigation'>
|
||||
Tests:
|
||||
<a href="../test/lineChartTest.html">Line Chart</a>
|
||||
<a href="../test/stackedAreaChartTest.html">Stacked Area</a>
|
||||
<a href="cumulativeLineChart.html">Cumulative Line</a>
|
||||
</div>
|
||||
<div id="chart1" class='chart with-transitions'>
|
||||
<strong>Chart with new tooltips and guide line (with-transitions)</strong>
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="chart2" class='chart with-transitions'>
|
||||
<strong>Chart with old tooltips (with-transitions)</strong>
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/interactiveLayer.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/cumulativeLineChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
// Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.cumulativeLineChart()
|
||||
.useInteractiveGuideline(true)
|
||||
.x(function(d) { return d[0] })
|
||||
.y(function(d) { return d[1]/100 })
|
||||
.color(d3.scale.category10().range())
|
||||
.average(function(d) { return d.mean/100; })
|
||||
.transitionDuration(300)
|
||||
.clipVoronoi(false);
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(function(d) {
|
||||
return d3.time.format('%m/%d/%y')(new Date(d))
|
||||
});
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.1%'));
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(cumulativeTestData())
|
||||
.call(chart);
|
||||
|
||||
//TODO: Figure out a good way to do this automatically
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.cumulativeLineChart()
|
||||
.useInteractiveGuideline(false)
|
||||
.rightAlignYAxis(true)
|
||||
.margin({right:90})
|
||||
.x(function(d) { return d[0] })
|
||||
.y(function(d) { return d[1]/100 })
|
||||
.color(d3.scale.category10().range())
|
||||
.average(function(d) { return d.mean/100; })
|
||||
.clipVoronoi(false);
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(function(d) {
|
||||
return d3.time.format('%m/%d/%y')(new Date(d))
|
||||
});
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.1%'));
|
||||
|
||||
d3.select('#chart2 svg')
|
||||
.datum(cumulativeTestData())
|
||||
.call(chart);
|
||||
|
||||
//TODO: Figure out a good way to do this automatically
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
function flatTestData() {
|
||||
return [
|
||||
{
|
||||
key: "Snakes",
|
||||
values: [0,1,2,3,4,5,6,7,8,9].map(function(d) {
|
||||
var currentDate = new Date();
|
||||
currentDate.setDate(currentDate.getDate() + d);
|
||||
return [currentDate, 0]
|
||||
})
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
function cumulativeTestData() {
|
||||
|
||||
|
||||
|
||||
return [
|
||||
|
||||
{
|
||||
key: "Long",
|
||||
values: [ [ 1083297600000 , -2.974623048543] , [ 1085976000000 , -1.7740300785979] , [ 1088568000000 , 4.4681318138177] , [ 1091246400000 , 7.0242541001353] , [ 1093924800000 , 7.5709603667586] , [ 1096516800000 , 20.612245065736] , [ 1099195200000 , 21.698065237316] , [ 1101790800000 , 40.501189458018] , [ 1104469200000 , 50.464679413194] , [ 1107147600000 , 48.917421973355] , [ 1109566800000 , 63.750936549160] , [ 1112245200000 , 59.072499126460] , [ 1114833600000 , 43.373158880492] , [ 1117512000000 , 54.490918947556] , [ 1120104000000 , 56.661178852079] , [ 1122782400000 , 73.450103545496] , [ 1125460800000 , 71.714526354907] , [ 1128052800000 , 85.221664349607] , [ 1130734800000 , 77.769261392481] , [ 1133326800000 , 95.966528716500] , [ 1136005200000 , 107.59132116397] , [ 1138683600000 , 127.25740096723] , [ 1141102800000 , 122.13917498830] , [ 1143781200000 , 126.53657279774] , [ 1146369600000 , 132.39300992970] , [ 1149048000000 , 120.11238242904] , [ 1151640000000 , 118.41408917750] , [ 1154318400000 , 107.92918924621] , [ 1156996800000 , 110.28057249569] , [ 1159588800000 , 117.20485334692] , [ 1162270800000 , 141.33556756948] , [ 1164862800000 , 159.59452727893] , [ 1167541200000 , 167.09801853304] , [ 1170219600000 , 185.46849659215] , [ 1172638800000 , 184.82474099990] , [ 1175313600000 , 195.63155213887] , [ 1177905600000 , 207.40597044171] , [ 1180584000000 , 230.55966698196] , [ 1183176000000 , 239.55649035292] , [ 1185854400000 , 241.35915085208] , [ 1188532800000 , 239.89428956243] , [ 1191124800000 , 260.47781917715] , [ 1193803200000 , 276.39457482225] , [ 1196398800000 , 258.66530682672] , [ 1199077200000 , 250.98846121893] , [ 1201755600000 , 226.89902618127] , [ 1204261200000 , 227.29009273807] , [ 1206936000000 , 218.66476654350] , [ 1209528000000 , 232.46605902918] , [ 1212206400000 , 253.25667081117] , [ 1214798400000 , 235.82505363925] , [ 1217476800000 , 229.70112774254] , [ 1220155200000 , 225.18472705952] , [ 1222747200000 , 189.13661746552] , [ 1225425600000 , 149.46533007301] , [ 1228021200000 , 131.00340772114] , [ 1230699600000 , 135.18341728866] , [ 1233378000000 , 109.15296887173] , [ 1235797200000 , 84.614772549760] , [ 1238472000000 , 100.60810015326] , [ 1241064000000 , 141.50134895610] , [ 1243742400000 , 142.50405083675] , [ 1246334400000 , 139.81192372672] , [ 1249012800000 , 177.78205544583] , [ 1251691200000 , 194.73691933074] , [ 1254283200000 , 209.00838460225] , [ 1256961600000 , 198.19855877420] , [ 1259557200000 , 222.37102417812] , [ 1262235600000 , 234.24581081250] , [ 1264914000000 , 228.26087689346] , [ 1267333200000 , 248.81895126250] , [ 1270008000000 , 270.57301075186] , [ 1272600000000 , 292.64604322550] , [ 1275278400000 , 265.94088520518] , [ 1277870400000 , 237.82887467569] , [ 1280548800000 , 265.55973314204] , [ 1283227200000 , 248.30877330928] , [ 1285819200000 , 278.14870066912] , [ 1288497600000 , 292.69260960288] , [ 1291093200000 , 300.84263809599] , [ 1293771600000 , 326.17253914628] , [ 1296450000000 , 337.69335966505] , [ 1298869200000 , 339.73260965121] , [ 1301544000000 , 346.87865120765] , [ 1304136000000 , 347.92991526628] , [ 1306814400000 , 342.04627502669] , [ 1309406400000 , 333.45386231233] , [ 1312084800000 , 323.15034181243] , [ 1314763200000 , 295.66126882331] , [ 1317355200000 , 251.48014579253] , [ 1320033600000 , 295.15424257905] , [ 1322629200000 , 294.54766764397] , [ 1325307600000 , 295.72906119051] , [ 1327986000000 , 325.73351347613] , [ 1330491600000 , 340.16106061186] , [ 1333166400000 , 345.15514071490] , [ 1335758400000 , 337.10259395679] , [ 1338436800000 , 318.68216333837] , [ 1341028800000 , 317.03683945246] , [ 1343707200000 , 318.53549659997] , [ 1346385600000 , 332.85381464104] , [ 1348977600000 , 337.36534373477] , [ 1351656000000 , 350.27872156161] , [ 1354251600000 , 349.45128876100]]
|
||||
,
|
||||
mean: 250
|
||||
},
|
||||
{
|
||||
key: "Short",
|
||||
values: [ [ 1083297600000 , -0.77078283705125] , [ 1085976000000 , -1.8356366650335] , [ 1088568000000 , -5.3121322073127] , [ 1091246400000 , -4.9320975829662] , [ 1093924800000 , -3.9835408823225] , [ 1096516800000 , -6.8694685316805] , [ 1099195200000 , -8.4854877428545] , [ 1101790800000 , -15.933627197384] , [ 1104469200000 , -15.920980069544] , [ 1107147600000 , -12.478685045651] , [ 1109566800000 , -17.297761889305] , [ 1112245200000 , -15.247129891020] , [ 1114833600000 , -11.336459046839] , [ 1117512000000 , -13.298990907415] , [ 1120104000000 , -16.360027000056] , [ 1122782400000 , -18.527929522030] , [ 1125460800000 , -22.176516738685] , [ 1128052800000 , -23.309665368330] , [ 1130734800000 , -21.629973409748] , [ 1133326800000 , -24.186429093486] , [ 1136005200000 , -29.116707312531] , [ 1138683600000 , -37.188037874864] , [ 1141102800000 , -34.689264821198] , [ 1143781200000 , -39.505932105359] , [ 1146369600000 , -45.339572492759] , [ 1149048000000 , -43.849353192764] , [ 1151640000000 , -45.418353922571] , [ 1154318400000 , -44.579281059919] , [ 1156996800000 , -44.027098363370] , [ 1159588800000 , -41.261306759439] , [ 1162270800000 , -47.446018534027] , [ 1164862800000 , -53.413782948909] , [ 1167541200000 , -50.700723647419] , [ 1170219600000 , -56.374090913296] , [ 1172638800000 , -61.754245220322] , [ 1175313600000 , -66.246241587629] , [ 1177905600000 , -75.351650899999] , [ 1180584000000 , -81.699058262032] , [ 1183176000000 , -82.487023368081] , [ 1185854400000 , -86.230055113277] , [ 1188532800000 , -84.746914818507] , [ 1191124800000 , -100.77134971977] , [ 1193803200000 , -109.95435565947] , [ 1196398800000 , -99.605672965057] , [ 1199077200000 , -99.607249394382] , [ 1201755600000 , -94.874614950188] , [ 1204261200000 , -105.35899063105] , [ 1206936000000 , -106.01931193802] , [ 1209528000000 , -110.28883571771] , [ 1212206400000 , -119.60256203030] , [ 1214798400000 , -115.62201315802] , [ 1217476800000 , -106.63824185202] , [ 1220155200000 , -99.848746318951] , [ 1222747200000 , -85.631219602987] , [ 1225425600000 , -63.547909262067] , [ 1228021200000 , -59.753275364457] , [ 1230699600000 , -63.874977883542] , [ 1233378000000 , -56.865697387488] , [ 1235797200000 , -54.285579501988] , [ 1238472000000 , -56.474659581885] , [ 1241064000000 , -63.847137745644] , [ 1243742400000 , -68.754247867325] , [ 1246334400000 , -69.474257009155] , [ 1249012800000 , -75.084828197067] , [ 1251691200000 , -77.101028237237] , [ 1254283200000 , -80.454866854387] , [ 1256961600000 , -78.984349952220] , [ 1259557200000 , -83.041230807854] , [ 1262235600000 , -84.529748348935] , [ 1264914000000 , -83.837470195508] , [ 1267333200000 , -87.174487671969] , [ 1270008000000 , -90.342293007487] , [ 1272600000000 , -93.550928464991] , [ 1275278400000 , -85.833102140765] , [ 1277870400000 , -79.326501831592] , [ 1280548800000 , -87.986196903537] , [ 1283227200000 , -85.397862121771] , [ 1285819200000 , -94.738167050020] , [ 1288497600000 , -98.661952897151] , [ 1291093200000 , -99.609665952708] , [ 1293771600000 , -103.57099836183] , [ 1296450000000 , -104.04353411322] , [ 1298869200000 , -108.21382792587] , [ 1301544000000 , -108.74006900920] , [ 1304136000000 , -112.07766650960] , [ 1306814400000 , -109.63328199118] , [ 1309406400000 , -106.53578966772] , [ 1312084800000 , -103.16480871469] , [ 1314763200000 , -95.945078001828] , [ 1317355200000 , -81.226687340874] , [ 1320033600000 , -90.782206596168] , [ 1322629200000 , -89.484445370113] , [ 1325307600000 , -88.514723135326] , [ 1327986000000 , -93.381292724320] , [ 1330491600000 , -97.529705609172] , [ 1333166400000 , -99.520481439189] , [ 1335758400000 , -99.430184898669] , [ 1338436800000 , -93.349934521973] , [ 1341028800000 , -95.858475286491] , [ 1343707200000 , -95.522755836605] , [ 1346385600000 , -98.503848862036] , [ 1348977600000 , -101.49415251896] , [ 1351656000000 , -101.50099325672] , [ 1354251600000 , -99.487094927489]]
|
||||
,
|
||||
mean: -60
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
key: "Gross",
|
||||
mean: 125,
|
||||
values: [ [ 1083297600000 , -3.7454058855943] , [ 1085976000000 , -3.6096667436314] , [ 1088568000000 , -0.8440003934950] , [ 1091246400000 , 2.0921565171691] , [ 1093924800000 , 3.5874194844361] , [ 1096516800000 , 13.742776534056] , [ 1099195200000 , 13.212577494462] , [ 1101790800000 , 24.567562260634] , [ 1104469200000 , 34.543699343650] , [ 1107147600000 , 36.438736927704] , [ 1109566800000 , 46.453174659855] , [ 1112245200000 , 43.825369235440] , [ 1114833600000 , 32.036699833653] , [ 1117512000000 , 41.191928040141] , [ 1120104000000 , 40.301151852023] , [ 1122782400000 , 54.922174023466] , [ 1125460800000 , 49.538009616222] , [ 1128052800000 , 61.911998981277] , [ 1130734800000 , 56.139287982733] , [ 1133326800000 , 71.780099623014] , [ 1136005200000 , 78.474613851439] , [ 1138683600000 , 90.069363092366] , [ 1141102800000 , 87.449910167102] , [ 1143781200000 , 87.030640692381] , [ 1146369600000 , 87.053437436941] , [ 1149048000000 , 76.263029236276] , [ 1151640000000 , 72.995735254929] , [ 1154318400000 , 63.349908186291] , [ 1156996800000 , 66.253474132320] , [ 1159588800000 , 75.943546587481] , [ 1162270800000 , 93.889549035453] , [ 1164862800000 , 106.18074433002] , [ 1167541200000 , 116.39729488562] , [ 1170219600000 , 129.09440567885] , [ 1172638800000 , 123.07049577958] , [ 1175313600000 , 129.38531055124] , [ 1177905600000 , 132.05431954171] , [ 1180584000000 , 148.86060871993] , [ 1183176000000 , 157.06946698484] , [ 1185854400000 , 155.12909573880] , [ 1188532800000 , 155.14737474392] , [ 1191124800000 , 159.70646945738] , [ 1193803200000 , 166.44021916278] , [ 1196398800000 , 159.05963386166] , [ 1199077200000 , 151.38121182455] , [ 1201755600000 , 132.02441123108] , [ 1204261200000 , 121.93110210702] , [ 1206936000000 , 112.64545460548] , [ 1209528000000 , 122.17722331147] , [ 1212206400000 , 133.65410878087] , [ 1214798400000 , 120.20304048123] , [ 1217476800000 , 123.06288589052] , [ 1220155200000 , 125.33598074057] , [ 1222747200000 , 103.50539786253] , [ 1225425600000 , 85.917420810943] , [ 1228021200000 , 71.250132356683] , [ 1230699600000 , 71.308439405118] , [ 1233378000000 , 52.287271484242] , [ 1235797200000 , 30.329193047772] , [ 1238472000000 , 44.133440571375] , [ 1241064000000 , 77.654211210456] , [ 1243742400000 , 73.749802969425] , [ 1246334400000 , 70.337666717565] , [ 1249012800000 , 102.69722724876] , [ 1251691200000 , 117.63589109350] , [ 1254283200000 , 128.55351774786] , [ 1256961600000 , 119.21420882198] , [ 1259557200000 , 139.32979337027] , [ 1262235600000 , 149.71606246357] , [ 1264914000000 , 144.42340669795] , [ 1267333200000 , 161.64446359053] , [ 1270008000000 , 180.23071774437] , [ 1272600000000 , 199.09511476051] , [ 1275278400000 , 180.10778306442] , [ 1277870400000 , 158.50237284410] , [ 1280548800000 , 177.57353623850] , [ 1283227200000 , 162.91091118751] , [ 1285819200000 , 183.41053361910] , [ 1288497600000 , 194.03065670573] , [ 1291093200000 , 201.23297214328] , [ 1293771600000 , 222.60154078445] , [ 1296450000000 , 233.35556801977] , [ 1298869200000 , 231.22452435045] , [ 1301544000000 , 237.84432503045] , [ 1304136000000 , 235.55799131184] , [ 1306814400000 , 232.11873570751] , [ 1309406400000 , 226.62381538123] , [ 1312084800000 , 219.34811113539] , [ 1314763200000 , 198.69242285581] , [ 1317355200000 , 168.90235629066] , [ 1320033600000 , 202.64725756733] , [ 1322629200000 , 203.05389378105] , [ 1325307600000 , 204.85986680865] , [ 1327986000000 , 229.77085616585] , [ 1330491600000 , 239.65202435959] , [ 1333166400000 , 242.33012622734] , [ 1335758400000 , 234.11773262149] , [ 1338436800000 , 221.47846307887] , [ 1341028800000 , 216.98308827912] , [ 1343707200000 , 218.37781386755] , [ 1346385600000 , 229.39368622736] , [ 1348977600000 , 230.54656412916] , [ 1351656000000 , 243.06087025523] , [ 1354251600000 , 244.24733578385]]
|
||||
},
|
||||
{
|
||||
key: "S&P 1500",
|
||||
values: [ [ 1083297600000 , -1.7798428181819] , [ 1085976000000 , -0.36883324836999] , [ 1088568000000 , 1.7312581046040] , [ 1091246400000 , -1.8356125950460] , [ 1093924800000 , -1.5396564170877] , [ 1096516800000 , -0.16867791409247] , [ 1099195200000 , 1.3754263993413] , [ 1101790800000 , 5.8171640898041] , [ 1104469200000 , 9.4350145241608] , [ 1107147600000 , 6.7649081510160] , [ 1109566800000 , 9.1568499314776] , [ 1112245200000 , 7.2485090994419] , [ 1114833600000 , 4.8762222306595] , [ 1117512000000 , 8.5992339354652] , [ 1120104000000 , 9.0896517982086] , [ 1122782400000 , 13.394644048577] , [ 1125460800000 , 12.311842010760] , [ 1128052800000 , 13.221003650717] , [ 1130734800000 , 11.218481009206] , [ 1133326800000 , 15.565352598445] , [ 1136005200000 , 15.623703865926] , [ 1138683600000 , 19.275255326383] , [ 1141102800000 , 19.432433717836] , [ 1143781200000 , 21.232881244655] , [ 1146369600000 , 22.798299192958] , [ 1149048000000 , 19.006125095476] , [ 1151640000000 , 19.151889158536] , [ 1154318400000 , 19.340022855452] , [ 1156996800000 , 22.027934841859] , [ 1159588800000 , 24.903300681329] , [ 1162270800000 , 29.146492833877] , [ 1164862800000 , 31.781626082589] , [ 1167541200000 , 33.358770738428] , [ 1170219600000 , 35.622684613497] , [ 1172638800000 , 33.332821711366] , [ 1175313600000 , 34.878748635832] , [ 1177905600000 , 40.582332613844] , [ 1180584000000 , 45.719535502920] , [ 1183176000000 , 43.239344722386] , [ 1185854400000 , 38.550955100342] , [ 1188532800000 , 40.585368816283] , [ 1191124800000 , 45.601374057981] , [ 1193803200000 , 48.051404337892] , [ 1196398800000 , 41.582581696032] , [ 1199077200000 , 40.650580792748] , [ 1201755600000 , 32.252222066493] , [ 1204261200000 , 28.106390258553] , [ 1206936000000 , 27.532698196687] , [ 1209528000000 , 33.986390463852] , [ 1212206400000 , 36.302660526438] , [ 1214798400000 , 25.015574480172] , [ 1217476800000 , 23.989494069029] , [ 1220155200000 , 25.934351445531] , [ 1222747200000 , 14.627592011699] , [ 1225425600000 , -5.2249403809749] , [ 1228021200000 , -12.330933408050] , [ 1230699600000 , -11.000291508188] , [ 1233378000000 , -18.563864948088] , [ 1235797200000 , -27.213097001687] , [ 1238472000000 , -20.834133840523] , [ 1241064000000 , -12.717886701719] , [ 1243742400000 , -8.1644613083526] , [ 1246334400000 , -7.9108408918201] , [ 1249012800000 , -0.77002391591209] , [ 1251691200000 , 2.8243816569672] , [ 1254283200000 , 6.8761411421070] , [ 1256961600000 , 4.5060912230294] , [ 1259557200000 , 10.487179794349] , [ 1262235600000 , 13.251375597594] , [ 1264914000000 , 9.2207594803415] , [ 1267333200000 , 12.836276936538] , [ 1270008000000 , 19.816793904978] , [ 1272600000000 , 22.156787167211] , [ 1275278400000 , 12.518039090576] , [ 1277870400000 , 6.4253587440854] , [ 1280548800000 , 13.847372028409] , [ 1283227200000 , 8.5454736090364] , [ 1285819200000 , 18.542801953304] , [ 1288497600000 , 23.037064683183] , [ 1291093200000 , 23.517422401888] , [ 1293771600000 , 31.804723416068] , [ 1296450000000 , 34.778247386072] , [ 1298869200000 , 39.584883855230] , [ 1301544000000 , 40.080647664875] , [ 1304136000000 , 44.180050667889] , [ 1306814400000 , 42.533535927221] , [ 1309406400000 , 40.105374449011] , [ 1312084800000 , 37.014659267156] , [ 1314763200000 , 29.263745084262] , [ 1317355200000 , 19.637463417584] , [ 1320033600000 , 33.157645345770] , [ 1322629200000 , 32.895053150988] , [ 1325307600000 , 34.111544824647] , [ 1327986000000 , 40.453985817473] , [ 1330491600000 , 46.435700783313] , [ 1333166400000 , 51.062385488671] , [ 1335758400000 , 50.130448220658] , [ 1338436800000 , 41.035476682018] , [ 1341028800000 , 46.591932296457] , [ 1343707200000 , 48.349391180634] , [ 1346385600000 , 51.913011286919] , [ 1348977600000 , 55.747238313752] , [ 1351656000000 , 52.991824077209] , [ 1354251600000 , 49.556311883284]]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return [
|
||||
{
|
||||
key: "Series 1",
|
||||
values: [ [ 1025409600000 , 0] , [ 1028088000000 , -6.3382185140371] , [ 1030766400000 , -5.9507873460847] , [ 1033358400000 , -11.569146943813] , [ 1036040400000 , -5.4767332317425] , [ 1038632400000 , 0.50794682203014] , [ 1041310800000 , -5.5310285460542] , [ 1043989200000 , -5.7838296963382] , [ 1046408400000 , -7.3249341615649] , [ 1049086800000 , -6.7078630712489] , [ 1051675200000 , 0.44227126150934] , [ 1054353600000 , 7.2481659343222] , [ 1056945600000 , 9.2512381306992] , [ 1059624000000 , 11.341210982529] , [ 1062302400000 , 14.734820409020] , [ 1064894400000 , 12.387148007542] , [ 1067576400000 , 18.436471461827] , [ 1070168400000 , 19.830742266977] , [ 1072846800000 , 22.643205829887] , [ 1075525200000 , 26.743156781239] , [ 1078030800000 , 29.597478802228] , [ 1080709200000 , 30.831697585341] , [ 1083297600000 , 28.054068024708] , [ 1085976000000 , 29.294079423832] , [ 1088568000000 , 30.269264061274] , [ 1091246400000 , 24.934526898906] , [ 1093924800000 , 24.265982759406] , [ 1096516800000 , 27.217794897473] , [ 1099195200000 , 30.802601992077] , [ 1101790800000 , 36.331003758254] , [ 1104469200000 , 43.142498700060] , [ 1107147600000 , 40.558263931958] , [ 1109566800000 , 42.543622385800] , [ 1112245200000 , 41.683584710331] , [ 1114833600000 , 36.375367302328] , [ 1117512000000 , 40.719688980730] , [ 1120104000000 , 43.897963036919] , [ 1122782400000 , 49.797033975368] , [ 1125460800000 , 47.085993935989] , [ 1128052800000 , 46.601972859745] , [ 1130734800000 , 41.567784572762] , [ 1133326800000 , 47.296923737245] , [ 1136005200000 , 47.642969612080] , [ 1138683600000 , 50.781515820954] , [ 1141102800000 , 52.600229204305] , [ 1143781200000 , 55.599684490628] , [ 1146369600000 , 57.920388436633] , [ 1149048000000 , 53.503593218971] , [ 1151640000000 , 53.522973979964] , [ 1154318400000 , 49.846822298548] , [ 1156996800000 , 54.721341614650] , [ 1159588800000 , 58.186236223191] , [ 1162270800000 , 63.908065540997] , [ 1164862800000 , 69.767285129367] , [ 1167541200000 , 72.534013373592] , [ 1170219600000 , 77.991819436573] , [ 1172638800000 , 78.143584404990] , [ 1175313600000 , 83.702398665233] , [ 1177905600000 , 91.140859312418] , [ 1180584000000 , 98.590960607028] , [ 1183176000000 , 96.245634754228] , [ 1185854400000 , 92.326364432615] , [ 1188532800000 , 97.068765332230] , [ 1191124800000 , 105.81025556260] , [ 1193803200000 , 114.38348777791] , [ 1196398800000 , 103.59604949810] , [ 1199077200000 , 101.72488429307] , [ 1201755600000 , 89.840147735028] , [ 1204261200000 , 86.963597532664] , [ 1206936000000 , 84.075505208491] , [ 1209528000000 , 93.170105645831] , [ 1212206400000 , 103.62838083121] , [ 1214798400000 , 87.458241365091] , [ 1217476800000 , 85.808374141319] , [ 1220155200000 , 93.158054469193] , [ 1222747200000 , 65.973252382360] , [ 1225425600000 , 44.580686638224] , [ 1228021200000 , 36.418977140128] , [ 1230699600000 , 38.727678144761] , [ 1233378000000 , 36.692674173387] , [ 1235797200000 , 30.033022809480] , [ 1238472000000 , 36.707532162718] , [ 1241064000000 , 52.191457688389] , [ 1243742400000 , 56.357883979735] , [ 1246334400000 , 57.629002180305] , [ 1249012800000 , 66.650985790166] , [ 1251691200000 , 70.839243432186] , [ 1254283200000 , 78.731998491499] , [ 1256961600000 , 72.375528540349] , [ 1259557200000 , 81.738387881630] , [ 1262235600000 , 87.539792394232] , [ 1264914000000 , 84.320762662273] , [ 1267333200000 , 90.621278391889] , [ 1270008000000 , 102.47144881651] , [ 1272600000000 , 102.79320353429] , [ 1275278400000 , 90.529736050479] , [ 1277870400000 , 76.580859994531] , [ 1280548800000 , 86.548979376972] , [ 1283227200000 , 81.879653334089] , [ 1285819200000 , 101.72550015956] , [ 1288497600000 , 107.97964852260] , [ 1291093200000 , 106.16240630785] , [ 1293771600000 , 114.84268599533] , [ 1296450000000 , 121.60793322282] , [ 1298869200000 , 133.41437346605] , [ 1301544000000 , 125.46646042904] , [ 1304136000000 , 129.76784954301] , [ 1306814400000 , 128.15798861044] , [ 1309406400000 , 121.92388706072] , [ 1312084800000 , 116.70036100870] , [ 1314763200000 , 88.367701837033] , [ 1317355200000 , 59.159665765725] , [ 1320033600000 , 79.793568139753] , [ 1322629200000 , 75.903834028417] , [ 1325307600000 , 72.704218209157] , [ 1327986000000 , 84.936990804097] , [ 1330491600000 , 93.388148670744]]
|
||||
},
|
||||
{
|
||||
key: "Series 2",
|
||||
values: [ [ 1025409600000 , 0] , [ 1028088000000 , 0] , [ 1030766400000 , 0] , [ 1033358400000 , 0] , [ 1036040400000 , 0] , [ 1038632400000 , 0] , [ 1041310800000 , 0] , [ 1043989200000 , 0] , [ 1046408400000 , 0] , [ 1049086800000 , 0] , [ 1051675200000 , 0] , [ 1054353600000 , 0] , [ 1056945600000 , 0] , [ 1059624000000 , 0] , [ 1062302400000 , 0] , [ 1064894400000 , 0] , [ 1067576400000 , 0] , [ 1070168400000 , 0] , [ 1072846800000 , 0] , [ 1075525200000 , -0.049184266875945] , [ 1078030800000 , -0.10757569491991] , [ 1080709200000 , -0.075601531307242] , [ 1083297600000 , -0.061245277988149] , [ 1085976000000 , -0.068227316401169] , [ 1088568000000 , -0.11242758058502] , [ 1091246400000 , -0.074848439408270] , [ 1093924800000 , -0.11465623676497] , [ 1096516800000 , -0.24370633342416] , [ 1099195200000 , -0.21523268478893] , [ 1101790800000 , -0.37859370911822] , [ 1104469200000 , -0.41932884345151] , [ 1107147600000 , -0.45393735984802] , [ 1109566800000 , -0.50868179522598] , [ 1112245200000 , -0.48164396881207] , [ 1114833600000 , -0.41605962887194] , [ 1117512000000 , -0.48490348490240] , [ 1120104000000 , -0.55071036101311] , [ 1122782400000 , -0.67489170505394] , [ 1125460800000 , -0.74978070939342] , [ 1128052800000 , -0.86395050745343] , [ 1130734800000 , -0.78524898506764] , [ 1133326800000 , -0.99800440950854] , [ 1136005200000 , -1.1177951153878] , [ 1138683600000 , -1.4119975432964] , [ 1141102800000 , -1.2409959736465] , [ 1143781200000 , -1.3088936375431] , [ 1146369600000 , -1.5495785469683] , [ 1149048000000 , -1.1563414981293] , [ 1151640000000 , -0.87192471725994] , [ 1154318400000 , -0.84073995183442] , [ 1156996800000 , -0.88761892867370] , [ 1159588800000 , -0.81748513917485] , [ 1162270800000 , -1.2874081041274] , [ 1164862800000 , -1.9234702981339] , [ 1167541200000 , -1.8377768147648] , [ 1170219600000 , -2.7107654031830] , [ 1172638800000 , -2.6493268125418] , [ 1175313600000 , -3.0814553134551] , [ 1177905600000 , -3.8509837783574] , [ 1180584000000 , -5.2919167850718] , [ 1183176000000 , -5.2297750650773] , [ 1185854400000 , -3.9335668501451] , [ 1188532800000 , -2.3695525190114] , [ 1191124800000 , -2.3084243151854] , [ 1193803200000 , -3.0753680726738] , [ 1196398800000 , -2.2346609938962] , [ 1199077200000 , -3.0598810361615] , [ 1201755600000 , -1.8410154270386] , [ 1204261200000 , -1.6479442038620] , [ 1206936000000 , -1.9293858622780] , [ 1209528000000 , -3.0769590460943] , [ 1212206400000 , -4.2423933501421] , [ 1214798400000 , -2.6951491617768] , [ 1217476800000 , -2.8981825939957] , [ 1220155200000 , -2.9662727940324] , [ 1222747200000 , 0.21556750497498] , [ 1225425600000 , 2.6784995167088] , [ 1228021200000 , 4.1296711248958] , [ 1230699600000 , 3.7311068218734] , [ 1233378000000 , 4.7695330866954] , [ 1235797200000 , 5.1919133040990] , [ 1238472000000 , 4.1025856045660] , [ 1241064000000 , 2.8498939666225] , [ 1243742400000 , 2.8106017222851] , [ 1246334400000 , 2.8456526669963] , [ 1249012800000 , 0.65563070754298] , [ 1251691200000 , -0.30022343874633] , [ 1254283200000 , -1.1600358228964] , [ 1256961600000 , -0.26674408835052] , [ 1259557200000 , -1.4693389757812] , [ 1262235600000 , -2.7855421590594] , [ 1264914000000 , -1.2668244065703] , [ 1267333200000 , -2.5537804115548] , [ 1270008000000 , -4.9144552474502] , [ 1272600000000 , -6.0484408234831] , [ 1275278400000 , -3.3834349033750] , [ 1277870400000 , -0.46752826932523] , [ 1280548800000 , -1.8030186027963] , [ 1283227200000 , -0.99623230097881] , [ 1285819200000 , -3.3475370235594] , [ 1288497600000 , -3.8187026520342] , [ 1291093200000 , -4.2354146250353] , [ 1293771600000 , -5.6795404292885] , [ 1296450000000 , -6.2928665328172] , [ 1298869200000 , -6.8549277434419] , [ 1301544000000 , -6.9925308360918] , [ 1304136000000 , -8.3216548655839] , [ 1306814400000 , -7.7682867271435] , [ 1309406400000 , -6.9244213301058] , [ 1312084800000 , -5.7407624451404] , [ 1314763200000 , -2.1813149077927] , [ 1317355200000 , 2.9407596325999] , [ 1320033600000 , -1.1130607112134] , [ 1322629200000 , -2.0274822307752] , [ 1325307600000 , -1.8372559072154] , [ 1327986000000 , -4.0732815531148] , [ 1330491600000 , -6.4417038470291]]
|
||||
},
|
||||
{
|
||||
key: "Series 3",
|
||||
values: [ [ 1025409600000 , 0] , [ 1028088000000 , -6.3382185140371] , [ 1030766400000 , -5.9507873460847] , [ 1033358400000 , -11.569146943813] , [ 1036040400000 , -5.4767332317425] , [ 1038632400000 , 0.50794682203014] , [ 1041310800000 , -5.5310285460542] , [ 1043989200000 , -5.7838296963382] , [ 1046408400000 , -7.3249341615649] , [ 1049086800000 , -6.7078630712489] , [ 1051675200000 , 0.44227126150934] , [ 1054353600000 , 7.2481659343222] , [ 1056945600000 , 9.2512381306992] , [ 1059624000000 , 11.341210982529] , [ 1062302400000 , 14.734820409020] , [ 1064894400000 , 12.387148007542] , [ 1067576400000 , 18.436471461827] , [ 1070168400000 , 19.830742266977] , [ 1072846800000 , 22.643205829887] , [ 1075525200000 , 26.693972514363] , [ 1078030800000 , 29.489903107308] , [ 1080709200000 , 30.756096054034] , [ 1083297600000 , 27.992822746720] , [ 1085976000000 , 29.225852107431] , [ 1088568000000 , 30.156836480689] , [ 1091246400000 , 24.859678459498] , [ 1093924800000 , 24.151326522641] , [ 1096516800000 , 26.974088564049] , [ 1099195200000 , 30.587369307288] , [ 1101790800000 , 35.952410049136] , [ 1104469200000 , 42.723169856608] , [ 1107147600000 , 40.104326572110] , [ 1109566800000 , 42.034940590574] , [ 1112245200000 , 41.201940741519] , [ 1114833600000 , 35.959307673456] , [ 1117512000000 , 40.234785495828] , [ 1120104000000 , 43.347252675906] , [ 1122782400000 , 49.122142270314] , [ 1125460800000 , 46.336213226596] , [ 1128052800000 , 45.738022352292] , [ 1130734800000 , 40.782535587694] , [ 1133326800000 , 46.298919327736] , [ 1136005200000 , 46.525174496692] , [ 1138683600000 , 49.369518277658] , [ 1141102800000 , 51.359233230659] , [ 1143781200000 , 54.290790853085] , [ 1146369600000 , 56.370809889665] , [ 1149048000000 , 52.347251720842] , [ 1151640000000 , 52.651049262704] , [ 1154318400000 , 49.006082346714] , [ 1156996800000 , 53.833722685976] , [ 1159588800000 , 57.368751084016] , [ 1162270800000 , 62.620657436870] , [ 1164862800000 , 67.843814831233] , [ 1167541200000 , 70.696236558827] , [ 1170219600000 , 75.281054033390] , [ 1172638800000 , 75.494257592448] , [ 1175313600000 , 80.620943351778] , [ 1177905600000 , 87.289875534061] , [ 1180584000000 , 93.299043821956] , [ 1183176000000 , 91.015859689151] , [ 1185854400000 , 88.392797582470] , [ 1188532800000 , 94.699212813219] , [ 1191124800000 , 103.50183124741] , [ 1193803200000 , 111.30811970524] , [ 1196398800000 , 101.36138850420] , [ 1199077200000 , 98.665003256909] , [ 1201755600000 , 87.999132307989] , [ 1204261200000 , 85.315653328802] , [ 1206936000000 , 82.146119346213] , [ 1209528000000 , 90.093146599737] , [ 1212206400000 , 99.385987481068] , [ 1214798400000 , 84.763092203314] , [ 1217476800000 , 82.910191547323] , [ 1220155200000 , 90.191781675161] , [ 1222747200000 , 66.188819887335] , [ 1225425600000 , 47.259186154933] , [ 1228021200000 , 40.548648265024] , [ 1230699600000 , 42.458784966634] , [ 1233378000000 , 41.462207260082] , [ 1235797200000 , 35.224936113579] , [ 1238472000000 , 40.810117767284] , [ 1241064000000 , 55.041351655012] , [ 1243742400000 , 59.168485702020] , [ 1246334400000 , 60.474654847301] , [ 1249012800000 , 67.306616497709] , [ 1251691200000 , 70.539019993440] , [ 1254283200000 , 77.571962668603] , [ 1256961600000 , 72.108784451998] , [ 1259557200000 , 80.269048905849] , [ 1262235600000 , 84.754250235173] , [ 1264914000000 , 83.053938255703] , [ 1267333200000 , 88.067497980334] , [ 1270008000000 , 97.556993569060] , [ 1272600000000 , 96.744762710807] , [ 1275278400000 , 87.146301147104] , [ 1277870400000 , 76.113331725206] , [ 1280548800000 , 84.745960774176] , [ 1283227200000 , 80.883421033110] , [ 1285819200000 , 98.377963136001] , [ 1288497600000 , 104.16094587057] , [ 1291093200000 , 101.92699168281] , [ 1293771600000 , 109.16314556604] , [ 1296450000000 , 115.31506669000] , [ 1298869200000 , 126.55944572261] , [ 1301544000000 , 118.47392959295] , [ 1304136000000 , 121.44619467743] , [ 1306814400000 , 120.38970188330] , [ 1309406400000 , 114.99946573061] , [ 1312084800000 , 110.95959856356] , [ 1314763200000 , 86.186386929240] , [ 1317355200000 , 62.100425398325] , [ 1320033600000 , 78.680507428540] , [ 1322629200000 , 73.876351797642] , [ 1325307600000 , 70.866962301942] , [ 1327986000000 , 80.863709250982] , [ 1330491600000 , 86.946444823715]]
|
||||
},
|
||||
{
|
||||
key: "Series 4",
|
||||
values: [ [ 1025409600000 , -7.0674410638835] , [ 1028088000000 , -14.663359292964] , [ 1030766400000 , -14.104393060540] , [ 1033358400000 , -23.114477037218] , [ 1036040400000 , -16.774256687841] , [ 1038632400000 , -11.902028464000] , [ 1041310800000 , -16.883038668422] , [ 1043989200000 , -19.104223676831] , [ 1046408400000 , -20.420523282736] , [ 1049086800000 , -19.660555051587] , [ 1051675200000 , -13.106911231646] , [ 1054353600000 , -8.2448460302143] , [ 1056945600000 , -7.0313058730976] , [ 1059624000000 , -5.1485118700389] , [ 1062302400000 , -3.0011028761469] , [ 1064894400000 , -4.1367265281467] , [ 1067576400000 , 1.5425209565025] , [ 1070168400000 , 2.7673533607299] , [ 1072846800000 , 7.7077114755360] , [ 1075525200000 , 9.7565015112434] , [ 1078030800000 , 11.396888609473] , [ 1080709200000 , 10.013964745578] , [ 1083297600000 , 8.0558890950562] , [ 1085976000000 , 9.6081966657458] , [ 1088568000000 , 11.918590426432] , [ 1091246400000 , 7.9945345523982] , [ 1093924800000 , 8.3201276776796] , [ 1096516800000 , 9.8283954846342] , [ 1099195200000 , 11.527125859650] , [ 1101790800000 , 16.413657596527] , [ 1104469200000 , 20.393798297928] , [ 1107147600000 , 17.456308413907] , [ 1109566800000 , 20.087778400999] , [ 1112245200000 , 17.988336990817] , [ 1114833600000 , 15.378490151331] , [ 1117512000000 , 19.474322935730] , [ 1120104000000 , 20.013851070354] , [ 1122782400000 , 24.749943726975] , [ 1125460800000 , 23.558710274826] , [ 1128052800000 , 24.558915040889] , [ 1130734800000 , 22.355860488034] , [ 1133326800000 , 27.138026265756] , [ 1136005200000 , 27.202220808591] , [ 1138683600000 , 31.219437344964] , [ 1141102800000 , 31.392355525125] , [ 1143781200000 , 33.373099232542] , [ 1146369600000 , 35.095277582309] , [ 1149048000000 , 30.923356507615] , [ 1151640000000 , 31.083717332561] , [ 1154318400000 , 31.290690671561] , [ 1156996800000 , 34.247769216679] , [ 1159588800000 , 37.411073177620] , [ 1162270800000 , 42.079177096411] , [ 1164862800000 , 44.978191659648] , [ 1167541200000 , 46.713271025310] , [ 1170219600000 , 49.203892437699] , [ 1172638800000 , 46.684723471826] , [ 1175313600000 , 48.385458973500] , [ 1177905600000 , 54.660197840305] , [ 1180584000000 , 60.311838415602] , [ 1183176000000 , 57.583282204682] , [ 1185854400000 , 52.425398898751] , [ 1188532800000 , 54.663538086985] , [ 1191124800000 , 60.181844325224] , [ 1193803200000 , 62.877219773621] , [ 1196398800000 , 55.760611512951] , [ 1199077200000 , 54.735280367784] , [ 1201755600000 , 45.495912959474] , [ 1204261200000 , 40.934919015876] , [ 1206936000000 , 40.303777633187] , [ 1209528000000 , 47.403740368773] , [ 1212206400000 , 49.951960898839] , [ 1214798400000 , 37.534590035098] , [ 1217476800000 , 36.405758293321] , [ 1220155200000 , 38.545373001858] , [ 1222747200000 , 26.106358664455] , [ 1225425600000 , 4.2658006768744] , [ 1228021200000 , -3.5517839867557] , [ 1230699600000 , -2.0878920761513] , [ 1233378000000 , -10.408879093829] , [ 1235797200000 , -19.924242196038] , [ 1238472000000 , -12.906491912782] , [ 1241064000000 , -3.9774866468346] , [ 1243742400000 , 1.0319171601402] , [ 1246334400000 , 1.3109350357718] , [ 1249012800000 , 9.1668309061935] , [ 1251691200000 , 13.121178985954] , [ 1254283200000 , 17.578680237511] , [ 1256961600000 , 14.971294355085] , [ 1259557200000 , 21.551327027338] , [ 1262235600000 , 24.592328423819] , [ 1264914000000 , 20.158087829555] , [ 1267333200000 , 24.135661929185] , [ 1270008000000 , 31.815205405903] , [ 1272600000000 , 34.389524768466] , [ 1275278400000 , 23.785555857522] , [ 1277870400000 , 17.082756649072] , [ 1280548800000 , 25.248007727100] , [ 1283227200000 , 19.415179069165] , [ 1285819200000 , 30.413636349327] , [ 1288497600000 , 35.357952964550] , [ 1291093200000 , 35.886413535859] , [ 1293771600000 , 45.003601951959] , [ 1296450000000 , 48.274893564020] , [ 1298869200000 , 53.562864914648] , [ 1301544000000 , 54.108274337412] , [ 1304136000000 , 58.618190111927] , [ 1306814400000 , 56.806793965598] , [ 1309406400000 , 54.135477252994] , [ 1312084800000 , 50.735258942442] , [ 1314763200000 , 42.208170945813] , [ 1317355200000 , 31.617916826724] , [ 1320033600000 , 46.492005006737] , [ 1322629200000 , 46.203116922145] , [ 1325307600000 , 47.541427643137] , [ 1327986000000 , 54.518998440993] , [ 1330491600000 , 61.099720234693]]
|
||||
}
|
||||
]
|
||||
|
||||
/*
|
||||
.map(function(line) {
|
||||
line.values = line.values.map(function(d) { return {x: d[0], y: d[1]/100 }});
|
||||
return line;
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,117 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chart1 svg{
|
||||
height: 500px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
margin: 10px;
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1">
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<!-- including all the components so I don't have to minify every time I test in development -->
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/discreteBar.js"></script>
|
||||
<script src="../src/models/discreteBarChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
historicalBarChart = [
|
||||
{
|
||||
key: "Cumulative Return",
|
||||
values: [
|
||||
{
|
||||
"label" : "A" ,
|
||||
"value" : 29.765957771107
|
||||
} ,
|
||||
{
|
||||
"label" : "B" ,
|
||||
"value" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "C" ,
|
||||
"value" : 32.807804682612
|
||||
} ,
|
||||
{
|
||||
"label" : "D" ,
|
||||
"value" : 196.45946739256
|
||||
} ,
|
||||
{
|
||||
"label" : "E" ,
|
||||
"value" : 0.19434030906893
|
||||
} ,
|
||||
{
|
||||
"label" : "F" ,
|
||||
"value" : 98.079782601442
|
||||
} ,
|
||||
{
|
||||
"label" : "G" ,
|
||||
"value" : 13.925743130903
|
||||
} ,
|
||||
{
|
||||
"label" : "H" ,
|
||||
"value" : 5.1387322875705
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.discreteBarChart()
|
||||
.x(function(d) { return d.label })
|
||||
.y(function(d) { return d.value })
|
||||
.staggerLabels(true)
|
||||
//.staggerLabels(historicalBarChart[0].values.length > 8)
|
||||
.tooltips(false)
|
||||
.showValues(true)
|
||||
.transitionDuration(250)
|
||||
;
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(historicalBarChart)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,158 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<svg id="test1"></svg>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/models/historicalBar.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
var chart = nv.models.historicalBar()
|
||||
.padData(true)
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select("#test1")
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinData())
|
||||
.transition()
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
|
||||
graph.dispatch.on('elementMouseover', function(e) {
|
||||
var offsetElement = document.getElementById("chart"),
|
||||
left = e.pos[0],
|
||||
top = e.pos[1];
|
||||
|
||||
/*
|
||||
var content = '<h3>' + e.label + '</h3>' +
|
||||
'<p>' +
|
||||
e.value +
|
||||
'</p>';
|
||||
*/
|
||||
|
||||
var content = '<p>' + e.point.y + '</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
|
||||
});
|
||||
|
||||
graph.dispatch.on('elementMouseout', function(e) {
|
||||
nv.tooltip.cleanup();
|
||||
});
|
||||
|
||||
/*
|
||||
graph.dispatch.on('elementClick', function(e) {
|
||||
console.log("Bar Click",e);
|
||||
});
|
||||
|
||||
graph.dispatch.on('chartClick', function(e) {
|
||||
console.log("Chart Click",e);
|
||||
});
|
||||
|
||||
graph.dispatch.on('chartClick', function(e) {
|
||||
console.log('Click Switching to');
|
||||
if (td === 0) {
|
||||
d3.select("#test1")
|
||||
.datum(testdata2)
|
||||
.call(graph);
|
||||
td = 1;
|
||||
|
||||
} else {
|
||||
d3.select("#test1")
|
||||
.datum(testdata)
|
||||
.call(graph);
|
||||
td = 0;
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
window.onresize = function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height)
|
||||
|
||||
d3.select("#test1")
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(graph);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//Simple test data generators
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
function sinData() {
|
||||
var sin = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,106 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body class='with-3d-shadow with-transitions'>
|
||||
|
||||
<div style="width: 100%; height: 400px;">
|
||||
<svg id="test1"></svg>
|
||||
</div>
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/historicalBar.js"></script>
|
||||
<script src="../src/models/historicalBarChart.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var chart;
|
||||
nv.addGraph(function() {
|
||||
chart = nv.models.historicalBarChart();
|
||||
chart
|
||||
.margin({left: 100, bottom: 100})
|
||||
.x(function(d,i) { return i })
|
||||
.transitionDuration(250)
|
||||
;
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
chart.xAxis
|
||||
.axisLabel("Time (s)")
|
||||
.tickFormat(d3.format(',.1f'));
|
||||
|
||||
chart.yAxis
|
||||
.axisLabel('Voltage (v)')
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
chart.showXAxis(true);
|
||||
|
||||
d3.select('#test1')
|
||||
.datum(sinData())
|
||||
.transition().duration(0)
|
||||
.call(chart);
|
||||
|
||||
//TODO: Figure out a good way to do this automatically
|
||||
nv.utils.windowResize(chart.update);
|
||||
//nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
|
||||
|
||||
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
//Simple test data generators
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
function sinData() {
|
||||
var sin = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,163 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
/*
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
svg > g > path {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nv-horizonBackground {
|
||||
fill: none;
|
||||
stroke: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#horizon-controls {
|
||||
position: absolute;
|
||||
width: 940px;
|
||||
padding: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#horizon-bands {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="wrap">
|
||||
|
||||
<div id="horizon-controls">
|
||||
<input name="mode" type="radio" value="mirror" id="horizon-mode-mirror" checked><label for="horizon-mode-mirror"> Mirror</label>
|
||||
<input name="mode" type="radio" value="offset" id="horizon-mode-offset"><label for="horizon-mode-offset"> Offset</label>
|
||||
<span id="horizon-bands"><span id="horizon-bands-value">1</span> <button class="first">−</button><button class="last">+</button></span>
|
||||
</div>
|
||||
<div><svg id="chart1"></svg></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../lib/horizon.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
//TODO: create a nv.models.horizonChart model
|
||||
// (if need be an nv.models.horizon model as well, but might get away with just using d3.horizon)
|
||||
// the horizontChart model should have a "tooltip" like functionality that shows a point over the
|
||||
// current value based on the mouse's x position
|
||||
|
||||
var width = 960,
|
||||
height = 300;
|
||||
|
||||
nv.addGraph(function() {
|
||||
var data = sine();
|
||||
|
||||
var chart = d3.horizon()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.bands(1)
|
||||
.mode("mirror")
|
||||
.interpolate("basis");
|
||||
|
||||
var svg = d3.select('#chart1').attr('width', width).attr('height', height);
|
||||
|
||||
var bg = svg.append('rect').attr('class', 'nv-horizonBackground').attr('height', height).attr('width', width);
|
||||
|
||||
svg.datum(data).call(chart);
|
||||
|
||||
var point = svg.append('circle').attr('class', 'nv-hoverPoint')
|
||||
.attr('r', '4')
|
||||
.attr('cx', -3)
|
||||
.attr('cy', -3);
|
||||
|
||||
// Enable mode buttons.
|
||||
d3.selectAll("#horizon-controls input[name=mode]").on("change", function() {
|
||||
svg.call(chart.duration(0).mode(this.value));
|
||||
});
|
||||
|
||||
// Enable bands buttons.
|
||||
d3.selectAll("#horizon-bands button").data([-1, 1]).on("click", function(d) {
|
||||
var n = Math.max(1, chart.bands() + d);
|
||||
d3.select("#horizon-bands-value").text(n);
|
||||
svg.call(chart.duration(1000).bands(n).height(height / n));
|
||||
|
||||
//just updating point temporarily here to have it not be visible on band change until user moves his mouse over the chart
|
||||
point
|
||||
.attr('cx', -3)
|
||||
.attr('cy', -3)
|
||||
});
|
||||
|
||||
|
||||
//****THE CHANGES MADE TO THIS EXAMPLE BY ME ARE VERY UGLY.... TODO: Fix/Clean up after all functionality is correct
|
||||
bg.on('mousemove', function() {
|
||||
var m1 = d3.mouse(this);
|
||||
var x = m1[0];
|
||||
var scales = svg.node().__chart__;
|
||||
var i = Math.round( scales.x.invert(x) );
|
||||
//var y = (data[i][1] < 0 || chart.mode() == 'mirror' ? height : 0) - scales.y(chart.mode() == 'mirror' ? Math.abs(data[i][1]) : data[i][1] );
|
||||
var y = height - scales.y(chart.mode() == 'mirror' ? Math.abs(data[i][1]) : data[i][1] ) - (chart.mode() == 'offset' && data[i][1] < 0 ? height : 0 );
|
||||
var t = scales.t(data[i][1]);
|
||||
var bandRange = scales.y.range()[1];
|
||||
|
||||
y = y % (height / chart.bands());
|
||||
//nv.log(y, height, y % height);
|
||||
|
||||
//nv.log(scales.y.range(), scales.y.domain());
|
||||
|
||||
//nv.log( x, i, data[i], y )
|
||||
//nv.log(scales);
|
||||
|
||||
point
|
||||
.attr('cx', scales.x(i))
|
||||
.attr('cy', y)
|
||||
.attr('transform',
|
||||
'translate(0,' + chart.bands + ')'
|
||||
);
|
||||
|
||||
//var m2 = d3.mouse(d3.select('body').node());
|
||||
//nv.log(m1, m2);
|
||||
//nv.log(d3.event, this, d3.mouse(this));
|
||||
});
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sine() {
|
||||
var sin = [];
|
||||
|
||||
for (var i = 0; i < 200; i++) {
|
||||
sin.push([ i, Math.sin(i/10) + .2 ]);
|
||||
}
|
||||
|
||||
return sin;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
@ -1,127 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="example1" style="width:600px"></div>
|
||||
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/indentedTree.js"></script>
|
||||
<script>
|
||||
|
||||
// THIS API WILL BE CHANGING!! this was ported from a different graphing collection, its only been halfway ported to the nvd3 style
|
||||
|
||||
var testTree = [{
|
||||
key: 'NVD3',
|
||||
url: 'http://novus.github.com/nvd3',
|
||||
values: [
|
||||
{
|
||||
key: "Charts",
|
||||
_values: [
|
||||
{
|
||||
key: "Simple Line",
|
||||
type: "Historical",
|
||||
url: "http://novus.github.com/nvd3/ghpages/line.html"
|
||||
},
|
||||
{
|
||||
key: "Scatter / Bubble",
|
||||
type: "Snapshot",
|
||||
url: "http://novus.github.com/nvd3/ghpages/scatter.html"
|
||||
},
|
||||
{
|
||||
key: "Stacked / Stream / Expanded Area",
|
||||
type: "Historical",
|
||||
url: "http://novus.github.com/nvd3/ghpages/stackedArea.html"
|
||||
},
|
||||
{
|
||||
key: "Discrete Bar",
|
||||
type: "Snapshot",
|
||||
url: "http://novus.github.com/nvd3/ghpages/discreteBar.html"
|
||||
},
|
||||
{
|
||||
key: "Grouped / Stacked Multi-Bar",
|
||||
type: "Snapshot / Historical",
|
||||
url: "http://novus.github.com/nvd3/ghpages/multiBar.html"
|
||||
},
|
||||
{
|
||||
key: "Horizontal Grouped Bar",
|
||||
type: "Snapshot",
|
||||
url: "http://novus.github.com/nvd3/ghpages/multiBarHorizontal.html"
|
||||
},
|
||||
{
|
||||
key: "Line and Bar Combo",
|
||||
type: "Historical",
|
||||
url: "http://novus.github.com/nvd3/ghpages/linePlusBar.html"
|
||||
},
|
||||
{
|
||||
key: "Cumulative Line",
|
||||
type: "Historical",
|
||||
url: "http://novus.github.com/nvd3/ghpages/cumulativeLine.html"
|
||||
},
|
||||
{
|
||||
key: "Line with View Finder",
|
||||
type: "Historical",
|
||||
url: "http://novus.github.com/nvd3/ghpages/lineWithFocus.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: "Chart Components",
|
||||
_values: [
|
||||
{
|
||||
key: "Legend",
|
||||
type: "Universal",
|
||||
url: "http://novus.github.com/nvd3/examples/legend.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}];
|
||||
|
||||
|
||||
|
||||
var testColumns = [
|
||||
{
|
||||
key: 'key',
|
||||
label: 'Name',
|
||||
showCount: true,
|
||||
width: '75%',
|
||||
type: 'text',
|
||||
classes: function(d) { return d.url ? 'clickable name' : 'name' },
|
||||
click: function(d) {
|
||||
if (d.url) window.location.href = d.url;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: 'Type',
|
||||
width: '25%',
|
||||
type: 'text'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.indentedTree()
|
||||
.columns(testColumns);
|
||||
|
||||
d3.select('#example1')
|
||||
.datum(testTree)
|
||||
.call(chart);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,98 +0,0 @@
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><html>
|
||||
<title>NVD3 Examples List</title>
|
||||
<body>
|
||||
<style>
|
||||
body {
|
||||
font-family: Helvetica;
|
||||
/* IE10 Consumer Preview */
|
||||
background-image: -ms-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #DEE2FF 100%);
|
||||
|
||||
/* Mozilla Firefox */
|
||||
background-image: -moz-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #DEE2FF 100%);
|
||||
|
||||
/* Opera */
|
||||
background-image: -o-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #DEE2FF 100%);
|
||||
|
||||
/* Webkit (Safari/Chrome 10) */
|
||||
background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #FFFFFF), color-stop(1, #DEE2FF));
|
||||
|
||||
/* Webkit (Chrome 11+) */
|
||||
background-image: -webkit-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #DEE2FF 100%);
|
||||
|
||||
/* W3C Markup, IE10 Release Preview */
|
||||
background-image: radial-gradient(circle farthest-corner at left top, #FFFFFF 0%, #DEE2FF 100%);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
border-right: solid 1px #ccc;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 8px;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display:block;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
<h2>NVD3 Examples List</h2>
|
||||
<ul>
|
||||
<li><a href="bullet.html">Bullet</a>
|
||||
<li><a href="bulletChart.html">BulletChart</a>
|
||||
<li><a href="crossfilter.html">Crossfilter</a>
|
||||
<li><a href="crossfilterWithDimentions.html">CrossfilterWithDimentions</a>
|
||||
<li><a href="crossfilterWithTables.html">CrossfilterWithTables</a>
|
||||
<li><a href="cumulativeLineChart.html">CumulativeLineChart</a>
|
||||
<li><a href="discreteBarChart.html">DiscreteBarChart</a>
|
||||
<li><a href="historicalBar.html">HistoricalBar</a>
|
||||
<li><a href="historicalBarChart.html">HistoricalBarChart</a>
|
||||
<li><a href="horizon.html">Horizon</a>
|
||||
<li><a href="indentedtree.html">Indentedtree</a>
|
||||
<li><a href="legend.html">Legend</a>
|
||||
<li><a href="line.html">Line</a>
|
||||
<li><a href="lineChart.html">LineChart</a>
|
||||
<li><a href="lineChartSVGResize.html">LineChartSVGResize</a>
|
||||
<li><a href="linePlusBarChart.html">LinePlusBarChart</a>
|
||||
<li><a href="linePlusBarWithFocusChart.html">LinePlusBarWithFocusChart</a>
|
||||
<li><a href="lineWithFisheyeChart.html">LineWithFisheyeChart</a>
|
||||
<li><a href="lineWithFocusChart.html">LineWithFocusChart</a>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="multiBar.html">MultiBar</a>
|
||||
<li><a href="multiBarChart.html">MultiBarChart</a>
|
||||
<li><a href="multiBarHorizontalChart.html">MultiBarHorizontalChart</a>
|
||||
<li><a href="multiChart.html">MultiChart</a>
|
||||
<li><a href="parallelCoordinates.html">ParallelCoordinates</a>
|
||||
<li><a href="pie.html">Pie</a>
|
||||
<li><a href="pieChart.html">PieChart</a>
|
||||
<li><a href="scatter.html">Scatter</a>
|
||||
<li><a href="scatterChart.html">ScatterChart</a>
|
||||
<li><a href="scatterPlusLineChart.html">ScatterPlusLineChart</a>
|
||||
<li><a href="sparkline.html">Sparkline</a>
|
||||
<li><a href="sparklinePlus.html">SparklinePlus</a>
|
||||
<li><a href="stackedArea.html">StackedArea</a>
|
||||
<li><a href="stackedAreaChart.html">StackedAreaChart</a>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<strong>Test pages</strong>
|
||||
<li><a href="../test/lineChartTest.html">Line Chart</a></li>
|
||||
<li><a href="../test/pieChartTest.html">Pie Chart</a></li>
|
||||
<li><a href="../test/ScatterChartTest.html">Scatter Chart</a></li>
|
||||
<li><a href="../test/stackedAreaChartTest.html">Stacked Area Chart</a></li>
|
||||
<li><a href="../test/multiBarChartTest.html">Multibar Chart</a></li>
|
||||
<li><a href="../test/polylinearTest.html">Polylinear Scale Line Chart</a></li>
|
||||
<li><a href="../test/realTimeChartTest.html">Real Time Chart</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,76 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<svg id="test1"></svg>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
//Format A
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = 500,
|
||||
height = 20;
|
||||
|
||||
var chart = nv.models.legend()
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
chart.dispatch.on('legendClick', function(d,i) { console.log(d,i) });
|
||||
|
||||
//chart.xaxis.tickFormat(d3.format(".02f"))
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinAndCos())
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
var chart = graph,
|
||||
height = chart.height();
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('height', height)
|
||||
.call(chart)
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
return [
|
||||
{
|
||||
key: "Sine Wave"
|
||||
},
|
||||
{
|
||||
key: "A Very Long Series Label"
|
||||
},
|
||||
{
|
||||
key: "A Very Long Series Label"
|
||||
},
|
||||
{
|
||||
key: "A Very Long Series Label"
|
||||
},
|
||||
{
|
||||
key: "Cosine Wave"
|
||||
},
|
||||
{
|
||||
key: "Another test label"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,96 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<svg id="test1"></svg>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
//Format A
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
var chart = nv.models.line()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.margin({top: 20, right: 20, bottom: 20, left: 20})
|
||||
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinAndCos())
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
window.onresize = function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40,
|
||||
margin = graph.margin();
|
||||
|
||||
|
||||
if (width < margin.left + margin.right + 20)
|
||||
width = margin.left + margin.right + 20;
|
||||
|
||||
if (height < margin.top + margin.bottom + 20)
|
||||
height = margin.top + margin.bottom + 20;
|
||||
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(graph);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,132 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chart1 svg {
|
||||
height: 500px;
|
||||
min-width: 200px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
margin: 50px;
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
|
||||
}
|
||||
#chart1 {
|
||||
margin-top: 200px;
|
||||
margin-left: 100px;
|
||||
}
|
||||
</style>
|
||||
<body class='with-3d-shadow with-transitions'>
|
||||
|
||||
<div id="chart1" >
|
||||
<svg style="height: 500px;"></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/interactiveLayer.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineChart.js"></script>
|
||||
|
||||
<script>
|
||||
// Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required
|
||||
var chart;
|
||||
|
||||
nv.addGraph(function() {
|
||||
chart = nv.models.lineChart()
|
||||
.options({
|
||||
margin: {left: 100, bottom: 100},
|
||||
x: function(d,i) { return i},
|
||||
showXAxis: true,
|
||||
showYAxis: true,
|
||||
transitionDuration: 250
|
||||
})
|
||||
;
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
chart.xAxis
|
||||
.axisLabel("Time (s)")
|
||||
.tickFormat(d3.format(',.1f'));
|
||||
|
||||
chart.yAxis
|
||||
.axisLabel('Voltage (v)')
|
||||
.tickFormat(d3.format(',.2f'))
|
||||
;
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(sinAndCos())
|
||||
.call(chart);
|
||||
|
||||
//TODO: Figure out a good way to do this automatically
|
||||
nv.utils.windowResize(chart.update);
|
||||
//nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
|
||||
|
||||
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [],
|
||||
rand = [],
|
||||
rand2 = []
|
||||
;
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) }); //the nulls are to show how defined works
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
rand.push({x:i, y: Math.random() / 10});
|
||||
rand2.push({x: i, y: Math.cos(i/10) + Math.random() / 10 })
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
area: true,
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
},
|
||||
{
|
||||
values: rand,
|
||||
key: "Random Points",
|
||||
color: "#2222ff"
|
||||
}
|
||||
,
|
||||
{
|
||||
values: rand2,
|
||||
key: "Random Cosine",
|
||||
color: "#667711"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,151 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div id="chartZoom">
|
||||
<a href="#" id="zoomIn">Zoom In</a> <a href="#" id="zoomOut">Zoom Out</a>
|
||||
</div>
|
||||
|
||||
<div id="chart1" class='with-transitions'>
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.lineChart();
|
||||
var fitScreen = false;
|
||||
var width = 600;
|
||||
var height = 300;
|
||||
var zoom = 1;
|
||||
|
||||
chart.useInteractiveGuideline(true);
|
||||
chart.xAxis
|
||||
.tickFormat(d3.format(',r'));
|
||||
|
||||
chart.yAxis
|
||||
.axisLabel('Voltage (v)')
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.attr('perserveAspectRatio', 'xMinYMid')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinAndCos());
|
||||
|
||||
setChartViewBox();
|
||||
resizeChart();
|
||||
|
||||
// These resizes both do the same thing, and require recalculating the chart
|
||||
//nv.utils.windowResize(chart.update);
|
||||
//nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
|
||||
nv.utils.windowResize(resizeChart);
|
||||
|
||||
d3.select('#zoomIn').on('click', zoomIn);
|
||||
d3.select('#zoomOut').on('click', zoomOut);
|
||||
|
||||
|
||||
function setChartViewBox() {
|
||||
var w = width * zoom,
|
||||
h = height * zoom;
|
||||
|
||||
chart
|
||||
.width(w)
|
||||
.height(h);
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.attr('viewBox', '0 0 ' + w + ' ' + h)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
}
|
||||
|
||||
function zoomOut() {
|
||||
zoom += .25;
|
||||
setChartViewBox();
|
||||
}
|
||||
|
||||
function zoomIn() {
|
||||
if (zoom <= .5) return;
|
||||
zoom -= .25;
|
||||
setChartViewBox();
|
||||
}
|
||||
|
||||
// This resize simply sets the SVG's dimensions, without a need to recall the chart code
|
||||
// Resizing because of the viewbox and perserveAspectRatio settings
|
||||
// This scales the interior of the chart unlike the above
|
||||
function resizeChart() {
|
||||
var container = d3.select('#chart1');
|
||||
var svg = container.select('svg');
|
||||
|
||||
if (fitScreen) {
|
||||
// resize based on container's width AND HEIGHT
|
||||
var windowSize = nv.utils.windowSize();
|
||||
svg.attr("width", windowSize.width);
|
||||
svg.attr("height", windowSize.height);
|
||||
} else {
|
||||
// resize based on container's width
|
||||
var aspect = chart.width() / chart.height();
|
||||
var targetWidth = parseInt(container.style('width'));
|
||||
svg.attr("width", targetWidth);
|
||||
svg.attr("height", Math.round(targetWidth / aspect));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10) });
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,129 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 svg {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1" class='with-3d-shadow with-transitions'>
|
||||
<svg> </svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/historicalBar.js"></script>
|
||||
<script src="../src/models/linePlusBarWithFocusChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
var testdata = [
|
||||
{
|
||||
"key" : "Quantity" ,
|
||||
"bar": true,
|
||||
"values" : [ [ 1136005200000 , 1271000.0] , [ 1138683600000 , 1271000.0] , [ 1141102800000 , 1271000.0] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 3899486.0] , [ 1162270800000 , 3899486.0] , [ 1164862800000 , 3899486.0] , [ 1167541200000 , 3564700.0] , [ 1170219600000 , 3564700.0] , [ 1172638800000 , 3564700.0] , [ 1175313600000 , 2648493.0] , [ 1177905600000 , 2648493.0] , [ 1180584000000 , 2648493.0] , [ 1183176000000 , 2522993.0] , [ 1185854400000 , 2522993.0] , [ 1188532800000 , 2522993.0] , [ 1191124800000 , 2906501.0] , [ 1193803200000 , 2906501.0] , [ 1196398800000 , 2906501.0] , [ 1199077200000 , 2206761.0] , [ 1201755600000 , 2206761.0] , [ 1204261200000 , 2206761.0] , [ 1206936000000 , 2287726.0] , [ 1209528000000 , 2287726.0] , [ 1212206400000 , 2287726.0] , [ 1214798400000 , 2732646.0] , [ 1217476800000 , 2732646.0] , [ 1220155200000 , 2732646.0] , [ 1222747200000 , 2599196.0] , [ 1225425600000 , 2599196.0] , [ 1228021200000 , 2599196.0] , [ 1230699600000 , 1924387.0] , [ 1233378000000 , 1924387.0] , [ 1235797200000 , 1924387.0] , [ 1238472000000 , 1756311.0] , [ 1241064000000 , 1756311.0] , [ 1243742400000 , 1756311.0] , [ 1246334400000 , 1743470.0] , [ 1249012800000 , 1743470.0] , [ 1251691200000 , 1743470.0] , [ 1254283200000 , 1519010.0] , [ 1256961600000 , 1519010.0] , [ 1259557200000 , 1519010.0] , [ 1262235600000 , 1591444.0] , [ 1264914000000 , 1591444.0] , [ 1267333200000 , 1591444.0] , [ 1270008000000 , 1543784.0] , [ 1272600000000 , 1543784.0] , [ 1275278400000 , 1543784.0] , [ 1277870400000 , 1309915.0] , [ 1280548800000 , 1309915.0] , [ 1283227200000 , 1309915.0] , [ 1285819200000 , 1331875.0] , [ 1288497600000 , 1331875.0] , [ 1291093200000 , 1331875.0] , [ 1293771600000 , 1331875.0] , [ 1296450000000 , 1154695.0] , [ 1298869200000 , 1154695.0] , [ 1301544000000 , 1194025.0] , [ 1304136000000 , 1194025.0] , [ 1306814400000 , 1194025.0] , [ 1309406400000 , 1194025.0] , [ 1312084800000 , 1194025.0] , [ 1314763200000 , 1244525.0] , [ 1317355200000 , 475000.0] , [ 1320033600000 , 475000.0] , [ 1322629200000 , 475000.0] , [ 1325307600000 , 690033.0] , [ 1327986000000 , 690033.0] , [ 1330491600000 , 690033.0] , [ 1333166400000 , 514733.0] , [ 1335758400000 , 514733.0]]
|
||||
},
|
||||
{
|
||||
"key" : "Price" ,
|
||||
"values" : [ [ 1136005200000 , 71.89] , [ 1138683600000 , 75.51] , [ 1141102800000 , 68.49] , [ 1143781200000 , 62.72] , [ 1146369600000 , 70.39] , [ 1149048000000 , 59.77] , [ 1151640000000 , 57.27] , [ 1154318400000 , 67.96] , [ 1156996800000 , 67.85] , [ 1159588800000 , 76.98] , [ 1162270800000 , 81.08] , [ 1164862800000 , 91.66] , [ 1167541200000 , 84.84] , [ 1170219600000 , 85.73] , [ 1172638800000 , 84.61] , [ 1175313600000 , 92.91] , [ 1177905600000 , 99.8] , [ 1180584000000 , 121.191] , [ 1183176000000 , 122.04] , [ 1185854400000 , 131.76] , [ 1188532800000 , 138.48] , [ 1191124800000 , 153.47] , [ 1193803200000 , 189.95] , [ 1196398800000 , 182.22] , [ 1199077200000 , 198.08] , [ 1201755600000 , 135.36] , [ 1204261200000 , 125.02] , [ 1206936000000 , 143.5] , [ 1209528000000 , 173.95] , [ 1212206400000 , 188.75] , [ 1214798400000 , 167.44] , [ 1217476800000 , 158.95] , [ 1220155200000 , 169.53] , [ 1222747200000 , 113.66] , [ 1225425600000 , 107.59] , [ 1228021200000 , 92.67] , [ 1230699600000 , 85.35] , [ 1233378000000 , 90.13] , [ 1235797200000 , 89.31] , [ 1238472000000 , 105.12] , [ 1241064000000 , 125.83] , [ 1243742400000 , 135.81] , [ 1246334400000 , 142.43] , [ 1249012800000 , 163.39] , [ 1251691200000 , 168.21] , [ 1254283200000 , 185.35] , [ 1256961600000 , 188.5] , [ 1259557200000 , 199.91] , [ 1262235600000 , 210.732] , [ 1264914000000 , 192.063] , [ 1267333200000 , 204.62] , [ 1270008000000 , 235.0] , [ 1272600000000 , 261.09] , [ 1275278400000 , 256.88] , [ 1277870400000 , 251.53] , [ 1280548800000 , 257.25] , [ 1283227200000 , 243.1] , [ 1285819200000 , 283.75] , [ 1288497600000 , 300.98] , [ 1291093200000 , 311.15] , [ 1293771600000 , 322.56] , [ 1296450000000 , 339.32] , [ 1298869200000 , 353.21] , [ 1301544000000 , 348.5075] , [ 1304136000000 , 350.13] , [ 1306814400000 , 347.83] , [ 1309406400000 , 335.67] , [ 1312084800000 , 390.48] , [ 1314763200000 , 384.83] , [ 1317355200000 , 381.32] , [ 1320033600000 , 404.78] , [ 1322629200000 , 382.2] , [ 1325307600000 , 405.0] , [ 1327986000000 , 456.48] , [ 1330491600000 , 542.44] , [ 1333166400000 , 599.55] , [ 1335758400000 , 583.98]]
|
||||
}
|
||||
].map(function(series) {
|
||||
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
|
||||
return series;
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
//For testing single data point
|
||||
var testdata = [
|
||||
{
|
||||
"key" : "Quantity" ,
|
||||
"bar": true,
|
||||
"values" : [ [ 1136005200000 , 1271000.0] ]
|
||||
} ,
|
||||
{
|
||||
"key" : "Price" ,
|
||||
"values" : [ [ 1136005200000 , 71.89] ]
|
||||
}
|
||||
].map(function(series) {
|
||||
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
|
||||
return series;
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.linePlusBarWithFocusChart()
|
||||
.margin({top: 30, right: 60, bottom: 50, left: 70})
|
||||
.x(function(d,i) { return i })
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
chart.xAxis.tickFormat(function(d) {
|
||||
|
||||
var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
|
||||
if (dx > 0) {
|
||||
return d3.time.format('%x')(new Date(dx))
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
chart.x2Axis.tickFormat(function(d) {
|
||||
var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
|
||||
return d3.time.format('%x')(new Date(dx))
|
||||
});
|
||||
|
||||
chart.y1Axis
|
||||
.tickFormat(d3.format(',f'));
|
||||
|
||||
chart.y3Axis
|
||||
.tickFormat(d3.format(',f'));
|
||||
|
||||
chart.y2Axis
|
||||
.tickFormat(function(d) { return '$' + d3.format(',.2f')(d) });
|
||||
|
||||
chart.y4Axis
|
||||
.tickFormat(function(d) { return '$' + d3.format(',.2f')(d) });
|
||||
|
||||
chart.bars.forceY([0]);
|
||||
chart.bars2.forceY([0]);
|
||||
//chart.lines.forceY([0]);
|
||||
nv.log(testdata);
|
||||
d3.select('#chart1 svg')
|
||||
.datum(testdata)
|
||||
.call(chart);
|
||||
|
||||
// nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,101 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chart1 svg {
|
||||
height: 500px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
margin: 50px;
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1" class='with-3d-shadow with-transitions'>
|
||||
<svg style="height: 500px;"></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../lib/fisheye.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/lineWithFisheye.js"></script>
|
||||
<script src="../src/models/lineWithFisheyeChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
// Wrapping in nv.addGraph allows for '0 timeout render', stors rendered charts in nv.graphs, and may do more in the future... it's NOT required
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.lineChart();
|
||||
|
||||
chart.xAxis // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
.tickFormat(d3.format(',r'));
|
||||
|
||||
chart.yAxis
|
||||
.axisLabel('Voltage (v)')
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(sinAndCos())
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
//TODO: Figure out a good way to do this automatically
|
||||
nv.utils.windowResize(chart.update);
|
||||
//nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 200; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/2)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,87 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chart1 svg {
|
||||
height: 500px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
margin: 50px;
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart" class='with-3d-shadow with-transitions'>
|
||||
<svg style="height: 500px;"></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineWithFocusChart.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.lineWithFocusChart();
|
||||
|
||||
// chart.transitionDuration(500);
|
||||
chart.xAxis
|
||||
.tickFormat(d3.format(',f'));
|
||||
chart.x2Axis
|
||||
.tickFormat(d3.format(',f'));
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
chart.y2Axis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
d3.select('#chart svg')
|
||||
.datum(testData())
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
|
||||
function testData() {
|
||||
return stream_layers(3,128,.1).map(function(data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: data
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,94 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="test1">
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/multiBar.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
//var test_data = stream_layers(3,128,.1).map(function(data, i) {
|
||||
var test_data = stream_layers(3,128,.1).map(function(data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: data
|
||||
};
|
||||
});
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
var chart = nv.models.multiBar()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.stacked(true)
|
||||
|
||||
|
||||
var svg = d3.select('#test1 svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(test_data);
|
||||
|
||||
svg.transition().duration(500).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
|
||||
|
||||
window.onresize = function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40,
|
||||
margin = graph.margin();
|
||||
|
||||
|
||||
if (width < margin.left + margin.right + 20)
|
||||
width = margin.left + margin.right + 20;
|
||||
|
||||
if (height < margin.top + margin.bottom + 20)
|
||||
height = margin.top + margin.bottom + 20;
|
||||
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select('#test1 svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
transition().duration(500)
|
||||
.call(graph);
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,105 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1" class='with-3d-shadow with-transitions'>
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/multiBar.js"></script>
|
||||
<script src="../src/models/multiBarChart.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
var test_data = stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
|
||||
//var test_data = stream_layers(3,1,.1).map(function(data, i) { //for testing single data point
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: data
|
||||
};
|
||||
});
|
||||
|
||||
console.log('td',test_data);
|
||||
|
||||
var negative_test_data = new d3.range(0,3).map(function(d,i) { return {
|
||||
key: 'Stream' + i,
|
||||
values: new d3.range(0,11).map( function(f,j) {
|
||||
return {
|
||||
y: 10 + Math.random()*100 * (Math.floor(Math.random()*100)%2 ? 1 : -1),
|
||||
x: j
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
|
||||
var chart;
|
||||
nv.addGraph(function() {
|
||||
chart = nv.models.multiBarChart()
|
||||
.barColor(d3.scale.category20().range())
|
||||
.margin({bottom: 100})
|
||||
.transitionDuration(300)
|
||||
.delay(0)
|
||||
.rotateLabels(45)
|
||||
.groupSpacing(0.1)
|
||||
;
|
||||
|
||||
chart.multibar
|
||||
.hideable(true);
|
||||
|
||||
chart.reduceXTicks(false).staggerLabels(true);
|
||||
|
||||
chart.xAxis
|
||||
.axisLabel("Current Index")
|
||||
.showMaxMin(true)
|
||||
.tickFormat(d3.format(',.6f'));
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.1f'));
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(negative_test_data)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,389 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
#chart1 svg {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1" class='with-3d-shadow with-transitions'>
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/multiBarHorizontal.js"></script>
|
||||
<script src="../src/models/multiBarHorizontalChart.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
long_short_data = [
|
||||
{
|
||||
key: 'Series1',
|
||||
color: '#d62728',
|
||||
values: [
|
||||
{
|
||||
"label" : "Group A" ,
|
||||
"value" : -1.8746444827653
|
||||
} ,
|
||||
{
|
||||
"label" : "Group B" ,
|
||||
"value" : -8.0961543492239
|
||||
} ,
|
||||
{
|
||||
"label" : "Group C" ,
|
||||
"value" : -0.57072943117674
|
||||
} ,
|
||||
{
|
||||
"label" : "Group D" ,
|
||||
"value" : -2.4174010336624
|
||||
} ,
|
||||
{
|
||||
"label" : "Group E" ,
|
||||
"value" : -0.72009071426284
|
||||
} ,
|
||||
{
|
||||
"label" : "Group F" ,
|
||||
"value" : -0.77154485523777
|
||||
} ,
|
||||
{
|
||||
"label" : "Group G" ,
|
||||
"value" : -0.90152097798131
|
||||
} ,
|
||||
{
|
||||
"label" : "Group H" ,
|
||||
"value" : -0.91445417330854
|
||||
} ,
|
||||
{
|
||||
"label" : "Group I" ,
|
||||
"value" : -0.055746319141851
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'Series2',
|
||||
color: '#1f77b4',
|
||||
values: [
|
||||
{
|
||||
"label" : "Group A" ,
|
||||
"value" : 25.307646510375
|
||||
} ,
|
||||
{
|
||||
"label" : "Group B" ,
|
||||
"value" : 16.756779544553
|
||||
} ,
|
||||
{
|
||||
"label" : "Group C" ,
|
||||
"value" : 18.451534877007
|
||||
} ,
|
||||
{
|
||||
"label" : "Group D" ,
|
||||
"value" : 8.6142352811805
|
||||
} ,
|
||||
{
|
||||
"label" : "Group E" ,
|
||||
"value" : 7.8082472075876
|
||||
} ,
|
||||
{
|
||||
"label" : "Group F" ,
|
||||
"value" : 5.259101026956
|
||||
} ,
|
||||
{
|
||||
"label" : "Group G" ,
|
||||
"value" : 0.30947953487127
|
||||
} ,
|
||||
{
|
||||
"label" : "Group H" ,
|
||||
"value" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "Group I" ,
|
||||
"value" : 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'Series3',
|
||||
color: '#2ca02c',
|
||||
values: [
|
||||
{
|
||||
"label" : "Group A" ,
|
||||
"value" : -25.307646510375
|
||||
} ,
|
||||
{
|
||||
"label" : "Group B" ,
|
||||
"value" : 16.756779544553
|
||||
} ,
|
||||
{
|
||||
"label" : "Group C" ,
|
||||
"value" : -18.451534877007
|
||||
} ,
|
||||
{
|
||||
"label" : "Group D" ,
|
||||
"value" : 8.6142352811805
|
||||
} ,
|
||||
{
|
||||
"label" : "Group E" ,
|
||||
"value" : -7.8082472075876
|
||||
} ,
|
||||
{
|
||||
"label" : "Group F" ,
|
||||
"value" : 5.259101026956
|
||||
} ,
|
||||
{
|
||||
"label" : "Group G" ,
|
||||
"value" : -0.30947953487127
|
||||
} ,
|
||||
{
|
||||
"label" : "Group H" ,
|
||||
"value" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "Group I" ,
|
||||
"value" : 0
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
long_short_pos_data = [
|
||||
{
|
||||
key: 'Series1',
|
||||
color: '#d62728',
|
||||
values: [
|
||||
{
|
||||
"label" : "Group A" ,
|
||||
"value" : 1.8746444827653
|
||||
} ,
|
||||
{
|
||||
"label" : "Group B" ,
|
||||
"value" : 8.0961543492239
|
||||
} ,
|
||||
{
|
||||
"label" : "Group C" ,
|
||||
"value" : 0.57072943117674
|
||||
} ,
|
||||
{
|
||||
"label" : "Group D" ,
|
||||
"value" : 2.4174010336624
|
||||
} ,
|
||||
{
|
||||
"label" : "Group E" ,
|
||||
"value" : 0.72009071426284
|
||||
} ,
|
||||
{
|
||||
"label" : "Group F" ,
|
||||
"value" : 0.77154485523777
|
||||
} ,
|
||||
{
|
||||
"label" : "Group G" ,
|
||||
"value" : 0.90152097798131
|
||||
} ,
|
||||
{
|
||||
"label" : "Group H" ,
|
||||
"value" : 0.91445417330854
|
||||
} ,
|
||||
{
|
||||
"label" : "Group I" ,
|
||||
"value" : 0.055746319141851
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'Series2',
|
||||
color: '#1f77b4',
|
||||
values: [
|
||||
{
|
||||
"label" : "Group A" ,
|
||||
"value" : 25.307646510375
|
||||
} ,
|
||||
{
|
||||
"label" : "Group B" ,
|
||||
"value" : 16.756779544553
|
||||
} ,
|
||||
{
|
||||
"label" : "Group C" ,
|
||||
"value" : 18.451534877007
|
||||
} ,
|
||||
{
|
||||
"label" : "Group D" ,
|
||||
"value" : 8.6142352811805
|
||||
} ,
|
||||
{
|
||||
"label" : "Group E" ,
|
||||
"value" : 7.8082472075876
|
||||
} ,
|
||||
{
|
||||
"label" : "Group F" ,
|
||||
"value" : 5.259101026956
|
||||
} ,
|
||||
{
|
||||
"label" : "Group G" ,
|
||||
"value" : 0.30947953487127
|
||||
} ,
|
||||
{
|
||||
"label" : "Group H" ,
|
||||
"value" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "Group I" ,
|
||||
"value" : 0
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
long_short_neg_data = [
|
||||
{
|
||||
key: 'Series1',
|
||||
color: '#d62728',
|
||||
values: [
|
||||
{
|
||||
"label" : "Group A" ,
|
||||
"value" : -1.8746444827653
|
||||
} ,
|
||||
{
|
||||
"label" : "Group B" ,
|
||||
"value" : -8.0961543492239
|
||||
} ,
|
||||
{
|
||||
"label" : "Group C" ,
|
||||
"value" : -0.57072943117674
|
||||
} ,
|
||||
{
|
||||
"label" : "Group D" ,
|
||||
"value" : -2.4174010336624
|
||||
} ,
|
||||
{
|
||||
"label" : "Group E" ,
|
||||
"value" : -0.72009071426284
|
||||
} ,
|
||||
{
|
||||
"label" : "Group F" ,
|
||||
"value" : -0.77154485523777
|
||||
} ,
|
||||
{
|
||||
"label" : "Group G" ,
|
||||
"value" : -0.90152097798131
|
||||
} ,
|
||||
{
|
||||
"label" : "Group H" ,
|
||||
"value" : -0.91445417330854
|
||||
} ,
|
||||
{
|
||||
"label" : "Group I" ,
|
||||
"value" : -0.055746319141851
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'Series2',
|
||||
color: '#1f77b4',
|
||||
values: [
|
||||
{
|
||||
"label" : "Group A" ,
|
||||
"value" : -25.307646510375
|
||||
} ,
|
||||
{
|
||||
"label" : "Group B" ,
|
||||
"value" : -16.756779544553
|
||||
} ,
|
||||
{
|
||||
"label" : "Group C" ,
|
||||
"value" : -18.451534877007
|
||||
} ,
|
||||
{
|
||||
"label" : "Group D" ,
|
||||
"value" : -8.6142352811805
|
||||
} ,
|
||||
{
|
||||
"label" : "Group E" ,
|
||||
"value" : -7.8082472075876
|
||||
} ,
|
||||
{
|
||||
"label" : "Group F" ,
|
||||
"value" : -5.259101026956
|
||||
} ,
|
||||
{
|
||||
"label" : "Group G" ,
|
||||
"value" : -0.30947953487127
|
||||
} ,
|
||||
{
|
||||
"label" : "Group H" ,
|
||||
"value" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "Group I" ,
|
||||
"value" : 0
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
var chart;
|
||||
nv.addGraph(function() {
|
||||
chart = nv.models.multiBarHorizontalChart()
|
||||
.x(function(d) { return d.label })
|
||||
.y(function(d) { return d.value })
|
||||
.margin({top: 30, right: 20, bottom: 50, left: 175})
|
||||
//.showValues(true)
|
||||
//.tooltips(false)
|
||||
.barColor(d3.scale.category20().range())
|
||||
.transitionDuration(250)
|
||||
.stacked(true)
|
||||
//.showControls(false);
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(long_short_data)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,96 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 svg {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body class='with-3d-shadow with-transitions'>
|
||||
|
||||
<div id="chart1" >
|
||||
<svg> </svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/multiBar.js"></script>
|
||||
<script src="../src/models/multiChart.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
var testdata = stream_layers(7,10+Math.random()*100,.1).map(function(data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: data.map(function(a){a.y = a.y * (i <= 1 ? -1 : 1); return a})
|
||||
};
|
||||
});
|
||||
|
||||
testdata[0].type = "area"
|
||||
testdata[0].yAxis = 1
|
||||
testdata[1].type = "area"
|
||||
testdata[1].yAxis = 1
|
||||
testdata[2].type = "line"
|
||||
testdata[2].yAxis = 1
|
||||
testdata[3].type = "line"
|
||||
testdata[3].yAxis = 2
|
||||
testdata[4].type = "bar"
|
||||
testdata[4].yAxis = 2
|
||||
testdata[5].type = "bar"
|
||||
testdata[5].yAxis = 2
|
||||
testdata[6].type = "bar"
|
||||
testdata[6].yAxis = 2
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.multiChart()
|
||||
.margin({top: 30, right: 60, bottom: 50, left: 70})
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(d3.format(',f'));
|
||||
|
||||
chart.yAxis1
|
||||
.tickFormat(d3.format(',.1f'));
|
||||
|
||||
chart.yAxis2
|
||||
.tickFormat(d3.format(',.1f'));
|
||||
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(testdata)
|
||||
.transition().duration(500).call(chart);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,94 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<svg id="test1"></svg>
|
||||
|
||||
<svg id="test2"></svg>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/pie.js"></script>
|
||||
<script>
|
||||
|
||||
var testdata = [
|
||||
{
|
||||
key: "One",
|
||||
y: 5
|
||||
},
|
||||
{
|
||||
key: "Two",
|
||||
y: 2
|
||||
},
|
||||
{
|
||||
key: "Three",
|
||||
y: 9
|
||||
},
|
||||
{
|
||||
key: "Four",
|
||||
y: 7
|
||||
},
|
||||
{
|
||||
key: "Five",
|
||||
y: 4
|
||||
},
|
||||
{
|
||||
key: "Six",
|
||||
y: 3
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height / 2 - 40;
|
||||
|
||||
var chart = nv.models.pie()
|
||||
.values(function(d) { return d })
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select("#test1")
|
||||
.datum([testdata])
|
||||
.transition().duration(1200)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
nv.addGraph(function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height / 2 - 40;
|
||||
|
||||
var chart = nv.models.pie()
|
||||
.values(function(d) { return d })
|
||||
.width(width)
|
||||
.height(height)
|
||||
.donut(true);
|
||||
|
||||
d3.select("#test2")
|
||||
.datum([testdata])
|
||||
.transition().duration(1200)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,122 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
.mypiechart {
|
||||
width: 500px;
|
||||
border: 2px;
|
||||
}
|
||||
</style>
|
||||
<body class='with-3d-shadow with-transitions'>
|
||||
|
||||
<h2>Test1</h2>
|
||||
<svg id="test1" class="mypiechart"></svg>
|
||||
|
||||
<h2>Test2</h2>
|
||||
<svg id="test2" class="mypiechart"></svg>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/pie.js"></script>
|
||||
<script src="../src/models/pieChart.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script>
|
||||
|
||||
var testdata = [
|
||||
{
|
||||
key: "One",
|
||||
y: 5
|
||||
},
|
||||
{
|
||||
key: "Two",
|
||||
y: 2
|
||||
},
|
||||
{
|
||||
key: "Three",
|
||||
y: 9
|
||||
},
|
||||
{
|
||||
key: "Four",
|
||||
y: 7
|
||||
},
|
||||
{
|
||||
key: "Five",
|
||||
y: 4
|
||||
},
|
||||
{
|
||||
key: "Six",
|
||||
y: 3
|
||||
},
|
||||
{
|
||||
key: "Seven",
|
||||
y: .5
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
var width = 500,
|
||||
height = 500;
|
||||
|
||||
var chart = nv.models.pieChart()
|
||||
.x(function(d) { return d.key })
|
||||
.y(function(d) { return d.y })
|
||||
.color(d3.scale.category10().range())
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select("#test1")
|
||||
.datum(testdata)
|
||||
.transition().duration(1200)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart);
|
||||
|
||||
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
nv.addGraph(function() {
|
||||
|
||||
var width = 500,
|
||||
height = 500;
|
||||
|
||||
var chart = nv.models.pieChart()
|
||||
.x(function(d) { return d.key })
|
||||
//.y(function(d) { return d.value })
|
||||
//.labelThreshold(.08)
|
||||
//.showLabels(false)
|
||||
.color(d3.scale.category10().range())
|
||||
.width(width)
|
||||
.height(height)
|
||||
.donut(true);
|
||||
|
||||
chart.pie
|
||||
.startAngle(function(d) { return d.startAngle/2 -Math.PI/2 })
|
||||
.endAngle(function(d) { return d.endAngle/2 -Math.PI/2 });
|
||||
|
||||
//chart.pie.donutLabelsOutside(true).donut(true);
|
||||
|
||||
d3.select("#test2")
|
||||
//.datum(historicalBarChart)
|
||||
.datum(testdata)
|
||||
.transition().duration(1200)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,96 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<svg id="test1"></svg>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../lib/fisheye.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
//Format A
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
var chart = nv.models.scatter()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.margin({top: 20, right: 20, bottom: 20, left: 20})
|
||||
.size(function(d) { return d.z })
|
||||
.useVoronoi(false)
|
||||
//.interactive(false)
|
||||
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(randomData())
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
window.onresize = function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40,
|
||||
margin = graph.margin();
|
||||
|
||||
|
||||
if (width < margin.left + margin.right + 20)
|
||||
width = margin.left + margin.right + 20;
|
||||
|
||||
if (height < margin.top + margin.bottom + 20)
|
||||
height = margin.top + margin.bottom + 20;
|
||||
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(graph);
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
function randomData() {
|
||||
var data = [];
|
||||
|
||||
for (i = 0; i < 2; i++) {
|
||||
data.push({
|
||||
key: 'Group ' + i,
|
||||
values: []
|
||||
});
|
||||
|
||||
for (j = 0; j < 100; j++) {
|
||||
data[i].values.push({x: Math.random(), y: Math.random(), z: Math.random()});
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,118 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
#offsetDiv {
|
||||
margin-left: 100px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
#test1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#test1 svg {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="offsetDiv">
|
||||
<div id="test1" class='with-3d-shadow with-transitions'>
|
||||
<svg></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<!--<script src="../lib/fisheye.js"></script>-->
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/distribution.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/scatterChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
//Format A
|
||||
var chart;
|
||||
nv.addGraph(function() {
|
||||
chart = nv.models.scatterChart()
|
||||
.showDistX(true)
|
||||
.showDistY(true)
|
||||
.useVoronoi(true)
|
||||
.color(d3.scale.category10().range())
|
||||
.transitionDuration(300)
|
||||
;
|
||||
|
||||
chart.xAxis.tickFormat(d3.format('.02f'));
|
||||
chart.yAxis.tickFormat(d3.format('.02f'));
|
||||
chart.tooltipContent(function(key) {
|
||||
return '<h2>' + key + '</h2>';
|
||||
});
|
||||
|
||||
d3.select('#test1 svg')
|
||||
.datum(randomData(4,40))
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function(e) { ('New State:', JSON.stringify(e)); });
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
function randomData(groups, points) { //# groups,# points per group
|
||||
var data = [],
|
||||
shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
|
||||
random = d3.random.normal();
|
||||
|
||||
for (i = 0; i < groups; i++) {
|
||||
data.push({
|
||||
key: 'Group ' + i,
|
||||
values: []
|
||||
});
|
||||
|
||||
for (j = 0; j < points; j++) {
|
||||
data[i].values.push({
|
||||
x: random(),
|
||||
y: random(),
|
||||
size: Math.random(),
|
||||
shape: shapes[j % 6]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,115 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
#offsetDiv {
|
||||
margin-left: 100px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
#test1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#test1 svg {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body class='with-3d-shadow with-transitions'>
|
||||
|
||||
<div id="offsetDiv">
|
||||
<div id="test1" class="chartWrap">
|
||||
<svg></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../lib/fisheye.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/distribution.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/scatterPlusLineChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
//Format A
|
||||
var chart;
|
||||
nv.addGraph(function() {
|
||||
chart = nv.models.scatterPlusLineChart()
|
||||
.showDistX(true)
|
||||
.showDistY(true)
|
||||
.transitionDuration(300)
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
chart.xAxis.tickFormat(d3.format('.02f'))
|
||||
chart.yAxis.tickFormat(d3.format('.02f'))
|
||||
|
||||
d3.select('#test1 svg')
|
||||
.datum(nv.log(randomData(4,40)))
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
function randomData(groups, points) { //# groups,# points per group
|
||||
var data = [],
|
||||
shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
|
||||
random = d3.random.normal();
|
||||
|
||||
for (i = 0; i < groups; i++) {
|
||||
data.push({
|
||||
key: 'Group ' + i,
|
||||
values: [],
|
||||
slope: Math.random() - .01,
|
||||
intercept: Math.random() - .5
|
||||
});
|
||||
|
||||
for (j = 0; j < points; j++) {
|
||||
data[i].values.push({
|
||||
x: random(),
|
||||
y: random(),
|
||||
size: Math.random(),
|
||||
shape: shapes[j % 6]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,62 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
.sparkline path {
|
||||
fill: none;
|
||||
stroke: #444;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
width: 300px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<h2>Sparkline: <svg id="chart1" class="sparkline"></svg></h2>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/models/sparkline.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script>
|
||||
|
||||
//Format A
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var chart = nv.models.sparkline()
|
||||
.width(400)
|
||||
.height(30)
|
||||
|
||||
d3.select("#chart1")
|
||||
.datum(sine())
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
//log("Sparkline rendered");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sine() {
|
||||
var sin = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
}
|
||||
|
||||
return sin;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,86 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
svg.sparkline {
|
||||
width: 500px;
|
||||
height: 70px;
|
||||
font-size: 14px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<body class='with-3d-shadow with-transitions'>
|
||||
|
||||
<h2>SparklinePlus:</h2>
|
||||
<p><svg id="chart1" class="sparkline"></svg></p>
|
||||
<br/>
|
||||
<p>APPL:<svg id="chart2" class="sparkline"></svg></p>
|
||||
|
||||
<p>GOOG:<svg id="chart3" class="sparkline"></svg></p>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/sparkline.js"></script>
|
||||
<script src="../src/models/sparklinePlus.js"></script>
|
||||
<script>
|
||||
|
||||
function defaultChartConfig(containerId, data) {
|
||||
nv.addGraph(function() {
|
||||
|
||||
var chart = nv.models.sparklinePlus()
|
||||
|
||||
chart
|
||||
.margin({left:70})
|
||||
.x(function(d,i) { return i })
|
||||
.xTickFormat(function(d) {
|
||||
return d3.time.format('%x')(new Date(data[d].x))
|
||||
})
|
||||
|
||||
d3.select(containerId)
|
||||
.datum(data)
|
||||
.transition().duration(250)
|
||||
.call(chart);
|
||||
|
||||
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
|
||||
defaultChartConfig("#chart1",sine());
|
||||
defaultChartConfig("#chart2", volatileChart(130.0, 0.02));
|
||||
defaultChartConfig("#chart3", volatileChart(25.0, 0.09,30));
|
||||
|
||||
|
||||
function sine() {
|
||||
var sin = [];
|
||||
var now =+new Date();
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: now + i * 1000 * 60 * 60 * 24, y: Math.sin(i/10)});
|
||||
}
|
||||
|
||||
return sin;
|
||||
}
|
||||
|
||||
function volatileChart(startPrice, volatility, numPoints) {
|
||||
var rval = [];
|
||||
var now =+new Date();
|
||||
numPoints = numPoints || 100;
|
||||
for(var i = 1; i < numPoints; i++) {
|
||||
|
||||
rval.push({x: now + i * 1000 * 60 * 60 * 24, y: startPrice});
|
||||
var rnd = Math.random();
|
||||
var changePct = 2 * volatility * rnd;
|
||||
if ( changePct > volatility) {
|
||||
changePct -= (2*volatility);
|
||||
}
|
||||
startPrice = startPrice + startPrice * changePct;
|
||||
}
|
||||
return rval;
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,156 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart">
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/models/stackedArea.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
//Format A
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var n = 10, // number of layers
|
||||
m = 200; // number of samples per layer
|
||||
//color = d3.interpolateRgb("#aad", "#556");
|
||||
|
||||
var data = stream_layers(n,m).map(function(data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: data
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
var width = nv.utils.windowSize().width - 20,
|
||||
height = nv.utils.windowSize().height - 20;
|
||||
|
||||
var chart = nv.models.stackedArea()
|
||||
.width(width)
|
||||
.height(height)
|
||||
//.offset('wiggle')
|
||||
//.order('default')
|
||||
|
||||
|
||||
var svg = d3.select('#chart svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(data)
|
||||
|
||||
svg.transition().duration(500).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
|
||||
|
||||
|
||||
graph.dispatch.on('tooltipShow', function(e) {
|
||||
var offsetElement = document.getElementById("chart"),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatterY = d3.format(",.2%"),
|
||||
formatterX = function(d) {
|
||||
return d3.time.format('%x')(new Date(d))
|
||||
};
|
||||
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
formatterY(graph.y()(e.point)) + ' at ' + formatterX(graph.x()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
});
|
||||
|
||||
graph.dispatch.on('tooltipHide', function(e) {
|
||||
nv.tooltip.cleanup();
|
||||
});
|
||||
|
||||
|
||||
|
||||
window.onResize = function() {
|
||||
var width = nv.utils.windowSize().width - 20,
|
||||
height = nv.utils.windowSize().height - 20,
|
||||
margin = graph.margin();
|
||||
|
||||
|
||||
if (width < margin.left + margin.right + 20)
|
||||
width = margin.left + margin.right + 20;
|
||||
|
||||
if (height < margin.top + margin.bottom + 20)
|
||||
height = margin.top + margin.bottom + 20;
|
||||
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select('#chart svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(graph);
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
/* Inspired by Lee Byron's test data generator. */
|
||||
function stream_layers(n, m, o) {
|
||||
if (arguments.length < 3) o = 0;
|
||||
function bump(a) {
|
||||
var x = 1 / (.1 + Math.random()),
|
||||
y = 2 * Math.random() - .5,
|
||||
z = 10 / (.1 + Math.random());
|
||||
for (var i = 0; i < m; i++) {
|
||||
var w = (i / m - y) * z;
|
||||
a[i] += x * Math.exp(-w * w);
|
||||
}
|
||||
}
|
||||
return d3.range(n).map(function() {
|
||||
var a = [], i;
|
||||
for (i = 0; i < m; i++) a[i] = o + o * Math.random();
|
||||
for (i = 0; i < 5; i++) bump(a);
|
||||
return a.map(stream_index);
|
||||
});
|
||||
}
|
||||
|
||||
/* Another layer generator using gamma distributions. */
|
||||
function stream_waves(n, m) {
|
||||
return d3.range(n).map(function(i) {
|
||||
return d3.range(m).map(function(j) {
|
||||
var x = 20 * j / m - i / 3;
|
||||
return 2 * x * Math.exp(-.5 * x);
|
||||
}).map(stream_index);
|
||||
});
|
||||
}
|
||||
|
||||
function stream_index(d, i) {
|
||||
return {x: i, y: Math.max(0, d)};
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,269 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1, #chart2 {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body class='with-3d-shadow with-transitions'>
|
||||
|
||||
<div>
|
||||
<svg id="chart1"></svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!--<svg id="chart2"></svg>-->
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v3.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/interactiveLayer.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/stackedArea.js"></script>
|
||||
<script src="../src/models/stackedAreaChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
var histcatexplong = [
|
||||
{
|
||||
"key" : "Consumer Discretionary" ,
|
||||
"values" : [ [ 1138683600000 , 27.38478809681] , [ 1141102800000 , 27.371377218208] , [ 1143781200000 , 26.309915460827] , [ 1146369600000 , 26.425199957521] , [ 1149048000000 , 26.823411519395] , [ 1151640000000 , 23.850443591584] , [ 1154318400000 , 23.158355444054] , [ 1156996800000 , 22.998689393694] , [ 1159588800000 , 27.977128511299] , [ 1162270800000 , 29.073672469721] , [ 1164862800000 , 28.587640408904] , [ 1167541200000 , 22.788453687638] , [ 1170219600000 , 22.429199073597] , [ 1172638800000 , 22.324103271051] , [ 1175313600000 , 17.558388444186] , [ 1177905600000 , 16.769518096208] , [ 1180584000000 , 16.214738201302] , [ 1183176000000 , 18.729632971228] , [ 1185854400000 , 18.814523318848] , [ 1188532800000 , 19.789986451358] , [ 1191124800000 , 17.070049054933] , [ 1193803200000 , 16.121349575715] , [ 1196398800000 , 15.141659430091] , [ 1199077200000 , 17.175388025298] , [ 1201755600000 , 17.286592443521] , [ 1204261200000 , 16.323141626569] , [ 1206936000000 , 19.231263773952] , [ 1209528000000 , 18.446256391094] , [ 1212206400000 , 17.822632399764] , [ 1214798400000 , 15.539366475979] , [ 1217476800000 , 15.255131790216] , [ 1220155200000 , 15.660963922593] , [ 1222747200000 , 13.254482273697] , [ 1225425600000 , 11.920796202299] , [ 1228021200000 , 12.122809090925] , [ 1230699600000 , 15.691026271393] , [ 1233378000000 , 14.720881635107] , [ 1235797200000 , 15.387939360044] , [ 1238472000000 , 13.765436672229] , [ 1241064000000 , 14.6314458648] , [ 1243742400000 , 14.292446536221] , [ 1246334400000 , 16.170071367016] , [ 1249012800000 , 15.948135554337] , [ 1251691200000 , 16.612872685134] , [ 1254283200000 , 18.778338719091] , [ 1256961600000 , 16.75602606542] , [ 1259557200000 , 19.385804443147] , [ 1262235600000 , 22.950590240168] , [ 1264914000000 , 23.61159018141] , [ 1267333200000 , 25.708586989581] , [ 1270008000000 , 26.883915999885] , [ 1272600000000 , 25.893486687065] , [ 1275278400000 , 24.678914263176] , [ 1277870400000 , 25.937275793023] , [ 1280548800000 , 29.46138169384] , [ 1283227200000 , 27.357322961862] , [ 1285819200000 , 29.057235285673] , [ 1288497600000 , 28.549434189386] , [ 1291093200000 , 28.506352379723] , [ 1293771600000 , 29.449241421597] , [ 1296450000000 , 25.796838168807] , [ 1298869200000 , 28.740145449189] , [ 1301544000000 , 22.091744141872] , [ 1304136000000 , 25.079662545409] , [ 1306814400000 , 23.674906973064] , [ 1309406400000 , 23.41800274293] , [ 1312084800000 , 23.243644138871] , [ 1314763200000 , 31.591854066817] , [ 1317355200000 , 31.497112374114] , [ 1320033600000 , 26.672380820431] , [ 1322629200000 , 27.297080015495] , [ 1325307600000 , 20.174315530051] , [ 1327986000000 , 19.631084213899] , [ 1330491600000 , 20.366462219462] , [ 1333166400000 , 17.429019937289] , [ 1335758400000 , 16.75543633539] , [ 1338436800000 , 16.182906906042]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Consumer Staples" ,
|
||||
"values" : [ [ 1138683600000 , 7.2800122043237] , [ 1141102800000 , 7.1187787503354] , [ 1143781200000 , 8.351887016482] , [ 1146369600000 , 8.4156698763993] , [ 1149048000000 , 8.1673298604231] , [ 1151640000000 , 5.5132447126042] , [ 1154318400000 , 6.1152537710599] , [ 1156996800000 , 6.076765091942] , [ 1159588800000 , 4.6304473798646] , [ 1162270800000 , 4.6301068469402] , [ 1164862800000 , 4.3466656309389] , [ 1167541200000 , 6.830104897003] , [ 1170219600000 , 7.241633040029] , [ 1172638800000 , 7.1432372054153] , [ 1175313600000 , 10.608942063374] , [ 1177905600000 , 10.914964549494] , [ 1180584000000 , 10.933223880565] , [ 1183176000000 , 8.3457524851265] , [ 1185854400000 , 8.1078413081882] , [ 1188532800000 , 8.2697185922474] , [ 1191124800000 , 8.4742436475968] , [ 1193803200000 , 8.4994601179319] , [ 1196398800000 , 8.7387319683243] , [ 1199077200000 , 6.8829183612895] , [ 1201755600000 , 6.984133637885] , [ 1204261200000 , 7.0860136043287] , [ 1206936000000 , 4.3961787956053] , [ 1209528000000 , 3.8699674365231] , [ 1212206400000 , 3.6928925238305] , [ 1214798400000 , 6.7571718894253] , [ 1217476800000 , 6.4367313362344] , [ 1220155200000 , 6.4048441521454] , [ 1222747200000 , 5.4643833239669] , [ 1225425600000 , 5.3150786833374] , [ 1228021200000 , 5.3011272612576] , [ 1230699600000 , 4.1203601430809] , [ 1233378000000 , 4.0881783200525] , [ 1235797200000 , 4.1928665957189] , [ 1238472000000 , 7.0249415663205] , [ 1241064000000 , 7.006530880769] , [ 1243742400000 , 6.994835633224] , [ 1246334400000 , 6.1220222336254] , [ 1249012800000 , 6.1177436137653] , [ 1251691200000 , 6.1413396231981] , [ 1254283200000 , 4.8046006145874] , [ 1256961600000 , 4.6647600660544] , [ 1259557200000 , 4.544865006255] , [ 1262235600000 , 6.0488249316539] , [ 1264914000000 , 6.3188669540206] , [ 1267333200000 , 6.5873958262306] , [ 1270008000000 , 6.2281189839578] , [ 1272600000000 , 5.8948915746059] , [ 1275278400000 , 5.5967320482214] , [ 1277870400000 , 0.99784432084837] , [ 1280548800000 , 1.0950794175359] , [ 1283227200000 , 0.94479734407491] , [ 1285819200000 , 1.222093988688] , [ 1288497600000 , 1.335093106856] , [ 1291093200000 , 1.3302565104985] , [ 1293771600000 , 1.340824670897] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 0] , [ 1317355200000 , 4.4583692315] , [ 1320033600000 , 3.6493043348059] , [ 1322629200000 , 3.8610064091761] , [ 1325307600000 , 5.5144800685202] , [ 1327986000000 , 5.1750695220792] , [ 1330491600000 , 5.6710066952691] , [ 1333166400000 , 8.5658461590953] , [ 1335758400000 , 8.6135447714243] , [ 1338436800000 , 8.0231460925212]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Energy" ,
|
||||
"values" : [ [ 1138683600000 , 1.544303464167] , [ 1141102800000 , 1.4387289432421] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 1.328626801128] , [ 1154318400000 , 1.2874050802627] , [ 1156996800000 , 1.0872743105593] , [ 1159588800000 , 0.96042562635813] , [ 1162270800000 , 0.93139372870616] , [ 1164862800000 , 0.94432167305385] , [ 1167541200000 , 1.277750166208] , [ 1170219600000 , 1.2204893886811] , [ 1172638800000 , 1.207489123122] , [ 1175313600000 , 1.2490651414113] , [ 1177905600000 , 1.2593129913052] , [ 1180584000000 , 1.373329808388] , [ 1183176000000 , 0] , [ 1185854400000 , 0] , [ 1188532800000 , 0] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , 0] , [ 1209528000000 , 0] , [ 1212206400000 , 0] , [ 1214798400000 , 0] , [ 1217476800000 , 0] , [ 1220155200000 , 0] , [ 1222747200000 , 1.4516108933695] , [ 1225425600000 , 1.1856025268225] , [ 1228021200000 , 1.3430470355439] , [ 1230699600000 , 2.2752595354509] , [ 1233378000000 , 2.4031560010523] , [ 1235797200000 , 2.0822430731926] , [ 1238472000000 , 1.5640902826938] , [ 1241064000000 , 1.5812873972356] , [ 1243742400000 , 1.9462448548894] , [ 1246334400000 , 2.9464870223957] , [ 1249012800000 , 3.0744699383222] , [ 1251691200000 , 2.9422304628446] , [ 1254283200000 , 2.7503075599999] , [ 1256961600000 , 2.6506701800427] , [ 1259557200000 , 2.8005425319977] , [ 1262235600000 , 2.6816184971185] , [ 1264914000000 , 2.681206271327] , [ 1267333200000 , 2.8195488011259] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 1.0687057346382] , [ 1280548800000 , 1.2539400544134] , [ 1283227200000 , 1.1862969445955] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 1.941972859484] , [ 1298869200000 , 2.1142247697552] , [ 1301544000000 , 2.3788590206824] , [ 1304136000000 , 2.5337302877545] , [ 1306814400000 , 2.3163370395199] , [ 1309406400000 , 2.0645451843195] , [ 1312084800000 , 2.1004446672411] , [ 1314763200000 , 3.6301875804303] , [ 1317355200000 , 2.454204664652] , [ 1320033600000 , 2.196082370894] , [ 1322629200000 , 2.3358418255202] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0.39001201038526] , [ 1335758400000 , 0.30945472725559] , [ 1338436800000 , 0.31062439305591]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Financials" ,
|
||||
"values" : [ [ 1138683600000 , 13.356778764352] , [ 1141102800000 , 13.611196863271] , [ 1143781200000 , 6.895903006119] , [ 1146369600000 , 6.9939633271352] , [ 1149048000000 , 6.7241510257675] , [ 1151640000000 , 5.5611293669516] , [ 1154318400000 , 5.6086488714041] , [ 1156996800000 , 5.4962849907033] , [ 1159588800000 , 6.9193153169279] , [ 1162270800000 , 7.0016334389777] , [ 1164862800000 , 6.7865422443273] , [ 1167541200000 , 9.0006454225383] , [ 1170219600000 , 9.2233916171431] , [ 1172638800000 , 8.8929316009479] , [ 1175313600000 , 10.345937520404] , [ 1177905600000 , 10.075914677026] , [ 1180584000000 , 10.089006188111] , [ 1183176000000 , 10.598330295008] , [ 1185854400000 , 9.968954653301] , [ 1188532800000 , 9.7740580198146] , [ 1191124800000 , 10.558483060626] , [ 1193803200000 , 9.9314651823603] , [ 1196398800000 , 9.3997715873769] , [ 1199077200000 , 8.4086493387262] , [ 1201755600000 , 8.9698309085926] , [ 1204261200000 , 8.2778357995396] , [ 1206936000000 , 8.8585045600123] , [ 1209528000000 , 8.7013756413322] , [ 1212206400000 , 7.7933605469443] , [ 1214798400000 , 7.0236183483064] , [ 1217476800000 , 6.9873088186829] , [ 1220155200000 , 6.8031713070097] , [ 1222747200000 , 6.6869531315723] , [ 1225425600000 , 6.138256993963] , [ 1228021200000 , 5.6434994016354] , [ 1230699600000 , 5.495220262512] , [ 1233378000000 , 4.6885326869846] , [ 1235797200000 , 4.4524349883438] , [ 1238472000000 , 5.6766520778185] , [ 1241064000000 , 5.7675774480752] , [ 1243742400000 , 5.7882863168337] , [ 1246334400000 , 7.2666010034924] , [ 1249012800000 , 7.519182132226] , [ 1251691200000 , 7.849651451445] , [ 1254283200000 , 10.383992037985] , [ 1256961600000 , 9.0653691861818] , [ 1259557200000 , 9.6705248324159] , [ 1262235600000 , 10.856380561349] , [ 1264914000000 , 11.27452370892] , [ 1267333200000 , 11.754156529088] , [ 1270008000000 , 8.2870811422456] , [ 1272600000000 , 8.0210264360699] , [ 1275278400000 , 7.5375074474865] , [ 1277870400000 , 8.3419527338039] , [ 1280548800000 , 9.4197471818443] , [ 1283227200000 , 8.7321733185797] , [ 1285819200000 , 9.6627062648126] , [ 1288497600000 , 10.187962234549] , [ 1291093200000 , 9.8144201733476] , [ 1293771600000 , 10.275723361713] , [ 1296450000000 , 16.796066079353] , [ 1298869200000 , 17.543254984075] , [ 1301544000000 , 16.673660675084] , [ 1304136000000 , 17.963944353609] , [ 1306814400000 , 16.637740867211] , [ 1309406400000 , 15.84857094609] , [ 1312084800000 , 14.767303362182] , [ 1314763200000 , 24.778452182432] , [ 1317355200000 , 18.370353229999] , [ 1320033600000 , 15.2531374291] , [ 1322629200000 , 14.989600840649] , [ 1325307600000 , 16.052539160125] , [ 1327986000000 , 16.424390322793] , [ 1330491600000 , 17.884020741105] , [ 1333166400000 , 7.1424929577921] , [ 1335758400000 , 7.8076213051482] , [ 1338436800000 , 7.2462684949232]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Health Care" ,
|
||||
"values" : [ [ 1138683600000 , 14.212410956029] , [ 1141102800000 , 13.973193618249] , [ 1143781200000 , 15.218233920665] , [ 1146369600000 , 14.38210972745] , [ 1149048000000 , 13.894310878491] , [ 1151640000000 , 15.593086090032] , [ 1154318400000 , 16.244839695188] , [ 1156996800000 , 16.017088850646] , [ 1159588800000 , 14.183951830055] , [ 1162270800000 , 14.148523245697] , [ 1164862800000 , 13.424326059972] , [ 1167541200000 , 12.974450435753] , [ 1170219600000 , 13.23247041802] , [ 1172638800000 , 13.318762655574] , [ 1175313600000 , 15.961407746104] , [ 1177905600000 , 16.287714639805] , [ 1180584000000 , 16.246590583889] , [ 1183176000000 , 17.564505594809] , [ 1185854400000 , 17.872725373165] , [ 1188532800000 , 18.018998508757] , [ 1191124800000 , 15.584518016603] , [ 1193803200000 , 15.480850647181] , [ 1196398800000 , 15.699120036984] , [ 1199077200000 , 19.184281817226] , [ 1201755600000 , 19.691226605207] , [ 1204261200000 , 18.982314051295] , [ 1206936000000 , 18.707820309008] , [ 1209528000000 , 17.459630929761] , [ 1212206400000 , 16.500616076782] , [ 1214798400000 , 18.086324003979] , [ 1217476800000 , 18.929464156258] , [ 1220155200000 , 18.233728682084] , [ 1222747200000 , 16.315776297325] , [ 1225425600000 , 14.63289219025] , [ 1228021200000 , 14.667835024478] , [ 1230699600000 , 13.946993947308] , [ 1233378000000 , 14.394304684397] , [ 1235797200000 , 13.724462792967] , [ 1238472000000 , 10.930879035806] , [ 1241064000000 , 9.8339915513708] , [ 1243742400000 , 10.053858541872] , [ 1246334400000 , 11.786998438287] , [ 1249012800000 , 11.780994901769] , [ 1251691200000 , 11.305889670276] , [ 1254283200000 , 10.918452290083] , [ 1256961600000 , 9.6811395055706] , [ 1259557200000 , 10.971529744038] , [ 1262235600000 , 13.330210480209] , [ 1264914000000 , 14.592637568961] , [ 1267333200000 , 14.605329141157] , [ 1270008000000 , 13.936853794037] , [ 1272600000000 , 12.189480759072] , [ 1275278400000 , 11.676151385046] , [ 1277870400000 , 13.058852800017] , [ 1280548800000 , 13.62891543203] , [ 1283227200000 , 13.811107569918] , [ 1285819200000 , 13.786494560787] , [ 1288497600000 , 14.04516285753] , [ 1291093200000 , 13.697412447288] , [ 1293771600000 , 13.677681376221] , [ 1296450000000 , 19.961511864531] , [ 1298869200000 , 21.049198298158] , [ 1301544000000 , 22.687631094008] , [ 1304136000000 , 25.469010617433] , [ 1306814400000 , 24.883799437121] , [ 1309406400000 , 24.203843814248] , [ 1312084800000 , 22.138760964038] , [ 1314763200000 , 16.034636966228] , [ 1317355200000 , 15.394958944556] , [ 1320033600000 , 12.625642461969] , [ 1322629200000 , 12.973735699739] , [ 1325307600000 , 15.786018336149] , [ 1327986000000 , 15.227368020134] , [ 1330491600000 , 15.899752650734] , [ 1333166400000 , 18.994731295388] , [ 1335758400000 , 18.450055817702] , [ 1338436800000 , 17.863719889669]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Industrials" ,
|
||||
"values" : [ [ 1138683600000 , 7.1590087090398] , [ 1141102800000 , 7.1297210970108] , [ 1143781200000 , 5.5774588290586] , [ 1146369600000 , 5.4977254491156] , [ 1149048000000 , 5.5138153113634] , [ 1151640000000 , 4.3198084032122] , [ 1154318400000 , 3.9179295839125] , [ 1156996800000 , 3.8110093051479] , [ 1159588800000 , 5.5629020916939] , [ 1162270800000 , 5.7241673711336] , [ 1164862800000 , 5.4715049695004] , [ 1167541200000 , 4.9193763571618] , [ 1170219600000 , 5.136053947247] , [ 1172638800000 , 5.1327258759766] , [ 1175313600000 , 5.1888943925082] , [ 1177905600000 , 5.5191481293345] , [ 1180584000000 , 5.6093625614921] , [ 1183176000000 , 4.2706312987397] , [ 1185854400000 , 4.4453235132117] , [ 1188532800000 , 4.6228003109761] , [ 1191124800000 , 5.0645764756954] , [ 1193803200000 , 5.0723447230959] , [ 1196398800000 , 5.1457765818846] , [ 1199077200000 , 5.4067851597282] , [ 1201755600000 , 5.472241916816] , [ 1204261200000 , 5.3742740389688] , [ 1206936000000 , 6.251751933664] , [ 1209528000000 , 6.1406852153472] , [ 1212206400000 , 5.8164385627465] , [ 1214798400000 , 5.4255846656171] , [ 1217476800000 , 5.3738499417204] , [ 1220155200000 , 5.1815627753979] , [ 1222747200000 , 5.0305983235349] , [ 1225425600000 , 4.6823058607165] , [ 1228021200000 , 4.5941481589093] , [ 1230699600000 , 5.4669598474575] , [ 1233378000000 , 5.1249037357] , [ 1235797200000 , 4.3504421250742] , [ 1238472000000 , 4.6260881026002] , [ 1241064000000 , 5.0140402458946] , [ 1243742400000 , 4.7458462454774] , [ 1246334400000 , 6.0437019654564] , [ 1249012800000 , 6.4595216249754] , [ 1251691200000 , 6.6420468254155] , [ 1254283200000 , 5.8927271960913] , [ 1256961600000 , 5.4712108838003] , [ 1259557200000 , 6.1220254207747] , [ 1262235600000 , 5.5385935169255] , [ 1264914000000 , 5.7383377612639] , [ 1267333200000 , 6.1715976730415] , [ 1270008000000 , 4.0102262681174] , [ 1272600000000 , 3.769389679692] , [ 1275278400000 , 3.5301571031152] , [ 1277870400000 , 2.7660252652526] , [ 1280548800000 , 3.1409983385775] , [ 1283227200000 , 3.0528024863055] , [ 1285819200000 , 4.3126123157971] , [ 1288497600000 , 4.594654041683] , [ 1291093200000 , 4.5424126126793] , [ 1293771600000 , 4.7790043987302] , [ 1296450000000 , 7.4969154058289] , [ 1298869200000 , 7.9424751557821] , [ 1301544000000 , 7.1560736250547] , [ 1304136000000 , 7.9478117337855] , [ 1306814400000 , 7.4109214848895] , [ 1309406400000 , 7.5966457641101] , [ 1312084800000 , 7.165754444071] , [ 1314763200000 , 5.4816702524302] , [ 1317355200000 , 4.9893656089584] , [ 1320033600000 , 4.498385105327] , [ 1322629200000 , 4.6776090358151] , [ 1325307600000 , 8.1350814368063] , [ 1327986000000 , 8.0732769990652] , [ 1330491600000 , 8.5602340387277] , [ 1333166400000 , 5.1293714074325] , [ 1335758400000 , 5.2586794619016] , [ 1338436800000 , 5.1100853569977]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Information Technology" ,
|
||||
"values" : [ [ 1138683600000 , 13.242301508051] , [ 1141102800000 , 12.863536342042] , [ 1143781200000 , 21.034044171629] , [ 1146369600000 , 21.419084618803] , [ 1149048000000 , 21.142678863691] , [ 1151640000000 , 26.568489677529] , [ 1154318400000 , 24.839144939905] , [ 1156996800000 , 25.456187462167] , [ 1159588800000 , 26.350164502826] , [ 1162270800000 , 26.47833320519] , [ 1164862800000 , 26.425979547847] , [ 1167541200000 , 28.191461582256] , [ 1170219600000 , 28.930307448808] , [ 1172638800000 , 29.521413891117] , [ 1175313600000 , 28.188285966466] , [ 1177905600000 , 27.704619625832] , [ 1180584000000 , 27.490862424829] , [ 1183176000000 , 28.770679721286] , [ 1185854400000 , 29.060480671449] , [ 1188532800000 , 28.240998844973] , [ 1191124800000 , 33.004893194127] , [ 1193803200000 , 34.075180359928] , [ 1196398800000 , 32.548560664833] , [ 1199077200000 , 30.629727432728] , [ 1201755600000 , 28.642858788159] , [ 1204261200000 , 27.973575227842] , [ 1206936000000 , 27.393351882726] , [ 1209528000000 , 28.476095288523] , [ 1212206400000 , 29.29667866426] , [ 1214798400000 , 29.222333802896] , [ 1217476800000 , 28.092966093843] , [ 1220155200000 , 28.107159262922] , [ 1222747200000 , 25.482974832098] , [ 1225425600000 , 21.208115993834] , [ 1228021200000 , 20.295043095268] , [ 1230699600000 , 15.925754618401] , [ 1233378000000 , 17.162864628346] , [ 1235797200000 , 17.084345773174] , [ 1238472000000 , 22.246007102281] , [ 1241064000000 , 24.530543998509] , [ 1243742400000 , 25.084184918242] , [ 1246334400000 , 16.606166527358] , [ 1249012800000 , 17.239620011628] , [ 1251691200000 , 17.336739127379] , [ 1254283200000 , 25.478492475753] , [ 1256961600000 , 23.017152085245] , [ 1259557200000 , 25.617745423683] , [ 1262235600000 , 24.061133998642] , [ 1264914000000 , 23.223933318644] , [ 1267333200000 , 24.425887263937] , [ 1270008000000 , 35.501471156693] , [ 1272600000000 , 33.775013878676] , [ 1275278400000 , 30.417993630285] , [ 1277870400000 , 30.023598978467] , [ 1280548800000 , 33.327519522436] , [ 1283227200000 , 31.963388450371] , [ 1285819200000 , 30.498967232092] , [ 1288497600000 , 32.403696817912] , [ 1291093200000 , 31.47736071922] , [ 1293771600000 , 31.53259666241] , [ 1296450000000 , 41.760282761548] , [ 1298869200000 , 45.605771243237] , [ 1301544000000 , 39.986557966215] , [ 1304136000000 , 43.846330510051] , [ 1306814400000 , 39.857316881857] , [ 1309406400000 , 37.675127768208] , [ 1312084800000 , 35.775077970313] , [ 1314763200000 , 48.631009702577] , [ 1317355200000 , 42.830831754505] , [ 1320033600000 , 35.611502589362] , [ 1322629200000 , 35.320136981738] , [ 1325307600000 , 31.564136901516] , [ 1327986000000 , 32.074407502433] , [ 1330491600000 , 35.053013769976] , [ 1333166400000 , 26.434568573937] , [ 1335758400000 , 25.305617871002] , [ 1338436800000 , 24.520919418236]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Materials" ,
|
||||
"values" : [ [ 1138683600000 , 5.5806167415681] , [ 1141102800000 , 5.4539047069985] , [ 1143781200000 , 7.6728842432362] , [ 1146369600000 , 7.719946716654] , [ 1149048000000 , 8.0144619912942] , [ 1151640000000 , 7.942223133434] , [ 1154318400000 , 8.3998279827444] , [ 1156996800000 , 8.532324572605] , [ 1159588800000 , 4.7324285199763] , [ 1162270800000 , 4.7402397487697] , [ 1164862800000 , 4.9042069355168] , [ 1167541200000 , 5.9583963430882] , [ 1170219600000 , 6.3693899239171] , [ 1172638800000 , 6.261153903813] , [ 1175313600000 , 5.3443942184584] , [ 1177905600000 , 5.4932111235361] , [ 1180584000000 , 5.5747393101109] , [ 1183176000000 , 5.3833633060013] , [ 1185854400000 , 5.5125898831832] , [ 1188532800000 , 5.8116112661327] , [ 1191124800000 , 4.3962296939996] , [ 1193803200000 , 4.6967663605521] , [ 1196398800000 , 4.7963004350914] , [ 1199077200000 , 4.1817985183351] , [ 1201755600000 , 4.3797643870182] , [ 1204261200000 , 4.6966642197965] , [ 1206936000000 , 4.3609995132565] , [ 1209528000000 , 4.4736290996496] , [ 1212206400000 , 4.3749762738128] , [ 1214798400000 , 3.3274661194507] , [ 1217476800000 , 3.0316184691337] , [ 1220155200000 , 2.5718140204728] , [ 1222747200000 , 2.7034994044603] , [ 1225425600000 , 2.2033786591364] , [ 1228021200000 , 1.9850621240805] , [ 1230699600000 , 0] , [ 1233378000000 , 0] , [ 1235797200000 , 0] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , 0] , [ 1249012800000 , 0] , [ 1251691200000 , 0] , [ 1254283200000 , 0.44495950017788] , [ 1256961600000 , 0.33945469262483] , [ 1259557200000 , 0.38348269455195] , [ 1262235600000 , 0] , [ 1264914000000 , 0] , [ 1267333200000 , 0] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 0.52216435716176] , [ 1298869200000 , 0.59275786698454] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 0] , [ 1317355200000 , 0] , [ 1320033600000 , 0] , [ 1322629200000 , 0] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0] , [ 1338436800000 , 0]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Telecommunication Services" ,
|
||||
"values" : [ [ 1138683600000 , 3.7056975170243] , [ 1141102800000 , 3.7561118692318] , [ 1143781200000 , 2.861913700854] , [ 1146369600000 , 2.9933744103381] , [ 1149048000000 , 2.7127537218463] , [ 1151640000000 , 3.1195497076283] , [ 1154318400000 , 3.4066964004508] , [ 1156996800000 , 3.3754571113569] , [ 1159588800000 , 2.2965579982924] , [ 1162270800000 , 2.4486818633018] , [ 1164862800000 , 2.4002308848517] , [ 1167541200000 , 1.9649579750349] , [ 1170219600000 , 1.9385263638056] , [ 1172638800000 , 1.9128975336387] , [ 1175313600000 , 2.3412869836298] , [ 1177905600000 , 2.4337870351445] , [ 1180584000000 , 2.62179703171] , [ 1183176000000 , 3.2642864957929] , [ 1185854400000 , 3.3200396223709] , [ 1188532800000 , 3.3934212707572] , [ 1191124800000 , 4.2822327088179] , [ 1193803200000 , 4.1474964228541] , [ 1196398800000 , 4.1477082879801] , [ 1199077200000 , 5.2947122916128] , [ 1201755600000 , 5.2919843508028] , [ 1204261200000 , 5.1989783050309] , [ 1206936000000 , 3.5603057673513] , [ 1209528000000 , 3.3009087690692] , [ 1212206400000 , 3.1784852603792] , [ 1214798400000 , 4.5889503538868] , [ 1217476800000 , 4.401779617494] , [ 1220155200000 , 4.2208301828278] , [ 1222747200000 , 3.89396671475] , [ 1225425600000 , 3.0423832241354] , [ 1228021200000 , 3.135520611578] , [ 1230699600000 , 1.9631418164089] , [ 1233378000000 , 1.8963543874958] , [ 1235797200000 , 1.8266636017025] , [ 1238472000000 , 0.93136635895188] , [ 1241064000000 , 0.92737801918888] , [ 1243742400000 , 0.97591889805002] , [ 1246334400000 , 2.6841193805515] , [ 1249012800000 , 2.5664341140531] , [ 1251691200000 , 2.3887523699873] , [ 1254283200000 , 1.1737801663681] , [ 1256961600000 , 1.0953582317281] , [ 1259557200000 , 1.2495674976653] , [ 1262235600000 , 0.36607452464754] , [ 1264914000000 , 0.3548719047291] , [ 1267333200000 , 0.36769242398939] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0.85450741275337] , [ 1288497600000 , 0.91360317921637] , [ 1291093200000 , 0.89647678692269] , [ 1293771600000 , 0.87800687192639] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0.43668720882994] , [ 1304136000000 , 0.4756523602692] , [ 1306814400000 , 0.46947368328469] , [ 1309406400000 , 0.45138896152316] , [ 1312084800000 , 0.43828726648117] , [ 1314763200000 , 2.0820861395316] , [ 1317355200000 , 0.9364411075395] , [ 1320033600000 , 0.60583907839773] , [ 1322629200000 , 0.61096950747437] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0] , [ 1338436800000 , 0]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Utilities" ,
|
||||
"values" : [ [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 0] , [ 1162270800000 , 0] , [ 1164862800000 , 0] , [ 1167541200000 , 0] , [ 1170219600000 , 0] , [ 1172638800000 , 0] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , 0] , [ 1185854400000 , 0] , [ 1188532800000 , 0] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , 0] , [ 1209528000000 , 0] , [ 1212206400000 , 0] , [ 1214798400000 , 0] , [ 1217476800000 , 0] , [ 1220155200000 , 0] , [ 1222747200000 , 0] , [ 1225425600000 , 0] , [ 1228021200000 , 0] , [ 1230699600000 , 0] , [ 1233378000000 , 0] , [ 1235797200000 , 0] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , 0] , [ 1249012800000 , 0] , [ 1251691200000 , 0] , [ 1254283200000 , 0] , [ 1256961600000 , 0] , [ 1259557200000 , 0] , [ 1262235600000 , 0] , [ 1264914000000 , 0] , [ 1267333200000 , 0] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 0] , [ 1317355200000 , 0] , [ 1320033600000 , 0] , [ 1322629200000 , 0] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0] , [ 1338436800000 , 0]]
|
||||
}
|
||||
];
|
||||
|
||||
/*
|
||||
// for testing single data point
|
||||
var histcatexplong = [
|
||||
{
|
||||
"key" : "Consumer Discretionary" ,
|
||||
"values" : [ [ 1138683600000 , 27.38478809681]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Consumer Staples" ,
|
||||
"values" : [ [ 1138683600000 , 7.2800122043237]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Energy" ,
|
||||
"values" : [ [ 1138683600000 , 1.544303464167]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Financials" ,
|
||||
"values" : [ [ 1138683600000 , 13.356778764352]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Health Care" ,
|
||||
"values" : [ [ 1138683600000 , 14.212410956029]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Industrials" ,
|
||||
"values" : [ [ 1138683600000 , 7.1590087090398]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Information Technology" ,
|
||||
"values" : [ [ 1138683600000 , 13.242301508051]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Materials" ,
|
||||
"values" : [ [ 1138683600000 , 5.5806167415681]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Telecommunication Services" ,
|
||||
"values" : [ [ 1138683600000 , 3.7056975170243]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Utilities" ,
|
||||
"values" : [ [ 1138683600000 , 0]]
|
||||
}
|
||||
];
|
||||
*/
|
||||
|
||||
|
||||
|
||||
var histcatexpshort = [
|
||||
{
|
||||
"key" : "Consumer Staples" ,
|
||||
"values" : [ [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 0] , [ 1162270800000 , 0] , [ 1164862800000 , 0] , [ 1167541200000 , -0.24102139376003] , [ 1170219600000 , -0.69960584365035] , [ 1172638800000 , -0.67365051426185] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , -0.31429312464988] , [ 1185854400000 , -0.90018700397153] , [ 1188532800000 , -0.96926214328714] , [ 1191124800000 , -1.1343386468131] , [ 1193803200000 , -1.1335426595455] , [ 1196398800000 , -1.2327663032424] , [ 1199077200000 , -0.41027135492155] , [ 1201755600000 , -0.41779167524802] , [ 1204261200000 , -0.38133883625885] , [ 1206936000000 , 0] , [ 1209528000000 , -0.32550520320253] , [ 1212206400000 , -0.33185144615505] , [ 1214798400000 , -0.68609668877894] , [ 1217476800000 , -0.70001207744308] , [ 1220155200000 , -0.68378680840919] , [ 1222747200000 , -0.40908783182034] , [ 1225425600000 , -0.39074266525646] , [ 1228021200000 , -0.40358490474562] , [ 1230699600000 , -0.85752207262267] , [ 1233378000000 , -0.74395750438805] , [ 1235797200000 , -0.70718832429489] , [ 1238472000000 , -0.76244465406965] , [ 1241064000000 , -0.67618572591984] , [ 1243742400000 , -0.67649596761402] , [ 1246334400000 , -0.94618002703247] , [ 1249012800000 , -0.95408485581014] , [ 1251691200000 , -0.96272139504276] , [ 1254283200000 , 0] , [ 1256961600000 , 0] , [ 1259557200000 , 0] , [ 1262235600000 , 0] , [ 1264914000000 , 0] , [ 1267333200000 , 0] , [ 1270008000000 , -0.25516420149471] , [ 1272600000000 , -0.24106264576017] , [ 1275278400000 , -0.22802547751448] , [ 1277870400000 , -0.62187524046697] , [ 1280548800000 , -0.72155608677106] , [ 1283227200000 , -0.70221659944774] , [ 1285819200000 , -1.1117002584543] , [ 1288497600000 , -1.190911001336] , [ 1291093200000 , -1.1781082003972] , [ 1293771600000 , -1.2125860264875] , [ 1296450000000 , -1.7748010365657] , [ 1298869200000 , -1.8919594178596] , [ 1301544000000 , -1.7077946421533] , [ 1304136000000 , -2.024238803094] , [ 1306814400000 , -1.9769844081819] , [ 1309406400000 , -2.0730275464065] , [ 1312084800000 , -1.9690128240888] , [ 1314763200000 , -5.5557852269348] , [ 1317355200000 , -7.2527933190641] , [ 1320033600000 , -5.7367677053109] , [ 1322629200000 , -6.0409316206662] , [ 1325307600000 , -4.6511525539195] , [ 1327986000000 , -4.526116059083] , [ 1330491600000 , -4.846292325197] , [ 1333166400000 , -2.2663198779425] , [ 1335758400000 , -2.4172072568564] , [ 1338436800000 , -2.3204729601189]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Consumer Discretionary" ,
|
||||
"values" : [ [ 1138683600000 , -0.62238434102863] , [ 1141102800000 , -0.61484565039024] , [ 1143781200000 , -1.0769367918668] , [ 1146369600000 , -1.2221156604129] , [ 1149048000000 , -1.2434858263377] , [ 1151640000000 , -0.58606435489597] , [ 1154318400000 , -0.61478911495141] , [ 1156996800000 , -0.61429362688591] , [ 1159588800000 , -1.1168614112788] , [ 1162270800000 , -1.1510268716612] , [ 1164862800000 , -1.1104724164222] , [ 1167541200000 , -1.2298338563471] , [ 1170219600000 , -1.5053664389104] , [ 1172638800000 , -1.5535266372193] , [ 1175313600000 , -3.1690472535854] , [ 1177905600000 , -3.1273013967041] , [ 1180584000000 , -3.155466271777] , [ 1183176000000 , -3.7158562579437] , [ 1185854400000 , -3.8244546635586] , [ 1188532800000 , -3.5524464859972] , [ 1191124800000 , -3.0472339109128] , [ 1193803200000 , -3.064978140815] , [ 1196398800000 , -3.0818130124986] , [ 1199077200000 , -2.9806791138312] , [ 1201755600000 , -3.7360958775824] , [ 1204261200000 , -3.4687841733263] , [ 1206936000000 , -3.3702018615806] , [ 1209528000000 , -3.1982756208679] , [ 1212206400000 , -3.0489433155104] , [ 1214798400000 , -3.7008275605963] , [ 1217476800000 , -3.8980507260892] , [ 1220155200000 , -3.7680083260241] , [ 1222747200000 , -3.2061890012391] , [ 1225425600000 , -2.6727551440484] , [ 1228021200000 , -2.4469327462935] , [ 1230699600000 , -3.0192419668784] , [ 1233378000000 , -2.892958553476] , [ 1235797200000 , -3.1153570053479] , [ 1238472000000 , -2.9927580570711] , [ 1241064000000 , -3.5061796706294] , [ 1243742400000 , -3.2944159516725] , [ 1246334400000 , -3.4154213240617] , [ 1249012800000 , -3.6492125438171] , [ 1251691200000 , -3.6674164998394] , [ 1254283200000 , -4.6271484977727] , [ 1256961600000 , -4.2433407292676] , [ 1259557200000 , -4.4742625247274] , [ 1262235600000 , -5.2078214612359] , [ 1264914000000 , -5.2209579214469] , [ 1267333200000 , -5.4596395756061] , [ 1270008000000 , -5.6906459276584] , [ 1272600000000 , -6.4981737808665] , [ 1275278400000 , -6.2563044048578] , [ 1277870400000 , -6.175479487959] , [ 1280548800000 , -6.6641002427295] , [ 1283227200000 , -6.3648667745556] , [ 1285819200000 , -5.0270168607884] , [ 1288497600000 , -5.1186072976233] , [ 1291093200000 , -5.1127601587872] , [ 1293771600000 , -5.3015262972641] , [ 1296450000000 , -4.4295728671596] , [ 1298869200000 , -4.5488139745696] , [ 1301544000000 , -2.9021260315957] , [ 1304136000000 , -3.1482096241139] , [ 1306814400000 , -2.8648831814763] , [ 1309406400000 , -2.8149423433441] , [ 1312084800000 , -2.6350669145713] , [ 1314763200000 , -5.9871754759038] , [ 1317355200000 , -8.6127555816399] , [ 1320033600000 , -7.0712887348892] , [ 1322629200000 , -7.3930257999857] , [ 1325307600000 , -6.5183071556304] , [ 1327986000000 , -7.4388913793503] , [ 1330491600000 , -8.2134465182649] , [ 1333166400000 , -7.7836036697105] , [ 1335758400000 , -8.0955053683936] , [ 1338436800000 , -8.0981845818893]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Energy" ,
|
||||
"values" : [ [ 1138683600000 , -0.95707527558303] , [ 1141102800000 , -0.78324346694487] , [ 1143781200000 , -1.2905241058019] , [ 1146369600000 , -1.3880880486779] , [ 1149048000000 , -1.3337247185993] , [ 1151640000000 , -1.0342112071924] , [ 1154318400000 , -1.1264764100183] , [ 1156996800000 , -1.0001002640852] , [ 1159588800000 , -0.85341153093953] , [ 1162270800000 , -0.88452017844596] , [ 1164862800000 , -0.84305725300642] , [ 1167541200000 , -1.0874455682301] , [ 1170219600000 , -1.1714969043168] , [ 1172638800000 , -1.1445856467934] , [ 1175313600000 , -1.1928513334073] , [ 1177905600000 , -1.2365691634265] , [ 1180584000000 , -1.2690940962478] , [ 1183176000000 , -1.662233774695] , [ 1185854400000 , -1.745760538781] , [ 1188532800000 , -1.5209200931271] , [ 1191124800000 , -1.7874791820886] , [ 1193803200000 , -1.7755668105117] , [ 1196398800000 , -1.5456069064618] , [ 1199077200000 , -1.7077541586335] , [ 1201755600000 , -1.6462081650757] , [ 1204261200000 , -1.8624735339628] , [ 1206936000000 , -0.71073453533048] , [ 1209528000000 , -0.75380709640219] , [ 1212206400000 , -0.71020554911716] , [ 1214798400000 , -1.2077850914504] , [ 1217476800000 , -1.0505576787644] , [ 1220155200000 , -0.97804595164878] , [ 1222747200000 , -0.34591294663671] , [ 1225425600000 , -0.19958331514025] , [ 1228021200000 , -0.17599782216296] , [ 1230699600000 , -0.49577714121027] , [ 1233378000000 , -0.51644059173978] , [ 1235797200000 , -0.48576859637083] , [ 1238472000000 , -0.75596531126452] , [ 1241064000000 , -0.72073358315801] , [ 1243742400000 , -0.82125996732294] , [ 1246334400000 , -1.4933216860121] , [ 1249012800000 , -1.5003760525933] , [ 1251691200000 , -1.4744921420596] , [ 1254283200000 , -1.8197844060652] , [ 1256961600000 , -1.6558574419626] , [ 1259557200000 , -1.7256149254159] , [ 1262235600000 , -2.7667194124217] , [ 1264914000000 , -2.9113351806903] , [ 1267333200000 , -3.0172806042796] , [ 1270008000000 , -2.8607175559701] , [ 1272600000000 , -2.629226972169] , [ 1275278400000 , -2.1855196883832] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , -1.3788733828844] , [ 1288497600000 , -1.4136792139765] , [ 1291093200000 , -1.5176522942901] , [ 1293771600000 , -1.5776651933208] , [ 1296450000000 , -1.7171675182182] , [ 1298869200000 , -1.8121885250566] , [ 1301544000000 , -1.2221934283206] , [ 1304136000000 , -1.2910715239439] , [ 1306814400000 , -1.1492301612576] , [ 1309406400000 , -1.0613891302841] , [ 1312084800000 , -0.99605193205308] , [ 1314763200000 , -1.7324212072278] , [ 1317355200000 , -1.5226856867477] , [ 1320033600000 , -1.3159138896549] , [ 1322629200000 , -1.3925952659299] , [ 1325307600000 , -1.59624913621] , [ 1327986000000 , -1.5235879880296] , [ 1330491600000 , -1.7315573519279] , [ 1333166400000 , -0.86883431220926] , [ 1335758400000 , -0.90144871282829] , [ 1338436800000 , -0.7010492182517]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Financials" ,
|
||||
"values" : [ [ 1138683600000 , -0.56797103580254] , [ 1141102800000 , -0.57324319174933] , [ 1143781200000 , -1.1014818753272] , [ 1146369600000 , -1.1480256918118] , [ 1149048000000 , -1.0709335336775] , [ 1151640000000 , -0.84876993929658] , [ 1154318400000 , -0.88122638919979] , [ 1156996800000 , -0.86421146074279] , [ 1159588800000 , -0.95093689377974] , [ 1162270800000 , -0.96646862382248] , [ 1164862800000 , -0.96726919442167] , [ 1167541200000 , -0.99874655234936] , [ 1170219600000 , -1.0004843898938] , [ 1172638800000 , -0.9925349676815] , [ 1175313600000 , -1.1888941931287] , [ 1177905600000 , -1.9402228220929] , [ 1180584000000 , -2.03915987194] , [ 1183176000000 , -2.4620526931074] , [ 1185854400000 , -2.2423544651877] , [ 1188532800000 , -1.8790998536037] , [ 1191124800000 , -0.43246873489492] , [ 1193803200000 , -0.40142684216371] , [ 1196398800000 , -0.35646635110466] , [ 1199077200000 , -0.90385702817642] , [ 1201755600000 , -0.86997575249605] , [ 1204261200000 , -0.80101406775415] , [ 1206936000000 , 0] , [ 1209528000000 , 0] , [ 1212206400000 , 0] , [ 1214798400000 , -0.31816167663298] , [ 1217476800000 , -0.309250081849] , [ 1220155200000 , -0.27723698582762] , [ 1222747200000 , -0.32001379372079] , [ 1225425600000 , -0.1940212908561] , [ 1228021200000 , -0.051964569203423] , [ 1230699600000 , -0.68342686502452] , [ 1233378000000 , -0.57645644730726] , [ 1235797200000 , -0.50860972184555] , [ 1238472000000 , -0.44405217759605] , [ 1241064000000 , -0.45224333626901] , [ 1243742400000 , -0.41691818252313] , [ 1246334400000 , -2.4654561579904] , [ 1249012800000 , -2.5473566378551] , [ 1251691200000 , -2.8340604021307] , [ 1254283200000 , -1.8452445924041] , [ 1256961600000 , -1.5626544265386] , [ 1259557200000 , -1.707842764916] , [ 1262235600000 , -1.2237258567344] , [ 1264914000000 , -1.9756896168227] , [ 1267333200000 , -2.0920321696833] , [ 1270008000000 , -1.9782327706952] , [ 1272600000000 , -2.0416328165753] , [ 1275278400000 , -1.7816736134798] , [ 1277870400000 , -0.66092275437689] , [ 1280548800000 , -0.73608099025756] , [ 1283227200000 , -0.63686713461189] , [ 1285819200000 , -0.0024159482973197] , [ 1288497600000 , -0.0023052643588188] , [ 1291093200000 , -0.0023008251965446] , [ 1293771600000 , -0.002247807834351] , [ 1296450000000 , -0.62004345920743] , [ 1298869200000 , -0.69634926653235] , [ 1301544000000 , -0.76013525555354] , [ 1304136000000 , -1.505368495849] , [ 1306814400000 , -1.3456949237707] , [ 1309406400000 , -1.3013934898695] , [ 1312084800000 , -1.183199519395] , [ 1314763200000 , -0.0074317809719494] , [ 1317355200000 , -0.019430458325379] , [ 1320033600000 , -0.015777413509084] , [ 1322629200000 , -0.016463879837718] , [ 1325307600000 , -0.0031338919976225] , [ 1327986000000 , -0.0029770278967514] , [ 1330491600000 , -0.003048902987439] , [ 1333166400000 , -0.71171545945298] , [ 1335758400000 , -0.72003299240508] , [ 1338436800000 , -0.72961974845039]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Health Care" ,
|
||||
"values" : [ [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 0] , [ 1162270800000 , 0] , [ 1164862800000 , 0] , [ 1167541200000 , 0] , [ 1170219600000 , 0] , [ 1172638800000 , 0] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , -0.16816074963595] , [ 1185854400000 , -0.19318598121302] , [ 1188532800000 , -0.20130864403797] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , 0] , [ 1209528000000 , 0] , [ 1212206400000 , 0] , [ 1214798400000 , -0.30476443991021] , [ 1217476800000 , -0.31836730824777] , [ 1220155200000 , -0.30797427879366] , [ 1222747200000 , -0.48318623977865] , [ 1225425600000 , -0.50834562674351] , [ 1228021200000 , -0.47936068182503] , [ 1230699600000 , -0.61753010081956] , [ 1233378000000 , -0.59493587396819] , [ 1235797200000 , -0.62664324339064] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , 0] , [ 1249012800000 , 0] , [ 1251691200000 , 0] , [ 1254283200000 , -1.3076157801726] , [ 1256961600000 , -1.2306204787628] , [ 1259557200000 , -1.4728435992801] , [ 1262235600000 , -1.7729831226837] , [ 1264914000000 , -1.7711733839842] , [ 1267333200000 , -1.8233584472099] , [ 1270008000000 , -1.8505979461969] , [ 1272600000000 , -1.5989071613823] , [ 1275278400000 , -1.6636770720413] , [ 1277870400000 , -1.4523909758725] , [ 1280548800000 , -1.503771584105] , [ 1283227200000 , -1.5458561450475] , [ 1285819200000 , -1.457331837483] , [ 1288497600000 , -1.4217332434071] , [ 1291093200000 , -1.4687927303394] , [ 1293771600000 , -1.437223057967] , [ 1296450000000 , -0.72221871524334] , [ 1298869200000 , -0.7399575414588] , [ 1301544000000 , -1.9712239746745] , [ 1304136000000 , -2.2360949351942] , [ 1306814400000 , -2.2147572530541] , [ 1309406400000 , -2.0440932285023] , [ 1312084800000 , -1.9438209561938] , [ 1314763200000 , -4.9035620630386] , [ 1317355200000 , -4.9036674804213] , [ 1320033600000 , -4.1900706458801] , [ 1322629200000 , -4.5602615827955] , [ 1325307600000 , -1.9194421885814] , [ 1327986000000 , -1.8854470816382] , [ 1330491600000 , -1.9514785018245] , [ 1333166400000 , -0.65282205870454] , [ 1335758400000 , -0.57068368199209] , [ 1338436800000 , -0.55902563384907]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Industrials" ,
|
||||
"values" : [ [ 1138683600000 , -0.390983707093] , [ 1141102800000 , -0.38471122730537] , [ 1143781200000 , -0.22897173467143] , [ 1146369600000 , -0.23798946472286] , [ 1149048000000 , -0.20721233428173] , [ 1151640000000 , -0.54577697700394] , [ 1154318400000 , -0.50300252995937] , [ 1156996800000 , -0.49609518628103] , [ 1159588800000 , -0.19582276889273] , [ 1162270800000 , -0.60399139945108] , [ 1164862800000 , -0.61477368082886] , [ 1167541200000 , -0.13665869881705] , [ 1170219600000 , -0.13147565243332] , [ 1172638800000 , -0.11819441593356] , [ 1175313600000 , -0.41610825689528] , [ 1177905600000 , -0.38815419659358] , [ 1180584000000 , -0.3703838943035] , [ 1183176000000 , -1.6193903804534] , [ 1185854400000 , -1.6502660417328] , [ 1188532800000 , -1.481875010149] , [ 1191124800000 , -0.96180099322536] , [ 1193803200000 , -0.97017301394967] , [ 1196398800000 , -0.97432971260093] , [ 1199077200000 , -0.36071934518387] , [ 1201755600000 , -0.42150070991777] , [ 1204261200000 , -0.41784042793202] , [ 1206936000000 , -0.70494708349169] , [ 1209528000000 , -0.73449590911984] , [ 1212206400000 , -0.7400163600788] , [ 1214798400000 , -0.52584502195668] , [ 1217476800000 , -0.56224806965368] , [ 1220155200000 , -0.50830855192741] , [ 1222747200000 , -0.79494637898049] , [ 1225425600000 , -0.70391433947286] , [ 1228021200000 , -0.61420660317009] , [ 1230699600000 , -0.41699636242004] , [ 1233378000000 , -0.3779041158185] , [ 1235797200000 , -0.34282498854047] , [ 1238472000000 , -0.83845630450592] , [ 1241064000000 , -0.85937944918912] , [ 1243742400000 , -0.85530287999615] , [ 1246334400000 , -1.2819866264007] , [ 1249012800000 , -1.4598491663715] , [ 1251691200000 , -1.5261472177779] , [ 1254283200000 , -1.2503948993549] , [ 1256961600000 , -1.1767079775724] , [ 1259557200000 , -1.2585538260386] , [ 1262235600000 , -3.420972598165] , [ 1264914000000 , -3.3381337072954] , [ 1267333200000 , -3.7043129330694] , [ 1270008000000 , -4.6924500756609] , [ 1272600000000 , -4.6880683704908] , [ 1275278400000 , -4.3335249071719] , [ 1277870400000 , -3.6545810416445] , [ 1280548800000 , -4.1639787701262] , [ 1283227200000 , -3.8249597612047] , [ 1285819200000 , -0.33221815335641] , [ 1288497600000 , -0.33346468179047] , [ 1291093200000 , -0.34546911228789] , [ 1293771600000 , -0.36609971997147] , [ 1296450000000 , -0.42502545672607] , [ 1298869200000 , -0.38192733348507] , [ 1301544000000 , -0.01991033447621] , [ 1304136000000 , -0.020319195299659] , [ 1306814400000 , -0.018147820835144] , [ 1309406400000 , -0.017923186209383] , [ 1312084800000 , -0.016133999253684] , [ 1314763200000 , -0.72058656278977] , [ 1317355200000 , -0.42812646564889] , [ 1320033600000 , -0.35896134792589] , [ 1322629200000 , -0.38637896444549] , [ 1325307600000 , -0.31794663984021] , [ 1327986000000 , -0.32220831831888] , [ 1330491600000 , -0.37107872672214] , [ 1333166400000 , -0.81968633933695] , [ 1335758400000 , -0.77148300885994] , [ 1338436800000 , -0.77392261735539]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Information Technology" ,
|
||||
"values" : [ [ 1138683600000 , -0.86346955704548] , [ 1141102800000 , -0.88352373534584] , [ 1143781200000 , -1.2630802711685] , [ 1146369600000 , -1.2352593999242] , [ 1149048000000 , -1.2086379045093] , [ 1151640000000 , -1.0416778473647] , [ 1154318400000 , -0.99326278105154] , [ 1156996800000 , -1.0095045907007] , [ 1159588800000 , -2.0762515478576] , [ 1162270800000 , -2.13066829429] , [ 1164862800000 , -2.2458400474235] , [ 1167541200000 , -2.1315262677135] , [ 1170219600000 , -2.4063108252146] , [ 1172638800000 , -2.3753290631454] , [ 1175313600000 , -2.1119577565913] , [ 1177905600000 , -2.1546804750397] , [ 1180584000000 , -2.3768374034303] , [ 1183176000000 , -1.244878330098] , [ 1185854400000 , -1.2233210265236] , [ 1188532800000 , -1.1715073644317] , [ 1191124800000 , -1.0036136395928] , [ 1193803200000 , -0.9510676777939] , [ 1196398800000 , -0.97553526602196] , [ 1199077200000 , -1.9083849411912] , [ 1201755600000 , -1.855965027796] , [ 1204261200000 , -1.7343633512402] , [ 1206936000000 , -2.1847032903649] , [ 1209528000000 , -2.2095446284368] , [ 1212206400000 , -2.2060678671735] , [ 1214798400000 , -1.0941627910924] , [ 1217476800000 , -1.0004352405294] , [ 1220155200000 , -0.93563501378075] , [ 1222747200000 , 0] , [ 1225425600000 , -0.65155092645953] , [ 1228021200000 , -0.66021585164047] , [ 1230699600000 , 0] , [ 1233378000000 , 0] , [ 1235797200000 , 0] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , 0] , [ 1249012800000 , 0] , [ 1251691200000 , 0] , [ 1254283200000 , -0.29297573068109] , [ 1256961600000 , -0.75043756379084] , [ 1259557200000 , -0.85690846482745] , [ 1262235600000 , -0.21937480770873] , [ 1264914000000 , -0.93232569935343] , [ 1267333200000 , -0.94180327525084] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , -0.21253553193891] , [ 1288497600000 , -0.23178244747722] , [ 1291093200000 , -0.21481706129968] , [ 1293771600000 , -0.23306463011242] , [ 1296450000000 , -0.90244048159158] , [ 1298869200000 , -1.0410052083529] , [ 1301544000000 , -2.209350937089] , [ 1304136000000 , -2.6540796712932] , [ 1306814400000 , -3.2481210590957] , [ 1309406400000 , -3.0717986354635] , [ 1312084800000 , -2.7493296528921] , [ 1314763200000 , -2.1973991293256] , [ 1317355200000 , -0.86403111842659] , [ 1320033600000 , -0.87824756160219] , [ 1322629200000 , -0.80812571482871] , [ 1325307600000 , -1.6419820357151] , [ 1327986000000 , -1.6893790342619] , [ 1330491600000 , -1.8614499455474] , [ 1333166400000 , -1.814727017516] , [ 1335758400000 , -1.8744942128618] , [ 1338436800000 , -1.7880124850882]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Materials" ,
|
||||
"values" : [ [ 1138683600000 , -0.26079769654951] , [ 1141102800000 , -0.23368425410881] , [ 1143781200000 , -0.46285283466193] , [ 1146369600000 , -0.4588429059205] , [ 1149048000000 , -0.43055120080853] , [ 1151640000000 , -0.26428963363642] , [ 1154318400000 , -0.26203611963364] , [ 1156996800000 , -0.26706156717825] , [ 1159588800000 , -0.024613610779192] , [ 1162270800000 , -0.024351047945929] , [ 1164862800000 , -0.031497065480344] , [ 1167541200000 , 0] , [ 1170219600000 , 0] , [ 1172638800000 , 0] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , 0] , [ 1185854400000 , 0] , [ 1188532800000 , 0] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , -0.83875613435932] , [ 1209528000000 , -0.84367445572656] , [ 1212206400000 , -0.78928126005463] , [ 1214798400000 , -1.1075954825404] , [ 1217476800000 , -1.2704836497926] , [ 1220155200000 , -1.307504052056] , [ 1222747200000 , -0.70440409992826] , [ 1225425600000 , -0.74122140007729] , [ 1228021200000 , -0.82224393045109] , [ 1230699600000 , -1.8719055314571] , [ 1233378000000 , -1.5200311233975] , [ 1235797200000 , -1.5552386899059] , [ 1238472000000 , -1.1576593040773] , [ 1241064000000 , -1.0757811060575] , [ 1243742400000 , -1.0250125722511] , [ 1246334400000 , -2.2747597224127] , [ 1249012800000 , -2.3125499227974] , [ 1251691200000 , -2.2784386530745] , [ 1254283200000 , -1.1518806233757] , [ 1256961600000 , -1.0075503399018] , [ 1259557200000 , -1.1400577929481] , [ 1262235600000 , -0.50677891891165] , [ 1264914000000 , -0.54332908490051] , [ 1267333200000 , -0.55473181189807] , [ 1270008000000 , -0.3633796157757] , [ 1272600000000 , -0.30361861470847] , [ 1275278400000 , -0.24614951229153] , [ 1277870400000 , -1.0959443687647] , [ 1280548800000 , -1.1881529264637] , [ 1283227200000 , -1.1835349242596] , [ 1285819200000 , -0.92507477884561] , [ 1288497600000 , -0.94531016133473] , [ 1291093200000 , -0.93519433603434] , [ 1293771600000 , -1.009221344252] , [ 1296450000000 , -2.3640716285835] , [ 1298869200000 , -2.4914494188556] , [ 1301544000000 , -1.7979456141716] , [ 1304136000000 , -2.1389760840247] , [ 1306814400000 , -1.9721362241269] , [ 1309406400000 , -1.9170229522382] , [ 1312084800000 , -1.8076246545605] , [ 1314763200000 , -2.1010686108381] , [ 1317355200000 , -2.2396373791195] , [ 1320033600000 , -1.8469012813015] , [ 1322629200000 , -2.0079125997321] , [ 1325307600000 , -1.9170007806182] , [ 1327986000000 , -1.9239118384243] , [ 1330491600000 , -2.0649464738798] , [ 1333166400000 , -0.88385747789351] , [ 1335758400000 , -0.91438087144161] , [ 1338436800000 , -0.96513752020965]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Telecommunication Services" ,
|
||||
"values" : [ [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , -0.077395192503573] , [ 1146369600000 , -0.079342784160835] , [ 1149048000000 , -0.07376956808809] , [ 1151640000000 , -0.041850521681201] , [ 1154318400000 , -0.037598545052499] , [ 1156996800000 , -0.040984079427717] , [ 1159588800000 , -0.19335817797448] , [ 1162270800000 , -0.18578493919925] , [ 1164862800000 , -0.1769473933101] , [ 1167541200000 , -0.57245352054975] , [ 1170219600000 , -0.61554187332911] , [ 1172638800000 , -0.63016714701151] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , -0.12118014109021] , [ 1185854400000 , -0.11085831487208] , [ 1188532800000 , -0.10901265358445] , [ 1191124800000 , -0.17205583275088] , [ 1193803200000 , -0.16573676303991] , [ 1196398800000 , -0.17954841680392] , [ 1199077200000 , -0.82703336198161] , [ 1201755600000 , -0.76741763304227] , [ 1204261200000 , -0.79430844816827] , [ 1206936000000 , -1.0279404050708] , [ 1209528000000 , -1.0342425093761] , [ 1212206400000 , -1.0903083860383] , [ 1214798400000 , -1.0895432841007] , [ 1217476800000 , -1.1392703218146] , [ 1220155200000 , -0.98872086340391] , [ 1222747200000 , -1.227654651568] , [ 1225425600000 , -1.0527419580394] , [ 1228021200000 , -0.84338280322309] , [ 1230699600000 , -0.5982617279246] , [ 1233378000000 , -0.74123723862634] , [ 1235797200000 , -0.81665712408277] , [ 1238472000000 , -0.89868760705228] , [ 1241064000000 , -0.86338472153689] , [ 1243742400000 , -0.85040889603889] , [ 1246334400000 , -0.82872733882926] , [ 1249012800000 , -1.2797824676355] , [ 1251691200000 , -1.152043882336] , [ 1254283200000 , -0.70125890680538] , [ 1256961600000 , -0.69496338525418] , [ 1259557200000 , -0.81982038022784] , [ 1262235600000 , -0.42841700219624] , [ 1264914000000 , -0.43298861575253] , [ 1267333200000 , -0.46951194437705] , [ 1270008000000 , -0.46723980191721] , [ 1272600000000 , -0.43139262322841] , [ 1275278400000 , -0.4052075794202] , [ 1277870400000 , -0.45399431179247] , [ 1280548800000 , -0.50492374473014] , [ 1283227200000 , -0.49032976375464] , [ 1285819200000 , -0.95769381063728] , [ 1288497600000 , -0.92968381683254] , [ 1291093200000 , -0.90984207437415] , [ 1293771600000 , -0.91448295661871] , [ 1296450000000 , -1.3204103334172] , [ 1298869200000 , -1.3896989018] , [ 1301544000000 , -1.8536993972883] , [ 1304136000000 , -1.9901582471947] , [ 1306814400000 , -1.8731097808809] , [ 1309406400000 , -1.8109819859122] , [ 1312084800000 , -1.7946593386661] , [ 1314763200000 , -1.6002716669781] , [ 1317355200000 , -0.056479286204019] , [ 1320033600000 , -0.046232413998891] , [ 1322629200000 , -0.051182355563531] , [ 1325307600000 , -0.032858749040145] , [ 1327986000000 , -0.032326418106178] , [ 1330491600000 , -0.033980477379241] , [ 1333166400000 , -0.053069550536519] , [ 1335758400000 , -0.055741850564434] , [ 1338436800000 , -0.055851808568252]]
|
||||
} ,
|
||||
{
|
||||
"key" : "Utilities" ,
|
||||
"values" : [ [ 1138683600000 , 0] , [ 1141102800000 , 0] , [ 1143781200000 , -0.073769471773675] , [ 1146369600000 , -0.077824496315782] , [ 1149048000000 , -0.080696288096361] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 0] , [ 1162270800000 , 0] , [ 1164862800000 , 0] , [ 1167541200000 , 0] , [ 1170219600000 , 0] , [ 1172638800000 , 0] , [ 1175313600000 , 0] , [ 1177905600000 , 0] , [ 1180584000000 , 0] , [ 1183176000000 , -0.16073291656515] , [ 1185854400000 , -0.1646253606633] , [ 1188532800000 , -0.1655815581449] , [ 1191124800000 , -0.74417496631713] , [ 1193803200000 , -0.76230340423681] , [ 1196398800000 , -0.73882938190048] , [ 1199077200000 , -0.3820573391806] , [ 1201755600000 , -0.360757285179] , [ 1204261200000 , -0.38081058463615] , [ 1206936000000 , -0.92767439811083] , [ 1209528000000 , -0.92774728028789] , [ 1212206400000 , -0.85273481694714] , [ 1214798400000 , -1.69407085613] , [ 1217476800000 , -1.5179726219101] , [ 1220155200000 , -1.3576700600738] , [ 1222747200000 , -1.0404839864076] , [ 1225425600000 , -0.95251478838915] , [ 1228021200000 , -1.0610509118017] , [ 1230699600000 , -0.3316792294278] , [ 1233378000000 , -0.33745002288524] , [ 1235797200000 , -0.28806366796683] , [ 1238472000000 , 0] , [ 1241064000000 , 0] , [ 1243742400000 , 0] , [ 1246334400000 , -0.6338555382785] , [ 1249012800000 , -0.62797265130959] , [ 1251691200000 , -0.60264057253794] , [ 1254283200000 , -0.28687231077181] , [ 1256961600000 , -0.22215649778327] , [ 1259557200000 , -0.24027664555676] , [ 1262235600000 , 0] , [ 1264914000000 , 0] , [ 1267333200000 , 0] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 0] , [ 1280548800000 , 0] , [ 1283227200000 , 0] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 0] , [ 1298869200000 , 0] , [ 1301544000000 , 0] , [ 1304136000000 , 0] , [ 1306814400000 , 0] , [ 1309406400000 , 0] , [ 1312084800000 , 0] , [ 1314763200000 , 0] , [ 1317355200000 , 0] , [ 1320033600000 , 0] , [ 1322629200000 , 0] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0] , [ 1335758400000 , 0] , [ 1338436800000 , 0]]
|
||||
}
|
||||
];
|
||||
|
||||
/*
|
||||
.map(function(series) {
|
||||
series.values = series.values.map(function(d) {
|
||||
return { x: d[0], y: d[1] }
|
||||
});
|
||||
return series;
|
||||
});
|
||||
*/
|
||||
|
||||
//an example of harmonizing colors between visualizations
|
||||
//observe that Consumer Discretionary and Consumer Staples have
|
||||
//been flipped in the second chart
|
||||
var colors = d3.scale.category20();
|
||||
keyColor = function(d, i) {return colors(d.key)};
|
||||
|
||||
var chart;
|
||||
nv.addGraph(function() {
|
||||
chart = nv.models.stackedAreaChart()
|
||||
// .width(600).height(500)
|
||||
.useInteractiveGuideline(true)
|
||||
.x(function(d) { return d[0] })
|
||||
.y(function(d) { return d[1] })
|
||||
.color(keyColor)
|
||||
.transitionDuration(300);
|
||||
//.clipEdge(true);
|
||||
|
||||
// chart.stacked.scatter.clipVoronoi(false);
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
d3.select('#chart1')
|
||||
.datum(histcatexplong)
|
||||
.transition().duration(1000)
|
||||
.call(chart)
|
||||
// .transition().duration(0)
|
||||
.each('start', function() {
|
||||
setTimeout(function() {
|
||||
d3.selectAll('#chart1 *').each(function() {
|
||||
console.log('start',this.__transition__, this)
|
||||
// while(this.__transition__)
|
||||
if(this.__transition__)
|
||||
this.__transition__.duration = 1;
|
||||
})
|
||||
}, 0)
|
||||
})
|
||||
// .each('end', function() {
|
||||
// d3.selectAll('#chart1 *').each(function() {
|
||||
// console.log('end', this.__transition__, this)
|
||||
// // while(this.__transition__)
|
||||
// if(this.__transition__)
|
||||
// this.__transition__.duration = 1;
|
||||
// })});
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
// chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.stackedAreaChart()
|
||||
.x(function(d) { return d[0] })
|
||||
.y(function(d) { return d[1] })
|
||||
.color(keyColor)
|
||||
;
|
||||
//.clipEdge(true);
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
d3.select('#chart2')
|
||||
.datum(histcatexpshort)
|
||||
.transition()
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,155 +0,0 @@
|
||||
(function(d3) {
|
||||
var cie = d3.cie = {};
|
||||
|
||||
cie.lab = function(l, a, b) {
|
||||
return arguments.length === 1
|
||||
? (l instanceof Lab ? lab(l.l, l.a, l.b)
|
||||
: (l instanceof Lch ? lch_lab(l.l, l.c, l.h)
|
||||
: rgb_lab((l = d3.rgb(l)).r, l.g, l.b)))
|
||||
: lab(+l, +a, +b);
|
||||
};
|
||||
|
||||
cie.lch = function(l, c, h) {
|
||||
return arguments.length === 1
|
||||
? (l instanceof Lch ? lch(l.l, l.c, l.h)
|
||||
: (l instanceof Lab ? lab_lch(l.l, l.a, l.b)
|
||||
: lab_lch((l = rgb_lab((l = d3.rgb(l)).r, l.g, l.b)).l, l.a, l.b)))
|
||||
: lch(+l, +c, +h);
|
||||
};
|
||||
|
||||
cie.interpolateLab = function(a, b) {
|
||||
a = cie.lab(a);
|
||||
b = cie.lab(b);
|
||||
var al = a.l,
|
||||
aa = a.a,
|
||||
ab = a.b,
|
||||
bl = b.l - al,
|
||||
ba = b.a - aa,
|
||||
bb = b.b - ab;
|
||||
return function(t) {
|
||||
return lab_rgb(al + bl * t, aa + ba * t, ab + bb * t) + "";
|
||||
};
|
||||
};
|
||||
|
||||
cie.interpolateLch = function(a, b) {
|
||||
a = cie.lch(a);
|
||||
b = cie.lch(b);
|
||||
var al = a.l,
|
||||
ac = a.c,
|
||||
ah = a.h,
|
||||
bl = b.l - al,
|
||||
bc = b.c - ac,
|
||||
bh = b.h - ah;
|
||||
if (bh > 180) bh -= 360; else if (bh < -180) bh += 360; // shortest path
|
||||
return function(t) {
|
||||
return lch_lab(al + bl * t, ac + bc * t, ah + bh * t) + "";
|
||||
};
|
||||
};
|
||||
|
||||
function lab(l, a, b) {
|
||||
return new Lab(l, a, b);
|
||||
}
|
||||
|
||||
function Lab(l, a, b) {
|
||||
this.l = l;
|
||||
this.a = a;
|
||||
this.b = b;
|
||||
}
|
||||
|
||||
Lab.prototype.brighter = function(k) {
|
||||
return lab(Math.min(100, this.l + K * (arguments.length ? k : 1)), this.a, this.b);
|
||||
};
|
||||
|
||||
Lab.prototype.darker = function(k) {
|
||||
return lab(Math.max(0, this.l - K * (arguments.length ? k : 1)), this.a, this.b);
|
||||
};
|
||||
|
||||
Lab.prototype.rgb = function() {
|
||||
return lab_rgb(this.l, this.a, this.b);
|
||||
};
|
||||
|
||||
Lab.prototype.toString = function() {
|
||||
return this.rgb() + "";
|
||||
};
|
||||
|
||||
function lch(l, c, h) {
|
||||
return new Lch(l, c, h);
|
||||
}
|
||||
|
||||
function Lch(l, c, h) {
|
||||
this.l = l;
|
||||
this.c = c;
|
||||
this.h = h;
|
||||
}
|
||||
|
||||
Lch.prototype.brighter = function(k) {
|
||||
return lch(Math.min(100, this.l + K * (arguments.length ? k : 1)), this.c, this.h);
|
||||
};
|
||||
|
||||
Lch.prototype.darker = function(k) {
|
||||
return lch(Math.max(0, this.l - K * (arguments.length ? k : 1)), this.c, this.h);
|
||||
};
|
||||
|
||||
Lch.prototype.rgb = function() {
|
||||
return lch_lab(this.l, this.c, this.h).rgb();
|
||||
};
|
||||
|
||||
Lch.prototype.toString = function() {
|
||||
return this.rgb() + "";
|
||||
};
|
||||
|
||||
// Corresponds roughly to RGB brighter/darker
|
||||
var K = 18;
|
||||
|
||||
// D65 standard referent
|
||||
var X = 0.950470, Y = 1, Z = 1.088830;
|
||||
|
||||
function lab_rgb(l, a, b) {
|
||||
var y = (l + 16) / 116, x = y + a / 500, z = y - b / 200;
|
||||
x = lab_xyz(x) * X;
|
||||
y = lab_xyz(y) * Y;
|
||||
z = lab_xyz(z) * Z;
|
||||
return d3.rgb(
|
||||
xyz_rgb( 3.2404542 * x - 1.5371385 * y - 0.4985314 * z),
|
||||
xyz_rgb(-0.9692660 * x + 1.8760108 * y + 0.0415560 * z),
|
||||
xyz_rgb( 0.0556434 * x - 0.2040259 * y + 1.0572252 * z)
|
||||
);
|
||||
}
|
||||
|
||||
function rgb_lab(r, g, b) {
|
||||
r = rgb_xyz(r);
|
||||
g = rgb_xyz(g);
|
||||
b = rgb_xyz(b);
|
||||
var x = xyz_lab((0.4124564 * r + 0.3575761 * g + 0.1804375 * b) / X),
|
||||
y = xyz_lab((0.2126729 * r + 0.7151522 * g + 0.0721750 * b) / Y),
|
||||
z = xyz_lab((0.0193339 * r + 0.1191920 * g + 0.9503041 * b) / Z);
|
||||
return lab(116 * y - 16, 500 * (x - y), 200 * (y - z));
|
||||
}
|
||||
|
||||
function lab_lch(l, a, b) {
|
||||
var c = Math.sqrt(a * a + b * b),
|
||||
h = Math.atan2(b, a) / Math.PI * 180;
|
||||
return lch(l, c, h);
|
||||
}
|
||||
|
||||
function lch_lab(l, c, h) {
|
||||
h = h * Math.PI / 180;
|
||||
return lab(l, Math.cos(h) * c, Math.sin(h) * c);
|
||||
}
|
||||
|
||||
function lab_xyz(x) {
|
||||
return x > 0.206893034 ? x * x * x : (x - 4 / 29) / 7.787037;
|
||||
}
|
||||
|
||||
function xyz_lab(x) {
|
||||
return x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787037 * x + 4 / 29;
|
||||
}
|
||||
|
||||
function xyz_rgb(r) {
|
||||
return Math.round(255 * (r <= 0.00304 ? 12.92 * r : 1.055 * Math.pow(r, 1 / 2.4) - 0.055));
|
||||
}
|
||||
|
||||
function rgb_xyz(r) {
|
||||
return (r /= 255) <= 0.04045 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
|
||||
}
|
||||
})(d3);
|
||||
@ -1,302 +0,0 @@
|
||||
// This product includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/).
|
||||
var colorbrewer = {YlGn: {
|
||||
3: ["#f7fcb9","#addd8e","#31a354"],
|
||||
4: ["#ffffcc","#c2e699","#78c679","#238443"],
|
||||
5: ["#ffffcc","#c2e699","#78c679","#31a354","#006837"],
|
||||
6: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#31a354","#006837"],
|
||||
7: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"],
|
||||
8: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"],
|
||||
9: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"]
|
||||
},YlGnBu: {
|
||||
3: ["#edf8b1","#7fcdbb","#2c7fb8"],
|
||||
4: ["#ffffcc","#a1dab4","#41b6c4","#225ea8"],
|
||||
5: ["#ffffcc","#a1dab4","#41b6c4","#2c7fb8","#253494"],
|
||||
6: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#2c7fb8","#253494"],
|
||||
7: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"],
|
||||
8: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"],
|
||||
9: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]
|
||||
},GnBu: {
|
||||
3: ["#e0f3db","#a8ddb5","#43a2ca"],
|
||||
4: ["#f0f9e8","#bae4bc","#7bccc4","#2b8cbe"],
|
||||
5: ["#f0f9e8","#bae4bc","#7bccc4","#43a2ca","#0868ac"],
|
||||
6: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#43a2ca","#0868ac"],
|
||||
7: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"],
|
||||
8: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"],
|
||||
9: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"]
|
||||
},BuGn: {
|
||||
3: ["#e5f5f9","#99d8c9","#2ca25f"],
|
||||
4: ["#edf8fb","#b2e2e2","#66c2a4","#238b45"],
|
||||
5: ["#edf8fb","#b2e2e2","#66c2a4","#2ca25f","#006d2c"],
|
||||
6: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#2ca25f","#006d2c"],
|
||||
7: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"],
|
||||
8: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"],
|
||||
9: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"]
|
||||
},PuBuGn: {
|
||||
3: ["#ece2f0","#a6bddb","#1c9099"],
|
||||
4: ["#f6eff7","#bdc9e1","#67a9cf","#02818a"],
|
||||
5: ["#f6eff7","#bdc9e1","#67a9cf","#1c9099","#016c59"],
|
||||
6: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#1c9099","#016c59"],
|
||||
7: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"],
|
||||
8: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"],
|
||||
9: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"]
|
||||
},PuBu: {
|
||||
3: ["#ece7f2","#a6bddb","#2b8cbe"],
|
||||
4: ["#f1eef6","#bdc9e1","#74a9cf","#0570b0"],
|
||||
5: ["#f1eef6","#bdc9e1","#74a9cf","#2b8cbe","#045a8d"],
|
||||
6: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#2b8cbe","#045a8d"],
|
||||
7: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"],
|
||||
8: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"],
|
||||
9: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"]
|
||||
},BuPu: {
|
||||
3: ["#e0ecf4","#9ebcda","#8856a7"],
|
||||
4: ["#edf8fb","#b3cde3","#8c96c6","#88419d"],
|
||||
5: ["#edf8fb","#b3cde3","#8c96c6","#8856a7","#810f7c"],
|
||||
6: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8856a7","#810f7c"],
|
||||
7: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"],
|
||||
8: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"],
|
||||
9: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"]
|
||||
},RdPu: {
|
||||
3: ["#fde0dd","#fa9fb5","#c51b8a"],
|
||||
4: ["#feebe2","#fbb4b9","#f768a1","#ae017e"],
|
||||
5: ["#feebe2","#fbb4b9","#f768a1","#c51b8a","#7a0177"],
|
||||
6: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#c51b8a","#7a0177"],
|
||||
7: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"],
|
||||
8: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"],
|
||||
9: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"]
|
||||
},PuRd: {
|
||||
3: ["#e7e1ef","#c994c7","#dd1c77"],
|
||||
4: ["#f1eef6","#d7b5d8","#df65b0","#ce1256"],
|
||||
5: ["#f1eef6","#d7b5d8","#df65b0","#dd1c77","#980043"],
|
||||
6: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#dd1c77","#980043"],
|
||||
7: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"],
|
||||
8: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"],
|
||||
9: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"]
|
||||
},OrRd: {
|
||||
3: ["#fee8c8","#fdbb84","#e34a33"],
|
||||
4: ["#fef0d9","#fdcc8a","#fc8d59","#d7301f"],
|
||||
5: ["#fef0d9","#fdcc8a","#fc8d59","#e34a33","#b30000"],
|
||||
6: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#e34a33","#b30000"],
|
||||
7: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"],
|
||||
8: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"],
|
||||
9: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]
|
||||
},YlOrRd: {
|
||||
3: ["#ffeda0","#feb24c","#f03b20"],
|
||||
4: ["#ffffb2","#fecc5c","#fd8d3c","#e31a1c"],
|
||||
5: ["#ffffb2","#fecc5c","#fd8d3c","#f03b20","#bd0026"],
|
||||
6: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#f03b20","#bd0026"],
|
||||
7: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"],
|
||||
8: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"],
|
||||
9: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"]
|
||||
},YlOrBr: {
|
||||
3: ["#fff7bc","#fec44f","#d95f0e"],
|
||||
4: ["#ffffd4","#fed98e","#fe9929","#cc4c02"],
|
||||
5: ["#ffffd4","#fed98e","#fe9929","#d95f0e","#993404"],
|
||||
6: ["#ffffd4","#fee391","#fec44f","#fe9929","#d95f0e","#993404"],
|
||||
7: ["#ffffd4","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"],
|
||||
8: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"],
|
||||
9: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"]
|
||||
},Purples: {
|
||||
3: ["#efedf5","#bcbddc","#756bb1"],
|
||||
4: ["#f2f0f7","#cbc9e2","#9e9ac8","#6a51a3"],
|
||||
5: ["#f2f0f7","#cbc9e2","#9e9ac8","#756bb1","#54278f"],
|
||||
6: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#756bb1","#54278f"],
|
||||
7: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"],
|
||||
8: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"],
|
||||
9: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"]
|
||||
},Blues: {
|
||||
3: ["#deebf7","#9ecae1","#3182bd"],
|
||||
4: ["#eff3ff","#bdd7e7","#6baed6","#2171b5"],
|
||||
5: ["#eff3ff","#bdd7e7","#6baed6","#3182bd","#08519c"],
|
||||
6: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#3182bd","#08519c"],
|
||||
7: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],
|
||||
8: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],
|
||||
9: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"]
|
||||
},Greens: {
|
||||
3: ["#e5f5e0","#a1d99b","#31a354"],
|
||||
4: ["#edf8e9","#bae4b3","#74c476","#238b45"],
|
||||
5: ["#edf8e9","#bae4b3","#74c476","#31a354","#006d2c"],
|
||||
6: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#31a354","#006d2c"],
|
||||
7: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"],
|
||||
8: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"],
|
||||
9: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"]
|
||||
},Oranges: {
|
||||
3: ["#fee6ce","#fdae6b","#e6550d"],
|
||||
4: ["#feedde","#fdbe85","#fd8d3c","#d94701"],
|
||||
5: ["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"],
|
||||
6: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#e6550d","#a63603"],
|
||||
7: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"],
|
||||
8: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"],
|
||||
9: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"]
|
||||
},Reds: {
|
||||
3: ["#fee0d2","#fc9272","#de2d26"],
|
||||
4: ["#fee5d9","#fcae91","#fb6a4a","#cb181d"],
|
||||
5: ["#fee5d9","#fcae91","#fb6a4a","#de2d26","#a50f15"],
|
||||
6: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#de2d26","#a50f15"],
|
||||
7: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],
|
||||
8: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],
|
||||
9: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]
|
||||
},Greys: {
|
||||
3: ["#f0f0f0","#bdbdbd","#636363"],
|
||||
4: ["#f7f7f7","#cccccc","#969696","#525252"],
|
||||
5: ["#f7f7f7","#cccccc","#969696","#636363","#252525"],
|
||||
6: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#636363","#252525"],
|
||||
7: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"],
|
||||
8: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"],
|
||||
9: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"]
|
||||
},PuOr: {
|
||||
3: ["#f1a340","#f7f7f7","#998ec3"],
|
||||
4: ["#e66101","#fdb863","#b2abd2","#5e3c99"],
|
||||
5: ["#e66101","#fdb863","#f7f7f7","#b2abd2","#5e3c99"],
|
||||
6: ["#b35806","#f1a340","#fee0b6","#d8daeb","#998ec3","#542788"],
|
||||
7: ["#b35806","#f1a340","#fee0b6","#f7f7f7","#d8daeb","#998ec3","#542788"],
|
||||
8: ["#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788"],
|
||||
9: ["#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788"],
|
||||
10: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],
|
||||
11: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"]
|
||||
},BrBG: {
|
||||
3: ["#d8b365","#f5f5f5","#5ab4ac"],
|
||||
4: ["#a6611a","#dfc27d","#80cdc1","#018571"],
|
||||
5: ["#a6611a","#dfc27d","#f5f5f5","#80cdc1","#018571"],
|
||||
6: ["#8c510a","#d8b365","#f6e8c3","#c7eae5","#5ab4ac","#01665e"],
|
||||
7: ["#8c510a","#d8b365","#f6e8c3","#f5f5f5","#c7eae5","#5ab4ac","#01665e"],
|
||||
8: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e"],
|
||||
9: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e"],
|
||||
10: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],
|
||||
11: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"]
|
||||
},PRGn: {
|
||||
3: ["#af8dc3","#f7f7f7","#7fbf7b"],
|
||||
4: ["#7b3294","#c2a5cf","#a6dba0","#008837"],
|
||||
5: ["#7b3294","#c2a5cf","#f7f7f7","#a6dba0","#008837"],
|
||||
6: ["#762a83","#af8dc3","#e7d4e8","#d9f0d3","#7fbf7b","#1b7837"],
|
||||
7: ["#762a83","#af8dc3","#e7d4e8","#f7f7f7","#d9f0d3","#7fbf7b","#1b7837"],
|
||||
8: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837"],
|
||||
9: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837"],
|
||||
10: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],
|
||||
11: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"]
|
||||
},PiYG: {
|
||||
3: ["#e9a3c9","#f7f7f7","#a1d76a"],
|
||||
4: ["#d01c8b","#f1b6da","#b8e186","#4dac26"],
|
||||
5: ["#d01c8b","#f1b6da","#f7f7f7","#b8e186","#4dac26"],
|
||||
6: ["#c51b7d","#e9a3c9","#fde0ef","#e6f5d0","#a1d76a","#4d9221"],
|
||||
7: ["#c51b7d","#e9a3c9","#fde0ef","#f7f7f7","#e6f5d0","#a1d76a","#4d9221"],
|
||||
8: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221"],
|
||||
9: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221"],
|
||||
10: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],
|
||||
11: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"]
|
||||
},RdBu: {
|
||||
3: ["#ef8a62","#f7f7f7","#67a9cf"],
|
||||
4: ["#ca0020","#f4a582","#92c5de","#0571b0"],
|
||||
5: ["#ca0020","#f4a582","#f7f7f7","#92c5de","#0571b0"],
|
||||
6: ["#b2182b","#ef8a62","#fddbc7","#d1e5f0","#67a9cf","#2166ac"],
|
||||
7: ["#b2182b","#ef8a62","#fddbc7","#f7f7f7","#d1e5f0","#67a9cf","#2166ac"],
|
||||
8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac"],
|
||||
9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac"],
|
||||
10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],
|
||||
11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"]
|
||||
},RdGy: {
|
||||
3: ["#ef8a62","#ffffff","#999999"],
|
||||
4: ["#ca0020","#f4a582","#bababa","#404040"],
|
||||
5: ["#ca0020","#f4a582","#ffffff","#bababa","#404040"],
|
||||
6: ["#b2182b","#ef8a62","#fddbc7","#e0e0e0","#999999","#4d4d4d"],
|
||||
7: ["#b2182b","#ef8a62","#fddbc7","#ffffff","#e0e0e0","#999999","#4d4d4d"],
|
||||
8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d"],
|
||||
9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d"],
|
||||
10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],
|
||||
11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"]
|
||||
},RdYlBu: {
|
||||
3: ["#fc8d59","#ffffbf","#91bfdb"],
|
||||
4: ["#d7191c","#fdae61","#abd9e9","#2c7bb6"],
|
||||
5: ["#d7191c","#fdae61","#ffffbf","#abd9e9","#2c7bb6"],
|
||||
6: ["#d73027","#fc8d59","#fee090","#e0f3f8","#91bfdb","#4575b4"],
|
||||
7: ["#d73027","#fc8d59","#fee090","#ffffbf","#e0f3f8","#91bfdb","#4575b4"],
|
||||
8: ["#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4"],
|
||||
9: ["#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4"],
|
||||
10: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],
|
||||
11: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"]
|
||||
},Spectral: {
|
||||
3: ["#fc8d59","#ffffbf","#99d594"],
|
||||
4: ["#d7191c","#fdae61","#abdda4","#2b83ba"],
|
||||
5: ["#d7191c","#fdae61","#ffffbf","#abdda4","#2b83ba"],
|
||||
6: ["#d53e4f","#fc8d59","#fee08b","#e6f598","#99d594","#3288bd"],
|
||||
7: ["#d53e4f","#fc8d59","#fee08b","#ffffbf","#e6f598","#99d594","#3288bd"],
|
||||
8: ["#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd"],
|
||||
9: ["#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd"],
|
||||
10: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],
|
||||
11: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"]
|
||||
},RdYlGn: {
|
||||
3: ["#fc8d59","#ffffbf","#91cf60"],
|
||||
4: ["#d7191c","#fdae61","#a6d96a","#1a9641"],
|
||||
5: ["#d7191c","#fdae61","#ffffbf","#a6d96a","#1a9641"],
|
||||
6: ["#d73027","#fc8d59","#fee08b","#d9ef8b","#91cf60","#1a9850"],
|
||||
7: ["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"],
|
||||
8: ["#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850"],
|
||||
9: ["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850"],
|
||||
10: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"],
|
||||
11: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"]
|
||||
},Accent: {
|
||||
3: ["#7fc97f","#beaed4","#fdc086"],
|
||||
4: ["#7fc97f","#beaed4","#fdc086","#ffff99"],
|
||||
5: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0"],
|
||||
6: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f"],
|
||||
7: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17"],
|
||||
8: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"]
|
||||
},Dark2: {
|
||||
3: ["#1b9e77","#d95f02","#7570b3"],
|
||||
4: ["#1b9e77","#d95f02","#7570b3","#e7298a"],
|
||||
5: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e"],
|
||||
6: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02"],
|
||||
7: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d"],
|
||||
8: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"]
|
||||
},Paired: {
|
||||
3: ["#a6cee3","#1f78b4","#b2df8a"],
|
||||
4: ["#a6cee3","#1f78b4","#b2df8a","#33a02c"],
|
||||
5: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99"],
|
||||
6: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c"],
|
||||
7: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f"],
|
||||
8: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00"],
|
||||
9: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6"],
|
||||
10: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a"],
|
||||
11: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99"],
|
||||
12: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]
|
||||
},Pastel1: {
|
||||
3: ["#fbb4ae","#b3cde3","#ccebc5"],
|
||||
4: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4"],
|
||||
5: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6"],
|
||||
6: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc"],
|
||||
7: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd"],
|
||||
8: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec"],
|
||||
9: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"]
|
||||
},Pastel2: {
|
||||
3: ["#b3e2cd","#fdcdac","#cbd5e8"],
|
||||
4: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4"],
|
||||
5: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9"],
|
||||
6: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae"],
|
||||
7: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc"],
|
||||
8: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"]
|
||||
},Set1: {
|
||||
3: ["#e41a1c","#377eb8","#4daf4a"],
|
||||
4: ["#e41a1c","#377eb8","#4daf4a","#984ea3"],
|
||||
5: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00"],
|
||||
6: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33"],
|
||||
7: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628"],
|
||||
8: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf"],
|
||||
9: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"]
|
||||
},Set2: {
|
||||
3: ["#66c2a5","#fc8d62","#8da0cb"],
|
||||
4: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3"],
|
||||
5: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854"],
|
||||
6: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f"],
|
||||
7: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494"],
|
||||
8: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"]
|
||||
},Set3: {
|
||||
3: ["#8dd3c7","#ffffb3","#bebada"],
|
||||
4: ["#8dd3c7","#ffffb3","#bebada","#fb8072"],
|
||||
5: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3"],
|
||||
6: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462"],
|
||||
7: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69"],
|
||||
8: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5"],
|
||||
9: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9"],
|
||||
10: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd"],
|
||||
11: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5"],
|
||||
12: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
|
||||
}};
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,80 +0,0 @@
|
||||
d3.hive = {};
|
||||
|
||||
d3.hive.link = function() {
|
||||
var source = function(d) { return d.source; },
|
||||
target = function(d) { return d.target; },
|
||||
angle = function(d) { return d.angle; },
|
||||
startRadius = function(d) { return d.radius; },
|
||||
endRadius = startRadius,
|
||||
arcOffset = -Math.PI / 2;
|
||||
|
||||
function link(d, i) {
|
||||
var s = node(source, this, d, i),
|
||||
t = node(target, this, d, i),
|
||||
x;
|
||||
if (t.a < s.a) x = t, t = s, s = x;
|
||||
if (t.a - s.a > Math.PI) s.a += 2 * Math.PI;
|
||||
var a1 = s.a + (t.a - s.a) / 3,
|
||||
a2 = t.a - (t.a - s.a) / 3;
|
||||
return s.r0 - s.r1 || t.r0 - t.r1
|
||||
? "M" + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0
|
||||
+ "L" + Math.cos(s.a) * s.r1 + "," + Math.sin(s.a) * s.r1
|
||||
+ "C" + Math.cos(a1) * s.r1 + "," + Math.sin(a1) * s.r1
|
||||
+ " " + Math.cos(a2) * t.r1 + "," + Math.sin(a2) * t.r1
|
||||
+ " " + Math.cos(t.a) * t.r1 + "," + Math.sin(t.a) * t.r1
|
||||
+ "L" + Math.cos(t.a) * t.r0 + "," + Math.sin(t.a) * t.r0
|
||||
+ "C" + Math.cos(a2) * t.r0 + "," + Math.sin(a2) * t.r0
|
||||
+ " " + Math.cos(a1) * s.r0 + "," + Math.sin(a1) * s.r0
|
||||
+ " " + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0
|
||||
: "M" + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0
|
||||
+ "C" + Math.cos(a1) * s.r1 + "," + Math.sin(a1) * s.r1
|
||||
+ " " + Math.cos(a2) * t.r1 + "," + Math.sin(a2) * t.r1
|
||||
+ " " + Math.cos(t.a) * t.r1 + "," + Math.sin(t.a) * t.r1;
|
||||
}
|
||||
|
||||
function node(method, thiz, d, i) {
|
||||
var node = method.call(thiz, d, i),
|
||||
a = +(typeof angle === "function" ? angle.call(thiz, node, i) : angle) + arcOffset,
|
||||
r0 = +(typeof startRadius === "function" ? startRadius.call(thiz, node, i) : startRadius),
|
||||
r1 = (startRadius === endRadius ? r0 : +(typeof endRadius === "function" ? endRadius.call(thiz, node, i) : endRadius));
|
||||
return {r0: r0, r1: r1, a: a};
|
||||
}
|
||||
|
||||
link.source = function(_) {
|
||||
if (!arguments.length) return source;
|
||||
source = _;
|
||||
return link;
|
||||
};
|
||||
|
||||
link.target = function(_) {
|
||||
if (!arguments.length) return target;
|
||||
target = _;
|
||||
return link;
|
||||
};
|
||||
|
||||
link.angle = function(_) {
|
||||
if (!arguments.length) return angle;
|
||||
angle = _;
|
||||
return link;
|
||||
};
|
||||
|
||||
link.radius = function(_) {
|
||||
if (!arguments.length) return startRadius;
|
||||
startRadius = endRadius = _;
|
||||
return link;
|
||||
};
|
||||
|
||||
link.startRadius = function(_) {
|
||||
if (!arguments.length) return startRadius;
|
||||
startRadius = _;
|
||||
return link;
|
||||
};
|
||||
|
||||
link.endRadius = function(_) {
|
||||
if (!arguments.length) return endRadius;
|
||||
endRadius = _;
|
||||
return link;
|
||||
};
|
||||
|
||||
return link;
|
||||
};
|
||||
@ -1,192 +0,0 @@
|
||||
(function() {
|
||||
d3.horizon = function() {
|
||||
var bands = 1, // between 1 and 5, typically
|
||||
mode = "offset", // or mirror
|
||||
interpolate = "linear", // or basis, monotone, step-before, etc.
|
||||
x = d3_horizonX,
|
||||
y = d3_horizonY,
|
||||
w = 960,
|
||||
h = 40,
|
||||
duration = 0;
|
||||
|
||||
var color = d3.scale.linear()
|
||||
.domain([-1, 0, 1])
|
||||
.range(["#d62728", "#fff", "#1f77b4"]);
|
||||
|
||||
// For each small multiple…
|
||||
function horizon(g) {
|
||||
g.each(function(d, i) {
|
||||
var g = d3.select(this),
|
||||
n = 2 * bands + 1,
|
||||
xMin = Infinity,
|
||||
xMax = -Infinity,
|
||||
yMax = -Infinity,
|
||||
x0, // old x-scale
|
||||
y0, // old y-scale
|
||||
id; // unique id for paths
|
||||
|
||||
// Compute x- and y-values along with extents.
|
||||
var data = d.map(function(d, i) {
|
||||
var xv = x.call(this, d, i),
|
||||
yv = y.call(this, d, i);
|
||||
if (xv < xMin) xMin = xv;
|
||||
if (xv > xMax) xMax = xv;
|
||||
if (-yv > yMax) yMax = -yv;
|
||||
if (yv > yMax) yMax = yv;
|
||||
return [xv, yv];
|
||||
});
|
||||
|
||||
// Compute the new x- and y-scales, and transform.
|
||||
var x1 = d3.scale.linear().domain([xMin, xMax]).range([0, w]),
|
||||
y1 = d3.scale.linear().domain([0, yMax]).range([0, h * bands]),
|
||||
t1 = d3_horizonTransform(bands, h, mode);
|
||||
|
||||
// Retrieve the old scales, if this is an update.
|
||||
if (this.__chart__) {
|
||||
x0 = this.__chart__.x;
|
||||
y0 = this.__chart__.y;
|
||||
t0 = this.__chart__.t;
|
||||
id = this.__chart__.id;
|
||||
} else {
|
||||
x0 = x1.copy();
|
||||
y0 = y1.copy();
|
||||
t0 = t1;
|
||||
id = ++d3_horizonId;
|
||||
}
|
||||
|
||||
// We'll use a defs to store the area path and the clip path.
|
||||
var defs = g.selectAll("defs")
|
||||
.data([null]);
|
||||
|
||||
// The clip path is a simple rect.
|
||||
defs.enter().append("defs").append("clipPath")
|
||||
.attr("id", "d3_horizon_clip" + id)
|
||||
.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
defs.select("rect").transition()
|
||||
.duration(duration)
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
// We'll use a container to clip all horizon layers at once.
|
||||
g.selectAll("g")
|
||||
.data([null])
|
||||
.enter().append("g")
|
||||
.attr("clip-path", "url(#d3_horizon_clip" + id + ")");
|
||||
|
||||
// Instantiate each copy of the path with different transforms.
|
||||
var path = g.select("g").selectAll("path")
|
||||
.data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)), Number);
|
||||
|
||||
var d0 = d3_horizonArea
|
||||
.interpolate(interpolate)
|
||||
.x(function(d) { return x0(d[0]); })
|
||||
.y0(h * bands)
|
||||
.y1(function(d) { return h * bands - y0(d[1]); })
|
||||
(data);
|
||||
|
||||
var d1 = d3_horizonArea
|
||||
.x(function(d) { return x1(d[0]); })
|
||||
.y1(function(d) { return h * bands - y1(d[1]); })
|
||||
(data);
|
||||
|
||||
path.enter().append("path")
|
||||
.style("fill", color)
|
||||
.attr("transform", t0)
|
||||
.attr("d", d0);
|
||||
|
||||
path.transition()
|
||||
.duration(duration)
|
||||
.style("fill", color)
|
||||
.attr("transform", t1)
|
||||
.attr("d", d1);
|
||||
|
||||
path.exit().transition()
|
||||
.duration(duration)
|
||||
.attr("transform", t1)
|
||||
.attr("d", d1)
|
||||
.remove();
|
||||
|
||||
// Stash the new scales.
|
||||
this.__chart__ = {x: x1, y: y1, t: t1, id: id};
|
||||
});
|
||||
d3.timer.flush();
|
||||
}
|
||||
|
||||
horizon.duration = function(x) {
|
||||
if (!arguments.length) return duration;
|
||||
duration = +x;
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.bands = function(x) {
|
||||
if (!arguments.length) return bands;
|
||||
bands = +x;
|
||||
color.domain([-bands, 0, bands]);
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.mode = function(x) {
|
||||
if (!arguments.length) return mode;
|
||||
mode = x + "";
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.colors = function(x) {
|
||||
if (!arguments.length) return color.range();
|
||||
color.range(x);
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.interpolate = function(x) {
|
||||
if (!arguments.length) return interpolate;
|
||||
interpolate = x + "";
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.x = function(z) {
|
||||
if (!arguments.length) return x;
|
||||
x = z;
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.y = function(z) {
|
||||
if (!arguments.length) return y;
|
||||
y = z;
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.width = function(x) {
|
||||
if (!arguments.length) return w;
|
||||
w = +x;
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.height = function(x) {
|
||||
if (!arguments.length) return h;
|
||||
h = +x;
|
||||
return horizon;
|
||||
};
|
||||
|
||||
return horizon;
|
||||
};
|
||||
|
||||
var d3_horizonArea = d3.svg.area(),
|
||||
d3_horizonId = 0;
|
||||
|
||||
function d3_horizonX(d) {
|
||||
return d[0];
|
||||
}
|
||||
|
||||
function d3_horizonY(d) {
|
||||
return d[1];
|
||||
}
|
||||
|
||||
function d3_horizonTransform(bands, h, mode) {
|
||||
return mode == "offset"
|
||||
? function(d) { return "translate(0," + (d + (d < 0) - bands) * h + ")"; }
|
||||
: function(d) { return (d < 0 ? "scale(1,-1)" : "") + "translate(0," + (d - bands) * h + ")"; };
|
||||
}
|
||||
})();
|
||||
@ -1,292 +0,0 @@
|
||||
d3.sankey = function() {
|
||||
var sankey = {},
|
||||
nodeWidth = 24,
|
||||
nodePadding = 8,
|
||||
size = [1, 1],
|
||||
nodes = [],
|
||||
links = [];
|
||||
|
||||
sankey.nodeWidth = function(_) {
|
||||
if (!arguments.length) return nodeWidth;
|
||||
nodeWidth = +_;
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.nodePadding = function(_) {
|
||||
if (!arguments.length) return nodePadding;
|
||||
nodePadding = +_;
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.nodes = function(_) {
|
||||
if (!arguments.length) return nodes;
|
||||
nodes = _;
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.links = function(_) {
|
||||
if (!arguments.length) return links;
|
||||
links = _;
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.size = function(_) {
|
||||
if (!arguments.length) return size;
|
||||
size = _;
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.layout = function(iterations) {
|
||||
computeNodeLinks();
|
||||
computeNodeValues();
|
||||
computeNodeBreadths();
|
||||
computeNodeDepths(iterations);
|
||||
computeLinkDepths();
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.relayout = function() {
|
||||
computeLinkDepths();
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.link = function() {
|
||||
var curvature = .5;
|
||||
|
||||
function link(d) {
|
||||
var x0 = d.source.x + d.source.dx,
|
||||
x1 = d.target.x,
|
||||
xi = d3.interpolateNumber(x0, x1),
|
||||
x2 = xi(curvature),
|
||||
x3 = xi(1 - curvature),
|
||||
y0 = d.source.y + d.sy + d.dy / 2,
|
||||
y1 = d.target.y + d.ty + d.dy / 2;
|
||||
return "M" + x0 + "," + y0
|
||||
+ "C" + x2 + "," + y0
|
||||
+ " " + x3 + "," + y1
|
||||
+ " " + x1 + "," + y1;
|
||||
}
|
||||
|
||||
link.curvature = function(_) {
|
||||
if (!arguments.length) return curvature;
|
||||
curvature = +_;
|
||||
return link;
|
||||
};
|
||||
|
||||
return link;
|
||||
};
|
||||
|
||||
// Populate the sourceLinks and targetLinks for each node.
|
||||
// Also, if the source and target are not objects, assume they are indices.
|
||||
function computeNodeLinks() {
|
||||
nodes.forEach(function(node) {
|
||||
node.sourceLinks = [];
|
||||
node.targetLinks = [];
|
||||
});
|
||||
links.forEach(function(link) {
|
||||
var source = link.source,
|
||||
target = link.target;
|
||||
if (typeof source === "number") source = link.source = nodes[link.source];
|
||||
if (typeof target === "number") target = link.target = nodes[link.target];
|
||||
source.sourceLinks.push(link);
|
||||
target.targetLinks.push(link);
|
||||
});
|
||||
}
|
||||
|
||||
// Compute the value (size) of each node by summing the associated links.
|
||||
function computeNodeValues() {
|
||||
nodes.forEach(function(node) {
|
||||
node.value = Math.max(
|
||||
d3.sum(node.sourceLinks, value),
|
||||
d3.sum(node.targetLinks, value)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// Iteratively assign the breadth (x-position) for each node.
|
||||
// Nodes are assigned the maximum breadth of incoming neighbors plus one;
|
||||
// nodes with no incoming links are assigned breadth zero, while
|
||||
// nodes with no outgoing links are assigned the maximum breadth.
|
||||
function computeNodeBreadths() {
|
||||
var remainingNodes = nodes,
|
||||
nextNodes,
|
||||
x = 0;
|
||||
|
||||
while (remainingNodes.length) {
|
||||
nextNodes = [];
|
||||
remainingNodes.forEach(function(node) {
|
||||
node.x = x;
|
||||
node.dx = nodeWidth;
|
||||
node.sourceLinks.forEach(function(link) {
|
||||
nextNodes.push(link.target);
|
||||
});
|
||||
});
|
||||
remainingNodes = nextNodes;
|
||||
++x;
|
||||
}
|
||||
|
||||
//
|
||||
moveSinksRight(x);
|
||||
scaleNodeBreadths((size[0] - nodeWidth) / (x - 1));
|
||||
}
|
||||
|
||||
function moveSourcesRight() {
|
||||
nodes.forEach(function(node) {
|
||||
if (!node.targetLinks.length) {
|
||||
node.x = d3.min(node.sourceLinks, function(d) { return d.target.x; }) - 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function moveSinksRight(x) {
|
||||
nodes.forEach(function(node) {
|
||||
if (!node.sourceLinks.length) {
|
||||
node.x = x - 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function scaleNodeBreadths(kx) {
|
||||
nodes.forEach(function(node) {
|
||||
node.x *= kx;
|
||||
});
|
||||
}
|
||||
|
||||
function computeNodeDepths(iterations) {
|
||||
var nodesByBreadth = d3.nest()
|
||||
.key(function(d) { return d.x; })
|
||||
.sortKeys(d3.ascending)
|
||||
.entries(nodes)
|
||||
.map(function(d) { return d.values; });
|
||||
|
||||
//
|
||||
initializeNodeDepth();
|
||||
resolveCollisions();
|
||||
for (var alpha = 1; iterations > 0; --iterations) {
|
||||
relaxRightToLeft(alpha *= .99);
|
||||
resolveCollisions();
|
||||
relaxLeftToRight(alpha);
|
||||
resolveCollisions();
|
||||
}
|
||||
|
||||
function initializeNodeDepth() {
|
||||
var ky = d3.min(nodesByBreadth, function(nodes) {
|
||||
return (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, value);
|
||||
});
|
||||
|
||||
nodesByBreadth.forEach(function(nodes) {
|
||||
nodes.forEach(function(node, i) {
|
||||
node.y = i;
|
||||
node.dy = node.value * ky;
|
||||
});
|
||||
});
|
||||
|
||||
links.forEach(function(link) {
|
||||
link.dy = link.value * ky;
|
||||
});
|
||||
}
|
||||
|
||||
function relaxLeftToRight(alpha) {
|
||||
nodesByBreadth.forEach(function(nodes, breadth) {
|
||||
nodes.forEach(function(node) {
|
||||
if (node.targetLinks.length) {
|
||||
var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value);
|
||||
node.y += (y - center(node)) * alpha;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function weightedSource(link) {
|
||||
return center(link.source) * link.value;
|
||||
}
|
||||
}
|
||||
|
||||
function relaxRightToLeft(alpha) {
|
||||
nodesByBreadth.slice().reverse().forEach(function(nodes) {
|
||||
nodes.forEach(function(node) {
|
||||
if (node.sourceLinks.length) {
|
||||
var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value);
|
||||
node.y += (y - center(node)) * alpha;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function weightedTarget(link) {
|
||||
return center(link.target) * link.value;
|
||||
}
|
||||
}
|
||||
|
||||
function resolveCollisions() {
|
||||
nodesByBreadth.forEach(function(nodes) {
|
||||
var node,
|
||||
dy,
|
||||
y0 = 0,
|
||||
n = nodes.length,
|
||||
i;
|
||||
|
||||
// Push any overlapping nodes down.
|
||||
nodes.sort(ascendingDepth);
|
||||
for (i = 0; i < n; ++i) {
|
||||
node = nodes[i];
|
||||
dy = y0 - node.y;
|
||||
if (dy > 0) node.y += dy;
|
||||
y0 = node.y + node.dy + nodePadding;
|
||||
}
|
||||
|
||||
// If the bottommost node goes outside the bounds, push it back up.
|
||||
dy = y0 - nodePadding - size[1];
|
||||
if (dy > 0) {
|
||||
y0 = node.y -= dy;
|
||||
|
||||
// Push any overlapping nodes back up.
|
||||
for (i = n - 2; i >= 0; --i) {
|
||||
node = nodes[i];
|
||||
dy = node.y + node.dy + nodePadding - y0;
|
||||
if (dy > 0) node.y -= dy;
|
||||
y0 = node.y;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function ascendingDepth(a, b) {
|
||||
return a.y - b.y;
|
||||
}
|
||||
}
|
||||
|
||||
function computeLinkDepths() {
|
||||
nodes.forEach(function(node) {
|
||||
node.sourceLinks.sort(ascendingTargetDepth);
|
||||
node.targetLinks.sort(ascendingSourceDepth);
|
||||
});
|
||||
nodes.forEach(function(node) {
|
||||
var sy = 0, ty = 0;
|
||||
node.sourceLinks.forEach(function(link) {
|
||||
link.sy = sy;
|
||||
sy += link.dy;
|
||||
});
|
||||
node.targetLinks.forEach(function(link) {
|
||||
link.ty = ty;
|
||||
ty += link.dy;
|
||||
});
|
||||
});
|
||||
|
||||
function ascendingSourceDepth(a, b) {
|
||||
return a.source.y - b.source.y;
|
||||
}
|
||||
|
||||
function ascendingTargetDepth(a, b) {
|
||||
return a.target.y - b.target.y;
|
||||
}
|
||||
}
|
||||
|
||||
function center(node) {
|
||||
return node.y + node.dy / 2;
|
||||
}
|
||||
|
||||
function value(link) {
|
||||
return link.value;
|
||||
}
|
||||
|
||||
return sankey;
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@ -1,13 +0,0 @@
|
||||
{
|
||||
"name": "nvd3",
|
||||
"version": "0.0.1",
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-contrib-jshint": "~0.3.0",
|
||||
"grunt-contrib-watch": "~0.3.1",
|
||||
"grunt-contrib-uglify": "~0.2.0",
|
||||
"grunt-contrib-concat": "~0.2.0",
|
||||
"grunt-contrib-copy": "~0.4.1",
|
||||
"grunt-contrib-cssmin": "~0.6.2"
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue