mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
removed K4D3 from the repo
This commit is contained in:
Spencer Alger
parent
4673f5c0ed
commit
e26ebbc714
41 changed files with 1 additions and 21615 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,4 +1,4 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
trash
|
||||
!src/bower_components/**/*
|
||||
src/bower_components/K4D3
|
||||
97
src/bower_components/K4D3/GruntFile.js
vendored
97
src/bower_components/K4D3/GruntFile.js
vendored
|
|
@ -1,97 +0,0 @@
|
|||
module.exports = function(grunt) {
|
||||
|
||||
//Project configuration.
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
requirejs: {
|
||||
compile: {
|
||||
options: {
|
||||
baseUrl: '.',
|
||||
name: 'lib/almond/almond',
|
||||
include: ['src/index'],
|
||||
exclude: ['lib/jquery/dist/jquery'],
|
||||
optimize: 'none',
|
||||
out: 'build/k4.d3.js',
|
||||
/*
|
||||
onBuildRead: function(moduleName, path, contents) {
|
||||
return contents.replace(/console.log(.*);/g, '');
|
||||
},
|
||||
*/
|
||||
wrap: {
|
||||
startFile: 'src/start.js',
|
||||
endFile: 'src/end.js'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
karma: {
|
||||
unit: {
|
||||
configFile: 'karma.conf.js'
|
||||
}
|
||||
},
|
||||
concat: {
|
||||
options: {
|
||||
separator: ''
|
||||
},
|
||||
dist: {
|
||||
src: [],
|
||||
dest: ''
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
|
||||
'<%= grunt.template.today("yyyy-mm-dd") %> */'
|
||||
},
|
||||
js: {
|
||||
files: {
|
||||
'build/k4.d3.min.js': ['build/k4.d3.js']
|
||||
},
|
||||
sourceMap: true
|
||||
}
|
||||
},
|
||||
jshint: {
|
||||
foo: {
|
||||
src: 'src/**/*.js'
|
||||
},
|
||||
options: {
|
||||
jshintrc: '.jshintrc'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
js: {
|
||||
files: ['src/**/*.js'],
|
||||
tasks: ['requirejs']
|
||||
}
|
||||
},
|
||||
copy: {
|
||||
css: {
|
||||
files: [
|
||||
{ src: 'src/css/k4.d3.css', dest: 'build/k4.d3.css' }
|
||||
]
|
||||
}
|
||||
},
|
||||
cssmin: {
|
||||
dist: {
|
||||
files: {
|
||||
'build/k4.d3.min.css' : ['build/k4.d3.css']
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-karma');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-requirejs');
|
||||
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', ['requirejs', 'copy', 'cssmin', 'watch']);
|
||||
grunt.registerTask('production', ['requirejs', 'uglify', 'copy', 'cssmin']);
|
||||
grunt.registerTask('release', ['production']);
|
||||
grunt.registerTask('lint', ['jshint']);
|
||||
grunt.registerTask('unit-test', ['karma']);
|
||||
};
|
||||
30
src/bower_components/K4D3/README.md
vendored
30
src/bower_components/K4D3/README.md
vendored
|
|
@ -1,30 +0,0 @@
|
|||
# K4D3
|
||||
D3 Visualization Library for Kibana 4!
|
||||
|
||||
## Environment Setup
|
||||
1. Fork the repository. You will need [node](http://nodejs.org/download) and npm installed.
|
||||
2. Change into the project's root directory.
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
Run Grunt with `grunt`. That's it!
|
||||
|
||||
## Directory Structure
|
||||
*Despite the fact that this may be obvious, I always find a directory layout helpful.*
|
||||
|
||||
1. `build` - K4D3 built files, e.g. k4.d3.min.js, etc.
|
||||
2. `docs/` - visualization library documentation.
|
||||
3. `examples/` - testing in html.
|
||||
4. `src/` - source code.
|
||||
5. `test/` - unit tests.
|
||||
6. `.bowerrc` - bower configuration file.
|
||||
7. `.gitignore` - list of files/directories for git to ignore.
|
||||
8. `.jshintrc` - jshint configurations.
|
||||
9. `GruntFile.js` - Grunt configuration file.
|
||||
10. `bower.json` - bower info and dependencies list.
|
||||
11. `index.html` - list of charting examples.
|
||||
12. `karma.conf.js` - Karma configuration file for testing.
|
||||
13. `package.json` - npm config file with (Grunt) development dependencies.
|
||||
|
||||
45
src/bower_components/K4D3/bower.json
vendored
45
src/bower_components/K4D3/bower.json
vendored
|
|
@ -1,45 +0,0 @@
|
|||
{
|
||||
"name": "K4D3",
|
||||
"version": "0.1.0",
|
||||
"main": "core.js",
|
||||
"scripts": [
|
||||
"k4.d3.js"
|
||||
],
|
||||
"homepage": "https://github.com/elasticsearch/K4D3",
|
||||
"authors": [
|
||||
"Shelby Sturgis",
|
||||
"Juan Thomassie"
|
||||
],
|
||||
"description": "D3 Charting Library for Kibana 4",
|
||||
"keywords": [
|
||||
"data",
|
||||
"visualization",
|
||||
"elasticsearch",
|
||||
"kibana"
|
||||
],
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"d3": "~3.4.1",
|
||||
"jquery": "~2.1.0",
|
||||
"lodash": "~2.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"almond": "~0.2.9",
|
||||
"requirejs": "~2.1.11",
|
||||
"angular": "~1.2.16",
|
||||
"angular-route": "~1.2.16",
|
||||
"bootstrap": "~3.1.1",
|
||||
"elasticsearch": "~2.1.2",
|
||||
"lodash": "~2.4.1",
|
||||
"queue-async": "~1.0.7",
|
||||
"topojson": "~1.6.7"
|
||||
}
|
||||
}
|
||||
64
src/bower_components/K4D3/build/k4.d3.css
vendored
64
src/bower_components/K4D3/build/k4.d3.css
vendored
|
|
@ -1,64 +0,0 @@
|
|||
/* Stylings that will blow your mind! */
|
||||
|
||||
.arc path {
|
||||
stroke: #fff;
|
||||
/* stroke-width: 3px; */
|
||||
}
|
||||
|
||||
.arc path {
|
||||
stroke: #fff;
|
||||
/* stroke-width: 3px; */
|
||||
}
|
||||
|
||||
div.col {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.axis line, .axis path {
|
||||
/*display: none;*/
|
||||
stroke: #aaa;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.layer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.brush .extent {
|
||||
stroke: #fff;
|
||||
fill-opacity: .125;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
/*.y.axis line, .y.axis path {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
}*/
|
||||
|
||||
.k4-tip {
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Creates a small triangle extender for the tooltip */
|
||||
.k4-tip:after {
|
||||
box-sizing: border-box;
|
||||
display: inline;
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
content: "\25BC";
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Style northward tooltips differently */
|
||||
.k4-tip.n:after {
|
||||
margin: -1px 0 0 0;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
17405
src/bower_components/K4D3/build/k4.d3.js
vendored
17405
src/bower_components/K4D3/build/k4.d3.js
vendored
File diff suppressed because it is too large
Load diff
|
|
@ -1 +0,0 @@
|
|||
.arc path{stroke:#fff}div.col{display:inline-block}.axis line,.axis path{stroke:#aaa;fill:none}.layer{cursor:pointer}.brush .extent{stroke:#fff;fill-opacity:.125;shape-rendering:crispEdges}.k4-tip{line-height:1;font-weight:700;padding:12px;background:rgba(0,0,0,.8);color:#fff;border-radius:2px}.k4-tip:after{box-sizing:border-box;display:inline;font-size:10px;width:100%;line-height:1;color:rgba(0,0,0,.8);content:"\25BC";position:absolute;text-align:center}.k4-tip.n:after{margin:-1px 0 0 0;top:100%;left:0}
|
||||
6
src/bower_components/K4D3/build/k4.d3.min.js
vendored
6
src/bower_components/K4D3/build/k4.d3.min.js
vendored
File diff suppressed because one or more lines are too long
2
src/bower_components/K4D3/docs/example.md
vendored
2
src/bower_components/K4D3/docs/example.md
vendored
|
|
@ -1,2 +0,0 @@
|
|||
# Example Doc
|
||||
Work in progress!
|
||||
105
src/bower_components/K4D3/examples/animatedbars.html
vendored
105
src/bower_components/K4D3/examples/animatedbars.html
vendored
|
|
@ -1,105 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Animated bars</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.axis line, .axis path {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
}
|
||||
.x.axis .minor {
|
||||
/*stroke-opacity: .5;*/
|
||||
}
|
||||
.x.axis path {
|
||||
/*display: none;*/
|
||||
}
|
||||
|
||||
.y.axis line, .y.axis path {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
}
|
||||
rect {
|
||||
fill: #fff;
|
||||
}
|
||||
rect.bordered {
|
||||
stroke: rgba(0,0,0,0.3);
|
||||
stroke-width:0.5px;
|
||||
}
|
||||
.block {
|
||||
stroke: #444;
|
||||
stroke-width:1px;
|
||||
}
|
||||
g.bargroup {
|
||||
overflow: hidden;
|
||||
width: 830px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test1"></div>
|
||||
<div id="test2"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
// test 1 - time data
|
||||
var xTimeInterval = 1000, // time interval in the x-axis data - milliseconds
|
||||
transitionInterval = 500, // interval for transition/animation effect
|
||||
dataUpdateInterval = 2000, // interval that new data is added to array
|
||||
maxBars = 40; // number of bars to display before shift() exit() begins
|
||||
|
||||
// random data
|
||||
function next1() {
|
||||
t = t + xTimeInterval;
|
||||
return {
|
||||
x: t,
|
||||
y: Math.sin(t/800) + 1 + Math.random()*2
|
||||
};
|
||||
}
|
||||
var data1 = [],
|
||||
now = new Date(),
|
||||
t = +now;
|
||||
data1.push(next1());
|
||||
|
||||
var viz1 = k4.animatedbars()
|
||||
.width(900)
|
||||
.height(300)
|
||||
//.animatedTransition(true)
|
||||
.transitionInterval(transitionInterval)
|
||||
.xTimeInterval(xTimeInterval)
|
||||
.color("#333")
|
||||
.xValue(function(d) { return d.x; })
|
||||
.yValue(function(d) { return d.y; });
|
||||
|
||||
function drawChart1() {
|
||||
d3.select("#test1")
|
||||
.datum(data1)
|
||||
.call(viz1);
|
||||
}
|
||||
drawChart1();
|
||||
|
||||
// start interval to update chart data - dataUpdateInterval
|
||||
var i1 = setInterval(function() {
|
||||
data1.push(next1());
|
||||
d3.timer.flush();
|
||||
drawChart1();
|
||||
if (data1.length >= maxBars) {
|
||||
data1.shift();
|
||||
}
|
||||
}, dataUpdateInterval);
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
91
src/bower_components/K4D3/examples/area.html
vendored
91
src/bower_components/K4D3/examples/area.html
vendored
|
|
@ -1,91 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Area Test</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
rect {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.area {
|
||||
/* fill: rgba(113, 131, 255, .7); */
|
||||
}
|
||||
|
||||
.line {
|
||||
/*
|
||||
stroke: #2a39ff;
|
||||
stroke-width: 3.5px;
|
||||
*/
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 5px;
|
||||
font: 12px sans-serif;
|
||||
background: lightgray;
|
||||
border: 0px;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
left: -120px;
|
||||
top: 100px;
|
||||
/*visibility: hidden;*/
|
||||
}
|
||||
|
||||
.overlay {
|
||||
fill: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="area-chart"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
<script>
|
||||
var formatDate = d3.time.format("%b %Y").parse,
|
||||
data = [
|
||||
{x: "Jan 2013", y: 256},
|
||||
{x: "Feb 2013", y: 770},
|
||||
{x: "Mar 2013", y: 470},
|
||||
{x: "Apr 2013", y: 370},
|
||||
{x: "May 2013", y: 159},
|
||||
{x: "Jun 2013", y: 809},
|
||||
{x: "Jul 2013", y: 689},
|
||||
{x: "Aug 2013", y: 299},
|
||||
{x: "Sep 2013", y: 630},
|
||||
{x: "Oct 2013", y: 106},
|
||||
{x: "Nov 2013", y: 506},
|
||||
{x: "Dec 2013", y: 23}
|
||||
];
|
||||
|
||||
var viz = k4.area()
|
||||
.height(500)
|
||||
.width(960)
|
||||
.interpolate("cardinal")
|
||||
.x(function(d) { return formatDate(d.x); })
|
||||
.y(function(d) { return d.y; });
|
||||
|
||||
d3.select("#area-chart")
|
||||
.datum(data)
|
||||
.call(viz);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
428
src/bower_components/K4D3/examples/dendrogram.html
vendored
428
src/bower_components/K4D3/examples/dendrogram.html
vendored
|
|
@ -1,428 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dendrogram</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.node circle {
|
||||
fill: #fff;
|
||||
stroke: steelblue;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.node {
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
|
||||
.link {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="dendrogram"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
<script>
|
||||
var data = {
|
||||
"name": "flare",
|
||||
"children": [
|
||||
{
|
||||
"name": "analytics",
|
||||
"children": [
|
||||
{
|
||||
"name": "cluster",
|
||||
"children": [
|
||||
{"name": "AgglomerativeCluster", "size": 3938},
|
||||
{"name": "CommunityStructure", "size": 3812},
|
||||
{"name": "HierarchicalCluster", "size": 6714},
|
||||
{"name": "MergeEdge", "size": 743}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "graph",
|
||||
"children": [
|
||||
{"name": "BetweennessCentrality", "size": 3534},
|
||||
{"name": "LinkDistance", "size": 5731},
|
||||
{"name": "MaxFlowMinCut", "size": 7840},
|
||||
{"name": "ShortestPaths", "size": 5914},
|
||||
{"name": "SpanningTree", "size": 3416}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "optimization",
|
||||
"children": [
|
||||
{"name": "AspectRatioBanker", "size": 7074}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "animate",
|
||||
"children": [
|
||||
{"name": "Easing", "size": 17010},
|
||||
{"name": "FunctionSequence", "size": 5842},
|
||||
{
|
||||
"name": "interpolate",
|
||||
"children": [
|
||||
{"name": "ArrayInterpolator", "size": 1983},
|
||||
{"name": "ColorInterpolator", "size": 2047},
|
||||
{"name": "DateInterpolator", "size": 1375},
|
||||
{"name": "Interpolator", "size": 8746},
|
||||
{"name": "MatrixInterpolator", "size": 2202},
|
||||
{"name": "NumberInterpolator", "size": 1382},
|
||||
{"name": "ObjectInterpolator", "size": 1629},
|
||||
{"name": "PointInterpolator", "size": 1675},
|
||||
{"name": "RectangleInterpolator", "size": 2042}
|
||||
]
|
||||
},
|
||||
{"name": "ISchedulable", "size": 1041},
|
||||
{"name": "Parallel", "size": 5176},
|
||||
{"name": "Pause", "size": 449},
|
||||
{"name": "Scheduler", "size": 5593},
|
||||
{"name": "Sequence", "size": 5534},
|
||||
{"name": "Transition", "size": 9201},
|
||||
{"name": "Transitioner", "size": 19975},
|
||||
{"name": "TransitionEvent", "size": 1116},
|
||||
{"name": "Tween", "size": 6006}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "data",
|
||||
"children": [
|
||||
{
|
||||
"name": "converters",
|
||||
"children": [
|
||||
{"name": "Converters", "size": 721},
|
||||
{"name": "DelimitedTextConverter", "size": 4294},
|
||||
{"name": "GraphMLConverter", "size": 9800},
|
||||
{"name": "IDataConverter", "size": 1314},
|
||||
{"name": "JSONConverter", "size": 2220}
|
||||
]
|
||||
},
|
||||
{"name": "DataField", "size": 1759},
|
||||
{"name": "DataSchema", "size": 2165},
|
||||
{"name": "DataSet", "size": 586},
|
||||
{"name": "DataSource", "size": 3331},
|
||||
{"name": "DataTable", "size": 772},
|
||||
{"name": "DataUtil", "size": 3322}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "display",
|
||||
"children": [
|
||||
{"name": "DirtySprite", "size": 8833},
|
||||
{"name": "LineSprite", "size": 1732},
|
||||
{"name": "RectSprite", "size": 3623},
|
||||
{"name": "TextSprite", "size": 10066}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "flex",
|
||||
"children": [
|
||||
{"name": "FlareVis", "size": 4116}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "physics",
|
||||
"children": [
|
||||
{"name": "DragForce", "size": 1082},
|
||||
{"name": "GravityForce", "size": 1336},
|
||||
{"name": "IForce", "size": 319},
|
||||
{"name": "NBodyForce", "size": 10498},
|
||||
{"name": "Particle", "size": 2822},
|
||||
{"name": "Simulation", "size": 9983},
|
||||
{"name": "Spring", "size": 2213},
|
||||
{"name": "SpringForce", "size": 1681}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "query",
|
||||
"children": [
|
||||
{"name": "AggregateExpression", "size": 1616},
|
||||
{"name": "And", "size": 1027},
|
||||
{"name": "Arithmetic", "size": 3891},
|
||||
{"name": "Average", "size": 891},
|
||||
{"name": "BinaryExpression", "size": 2893},
|
||||
{"name": "Comparison", "size": 5103},
|
||||
{"name": "CompositeExpression", "size": 3677},
|
||||
{"name": "Count", "size": 781},
|
||||
{"name": "DateUtil", "size": 4141},
|
||||
{"name": "Distinct", "size": 933},
|
||||
{"name": "Expression", "size": 5130},
|
||||
{"name": "ExpressionIterator", "size": 3617},
|
||||
{"name": "Fn", "size": 3240},
|
||||
{"name": "If", "size": 2732},
|
||||
{"name": "IsA", "size": 2039},
|
||||
{"name": "Literal", "size": 1214},
|
||||
{"name": "Match", "size": 3748},
|
||||
{"name": "Maximum", "size": 843},
|
||||
{
|
||||
"name": "methods",
|
||||
"children": [
|
||||
{"name": "add", "size": 593},
|
||||
{"name": "and", "size": 330},
|
||||
{"name": "average", "size": 287},
|
||||
{"name": "count", "size": 277},
|
||||
{"name": "distinct", "size": 292},
|
||||
{"name": "div", "size": 595},
|
||||
{"name": "eq", "size": 594},
|
||||
{"name": "fn", "size": 460},
|
||||
{"name": "gt", "size": 603},
|
||||
{"name": "gte", "size": 625},
|
||||
{"name": "iff", "size": 748},
|
||||
{"name": "isa", "size": 461},
|
||||
{"name": "lt", "size": 597},
|
||||
{"name": "lte", "size": 619},
|
||||
{"name": "max", "size": 283},
|
||||
{"name": "min", "size": 283},
|
||||
{"name": "mod", "size": 591},
|
||||
{"name": "mul", "size": 603},
|
||||
{"name": "neq", "size": 599},
|
||||
{"name": "not", "size": 386},
|
||||
{"name": "or", "size": 323},
|
||||
{"name": "orderby", "size": 307},
|
||||
{"name": "range", "size": 772},
|
||||
{"name": "select", "size": 296},
|
||||
{"name": "stddev", "size": 363},
|
||||
{"name": "sub", "size": 600},
|
||||
{"name": "sum", "size": 280},
|
||||
{"name": "update", "size": 307},
|
||||
{"name": "variance", "size": 335},
|
||||
{"name": "where", "size": 299},
|
||||
{"name": "xor", "size": 354},
|
||||
{"name": "_", "size": 264}
|
||||
]
|
||||
},
|
||||
{"name": "Minimum", "size": 843},
|
||||
{"name": "Not", "size": 1554},
|
||||
{"name": "Or", "size": 970},
|
||||
{"name": "Query", "size": 13896},
|
||||
{"name": "Range", "size": 1594},
|
||||
{"name": "StringUtil", "size": 4130},
|
||||
{"name": "Sum", "size": 791},
|
||||
{"name": "Variable", "size": 1124},
|
||||
{"name": "Variance", "size": 1876},
|
||||
{"name": "Xor", "size": 1101}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "scale",
|
||||
"children": [
|
||||
{"name": "IScaleMap", "size": 2105},
|
||||
{"name": "LinearScale", "size": 1316},
|
||||
{"name": "LogScale", "size": 3151},
|
||||
{"name": "OrdinalScale", "size": 3770},
|
||||
{"name": "QuantileScale", "size": 2435},
|
||||
{"name": "QuantitativeScale", "size": 4839},
|
||||
{"name": "RootScale", "size": 1756},
|
||||
{"name": "Scale", "size": 4268},
|
||||
{"name": "ScaleType", "size": 1821},
|
||||
{"name": "TimeScale", "size": 5833}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "util",
|
||||
"children": [
|
||||
{"name": "Arrays", "size": 8258},
|
||||
{"name": "Colors", "size": 10001},
|
||||
{"name": "Dates", "size": 8217},
|
||||
{"name": "Displays", "size": 12555},
|
||||
{"name": "Filter", "size": 2324},
|
||||
{"name": "Geometry", "size": 10993},
|
||||
{
|
||||
"name": "heap",
|
||||
"children": [
|
||||
{"name": "FibonacciHeap", "size": 9354},
|
||||
{"name": "HeapNode", "size": 1233}
|
||||
]
|
||||
},
|
||||
{"name": "IEvaluable", "size": 335},
|
||||
{"name": "IPredicate", "size": 383},
|
||||
{"name": "IValueProxy", "size": 874},
|
||||
{
|
||||
"name": "math",
|
||||
"children": [
|
||||
{"name": "DenseMatrix", "size": 3165},
|
||||
{"name": "IMatrix", "size": 2815},
|
||||
{"name": "SparseMatrix", "size": 3366}
|
||||
]
|
||||
},
|
||||
{"name": "Maths", "size": 17705},
|
||||
{"name": "Orientation", "size": 1486},
|
||||
{
|
||||
"name": "palette",
|
||||
"children": [
|
||||
{"name": "ColorPalette", "size": 6367},
|
||||
{"name": "Palette", "size": 1229},
|
||||
{"name": "ShapePalette", "size": 2059},
|
||||
{"name": "SizePalette", "size": 2291}
|
||||
]
|
||||
},
|
||||
{"name": "Property", "size": 5559},
|
||||
{"name": "Shapes", "size": 19118},
|
||||
{"name": "Sort", "size": 6887},
|
||||
{"name": "Stats", "size": 6557},
|
||||
{"name": "Strings", "size": 22026}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "vis",
|
||||
"children": [
|
||||
{
|
||||
"name": "axis",
|
||||
"children": [
|
||||
{"name": "Axes", "size": 1302},
|
||||
{"name": "Axis", "size": 24593},
|
||||
{"name": "AxisGridLine", "size": 652},
|
||||
{"name": "AxisLabel", "size": 636},
|
||||
{"name": "CartesianAxes", "size": 6703}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "controls",
|
||||
"children": [
|
||||
{"name": "AnchorControl", "size": 2138},
|
||||
{"name": "ClickControl", "size": 3824},
|
||||
{"name": "Control", "size": 1353},
|
||||
{"name": "ControlList", "size": 4665},
|
||||
{"name": "DragControl", "size": 2649},
|
||||
{"name": "ExpandControl", "size": 2832},
|
||||
{"name": "HoverControl", "size": 4896},
|
||||
{"name": "IControl", "size": 763},
|
||||
{"name": "PanZoomControl", "size": 5222},
|
||||
{"name": "SelectionControl", "size": 7862},
|
||||
{"name": "TooltipControl", "size": 8435}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "data",
|
||||
"children": [
|
||||
{"name": "Data", "size": 20544},
|
||||
{"name": "DataList", "size": 19788},
|
||||
{"name": "DataSprite", "size": 10349},
|
||||
{"name": "EdgeSprite", "size": 3301},
|
||||
{"name": "NodeSprite", "size": 19382},
|
||||
{
|
||||
"name": "render",
|
||||
"children": [
|
||||
{"name": "ArrowType", "size": 698},
|
||||
{"name": "EdgeRenderer", "size": 5569},
|
||||
{"name": "IRenderer", "size": 353},
|
||||
{"name": "ShapeRenderer", "size": 2247}
|
||||
]
|
||||
},
|
||||
{"name": "ScaleBinding", "size": 11275},
|
||||
{"name": "Tree", "size": 7147},
|
||||
{"name": "TreeBuilder", "size": 9930}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "events",
|
||||
"children": [
|
||||
{"name": "DataEvent", "size": 2313},
|
||||
{"name": "SelectionEvent", "size": 1880},
|
||||
{"name": "TooltipEvent", "size": 1701},
|
||||
{"name": "VisualizationEvent", "size": 1117}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "legend",
|
||||
"children": [
|
||||
{"name": "Legend", "size": 20859},
|
||||
{"name": "LegendItem", "size": 4614},
|
||||
{"name": "LegendRange", "size": 10530}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "operator",
|
||||
"children": [
|
||||
{
|
||||
"name": "distortion",
|
||||
"children": [
|
||||
{"name": "BifocalDistortion", "size": 4461},
|
||||
{"name": "Distortion", "size": 6314},
|
||||
{"name": "FisheyeDistortion", "size": 3444}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "encoder",
|
||||
"children": [
|
||||
{"name": "ColorEncoder", "size": 3179},
|
||||
{"name": "Encoder", "size": 4060},
|
||||
{"name": "PropertyEncoder", "size": 4138},
|
||||
{"name": "ShapeEncoder", "size": 1690},
|
||||
{"name": "SizeEncoder", "size": 1830}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "filter",
|
||||
"children": [
|
||||
{"name": "FisheyeTreeFilter", "size": 5219},
|
||||
{"name": "GraphDistanceFilter", "size": 3165},
|
||||
{"name": "VisibilityFilter", "size": 3509}
|
||||
]
|
||||
},
|
||||
{"name": "IOperator", "size": 1286},
|
||||
{
|
||||
"name": "label",
|
||||
"children": [
|
||||
{"name": "Labeler", "size": 9956},
|
||||
{"name": "RadialLabeler", "size": 3899},
|
||||
{"name": "StackedAreaLabeler", "size": 3202}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "layout",
|
||||
"children": [
|
||||
{"name": "AxisLayout", "size": 6725},
|
||||
{"name": "BundledEdgeRouter", "size": 3727},
|
||||
{"name": "CircleLayout", "size": 9317},
|
||||
{"name": "CirclePackingLayout", "size": 12003},
|
||||
{"name": "DendrogramLayout", "size": 4853},
|
||||
{"name": "ForceDirectedLayout", "size": 8411},
|
||||
{"name": "IcicleTreeLayout", "size": 4864},
|
||||
{"name": "IndentedTreeLayout", "size": 3174},
|
||||
{"name": "Layout", "size": 7881},
|
||||
{"name": "NodeLinkTreeLayout", "size": 12870},
|
||||
{"name": "PieLayout", "size": 2728},
|
||||
{"name": "RadialTreeLayout", "size": 12348},
|
||||
{"name": "RandomLayout", "size": 870},
|
||||
{"name": "StackedAreaLayout", "size": 9121},
|
||||
{"name": "TreeMapLayout", "size": 9191}
|
||||
]
|
||||
},
|
||||
{"name": "Operator", "size": 2490},
|
||||
{"name": "OperatorList", "size": 5248},
|
||||
{"name": "OperatorSequence", "size": 4190},
|
||||
{"name": "OperatorSwitch", "size": 2581},
|
||||
{"name": "SortOperator", "size": 2023}
|
||||
]
|
||||
},
|
||||
{"name": "Visualization", "size": 16540}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
var width = 960,
|
||||
height = 2200,
|
||||
dendrogram = k4.dendrogram()
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select("#dendrogram")
|
||||
.datum(data)
|
||||
.call(dendrogram);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
44
src/bower_components/K4D3/examples/donut.html
vendored
44
src/bower_components/K4D3/examples/donut.html
vendored
|
|
@ -1,44 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Pie Test</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.arc path {
|
||||
stroke: #fff;
|
||||
/* stroke-width: 8px; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="pie-chart"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
<script>
|
||||
var data = [
|
||||
{label: "DEN", value: 256},
|
||||
{label: "SEA", value: 770},
|
||||
{label: "SF", value: 159},
|
||||
{label: "NE", value: 106}
|
||||
];
|
||||
|
||||
var viz = k4.pie()
|
||||
.innerRadius(150)
|
||||
.width(500)
|
||||
.height(500)
|
||||
.label(function(d) { return d.label; })
|
||||
.value(function(d) { return d.value; });
|
||||
|
||||
d3.select("#pie-chart")
|
||||
.datum(data)
|
||||
.call(viz);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
87
src/bower_components/K4D3/examples/heatmap.html
vendored
87
src/bower_components/K4D3/examples/heatmap.html
vendored
|
|
@ -1,87 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Heatmap</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
rect {
|
||||
fill: #fff;
|
||||
}
|
||||
rect.bordered {
|
||||
stroke: rgba(0,0,0,0.3);
|
||||
stroke-width:0.5px;
|
||||
}
|
||||
.block {
|
||||
stroke: #444;
|
||||
stroke-width:1px;
|
||||
}
|
||||
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: none;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='test1'></div>
|
||||
<div id='test2'></div>
|
||||
|
||||
<script src='../lib/d3/d3.min.js'></script>
|
||||
<script src='../k4.d3.js'></script>
|
||||
|
||||
<script>
|
||||
|
||||
// tests 1 - data from cols and rows with random z value (0 - 1)
|
||||
var cols = 50, rows = 24, data1 = [];
|
||||
for (var x = 1; x < cols+1; x++) {
|
||||
for (var y = 1; y < rows+1; y++) {
|
||||
data1.push({ x: x, y: y, z: Math.random() });
|
||||
}
|
||||
}
|
||||
var viz1 = k4.heatmap()
|
||||
.cols(cols)
|
||||
.rows(rows)
|
||||
.width(760)
|
||||
.height(400)
|
||||
.margin({top: 40, right: 20, bottom: 20, left: 60})
|
||||
.xValue(function(d) { return d.x; })
|
||||
.yValue(function(d) { return d.y; })
|
||||
.zValue(function(d) { return d.z; });
|
||||
d3.select('#test1')
|
||||
.datum(data1)
|
||||
.call(viz1);
|
||||
|
||||
// tests 2 - data from cols and rows with random z value (0 - 1)
|
||||
var cols = 120, rows = 20, data2 = [];
|
||||
for (var x = 1; x < cols+1; x++) {
|
||||
for (var y = 1; y < rows+1; y++) {
|
||||
data2.push({ x: x, y: y, z: Math.random() });
|
||||
}
|
||||
}
|
||||
var viz2 = k4.heatmap()
|
||||
.cols(cols)
|
||||
.rows(rows)
|
||||
.width(960)
|
||||
.height(200)
|
||||
.strokecolor('#f4f4f4')
|
||||
.strokeweight(1)
|
||||
.rad(4)
|
||||
.colors(['#ffebbc','#f8d294','#f2b96e','#ed9d4c','#e97f2e','#e55c13','#e02c00'])
|
||||
.margin({top: 40, right: 20, bottom: 20, left: 60})
|
||||
.xValue(function(d) { return d.x; })
|
||||
.yValue(function(d) { return d.y; })
|
||||
.zValue(function(d) { return d.z; });
|
||||
d3.select('#test2')
|
||||
.datum(data2)
|
||||
.call(viz2);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
589
src/bower_components/K4D3/examples/histogram.html
vendored
589
src/bower_components/K4D3/examples/histogram.html
vendored
|
|
@ -1,589 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Histogram</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
/* fill: #444; */
|
||||
background: #e5e5e5;
|
||||
padding-top: 70px;
|
||||
}
|
||||
div#parent {
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
div#element {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<!-- k4.d3.css stylesheet -->
|
||||
<link rel="stylesheet" href="../build/k4.d3.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div id="parent" class="col-md-12">
|
||||
<div id="element"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- javascript files -->
|
||||
<!-- <script src="../build/k4.d3.min.js" charset="utf-8"></script> -->
|
||||
<script src="../lib/d3/d3.js" charset="utf-8"></script>
|
||||
<script src="../lib/jquery/dist/jquery.js"></script>
|
||||
<script src="../lib/requirejs/require.js"></script>
|
||||
<script>
|
||||
require(['../build/k4.d3'], function(k4) {
|
||||
'use strict';
|
||||
var data = {
|
||||
"columns": [
|
||||
{
|
||||
"rows": [
|
||||
{
|
||||
"label": "200 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"series": [
|
||||
{
|
||||
"key": "jpg",
|
||||
"values": [
|
||||
//{"x": "Jan", "y": 270},
|
||||
//{"x": "Feb", "y": 329},
|
||||
//{"x": "Mar", "y": 166},
|
||||
{"x": "Apr", "y": 271},
|
||||
{"x": "May", "y": 185}
|
||||
//{"x": "Jun", "y": 264}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "pct",
|
||||
"values": [
|
||||
//{"x": "Jan", "y": 133},
|
||||
{"x": "Feb", "y": 123},
|
||||
//{"x": "Mar", "y": 226},
|
||||
//{"x": "Apr", "y": 133},
|
||||
{"x": "May", "y": 246},
|
||||
{"x": "Jun", "y": 153}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "png",
|
||||
"values": [
|
||||
//{"x": "Jan", "y": 128},
|
||||
{"x": "Feb", "y": 119},
|
||||
{"x": "Mar", "y": 122},
|
||||
{"x": "Apr", "y": 230},
|
||||
{"x": "May", "y": 133},
|
||||
{"x": "Jun", "y": 137}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "gif",
|
||||
"values": [
|
||||
//{"x": "Jan", "y": 218},
|
||||
{"x": "Feb", "y": 110},
|
||||
{"x": "Mar", "y": 112},
|
||||
//{"x": "Apr", "y": 96},
|
||||
//{"x": "May", "y": 123},
|
||||
{"x": "Jun", "y": 87}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "300 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"series": [
|
||||
{
|
||||
"key": "jpg",
|
||||
"values": [
|
||||
//{"x": "Jan", "y": 170},
|
||||
//{"x": "Feb", "y": 59},
|
||||
{"x": "Mar", "y": 166},
|
||||
{"x": "Apr", "y": 171},
|
||||
{"x": "May", "y": 85},
|
||||
{"x": "Jun", "y": 164}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "pct",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 93},
|
||||
{"x": "Feb", "y": 123},
|
||||
{"x": "Mar", "y": 26},
|
||||
{"x": "Apr", "y": 133}
|
||||
//{"x": "May", "y": 46},
|
||||
//{"x": "Jun", "y": 53}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "png",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 68},
|
||||
{"x": "Feb", "y": 119},
|
||||
{"x": "Mar", "y": 22},
|
||||
{"x": "Apr", "y": 130},
|
||||
{"x": "May", "y": 93},
|
||||
{"x": "Jun", "y": 37}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "gif",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 118},
|
||||
{"x": "Feb", "y": 70},
|
||||
{"x": "Mar", "y": 62},
|
||||
{"x": "Apr", "y": 16},
|
||||
//{"x": "May", "y": 123},
|
||||
{"x": "Jun", "y": 67}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "400 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"series": [
|
||||
{
|
||||
"key": "jpg",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 170},
|
||||
{"x": "Feb", "y": 159},
|
||||
{"x": "Mar", "y": 66},
|
||||
{"x": "Apr", "y": 71},
|
||||
{"x": "May", "y": 115},
|
||||
{"x": "Jun", "y": 94}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "pct",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 33},
|
||||
{"x": "Feb", "y": 23},
|
||||
{"x": "Mar", "y": 26},
|
||||
{"x": "Apr", "y": 33},
|
||||
{"x": "May", "y": 46},
|
||||
{"x": "Jun", "y": 53}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "png",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 28},
|
||||
{"x": "Feb", "y": 19},
|
||||
{"x": "Mar", "y": 22},
|
||||
{"x": "Apr", "y": 30},
|
||||
{"x": "May", "y": 33},
|
||||
{"x": "Jun", "y": 47}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "gif",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 18},
|
||||
{"x": "Feb", "y": 30},
|
||||
{"x": "Mar", "y": 12},
|
||||
{"x": "Apr", "y": 16},
|
||||
{"x": "May", "y": 33},
|
||||
{"x": "Jun", "y": 17}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"rows": [
|
||||
{
|
||||
"label": "200 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"series": [
|
||||
{
|
||||
"key": "jpg",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 270},
|
||||
{"x": "Feb", "y": 329},
|
||||
{"x": "Mar", "y": 166},
|
||||
{"x": "Apr", "y": 271},
|
||||
{"x": "May", "y": 185},
|
||||
{"x": "Jun", "y": 264}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "pct",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 133},
|
||||
{"x": "Feb", "y": 123},
|
||||
{"x": "Mar", "y": 226},
|
||||
{"x": "Apr", "y": 133},
|
||||
{"x": "May", "y": 246},
|
||||
{"x": "Jun", "y": 153}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "png",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 128},
|
||||
{"x": "Feb", "y": 119},
|
||||
{"x": "Mar", "y": 122},
|
||||
{"x": "Apr", "y": 230},
|
||||
{"x": "May", "y": 133},
|
||||
{"x": "Jun", "y": 137}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "gif",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 218},
|
||||
{"x": "Feb", "y": 110},
|
||||
{"x": "Mar", "y": 112},
|
||||
{"x": "Apr", "y": 96},
|
||||
{"x": "May", "y": 123},
|
||||
{"x": "Jun", "y": 87}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "300 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"series": [
|
||||
{
|
||||
"key": "jpg",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 170},
|
||||
{"x": "Feb", "y": 59},
|
||||
{"x": "Mar", "y": 166},
|
||||
{"x": "Apr", "y": 171},
|
||||
{"x": "May", "y": 85},
|
||||
{"x": "Jun", "y": 164}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "pct",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 93},
|
||||
{"x": "Feb", "y": 123},
|
||||
{"x": "Mar", "y": 26},
|
||||
{"x": "Apr", "y": 133},
|
||||
{"x": "May", "y": 46},
|
||||
{"x": "Jun", "y": 53}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "png",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 68},
|
||||
{"x": "Feb", "y": 119},
|
||||
{"x": "Mar", "y": 22},
|
||||
{"x": "Apr", "y": 130},
|
||||
{"x": "May", "y": 93},
|
||||
{"x": "Jun", "y": 37}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "gif",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 118},
|
||||
{"x": "Feb", "y": 70},
|
||||
{"x": "Mar", "y": 62},
|
||||
{"x": "Apr", "y": 16},
|
||||
{"x": "May", "y": 123},
|
||||
{"x": "Jun", "y": 67}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "400 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"series": [
|
||||
{
|
||||
"key": "jpg",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 170},
|
||||
{"x": "Feb", "y": 159},
|
||||
{"x": "Mar", "y": 66},
|
||||
{"x": "Apr", "y": 71},
|
||||
{"x": "May", "y": 115},
|
||||
{"x": "Jun", "y": 94}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "pct",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 33},
|
||||
{"x": "Feb", "y": 23},
|
||||
{"x": "Mar", "y": 26},
|
||||
{"x": "Apr", "y": 33},
|
||||
{"x": "May", "y": 46},
|
||||
{"x": "Jun", "y": 53}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "png",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 28},
|
||||
{"x": "Feb", "y": 19},
|
||||
{"x": "Mar", "y": 22},
|
||||
{"x": "Apr", "y": 30},
|
||||
{"x": "May", "y": 33},
|
||||
{"x": "Jun", "y": 47}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "gif",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 18},
|
||||
{"x": "Feb", "y": 30},
|
||||
{"x": "Mar", "y": 12},
|
||||
{"x": "Apr", "y": 16},
|
||||
{"x": "May", "y": 33},
|
||||
{"x": "Jun", "y": 17}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"rows": [
|
||||
{
|
||||
"label": "200 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"series": [
|
||||
{
|
||||
"key": "jpg",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 270},
|
||||
{"x": "Feb", "y": 329},
|
||||
{"x": "Mar", "y": 166},
|
||||
{"x": "Apr", "y": 271},
|
||||
{"x": "May", "y": 185},
|
||||
{"x": "Jun", "y": 264}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "pct",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 133},
|
||||
{"x": "Feb", "y": 123},
|
||||
{"x": "Mar", "y": 226},
|
||||
{"x": "Apr", "y": 133},
|
||||
{"x": "May", "y": 246},
|
||||
{"x": "Jun", "y": 153}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "png",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 128},
|
||||
{"x": "Feb", "y": 119},
|
||||
{"x": "Mar", "y": 122},
|
||||
{"x": "Apr", "y": 230},
|
||||
{"x": "May", "y": 133},
|
||||
{"x": "Jun", "y": 137}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "gif",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 218},
|
||||
{"x": "Feb", "y": 110},
|
||||
{"x": "Mar", "y": 112},
|
||||
{"x": "Apr", "y": 96},
|
||||
{"x": "May", "y": 123},
|
||||
{"x": "Jun", "y": 87}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "300 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"series": [
|
||||
{
|
||||
"key": "jpg",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 170},
|
||||
{"x": "Feb", "y": 59},
|
||||
{"x": "Mar", "y": 166},
|
||||
{"x": "Apr", "y": 171},
|
||||
{"x": "May", "y": 85},
|
||||
{"x": "Jun", "y": 164}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "pct",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 93},
|
||||
{"x": "Feb", "y": 123},
|
||||
{"x": "Mar", "y": 26},
|
||||
{"x": "Apr", "y": 133},
|
||||
{"x": "May", "y": 46},
|
||||
{"x": "Jun", "y": 53}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "png",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 68},
|
||||
{"x": "Feb", "y": 119},
|
||||
{"x": "Mar", "y": 22},
|
||||
{"x": "Apr", "y": 130},
|
||||
{"x": "May", "y": 93},
|
||||
{"x": "Jun", "y": 37}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "gif",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 118},
|
||||
{"x": "Feb", "y": 70},
|
||||
{"x": "Mar", "y": 62},
|
||||
{"x": "Apr", "y": 16},
|
||||
{"x": "May", "y": 123},
|
||||
{"x": "Jun", "y": 67}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "400 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"series": [
|
||||
{
|
||||
"key": "jpg",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 170},
|
||||
{"x": "Feb", "y": 159},
|
||||
{"x": "Mar", "y": 66},
|
||||
{"x": "Apr", "y": 71},
|
||||
{"x": "May", "y": 115},
|
||||
{"x": "Jun", "y": 94}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "pct",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 33},
|
||||
{"x": "Feb", "y": 23},
|
||||
{"x": "Mar", "y": 26},
|
||||
{"x": "Apr", "y": 33},
|
||||
{"x": "May", "y": 46},
|
||||
{"x": "Jun", "y": 53}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "png",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 28},
|
||||
{"x": "Feb", "y": 19},
|
||||
{"x": "Mar", "y": 22},
|
||||
{"x": "Apr", "y": 30},
|
||||
{"x": "May", "y": 33},
|
||||
{"x": "Jun", "y": 47}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "gif",
|
||||
"values": [
|
||||
{"x": "Jan", "y": 18},
|
||||
{"x": "Feb", "y": 30},
|
||||
{"x": "Mar", "y": 12},
|
||||
{"x": "Apr", "y": 16},
|
||||
{"x": "May", "y": 33},
|
||||
{"x": "Jun", "y": 17}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
elem = $("#element")[0],
|
||||
myChart;
|
||||
|
||||
myChart = new k4.Chart(elem, {
|
||||
type: "histogram",
|
||||
offset: "zero",
|
||||
yGroup: true,
|
||||
shareYAxis: true,
|
||||
//color: ['#81dfe2','#0762b7']
|
||||
});
|
||||
|
||||
myChart.on('hover', function(d, i) {
|
||||
console.log('hovered ' + d.x, d.y, i);
|
||||
return d.x
|
||||
});
|
||||
|
||||
myChart.render(data);
|
||||
var dataset = {
|
||||
"label": "200 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"series": [
|
||||
{
|
||||
"key": "jpg",
|
||||
"values": [
|
||||
//{"x": "Jan", "y": 270},
|
||||
//{"x": "Feb", "y": 329},
|
||||
//{"x": "Mar", "y": 166},
|
||||
{"x": "Apr", "y": 271},
|
||||
{"x": "May", "y": 185}
|
||||
//{"x": "Jun", "y": 264}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "pct",
|
||||
"values": [
|
||||
//{"x": "Jan", "y": 133},
|
||||
{"x": "Feb", "y": 123},
|
||||
//{"x": "Mar", "y": 226},
|
||||
//{"x": "Apr", "y": 133},
|
||||
{"x": "May", "y": 246},
|
||||
{"x": "Jun", "y": 153}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "png",
|
||||
"values": [
|
||||
//{"x": "Jan", "y": 128},
|
||||
{"x": "Feb", "y": 119},
|
||||
{"x": "Mar", "y": 122},
|
||||
{"x": "Apr", "y": 230},
|
||||
{"x": "May", "y": 133},
|
||||
{"x": "Jun", "y": 137}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "gif",
|
||||
"values": [
|
||||
//{"x": "Jan", "y": 218},
|
||||
{"x": "Feb", "y": 110},
|
||||
{"x": "Mar", "y": 112},
|
||||
//{"x": "Apr", "y": 96},
|
||||
//{"x": "May", "y": 123},
|
||||
{"x": "Jun", "y": 87}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.render(dataset);
|
||||
//myChart.destroy(false).render(data);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,296 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Histogram layers</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.form {
|
||||
width: 960px;
|
||||
height: 20px;
|
||||
margin: 30px auto 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.inputs {
|
||||
float: right;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
.test {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.bkgd {
|
||||
fill: #fff;
|
||||
}
|
||||
text {
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
label{
|
||||
margin: 6px;
|
||||
}
|
||||
.k4-tip {
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
padding: 12px;
|
||||
background: #f4f4f4;
|
||||
-webkit-border-radius: 10px;
|
||||
-mox-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
|
||||
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
|
||||
color: black;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Creates a small triangle extender for the tooltip */
|
||||
.k4-tip:after {
|
||||
box-sizing: border-box;
|
||||
display: inline;
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
color: #f4f4f4;
|
||||
content: "\25BC";
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Style northward tooltips differently */
|
||||
.k4-tip.n:after {
|
||||
margin: -1px 0 0 0;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.legend rect {
|
||||
fill: white;
|
||||
stroke: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.legend-items text {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class='form'>
|
||||
<div class='inputs'>
|
||||
<label><input type='radio' name='mode' value='grouped' checked> Grouped</label>
|
||||
<label><input type='radio' name='mode' value='stacked'> Stacked</label>
|
||||
<label><input type='radio' name='mode' value='normalized'> Normalized</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id='test1' class='test'></div>
|
||||
<div id='test2' class='test'></div>
|
||||
|
||||
<script src='../lib/d3/d3.min.js'></script>
|
||||
<script src='../k4.d3.js'></script>
|
||||
|
||||
<script>
|
||||
|
||||
var data2 = [
|
||||
[
|
||||
{ "x": 0, "y": 0.8844082 },
|
||||
{ "x": 1, "y": 1.481108 },
|
||||
{ "x": 2, "y": 1.0280456 },
|
||||
{ "x": 3, "y": 1.2027342 },
|
||||
{ "x": 4, "y": 0.8288619 },
|
||||
{ "x": 5, "y": 1.1551247 },
|
||||
{ "x": 6, "y": 1.4108497 },
|
||||
{ "x": 7, "y": 1.573156 },
|
||||
{ "x": 8, "y": 1.7861147 },
|
||||
{ "x": 9, "y": 3.038947 },
|
||||
{ "x": 10, "y": 2.392341 },
|
||||
{ "x": 11, "y": 1.6871792 },
|
||||
{ "x": 12, "y": 1.5468425 },
|
||||
{ "x": 13, "y": 1.0206737 },
|
||||
{ "x": 14, "y": 1.1753416 },
|
||||
{ "x": 15, "y": 1.522858 },
|
||||
{ "x": 16, "y": 2.983441 },
|
||||
{ "x": 17, "y": 5.133735 },
|
||||
{ "x": 18, "y": 7.224354 },
|
||||
{ "x": 19, "y": 7.431775 },
|
||||
{ "x": 20, "y": 6.399373 },
|
||||
{ "x": 21, "y": 3.69291 },
|
||||
{ "x": 22, "y": 2.254959 },
|
||||
{ "x": 23, "y": 2.325067 },
|
||||
{ "x": 24, "y": 3.4062604 },
|
||||
{ "x": 25, "y": 4.831221 },
|
||||
{ "x": 26, "y": 4.509324 },
|
||||
{ "x": 27, "y": 3.859732 },
|
||||
{ "x": 28, "y": 3.4288675 },
|
||||
{ "x": 29, "y": 2.763701 }
|
||||
],
|
||||
[
|
||||
{ "x": 0, "y": 3.277066 },
|
||||
{ "x": 1, "y": 4.28015 },
|
||||
{ "x": 2, "y": 2.314823 },
|
||||
{ "x": 3, "y": 1.977416 },
|
||||
{ "x": 4, "y": 2.54941 },
|
||||
{ "x": 5, "y": 2.170335 },
|
||||
{ "x": 6, "y": 1.55193 },
|
||||
{ "x": 7, "y": 1.828068 },
|
||||
{ "x": 8, "y": 1.552802 },
|
||||
{ "x": 9, "y": 1.290394 },
|
||||
{ "x": 10, "y": 1.24277 },
|
||||
{ "x": 11, "y": 1.268239 },
|
||||
{ "x": 12, "y": 1.49669 },
|
||||
{ "x": 13, "y": 1.57461 },
|
||||
{ "x": 14, "y": 1.36925 },
|
||||
{ "x": 15, "y": 1.54476 },
|
||||
{ "x": 16, "y": 1.255244 },
|
||||
{ "x": 17, "y": 1.09638 },
|
||||
{ "x": 18, "y": 1.286965 },
|
||||
{ "x": 19, "y": 1.141393 },
|
||||
{ "x": 20, "y": 1.40536 },
|
||||
{ "x": 21, "y": 1.494249 },
|
||||
{ "x": 22, "y": 1.015363 },
|
||||
{ "x": 23, "y": 0.886962 },
|
||||
{ "x": 24, "y": 1.034566 },
|
||||
{ "x": 25, "y": 1.589218 },
|
||||
{ "x": 26, "y": 0.963824 },
|
||||
{ "x": 27, "y": 1.191486 },
|
||||
{ "x": 28, "y": 2.481383 },
|
||||
{ "x": 29, "y": 2.2742 }
|
||||
],
|
||||
[
|
||||
{ "x": 0, "y": 1.0876985 },
|
||||
{ "x": 1, "y": 1.0122077 },
|
||||
{ "x": 2, "y": 0.9393067 },
|
||||
{ "x": 3, "y": 1.3863626 },
|
||||
{ "x": 4, "y": 0.8587753 },
|
||||
{ "x": 5, "y": 1.3929757 },
|
||||
{ "x": 6, "y": 0.9343624 },
|
||||
{ "x": 7, "y": 1.5536027 },
|
||||
{ "x": 8, "y": 1.566821 },
|
||||
{ "x": 9, "y": 1.1355328 },
|
||||
{ "x": 10, "y": 0.815765 },
|
||||
{ "x": 11, "y": 1.2168527 },
|
||||
{ "x": 12, "y": 0.996575 },
|
||||
{ "x": 13, "y": 2.0402585 },
|
||||
{ "x": 14, "y": 2.8914773 },
|
||||
{ "x": 15, "y": 1.4401553 },
|
||||
{ "x": 16, "y": 1.1379643 },
|
||||
{ "x": 17, "y": 0.8705049 },
|
||||
{ "x": 18, "y": 1.0352086 },
|
||||
{ "x": 19, "y": 0.8603228 },
|
||||
{ "x": 20, "y": 1.0466003 },
|
||||
{ "x": 21, "y": 1.325505 },
|
||||
{ "x": 22, "y": 1.4775715 },
|
||||
{ "x": 23, "y": 0.8189888 },
|
||||
{ "x": 24, "y": 1.0781158 },
|
||||
{ "x": 25, "y": 1.4542994 },
|
||||
{ "x": 26, "y": 2.605967 },
|
||||
{ "x": 27, "y": 4.024406 },
|
||||
{ "x": 28, "y": 4.450423 },
|
||||
{ "x": 29, "y": 3.3943867
|
||||
}
|
||||
],
|
||||
[
|
||||
{ "x": 0, "y": 5.902411 },
|
||||
{ "x": 1, "y": 4.894352 },
|
||||
{ "x": 2, "y": 3.0685465 },
|
||||
{ "x": 3, "y": 1.9666992 },
|
||||
{ "x": 4, "y": 1.4785942 },
|
||||
{ "x": 5, "y": 1.091198 },
|
||||
{ "x": 6, "y": 1.4308047 },
|
||||
{ "x": 7, "y": 0.9187601 },
|
||||
{ "x": 8, "y": 1.04027 },
|
||||
{ "x": 9, "y": 0.9435814 },
|
||||
{ "x": 10, "y": 1.1221278 },
|
||||
{ "x": 11, "y": 1.7441262 },
|
||||
{ "x": 12, "y": 2.513928 },
|
||||
{ "x": 13, "y": 1.4015922 },
|
||||
{ "x": 14, "y": 1.2609381 },
|
||||
{ "x": 15, "y": 1.548244 },
|
||||
{ "x": 16, "y": 1.0725328 },
|
||||
{ "x": 17, "y": 1.5648195 },
|
||||
{ "x": 18, "y": 0.9905595 },
|
||||
{ "x": 19, "y": 1.2427888 },
|
||||
{ "x": 20, "y": 1.1749918 },
|
||||
{ "x": 21, "y": 1.5988346 },
|
||||
{ "x": 22, "y": 0.9067769 },
|
||||
{ "x": 23, "y": 1.3369145 },
|
||||
{ "x": 24, "y": 0.8532394 },
|
||||
{ "x": 25, "y": 1.1332053 },
|
||||
{ "x": 26, "y": 0.8204884 },
|
||||
{ "x": 27, "y": 1.1091128 },
|
||||
{ "x": 28, "y": 1.471285 },
|
||||
{ "x": 29, "y": 1.2530068 }
|
||||
],
|
||||
[
|
||||
{ "x": 0, "y": 1.075954 },
|
||||
{ "x": 1, "y": 1.585442 },
|
||||
{ "x": 2, "y": 1.1674 },
|
||||
{ "x": 3, "y": 1.14369 },
|
||||
{ "x": 4, "y": 1.34921 },
|
||||
{ "x": 5, "y": 1.243447 },
|
||||
{ "x": 6, "y": 1.750262 },
|
||||
{ "x": 7, "y": 2.475354 },
|
||||
{ "x": 8, "y": 1.875433 },
|
||||
{ "x": 9, "y": 1.398197 },
|
||||
{ "x": 10, "y": 1.51274 },
|
||||
{ "x": 11, "y": 2.751618 },
|
||||
{ "x": 12, "y": 3.86732 },
|
||||
{ "x": 13, "y": 5.12918 },
|
||||
{ "x": 14, "y": 5.98922 },
|
||||
{ "x": 15, "y": 4.64792 },
|
||||
{ "x": 16, "y": 3.483686 },
|
||||
{ "x": 17, "y": 2.318907 },
|
||||
{ "x": 18, "y": 1.37544 },
|
||||
{ "x": 19, "y": 1.519539 },
|
||||
{ "x": 20, "y": 1.500183 },
|
||||
{ "x": 21, "y": 0.806488 },
|
||||
{ "x": 22, "y": 1.184477 },
|
||||
{ "x": 23, "y": 1.092799 },
|
||||
{ "x": 24, "y": 1.079844 },
|
||||
{ "x": 25, "y": 1.573577 },
|
||||
{ "x": 26, "y": 1.208479 },
|
||||
{ "x": 27, "y": 0.980507 },
|
||||
{ "x": 28, "y": 1.399507 },
|
||||
{ "x": 29, "y": 1.200258 }
|
||||
]
|
||||
];
|
||||
|
||||
// define chart
|
||||
var viz1 = k4.histogramlayers();
|
||||
|
||||
// draw chart
|
||||
d3.select('#test1').datum(data2).call(viz1);
|
||||
|
||||
// input buttons
|
||||
d3.selectAll('input').on('change', change);
|
||||
|
||||
function change() {
|
||||
console.log(this.value);
|
||||
if (this.value === 'grouped') {
|
||||
viz1 = k4.histogramlayers()
|
||||
.displaySeries('grouped');
|
||||
}
|
||||
if (this.value === 'stacked') {
|
||||
viz1 = k4.histogramlayers()
|
||||
.displaySeries('stacked');
|
||||
}
|
||||
if (this.value === 'normalized') {
|
||||
viz1 = k4.histogramlayers()
|
||||
.displaySeries('normalized');
|
||||
}
|
||||
|
||||
d3.select('#test1').datum(data2).call(viz1);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
189
src/bower_components/K4D3/examples/horizon.html
vendored
189
src/bower_components/K4D3/examples/horizon.html
vendored
|
|
@ -1,189 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Horizon Chart Test</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
rect {
|
||||
fill: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="horizon-chart"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
|
||||
<script>
|
||||
var data = [
|
||||
{
|
||||
"year":[
|
||||
2000,2000,2000,2000,2000,2000,2000,2000,2000,
|
||||
2000,2000,2000,2001,2001,2001,2001,2001,2001,
|
||||
2001,2001,2001,2001,2001,2001,2002,2002,2002,
|
||||
2002,2002,2002,2002,2002,2002,2002,2002,2002,
|
||||
2003,2003,2003,2003,2003,2003,2003,2003,2003,
|
||||
2003,2003,2003,2004,2004,2004,2004,2004,2004,
|
||||
2004,2004,2004,2004,2004,2004,2005,2005,2005,
|
||||
2005,2005,2005,2005,2005,2005,2005,2005,2005,
|
||||
2006,2006,2006,2006,2006,2006,2006,2006,2006,
|
||||
2006,2006,2006,2007,2007,2007,2007,2007,2007,
|
||||
2007,2007,2007,2007,2007,2007,2008,2008,2008,
|
||||
2008,2008,2008,2008,2008,2008,2008,2008,2008,
|
||||
2009,2009,2009,2009,2009,2009,2009,2009,2009,
|
||||
2009,2009,2009,2010,2010
|
||||
],
|
||||
"month":[
|
||||
1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,
|
||||
10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,
|
||||
6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,
|
||||
2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,
|
||||
11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,
|
||||
8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2
|
||||
],
|
||||
"rate":[
|
||||
4.5,4.4,4.3,3.7,3.8,4.1,4.2,4.1,3.8,3.6,3.7,3.7,
|
||||
4.7,4.6,4.5,4.2,4.1,4.7,4.7,4.9,4.7,5,5.3,5.4,
|
||||
6.3,6.1,6.1,5.7,5.5,6,5.9,5.7,5.4,5.3,5.6,5.7,
|
||||
6.5,6.4,6.2,5.8,5.8,6.5,6.3,6,5.8,5.6,5.6,5.4,
|
||||
6.3,6,6,5.4,5.3,5.8,5.7,5.4,5.1,5.1,5.2,5.1,5.7,
|
||||
5.8,5.4,4.9,4.9,5.2,5.2,4.9,4.8,4.6,4.8,4.6,5.1,
|
||||
5.1,4.8,4.5,4.4,4.8,5,4.6,4.4,4.1,4.3,4.3,5,4.9,
|
||||
4.5,4.3,4.3,4.7,4.9,4.6,4.5,4.4,4.5,4.8,5.4,5.2,
|
||||
5.2,4.8,5.2,5.7,6,6.1,6,6.1,6.5,7.1,8.5,8.9,9,
|
||||
8.6,9.1,9.7,9.7,9.6,9.5,9.5,9.4,9.7,10.6,10.4
|
||||
]
|
||||
},
|
||||
{
|
||||
"year": [
|
||||
2000,2000,2000,2000,2000,2000,2000,2000,2000,
|
||||
2000,2000,2000,2001,2001,2001,2001,2001,2001,
|
||||
2001,2001,2001,2001,2001,2001,2002,2002,2002,
|
||||
2002,2002,2002,2002,2002,2002,2002,2002,2002,
|
||||
2003,2003,2003,2003,2003,2003,2003,2003,2003,
|
||||
2003,2003,2003,2004,2004,2004,2004,2004,2004,
|
||||
2004,2004,2004,2004,2004,2004,2005,2005,2005,
|
||||
2005,2005,2005,2005,2005,2005,2005,2005,2005,
|
||||
2006,2006,2006,2006,2006,2006,2006,2006,2006,
|
||||
2006,2006,2006,2007,2007,2007,2007,2007,2007,
|
||||
2007,2007,2007,2007,2007,2007,2008,2008,2008,
|
||||
2008,2008,2008,2008,2008,2008,2008,2008,2008,
|
||||
2009,2009,2009,2009,2009,2009,2009,2009,2009,
|
||||
2009,2009,2009,2010,2010
|
||||
],
|
||||
"month": [
|
||||
1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,
|
||||
10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,
|
||||
6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,
|
||||
2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,
|
||||
11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,
|
||||
8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2
|
||||
],
|
||||
"rate": [
|
||||
4.5,4.4,4.3,3.7,3.8,4.1,4.2,4.1,3.8,3.6,3.7,3.7,
|
||||
4.7,4.6,4.5,4.2,4.1,4.7,4.7,4.9,4.7,5,5.3,5.4,
|
||||
6.3,6.1,6.1,5.7,5.5,6,5.9,5.7,5.4,5.3,5.6,5.7,
|
||||
6.5,6.4,6.2,5.8,5.8,6.5,6.3,6,5.8,5.6,5.6,5.4,
|
||||
6.3,6,6,5.4,5.3,5.8,5.7,5.4,5.1,5.1,5.2,5.1,5.7,
|
||||
5.8,5.4,4.9,4.9,5.2,5.2,4.9,4.8,4.6,4.8,4.6,5.1,
|
||||
5.1,4.8,4.5,4.4,4.8,5,4.6,4.4,4.1,4.3,4.3,5,4.9,
|
||||
4.5,4.3,4.3,4.7,4.9,4.6,4.5,4.4,4.5,4.8,5.4,5.2,
|
||||
5.2,4.8,5.2,5.7,6,6.1,6,6.1,6.5,7.1,8.5,8.9,9,
|
||||
8.6,9.1,9.7,9.7,9.6,9.5,9.5,9.4,9.7,10.6,10.4
|
||||
]
|
||||
},
|
||||
{
|
||||
"year": [
|
||||
2000,2000,2000,2000,2000,2000,2000,2000,2000,
|
||||
2000,2000,2000,2001,2001,2001,2001,2001,2001,
|
||||
2001,2001,2001,2001,2001,2001,2002,2002,2002,
|
||||
2002,2002,2002,2002,2002,2002,2002,2002,2002,
|
||||
2003,2003,2003,2003,2003,2003,2003,2003,2003,
|
||||
2003,2003,2003,2004,2004,2004,2004,2004,2004,
|
||||
2004,2004,2004,2004,2004,2004,2005,2005,2005,
|
||||
2005,2005,2005,2005,2005,2005,2005,2005,2005,
|
||||
2006,2006,2006,2006,2006,2006,2006,2006,2006,
|
||||
2006,2006,2006,2007,2007,2007,2007,2007,2007,
|
||||
2007,2007,2007,2007,2007,2007,2008,2008,2008,
|
||||
2008,2008,2008,2008,2008,2008,2008,2008,2008,
|
||||
2009,2009,2009,2009,2009,2009,2009,2009,2009,
|
||||
2009,2009,2009,2010,2010
|
||||
],
|
||||
"month": [
|
||||
1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,
|
||||
10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,
|
||||
6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,
|
||||
2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,
|
||||
11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,
|
||||
8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12,1,2
|
||||
],
|
||||
"rate": []
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
console.log(data[2]);
|
||||
for (var i = 0; i < 122; i++) {
|
||||
var number = Math.random() * 11;
|
||||
data[2].rate.push(number.toFixed(1));
|
||||
}
|
||||
|
||||
// Offset so that positive is above-average and negative is below-average.
|
||||
var mean = data.map(function(d) {
|
||||
return d.rate.reduce(function(p, v) { return p + v; }, 0) / d.rate.length;
|
||||
});
|
||||
|
||||
// Need to add this to the horizon function
|
||||
// Transpose column values to rows.
|
||||
data = data.map(function(d) {
|
||||
return d.rate.map(function(rate, i) {
|
||||
return [Date.UTC(data[0].year[i], data[0].month[i] - 1), rate - mean[0]];
|
||||
});
|
||||
});
|
||||
|
||||
var width = 960,
|
||||
height = 330;
|
||||
|
||||
var chart = k4.horizon()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.bands(3)
|
||||
.mode("mirror")
|
||||
.interpolate("basis");
|
||||
|
||||
// Think about changing defs to some element like svg or path where src module
|
||||
var svg = d3.select("#horizon-chart").append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
// Render the chart.
|
||||
var g = svg.selectAll("g")
|
||||
.data(data)
|
||||
.enter().append("g")
|
||||
.attr("class", "symbol")
|
||||
.attr("transform", function (d, i) {
|
||||
var m = height/data.length;
|
||||
return "translate(0," + i * m + ")";
|
||||
});
|
||||
|
||||
//svg.data([data]).call(chart);
|
||||
g.each(function(d) {
|
||||
d3.select(this)
|
||||
.data(data, function(d) { return [d]; })
|
||||
.call(chart.height(height/data.length));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,70 +0,0 @@
|
|||
{"type": "FeatureCollection","features": [
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "San Francisco", "pop_max": 3450000, "geonameid": 5391959.0 }, "geometry": { "type": "Point", "coordinates": [ -122.417168773552248, 37.769195629687431 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Denver", "pop_max": 2313000, "geonameid": 5419384.0 }, "geometry": { "type": "Point", "coordinates": [ -104.985961810968206, 39.741133906965501 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Houston", "pop_max": 4459000, "geonameid": 4699066.0 }, "geometry": { "type": "Point", "coordinates": [ -95.341925149145993, 29.821920243188856 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Miami", "pop_max": 5585000, "geonameid": 4164138.0 }, "geometry": { "type": "Point", "coordinates": [ -80.226051939450031, 25.789556555021534 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Atlanta", "pop_max": 4506000, "geonameid": 4180439.0 }, "geometry": { "type": "Point", "coordinates": [ -84.40189524187565, 33.831959712605851 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Chicago", "pop_max": 8990000, "geonameid": 4887398.0 }, "geometry": { "type": "Point", "coordinates": [ -87.752000832709314, 41.831936519278429 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 6, "name": "Caracas", "pop_max": 2985000, "geonameid": 3646738.0 }, "geometry": { "type": "Point", "coordinates": [ -66.918983051050418, 10.502944413033333 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Kiev", "pop_max": 2709000, "geonameid": 703448.0 }, "geometry": { "type": "Point", "coordinates": [ 30.514682110472165, 50.435313187607221 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 8, "name": "Dubai", "pop_max": 1379000, "geonameid": 292223.0 }, "geometry": { "type": "Point", "coordinates": [ 55.278028464737872, 25.231942012376066 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 6, "name": "Tashkent", "pop_max": 2184000, "geonameid": 1512569.0 }, "geometry": { "type": "Point", "coordinates": [ 69.292986960887788, 41.313647741607213 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Madrid", "pop_max": 5567000, "geonameid": 3675707.0 }, "geometry": { "type": "Point", "coordinates": [ -3.685297544612524, 40.401972123113808 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 7, "name": "Geneva", "pop_max": 1240000, "geonameid": 2660646.0 }, "geometry": { "type": "Point", "coordinates": [ 6.140028034091699, 46.210007547076259 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 7, "name": "Stockholm", "pop_max": 1264000, "geonameid": 2673730.0 }, "geometry": { "type": "Point", "coordinates": [ 18.095388874180912, 59.35270581286585 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Bangkok", "pop_max": 6704000, "geonameid": 1609350.0 }, "geometry": { "type": "Point", "coordinates": [ 100.51469879369489, 13.751945064087977 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Lima", "pop_max": 8012000, "geonameid": 3936456.0 }, "geometry": { "type": "Point", "coordinates": [ -77.052007953434725, -12.046066817525571 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 8, "name": "Dakar", "pop_max": 2604000, "geonameid": 2253354.0 }, "geometry": { "type": "Point", "coordinates": [ -17.475075987050559, 14.717777583623274 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Johannesburg", "pop_max": 3435000, "geonameid": 993800.0 }, "geometry": { "type": "Point", "coordinates": [ 28.028063865019476, -26.16809888138414 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 8, "name": "Amsterdam", "pop_max": 1031000, "geonameid": 2759794.0 }, "geometry": { "type": "Point", "coordinates": [ 4.914694317400972, 52.351914546664432 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Casablanca", "pop_max": 3181000, "geonameid": 2553604.0 }, "geometry": { "type": "Point", "coordinates": [ -7.618313291698712, 33.601922074258482 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Seoul", "pop_max": 9796000, "geonameid": 1835848.0 }, "geometry": { "type": "Point", "coordinates": [ 126.997785138201948, 37.568294958388947 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Manila", "pop_max": 11100000, "geonameid": 1701668.0 }, "geometry": { "type": "Point", "coordinates": [ 120.980271303542395, 14.606104813440538 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Monterrey", "pop_max": 3712000, "geonameid": 3995465.0 }, "geometry": { "type": "Point", "coordinates": [ -100.331930642329951, 25.671940995125283 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 8, "name": "Auckland", "pop_max": 1245000, "geonameid": 2193733.0 }, "geometry": { "type": "Point", "coordinates": [ 174.763034975632536, -36.84806714314567 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Berlin", "pop_max": 3406000, "geonameid": 2950159.0 }, "geometry": { "type": "Point", "coordinates": [ 13.399602764700546, 52.523764522251156 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Urumqi", "pop_max": 2151000, "geonameid": 1529102.0 }, "geometry": { "type": "Point", "coordinates": [ 87.573059796247264, 43.806958085041799 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Chengdu", "pop_max": 4123000, "geonameid": 1815286.0 }, "geometry": { "type": "Point", "coordinates": [ 104.068073630948732, 30.671945877957796 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Osaka", "pop_max": 11294000, "geonameid": 1853909.0 }, "geometry": { "type": "Point", "coordinates": [ 135.458198956595197, 34.75198107491417 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Kinshasa", "pop_max": 7843000, "geonameid": 2314302.0 }, "geometry": { "type": "Point", "coordinates": [ 15.313026023171744, -4.327778243275986 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "New Delhi", "pop_max": 317797, "geonameid": 1261481.0 }, "geometry": { "type": "Point", "coordinates": [ 77.199980020053033, 28.600023009245433 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Bangalore", "pop_max": 6787000, "geonameid": 1277333.0 }, "geometry": { "type": "Point", "coordinates": [ 77.558063865217548, 12.971940995074419 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 6, "name": "Athens", "pop_max": 3242000, "geonameid": 264371.0 }, "geometry": { "type": "Point", "coordinates": [ 23.731375225679358, 37.985272090552257 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Baghdad", "pop_max": 5054000, "geonameid": 98182.0 }, "geometry": { "type": "Point", "coordinates": [ 44.391922914564134, 33.340594356158647 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Addis Ababa", "pop_max": 3100000, "geonameid": 344979.0 }, "geometry": { "type": "Point", "coordinates": [ 38.698058575348682, 9.035256221295754 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Tehran", "pop_max": 7873000, "geonameid": 112931.0 }, "geometry": { "type": "Point", "coordinates": [ 51.422398175008993, 35.673888627001304 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Vancouver", "pop_max": 2313328, "geonameid": 6173331.0 }, "geometry": { "type": "Point", "coordinates": [ -123.123590076394294, 49.275362442711753 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Toronto", "pop_max": 5213000, "geonameid": 6167865.0 }, "geometry": { "type": "Point", "coordinates": [ -79.421966652988431, 43.701925736408441 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Buenos Aires", "pop_max": 12795000, "geonameid": 3435910.0 }, "geometry": { "type": "Point", "coordinates": [ -58.399477232331435, -34.600555749907414 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Kabul", "pop_max": 3277000, "geonameid": 1138958.0 }, "geometry": { "type": "Point", "coordinates": [ 69.181314190705052, 34.518636144900313 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 7, "name": "Vienna", "pop_max": 2400000, "geonameid": 2761369.0 }, "geometry": { "type": "Point", "coordinates": [ 16.364693096743736, 48.201961136816863 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Melbourne", "pop_max": 4170000, "geonameid": 2158177.0 }, "geometry": { "type": "Point", "coordinates": [ 144.973070375904058, -37.818085453696312 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 8, "name": "Taipei", "pop_max": 6900273, "geonameid": 1668341.0 }, "geometry": { "type": "Point", "coordinates": [ 121.568333333333001, 25.035833333333301 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Los Angeles", "pop_max": 12500000, "geonameid": 5368361.0 }, "geometry": { "type": "Point", "coordinates": [ -118.181926369940413, 33.991924108765431 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Washington, D.C.", "pop_max": 4338000, "geonameid": 4140963.0 }, "geometry": { "type": "Point", "coordinates": [ -77.011364439437159, 38.901495235087054 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "New York", "pop_max": 19040000, "geonameid": 5128581.0 }, "geometry": { "type": "Point", "coordinates": [ -73.981962787406815, 40.75192492259464 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "London", "pop_max": 8567000, "geonameid": 2643743.0 }, "geometry": { "type": "Point", "coordinates": [ -0.118667702475932, 51.5019405883275 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Istanbul", "pop_max": 10061000, "geonameid": 745044.0 }, "geometry": { "type": "Point", "coordinates": [ 29.008055727002613, 41.106942012439788 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Riyadh", "pop_max": 4465000, "geonameid": 108410.0 }, "geometry": { "type": "Point", "coordinates": [ 46.770795798688255, 24.642779007816443 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Cape Town", "pop_max": 3215000, "geonameid": 3369157.0 }, "geometry": { "type": "Point", "coordinates": [ 18.433042299226031, -33.918065108628753 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Moscow", "pop_max": 10452000, "geonameid": 524901.0 }, "geometry": { "type": "Point", "coordinates": [ 37.613576967271399, 55.754109981248178 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Mexico City", "pop_max": 19028000, "geonameid": 3530597.0 }, "geometry": { "type": "Point", "coordinates": [ -99.132934060293906, 19.444388301415472 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Lagos", "pop_max": 9466000, "geonameid": 735497.0 }, "geometry": { "type": "Point", "coordinates": [ 3.389585212598433, 6.445207512093191 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Rome", "pop_max": 3339000, "geonameid": 4219762.0 }, "geometry": { "type": "Point", "coordinates": [ 12.481312562873995, 41.897901485098942 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Beijing", "pop_max": 11106000, "geonameid": 1816670.0 }, "geometry": { "type": "Point", "coordinates": [ 116.386339825659434, 39.930838089909059 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Nairobi", "pop_max": 3010000, "geonameid": 184745.0 }, "geometry": { "type": "Point", "coordinates": [ 36.814711000471448, -1.281400883237779 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Jakarta", "pop_max": 9125000, "geonameid": 1642911.0 }, "geometry": { "type": "Point", "coordinates": [ 106.827491762470117, -6.172471846798885 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Bogota", "pop_max": 7772000, "geonameid": 3688689.0 }, "geometry": { "type": "Point", "coordinates": [ -74.085289813774409, 4.598369421147822 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Cairo", "pop_max": 11893000, "geonameid": 360630.0 }, "geometry": { "type": "Point", "coordinates": [ 31.248022361126118, 30.051906205103705 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Shanghai", "pop_max": 14987000, "geonameid": 1796236.0 }, "geometry": { "type": "Point", "coordinates": [ 121.434558819820154, 31.218398311228327 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Tokyo", "pop_max": 35676000, "geonameid": 1850147.0 }, "geometry": { "type": "Point", "coordinates": [ 139.749461570544668, 35.686962764371174 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Mumbai", "pop_max": 18978000, "geonameid": 1275339.0 }, "geometry": { "type": "Point", "coordinates": [ 72.855043438766472, 19.018936234356602 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Paris", "pop_max": 9904000, "geonameid": 6942553.0 }, "geometry": { "type": "Point", "coordinates": [ 2.33138946713035, 48.868638789814611 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Santiago", "pop_max": 5720000, "geonameid": 3449741.0 }, "geometry": { "type": "Point", "coordinates": [ -70.668986713174831, -33.448067956934096 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Kolkata", "pop_max": 14787000, "geonameid": 1275004.0 }, "geometry": { "type": "Point", "coordinates": [ 88.32272979950551, 22.496915156896421 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Rio de Janeiro", "pop_max": 11748000, "geonameid": 3451190.0 }, "geometry": { "type": "Point", "coordinates": [ -43.226966652843657, -22.923077315615956 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Sao Paulo", "pop_max": 18845000, "geonameid": 3448439.0 }, "geometry": { "type": "Point", "coordinates": [ -46.626965839055231, -23.556733728378958 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Sydney", "pop_max": 4630000, "geonameid": 2147714.0 }, "geometry": { "type": "Point", "coordinates": [ 151.183233950147496, -33.918065108628753 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 0, "name": "Singapore", "pop_max": 5183700, "geonameid": 1880252.0 }, "geometry": { "type": "Point", "coordinates": [ 103.853874819099019, 1.294979325105942 ] } },
|
||||
{ "type": "Feature", "properties": { "labelrank": 0, "name": "Hong Kong", "pop_max": 7206000, "geonameid": 1819729.0 }, "geometry": { "type": "Point", "coordinates": [ 114.183063458463039, 22.30692675357551 ] } }
|
||||
]}
|
||||
77
src/bower_components/K4D3/examples/line.html
vendored
77
src/bower_components/K4D3/examples/line.html
vendored
|
|
@ -1,77 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
rect {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.line {
|
||||
fill: none;
|
||||
stroke: #2a39ff;
|
||||
stroke-width: 3.5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="area-chart"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
<script>
|
||||
var formatDate = d3.time.format("%b %Y").parse,
|
||||
data = [
|
||||
{
|
||||
place: 'New York',
|
||||
values: [
|
||||
{ x:"Jan 2013", y: 256 },
|
||||
{ x: "Feb 2013", y: 770 },
|
||||
{ x: "May 2013", y: 159 },
|
||||
{ x: "Oct 2013", y: 106 }
|
||||
]
|
||||
},
|
||||
{
|
||||
place: 'San Francisco',
|
||||
values: [
|
||||
{ x: "Jan 2013", y: 456 },
|
||||
{ x: "Feb 2013", y: 370 },
|
||||
{x: "May 2013", y: 659 },
|
||||
{x: "Oct 2013", y: 806 }
|
||||
]
|
||||
},
|
||||
{
|
||||
place: 'Atlanta',
|
||||
values: [
|
||||
{ x: "Feb 2013", y: 456 },
|
||||
{ x: "Mar 2013", y: 370 },
|
||||
{x: "Jun 2013", y: 659 },
|
||||
{x: "Dec 2013", y: 806 }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
var viz = k4.line()
|
||||
.height(500)
|
||||
.width(960);
|
||||
|
||||
d3.select("#area-chart")
|
||||
.datum(data)
|
||||
.call(viz);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
120
src/bower_components/K4D3/examples/map.html
vendored
120
src/bower_components/K4D3/examples/map.html
vendored
|
|
@ -1,120 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Map</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.test {
|
||||
float: left;
|
||||
}
|
||||
water {
|
||||
fill: #ddd;
|
||||
}
|
||||
.graticule {
|
||||
fill: none;
|
||||
stroke: #444;
|
||||
stroke-width: 0.6;
|
||||
stroke-opacity: 0.4;
|
||||
}
|
||||
.edge {
|
||||
fill: none;
|
||||
stroke: #444;
|
||||
stroke-width: 0.8;
|
||||
stroke-opacity: 0.5;
|
||||
}
|
||||
.land {
|
||||
fill: #444;
|
||||
fill-opacity: 0.6;
|
||||
stroke: #444;
|
||||
stroke-opacity: 0.7;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
.countries path {
|
||||
fill: #ddd;
|
||||
fill-opacity: 0.4;
|
||||
stroke: #444;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 0.4;
|
||||
stroke-opacity: 0.2;
|
||||
}
|
||||
.countries path:hover {
|
||||
fill-opacity: 0.6;
|
||||
stroke-width: 1.1;
|
||||
stroke-opacity: 0.5;
|
||||
|
||||
}
|
||||
.labels {
|
||||
font: 12px sans-serif;
|
||||
fill: #444;
|
||||
}
|
||||
.point{
|
||||
/* fill: #700000;
|
||||
opacity: 0.8; */
|
||||
fill: #eee;
|
||||
stroke: #444;
|
||||
stroke-width: 1;
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
.noclick {
|
||||
pointer-events:none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test1" class="test"></div>
|
||||
<div id="test2" class="test"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../lib/topojson/topojson.js"></script>
|
||||
<script src="../lib/queue-async/queue.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
<script>
|
||||
|
||||
// #test 1
|
||||
var viz1 = k4.map()
|
||||
.watercolor("#fff");
|
||||
|
||||
// #test2
|
||||
var viz2 = k4.map()
|
||||
.width(400)
|
||||
.height(400)
|
||||
.scale(150)
|
||||
.shading(true)
|
||||
.labels(false)
|
||||
.countrycolor("#d3b745")
|
||||
.pointcolor("#ad0000")
|
||||
.rotate([87, -20]);
|
||||
|
||||
// load topojson data
|
||||
queue()
|
||||
.defer(d3.json, "json/world-110m.json")
|
||||
.defer(d3.json, "json/world-places.json")
|
||||
.await(ready);
|
||||
|
||||
function ready(error, world, place) {
|
||||
//console.log(error, world, place);
|
||||
var land = topojson.feature(world, world.objects.land);
|
||||
var countries = topojson.feature(world, world.objects.countries).features;
|
||||
var places = place.features;
|
||||
//console.log(land, countries, places);
|
||||
|
||||
d3.select('#test1')
|
||||
.datum([land, countries, places])
|
||||
.call(viz1);
|
||||
|
||||
d3.select('#test2')
|
||||
.datum([land, countries, places])
|
||||
.call(viz2);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
40
src/bower_components/K4D3/examples/pie.html
vendored
40
src/bower_components/K4D3/examples/pie.html
vendored
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Pie Test</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.arc path {
|
||||
stroke: #fff;
|
||||
/* stroke-width: 3px; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="pie-chart"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
<script>
|
||||
var data = [
|
||||
{label: "DEN", value: 256},
|
||||
{label: "SEA", value: 770},
|
||||
{label: "SF", value: 159},
|
||||
{label: "NE", value: 106}
|
||||
];
|
||||
|
||||
var viz = k4.pie()
|
||||
.label(function(d) { return d.label; })
|
||||
.value(function(d) { return d.value; });
|
||||
|
||||
d3.select("#pie-chart")
|
||||
.datum(data)
|
||||
.call(viz);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Scatterplot</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
rect {
|
||||
fill: #fff;
|
||||
}
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
.dot {
|
||||
stroke: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="scatterplot1"></div>
|
||||
<div id="scatterplot2"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// tests 1 - random data
|
||||
var data1 = [];
|
||||
for (var i = 0; i < 150; i++) {
|
||||
data1.push({
|
||||
x: Math.floor(Math.random()*2000),
|
||||
y: Math.floor(Math.random()*1000),
|
||||
z: Math.floor(Math.random()*6)
|
||||
});
|
||||
}
|
||||
var viz1 = k4.scatterplot()
|
||||
.xValue(function(d) { return d.x; })
|
||||
.yValue(function(d) { return d.y; })
|
||||
.zValue(function(d) { return d.z; });
|
||||
|
||||
d3.select("#scatterplot1")
|
||||
.datum(data1)
|
||||
.call(viz1);
|
||||
|
||||
// tests 2 - random data
|
||||
var data2 = [];
|
||||
for (var i = 0; i < 60; i++) {
|
||||
data2.push({
|
||||
x: Math.floor(Math.random()*200),
|
||||
y: Math.floor(Math.random()*100),
|
||||
z: Math.floor(Math.random()*3)
|
||||
});
|
||||
}
|
||||
var viz2 = k4.scatterplot()
|
||||
.xValue(function(d) { return d.x; })
|
||||
.yValue(function(d) { return d.y; })
|
||||
.zValue(function(d) { return d.z; })
|
||||
.height(250)
|
||||
.width(900);
|
||||
|
||||
d3.select("#scatterplot2")
|
||||
.datum(data2)
|
||||
.call(viz2);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
rect {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.sparkline {
|
||||
fill: none;
|
||||
stroke: #2a39ff;
|
||||
stroke-width: 3.5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sparklines1"></div>
|
||||
<div id="sparklines2"></div>
|
||||
<div id="sparklines3"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
<script>
|
||||
var formatDate = d3.time.format("%b %Y").parse,
|
||||
data1 = [
|
||||
{x: "Jan 2013", y: 256},
|
||||
{x: "Feb 2013", y: 770},
|
||||
{x: "May 2013", y: 159},
|
||||
{x: "Oct 2013", y: 106}
|
||||
],
|
||||
data2 = [
|
||||
{x: "Jan 2013", y: 56},
|
||||
{x: "Feb 2013", y: 170},
|
||||
{x: "May 2013", y: 190},
|
||||
{x: "Oct 2013", y: 206}
|
||||
],
|
||||
data3 = [
|
||||
{x: "Jan 2013", y: 556},
|
||||
{x: "Feb 2013", y: 70},
|
||||
{x: "May 2013", y: 989},
|
||||
{x: "Oct 2013", y: 246}
|
||||
];
|
||||
|
||||
var viz = k4.sparkline()
|
||||
.height(100)
|
||||
.width(300)
|
||||
.interpolate("cardinal")
|
||||
.x(function(d) { return formatDate(d.x); })
|
||||
.y(function(d) { return d.y; });
|
||||
|
||||
d3.select("#sparklines1")
|
||||
.datum(data1)
|
||||
.call(viz);
|
||||
|
||||
d3.select("#sparklines2")
|
||||
.datum(data2)
|
||||
.call(viz);
|
||||
|
||||
d3.select("#sparklines3")
|
||||
.datum(data3)
|
||||
.call(viz);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
412
src/bower_components/K4D3/examples/sunburst.html
vendored
412
src/bower_components/K4D3/examples/sunburst.html
vendored
|
|
@ -1,412 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dendrogram</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.arc path {
|
||||
stroke: #fff;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sunburst"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
<script>
|
||||
var data = {
|
||||
"name": "flare",
|
||||
"children": [
|
||||
{
|
||||
"name": "analytics",
|
||||
"children": [
|
||||
{
|
||||
"name": "cluster",
|
||||
"children": [
|
||||
{"name": "AgglomerativeCluster", "size": 3938},
|
||||
{"name": "CommunityStructure", "size": 3812},
|
||||
{"name": "HierarchicalCluster", "size": 6714},
|
||||
{"name": "MergeEdge", "size": 743}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "graph",
|
||||
"children": [
|
||||
{"name": "BetweennessCentrality", "size": 3534},
|
||||
{"name": "LinkDistance", "size": 5731},
|
||||
{"name": "MaxFlowMinCut", "size": 7840},
|
||||
{"name": "ShortestPaths", "size": 5914},
|
||||
{"name": "SpanningTree", "size": 3416}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "optimization",
|
||||
"children": [
|
||||
{"name": "AspectRatioBanker", "size": 7074}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "animate",
|
||||
"children": [
|
||||
{"name": "Easing", "size": 17010},
|
||||
{"name": "FunctionSequence", "size": 5842},
|
||||
{
|
||||
"name": "interpolate",
|
||||
"children": [
|
||||
{"name": "ArrayInterpolator", "size": 1983},
|
||||
{"name": "ColorInterpolator", "size": 2047},
|
||||
{"name": "DateInterpolator", "size": 1375},
|
||||
{"name": "Interpolator", "size": 8746},
|
||||
{"name": "MatrixInterpolator", "size": 2202},
|
||||
{"name": "NumberInterpolator", "size": 1382},
|
||||
{"name": "ObjectInterpolator", "size": 1629},
|
||||
{"name": "PointInterpolator", "size": 1675},
|
||||
{"name": "RectangleInterpolator", "size": 2042}
|
||||
]
|
||||
},
|
||||
{"name": "ISchedulable", "size": 1041},
|
||||
{"name": "Parallel", "size": 5176},
|
||||
{"name": "Pause", "size": 449},
|
||||
{"name": "Scheduler", "size": 5593},
|
||||
{"name": "Sequence", "size": 5534},
|
||||
{"name": "Transition", "size": 9201},
|
||||
{"name": "Transitioner", "size": 19975},
|
||||
{"name": "TransitionEvent", "size": 1116},
|
||||
{"name": "Tween", "size": 6006}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "data",
|
||||
"children": [
|
||||
{
|
||||
"name": "converters",
|
||||
"children": [
|
||||
{"name": "Converters", "size": 721},
|
||||
{"name": "DelimitedTextConverter", "size": 4294},
|
||||
{"name": "GraphMLConverter", "size": 9800},
|
||||
{"name": "IDataConverter", "size": 1314},
|
||||
{"name": "JSONConverter", "size": 2220}
|
||||
]
|
||||
},
|
||||
{"name": "DataField", "size": 1759},
|
||||
{"name": "DataSchema", "size": 2165},
|
||||
{"name": "DataSet", "size": 586},
|
||||
{"name": "DataSource", "size": 3331},
|
||||
{"name": "DataTable", "size": 772},
|
||||
{"name": "DataUtil", "size": 3322}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "display",
|
||||
"children": [
|
||||
{"name": "DirtySprite", "size": 8833},
|
||||
{"name": "LineSprite", "size": 1732},
|
||||
{"name": "RectSprite", "size": 3623},
|
||||
{"name": "TextSprite", "size": 10066}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "flex",
|
||||
"children": [
|
||||
{"name": "FlareVis", "size": 4116}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "physics",
|
||||
"children": [
|
||||
{"name": "DragForce", "size": 1082},
|
||||
{"name": "GravityForce", "size": 1336},
|
||||
{"name": "IForce", "size": 319},
|
||||
{"name": "NBodyForce", "size": 10498},
|
||||
{"name": "Particle", "size": 2822},
|
||||
{"name": "Simulation", "size": 9983},
|
||||
{"name": "Spring", "size": 2213},
|
||||
{"name": "SpringForce", "size": 1681}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "query",
|
||||
"children": [
|
||||
{"name": "AggregateExpression", "size": 1616},
|
||||
{"name": "And", "size": 1027},
|
||||
{"name": "Arithmetic", "size": 3891},
|
||||
{"name": "Average", "size": 891},
|
||||
{"name": "BinaryExpression", "size": 2893},
|
||||
{"name": "Comparison", "size": 5103},
|
||||
{"name": "CompositeExpression", "size": 3677},
|
||||
{"name": "Count", "size": 781},
|
||||
{"name": "DateUtil", "size": 4141},
|
||||
{"name": "Distinct", "size": 933},
|
||||
{"name": "Expression", "size": 5130},
|
||||
{"name": "ExpressionIterator", "size": 3617},
|
||||
{"name": "Fn", "size": 3240},
|
||||
{"name": "If", "size": 2732},
|
||||
{"name": "IsA", "size": 2039},
|
||||
{"name": "Literal", "size": 1214},
|
||||
{"name": "Match", "size": 3748},
|
||||
{"name": "Maximum", "size": 843},
|
||||
{
|
||||
"name": "methods",
|
||||
"children": [
|
||||
{"name": "add", "size": 593},
|
||||
{"name": "and", "size": 330},
|
||||
{"name": "average", "size": 287},
|
||||
{"name": "count", "size": 277},
|
||||
{"name": "distinct", "size": 292},
|
||||
{"name": "div", "size": 595},
|
||||
{"name": "eq", "size": 594},
|
||||
{"name": "fn", "size": 460},
|
||||
{"name": "gt", "size": 603},
|
||||
{"name": "gte", "size": 625},
|
||||
{"name": "iff", "size": 748},
|
||||
{"name": "isa", "size": 461},
|
||||
{"name": "lt", "size": 597},
|
||||
{"name": "lte", "size": 619},
|
||||
{"name": "max", "size": 283},
|
||||
{"name": "min", "size": 283},
|
||||
{"name": "mod", "size": 591},
|
||||
{"name": "mul", "size": 603},
|
||||
{"name": "neq", "size": 599},
|
||||
{"name": "not", "size": 386},
|
||||
{"name": "or", "size": 323},
|
||||
{"name": "orderby", "size": 307},
|
||||
{"name": "range", "size": 772},
|
||||
{"name": "select", "size": 296},
|
||||
{"name": "stddev", "size": 363},
|
||||
{"name": "sub", "size": 600},
|
||||
{"name": "sum", "size": 280},
|
||||
{"name": "update", "size": 307},
|
||||
{"name": "variance", "size": 335},
|
||||
{"name": "where", "size": 299},
|
||||
{"name": "xor", "size": 354},
|
||||
{"name": "_", "size": 264}
|
||||
]
|
||||
},
|
||||
{"name": "Minimum", "size": 843},
|
||||
{"name": "Not", "size": 1554},
|
||||
{"name": "Or", "size": 970},
|
||||
{"name": "Query", "size": 13896},
|
||||
{"name": "Range", "size": 1594},
|
||||
{"name": "StringUtil", "size": 4130},
|
||||
{"name": "Sum", "size": 791},
|
||||
{"name": "Variable", "size": 1124},
|
||||
{"name": "Variance", "size": 1876},
|
||||
{"name": "Xor", "size": 1101}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "scale",
|
||||
"children": [
|
||||
{"name": "IScaleMap", "size": 2105},
|
||||
{"name": "LinearScale", "size": 1316},
|
||||
{"name": "LogScale", "size": 3151},
|
||||
{"name": "OrdinalScale", "size": 3770},
|
||||
{"name": "QuantileScale", "size": 2435},
|
||||
{"name": "QuantitativeScale", "size": 4839},
|
||||
{"name": "RootScale", "size": 1756},
|
||||
{"name": "Scale", "size": 4268},
|
||||
{"name": "ScaleType", "size": 1821},
|
||||
{"name": "TimeScale", "size": 5833}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "util",
|
||||
"children": [
|
||||
{"name": "Arrays", "size": 8258},
|
||||
{"name": "Colors", "size": 10001},
|
||||
{"name": "Dates", "size": 8217},
|
||||
{"name": "Displays", "size": 12555},
|
||||
{"name": "Filter", "size": 2324},
|
||||
{"name": "Geometry", "size": 10993},
|
||||
{
|
||||
"name": "heap",
|
||||
"children": [
|
||||
{"name": "FibonacciHeap", "size": 9354},
|
||||
{"name": "HeapNode", "size": 1233}
|
||||
]
|
||||
},
|
||||
{"name": "IEvaluable", "size": 335},
|
||||
{"name": "IPredicate", "size": 383},
|
||||
{"name": "IValueProxy", "size": 874},
|
||||
{
|
||||
"name": "math",
|
||||
"children": [
|
||||
{"name": "DenseMatrix", "size": 3165},
|
||||
{"name": "IMatrix", "size": 2815},
|
||||
{"name": "SparseMatrix", "size": 3366}
|
||||
]
|
||||
},
|
||||
{"name": "Maths", "size": 17705},
|
||||
{"name": "Orientation", "size": 1486},
|
||||
{
|
||||
"name": "palette",
|
||||
"children": [
|
||||
{"name": "ColorPalette", "size": 6367},
|
||||
{"name": "Palette", "size": 1229},
|
||||
{"name": "ShapePalette", "size": 2059},
|
||||
{"name": "SizePalette", "size": 2291}
|
||||
]
|
||||
},
|
||||
{"name": "Property", "size": 5559},
|
||||
{"name": "Shapes", "size": 19118},
|
||||
{"name": "Sort", "size": 6887},
|
||||
{"name": "Stats", "size": 6557},
|
||||
{"name": "Strings", "size": 22026}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "vis",
|
||||
"children": [
|
||||
{
|
||||
"name": "axis",
|
||||
"children": [
|
||||
{"name": "Axes", "size": 1302},
|
||||
{"name": "Axis", "size": 24593},
|
||||
{"name": "AxisGridLine", "size": 652},
|
||||
{"name": "AxisLabel", "size": 636},
|
||||
{"name": "CartesianAxes", "size": 6703}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "controls",
|
||||
"children": [
|
||||
{"name": "AnchorControl", "size": 2138},
|
||||
{"name": "ClickControl", "size": 3824},
|
||||
{"name": "Control", "size": 1353},
|
||||
{"name": "ControlList", "size": 4665},
|
||||
{"name": "DragControl", "size": 2649},
|
||||
{"name": "ExpandControl", "size": 2832},
|
||||
{"name": "HoverControl", "size": 4896},
|
||||
{"name": "IControl", "size": 763},
|
||||
{"name": "PanZoomControl", "size": 5222},
|
||||
{"name": "SelectionControl", "size": 7862},
|
||||
{"name": "TooltipControl", "size": 8435}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "data",
|
||||
"children": [
|
||||
{"name": "Data", "size": 20544},
|
||||
{"name": "DataList", "size": 19788},
|
||||
{"name": "DataSprite", "size": 10349},
|
||||
{"name": "EdgeSprite", "size": 3301},
|
||||
{"name": "NodeSprite", "size": 19382},
|
||||
{
|
||||
"name": "render",
|
||||
"children": [
|
||||
{"name": "ArrowType", "size": 698},
|
||||
{"name": "EdgeRenderer", "size": 5569},
|
||||
{"name": "IRenderer", "size": 353},
|
||||
{"name": "ShapeRenderer", "size": 2247}
|
||||
]
|
||||
},
|
||||
{"name": "ScaleBinding", "size": 11275},
|
||||
{"name": "Tree", "size": 7147},
|
||||
{"name": "TreeBuilder", "size": 9930}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "events",
|
||||
"children": [
|
||||
{"name": "DataEvent", "size": 2313},
|
||||
{"name": "SelectionEvent", "size": 1880},
|
||||
{"name": "TooltipEvent", "size": 1701},
|
||||
{"name": "VisualizationEvent", "size": 1117}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "legend",
|
||||
"children": [
|
||||
{"name": "Legend", "size": 20859},
|
||||
{"name": "LegendItem", "size": 4614},
|
||||
{"name": "LegendRange", "size": 10530}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "operator",
|
||||
"children": [
|
||||
{
|
||||
"name": "distortion",
|
||||
"children": [
|
||||
{"name": "BifocalDistortion", "size": 4461},
|
||||
{"name": "Distortion", "size": 6314},
|
||||
{"name": "FisheyeDistortion", "size": 3444}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "encoder",
|
||||
"children": [
|
||||
{"name": "ColorEncoder", "size": 3179},
|
||||
{"name": "Encoder", "size": 4060},
|
||||
{"name": "PropertyEncoder", "size": 4138},
|
||||
{"name": "ShapeEncoder", "size": 1690},
|
||||
{"name": "SizeEncoder", "size": 1830}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "filter",
|
||||
"children": [
|
||||
{"name": "FisheyeTreeFilter", "size": 5219},
|
||||
{"name": "GraphDistanceFilter", "size": 3165},
|
||||
{"name": "VisibilityFilter", "size": 3509}
|
||||
]
|
||||
},
|
||||
{"name": "IOperator", "size": 1286},
|
||||
{
|
||||
"name": "label",
|
||||
"children": [
|
||||
{"name": "Labeler", "size": 9956},
|
||||
{"name": "RadialLabeler", "size": 3899},
|
||||
{"name": "StackedAreaLabeler", "size": 3202}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "layout",
|
||||
"children": [
|
||||
{"name": "AxisLayout", "size": 6725},
|
||||
{"name": "BundledEdgeRouter", "size": 3727},
|
||||
{"name": "CircleLayout", "size": 9317},
|
||||
{"name": "CirclePackingLayout", "size": 12003},
|
||||
{"name": "DendrogramLayout", "size": 4853},
|
||||
{"name": "ForceDirectedLayout", "size": 8411},
|
||||
{"name": "IcicleTreeLayout", "size": 4864},
|
||||
{"name": "IndentedTreeLayout", "size": 3174},
|
||||
{"name": "Layout", "size": 7881},
|
||||
{"name": "NodeLinkTreeLayout", "size": 12870},
|
||||
{"name": "PieLayout", "size": 2728},
|
||||
{"name": "RadialTreeLayout", "size": 12348},
|
||||
{"name": "RandomLayout", "size": 870},
|
||||
{"name": "StackedAreaLayout", "size": 9121},
|
||||
{"name": "TreeMapLayout", "size": 9191}
|
||||
]
|
||||
},
|
||||
{"name": "Operator", "size": 2490},
|
||||
{"name": "OperatorList", "size": 5248},
|
||||
{"name": "OperatorSequence", "size": 4190},
|
||||
{"name": "OperatorSwitch", "size": 2581},
|
||||
{"name": "SortOperator", "size": 2023}
|
||||
]
|
||||
},
|
||||
{"name": "Visualization", "size": 16540}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
var sunburst = k4.sunburst();
|
||||
|
||||
d3.select("#sunburst")
|
||||
.datum(data)
|
||||
.call(sunburst);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
46
src/bower_components/K4D3/examples/table.html
vendored
46
src/bower_components/K4D3/examples/table.html
vendored
|
|
@ -1,46 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Table</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
#data-table {
|
||||
margin: 50px auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Twitter Bootstrap -->
|
||||
<link rel="stylesheet" type="text/css" href="../lib/bootstrap/dist/css/bootstrap.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="data-table" class="table-responsive"></div>
|
||||
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
<script>
|
||||
var data = [
|
||||
{"date": new Date("2014-01-15"), "downloads": 256, "type": "png" },
|
||||
{"date": new Date("2014-01-16"), "downloads": 656, "type": "png" },
|
||||
{"date": new Date("2014-01-17"), "downloads": 899, "type": "png" },
|
||||
{"date": new Date("2014-01-18"), "downloads": 2560, "type": "png" },
|
||||
{"date": new Date("2014-01-19"), "downloads": 25, "type": "png" },
|
||||
{"date": new Date("2014-01-20"), "downloads": 568, "type": "png" },
|
||||
{"date": new Date("2014-01-21"), "downloads": 996, "type": "png" },
|
||||
{"date": new Date("2014-01-22"), "downloads": 906, "type": "png" },
|
||||
{"date": new Date("2014-01-23"), "downloads": 1480, "type": "png" }
|
||||
];
|
||||
|
||||
var table = k4.table();
|
||||
|
||||
d3.select("#data-table")
|
||||
.datum(data)
|
||||
.call(table);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
94
src/bower_components/K4D3/index.html
vendored
94
src/bower_components/K4D3/index.html
vendored
|
|
@ -1,94 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>K4D3 example pages</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
h2 {
|
||||
padding: 0;
|
||||
margin: 0 0 6px 0;
|
||||
color: #333;
|
||||
}
|
||||
.intro {
|
||||
padding: 0;
|
||||
margin: 0 0 12px 0;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
}
|
||||
.container {
|
||||
padding: 20px 0 0 0;
|
||||
margin: auto 120px;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 0 20px 0 0;
|
||||
border-right: solid 1px #ccc;
|
||||
}
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0 0 10px 0;
|
||||
min-width: 220px;
|
||||
}
|
||||
li a {
|
||||
text-decoration: none;
|
||||
display:block;
|
||||
color: #666;
|
||||
}
|
||||
li:hover {
|
||||
color: #111;
|
||||
}
|
||||
li.header a {
|
||||
color: #333;
|
||||
cursor: default;
|
||||
}
|
||||
li.inactive a {
|
||||
color: #ccc;
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container" ng-app="testApp">
|
||||
<h2>K4D3</h2>
|
||||
<p class="intro">You know, D3 visualization modules for Kibana</p>
|
||||
<ul>
|
||||
<li class="header"><a href="#"><strong>Example pages</strong></a></li>
|
||||
<li class=""><a href="examples/animatedbars.html">Animated bars</a></li>
|
||||
<li class=""><a href="examples/area.html">Area</a></li>
|
||||
<li class=""><a href="examples/dendrogram.html">Dendrogram</a></li>
|
||||
<li class=""><a href="examples/donut.html">Donut</a></li>
|
||||
<li class=""><a href="examples/heatmap.html">Heatmap</a></li>
|
||||
<li class=""><a href="examples/histogram.html">Histogram</a></li>
|
||||
<li class=""><a href="examples/histogramlayers.html">Histogram Layers</a></li>
|
||||
<li class=""><a href="examples/horizon.html">Horizon</a></li>
|
||||
<li class=""><a href="examples/line.html">Line</a></li>
|
||||
<li class=""><a href="examples/map.html">Map</a></li>
|
||||
<li class=""><a href="examples/pie.html">Pie</a></li>
|
||||
<li class=""><a href="examples/scatterplot.html">Scatterplot</a></li>
|
||||
<li class=""><a href="examples/sparklines.html">Sparklines</a></li>
|
||||
<!-- <li class="inactive"><a href="examples/spider.html">Spider</a></li> -->
|
||||
<li class=""><a href="examples/sunburst.html">Sunburst</a></li>
|
||||
<li class=""><a href="examples/table.html">Table</a></li>
|
||||
<li class="inactive"><a href="examples/treemap.html">Treemap</a></li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<!-- Commenting out
|
||||
<li class="header"><a href="#"><strong>Test pages</strong></a></li>
|
||||
<li class="inactive"><a href="#">More coming soon</a></li>
|
||||
<li class=""><a href="tests/areaTest.html">Area tests</a></li>
|
||||
<li class=""><a href="tests/horizonTest.html">Horizon tests</a></li>
|
||||
<li class=""><a href="tests/pieTest.html">Pie tests</a></li>
|
||||
<li class=""><a href="tests/tableTest.html">Table tests</a></li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
89
src/bower_components/K4D3/karma.conf.js
vendored
89
src/bower_components/K4D3/karma.conf.js
vendored
|
|
@ -1,89 +0,0 @@
|
|||
module.exports = function(config) {
|
||||
config.set({
|
||||
|
||||
// base path, that will be used to resolve files and exclude
|
||||
basePath: '',
|
||||
|
||||
frameworks: ['jasmine'],
|
||||
|
||||
// list of files/patterns to load in the browser
|
||||
files: [
|
||||
//{pattern: 'lib/**/*.js', included: false},
|
||||
{pattern: 'lib/d3/*.js', included: true},
|
||||
{pattern: 'k4.d3.js', included: true},
|
||||
{pattern: 'test/*Spec.js', included: true},
|
||||
{pattern: 'test/**/*Spec.js', included: true}
|
||||
],
|
||||
|
||||
// list of files to exclude
|
||||
exclude: [],
|
||||
|
||||
preprocessors: {},
|
||||
|
||||
// use dots reporter, as travis terminal does not support esapping sequences
|
||||
// possible values: 'dots', 'progress'
|
||||
// CLI --reporters progress
|
||||
reporters: ['progress'],
|
||||
|
||||
junitReporter: {
|
||||
// will be resolved to basePath (in the same way as files/exclude patterns)
|
||||
outputFile: 'test-results.xml'
|
||||
},
|
||||
|
||||
// web server port
|
||||
// CLI --port 9876
|
||||
port: 9876,
|
||||
|
||||
// enable/disable colors in the output (reporters and logs)
|
||||
// CLI --colors --no-colors
|
||||
colors: true,
|
||||
|
||||
// level of logging
|
||||
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
|
||||
// CLI --log-level debug
|
||||
logLevel: config.LOG_DEBUG,
|
||||
|
||||
// enable/disable watching file and executing tests whenever any file changes
|
||||
// CLI --auto-watch --no-auto-watch
|
||||
autoWatch: true,
|
||||
|
||||
// Start these browsers, currently available:
|
||||
// - Chrome
|
||||
// - ChromeCanary
|
||||
// - Firefox
|
||||
// - Opera (has to be installed with `npm install karma-opera-launcher --save-dev`)
|
||||
// - Safari (only Mac; has to be installed with `npm install karma-safari-launcher --save-dev`)
|
||||
// - PhantomJS
|
||||
// - IE (only Windows; has to be installed with `npm install karma-ie-launcher --save-dev`)
|
||||
// CLI --browsers Chrome,Firefox,Safari
|
||||
browsers: ['chrome_without_security'],
|
||||
|
||||
customLaunchers: {
|
||||
chrome_without_security: {
|
||||
base: 'Chrome',
|
||||
flags: ['--disable-web-security']
|
||||
}
|
||||
},
|
||||
|
||||
// If browser does not capture in given timeout [ms], kill it
|
||||
// CLI --capture-timeout 5000
|
||||
captureTimeout: 20000,
|
||||
|
||||
// Auto run tests on start (when browsers are captured) and exit
|
||||
// CLI --single-run --no-single-run
|
||||
singleRun: false,
|
||||
|
||||
// report which specs are slower than 500ms
|
||||
// CLI --report-slower-than 500
|
||||
reportSlowerThan: 500,
|
||||
|
||||
plugins: [
|
||||
'karma-jasmine',
|
||||
'karma-chrome-launcher',
|
||||
'karma-firefox-launcher',
|
||||
'karma-safari-launcher',
|
||||
'karma-junit-reporter',
|
||||
'karma-commonjs'
|
||||
]
|
||||
});
|
||||
};
|
||||
60
src/bower_components/K4D3/package.json
vendored
60
src/bower_components/K4D3/package.json
vendored
|
|
@ -1,60 +0,0 @@
|
|||
{
|
||||
"name": "K4D3",
|
||||
"version": "0.1.0",
|
||||
"description": "D3 Charting Library for Kibana 4",
|
||||
"main": "index.js",
|
||||
"directories": {
|
||||
"example": "examples"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"postinstall": "./node_modules/bower/bin/bower install"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/elasticsearch/K4D3.git"
|
||||
},
|
||||
"keywords": [
|
||||
"data",
|
||||
"visualization",
|
||||
"elasticsearch",
|
||||
"kibana",
|
||||
"D3"
|
||||
],
|
||||
"authors": [
|
||||
"Shelby Sturgis",
|
||||
"Juan Thomassie"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/elasticsearch/K4D3/issues"
|
||||
},
|
||||
"homepage": "https://github.com/elasticsearch/K4D3",
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.2",
|
||||
"grunt-contrib-jshint": "~0.8.0",
|
||||
"grunt-contrib-nodeunit": "~0.3.0",
|
||||
"grunt-contrib-uglify": "~0.3.2",
|
||||
"grunt-contrib-cssmin": "~0.7.0",
|
||||
"grunt-contrib-watch": "~0.5.3",
|
||||
"grunt-contrib-concat": "~0.3.0",
|
||||
"grunt-contrib-copy": "~0.5.0",
|
||||
"karma-script-launcher": "~0.1.0",
|
||||
"karma-chrome-launcher": "~0.1.2",
|
||||
"karma-firefox-launcher": "~0.1.3",
|
||||
"karma-html2js-preprocessor": "~0.1.0",
|
||||
"karma-jasmine": "~0.1.5",
|
||||
"karma-coffee-preprocessor": "~0.1.3",
|
||||
"requirejs": "~2.1.11",
|
||||
"karma-requirejs": "~0.2.1",
|
||||
"karma-phantomjs-launcher": "~0.1.2",
|
||||
"karma": "~0.10.9",
|
||||
"grunt-karma": "~0.6.2",
|
||||
"karma-junit-reporter": "~0.2.1",
|
||||
"karma-commonjs": "0.0.6",
|
||||
"karma-safari-launcher": "~0.1.1",
|
||||
"grunt-contrib-requirejs": "~0.4.3",
|
||||
"bower": "~1.3.2"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
22
src/bower_components/K4D3/src/core.js
vendored
22
src/bower_components/K4D3/src/core.js
vendored
|
|
@ -1,22 +0,0 @@
|
|||
/*
|
||||
* Main module
|
||||
* Accepts an html element and a config object.
|
||||
* Calls all other K4 modules.
|
||||
* Returns the charting function.
|
||||
*/
|
||||
|
||||
define(function(require) {
|
||||
|
||||
return function(elem, args) {
|
||||
var type = args.type,
|
||||
charts = {
|
||||
'histogram': require('src/modules/histogram')
|
||||
};
|
||||
|
||||
if (typeof(charts[type]) !== 'function') { throw type + " is not a supported k4 function."; }
|
||||
|
||||
var chartFunc = charts[type](elem, args);
|
||||
|
||||
return chartFunc;
|
||||
};
|
||||
});
|
||||
64
src/bower_components/K4D3/src/css/k4.d3.css
vendored
64
src/bower_components/K4D3/src/css/k4.d3.css
vendored
|
|
@ -1,64 +0,0 @@
|
|||
/* Stylings that will blow your mind! */
|
||||
|
||||
.arc path {
|
||||
stroke: #fff;
|
||||
/* stroke-width: 3px; */
|
||||
}
|
||||
|
||||
.arc path {
|
||||
stroke: #fff;
|
||||
/* stroke-width: 3px; */
|
||||
}
|
||||
|
||||
div.col {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.axis line, .axis path {
|
||||
/*display: none;*/
|
||||
stroke: #aaa;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.layer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.brush .extent {
|
||||
stroke: #fff;
|
||||
fill-opacity: .125;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
/*.y.axis line, .y.axis path {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
}*/
|
||||
|
||||
.k4-tip {
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Creates a small triangle extender for the tooltip */
|
||||
.k4-tip:after {
|
||||
box-sizing: border-box;
|
||||
display: inline;
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
content: "\25BC";
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Style northward tooltips differently */
|
||||
.k4-tip.n:after {
|
||||
margin: -1px 0 0 0;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
2
src/bower_components/K4D3/src/end.js
vendored
2
src/bower_components/K4D3/src/end.js
vendored
|
|
@ -1,2 +0,0 @@
|
|||
return require('src/index');
|
||||
}));
|
||||
12
src/bower_components/K4D3/src/index.js
vendored
12
src/bower_components/K4D3/src/index.js
vendored
|
|
@ -1,12 +0,0 @@
|
|||
define(function(require) {
|
||||
|
||||
var k4 = {
|
||||
version: '0.0.0',
|
||||
tooltip: require('src/tooltip'),
|
||||
legend: require('src/legend'),
|
||||
Chart: require('src/core'),
|
||||
histogram: require('src/modules/histogram')
|
||||
};
|
||||
|
||||
return k4;
|
||||
});
|
||||
71
src/bower_components/K4D3/src/legend.js
vendored
71
src/bower_components/K4D3/src/legend.js
vendored
|
|
@ -1,71 +0,0 @@
|
|||
define(function(require) {
|
||||
"use strict";
|
||||
|
||||
var d3 = require('lib/d3/d3');
|
||||
|
||||
return function(g) {
|
||||
'use strict';
|
||||
|
||||
g.each(function() {
|
||||
var g = d3.select(this),
|
||||
items = {},
|
||||
svg = d3.select(g.property("nearestViewportElement")),
|
||||
legendPadding = g.attr("data-style-padding") || 5,
|
||||
lb = g.selectAll(".legend-box").data([true]),
|
||||
li = g.selectAll(".legend-items").data([true]),
|
||||
lbbox;
|
||||
|
||||
lb.enter().append("rect").classed("legend-box",true);
|
||||
li.enter().append("g").classed("legend-items",true);
|
||||
|
||||
svg.selectAll("[data-legend]").each(function() {
|
||||
var self = d3.select(this);
|
||||
items[self.attr("data-legend")] = {
|
||||
pos : self.attr("data-legend-pos") || this.getBBox().y,
|
||||
color : self.attr("data-legend-color") !== null ? self.attr("data-legend-color") :
|
||||
self.style("fill") !== 'none' ? self.style("fill") : self.style("stroke")
|
||||
};
|
||||
});
|
||||
|
||||
items = d3.entries(items).sort(function(a, b) { return a.value.pos - b.value.pos; });
|
||||
|
||||
/*
|
||||
li.selectAll('div')
|
||||
.data(items, function(d) { return d.key; })
|
||||
.call(function(d) { d.enter().append("div"); })
|
||||
.call(function(d) { d.exit().remove(); })
|
||||
.attr("class", "legend-div");
|
||||
*/
|
||||
|
||||
li.selectAll("text")
|
||||
.data(items, function(d) { return d.key; })
|
||||
.call(function(d) { d.enter().append("text"); })
|
||||
.call(function(d) { d.exit().remove(); })
|
||||
.attr("class", "legend-text")
|
||||
.attr("x", "0.7em")
|
||||
.attr("y", function(d, i) { return i + "em"; })
|
||||
.text(function(d) { return d.key; });
|
||||
|
||||
li.selectAll("circle")
|
||||
.data(items, function(d) { return d.key; })
|
||||
.call(function(d) { d.enter().append("circle"); })
|
||||
.call(function(d) { d.exit().remove(); })
|
||||
.attr("class", "legend-circle")
|
||||
.attr("cx", 0)
|
||||
.attr("cy", function(d, i) { return i - 0.25 + "em"; })
|
||||
.attr("r", "0.4em")
|
||||
.style("fill", function(d) { return d.value.color; });
|
||||
|
||||
// Reposition and resize the box
|
||||
lbbox = li[0][0].getBBox();
|
||||
|
||||
lb.attr("x", (lbbox.x - legendPadding))
|
||||
.attr("y", (lbbox.y - legendPadding))
|
||||
.attr("height", (lbbox.height + 2 * legendPadding))
|
||||
.attr("width", (lbbox.width + 2 * legendPadding));
|
||||
});
|
||||
|
||||
return g;
|
||||
};
|
||||
|
||||
});
|
||||
368
src/bower_components/K4D3/src/modules/histogram.js
vendored
368
src/bower_components/K4D3/src/modules/histogram.js
vendored
|
|
@ -1,368 +0,0 @@
|
|||
define(function (require) {
|
||||
'use strict';
|
||||
|
||||
var tip = require('src/tooltip'),
|
||||
d3 = require('lib/d3/d3'),
|
||||
selectionFn = require('src/utils/selection');
|
||||
|
||||
return function(elem, args) {
|
||||
if (typeof args === 'undefined') { args = {}; }
|
||||
|
||||
var chart = {},
|
||||
dispatch = d3.dispatch('hover', 'click'),
|
||||
|
||||
/* ******* Error Handling ******** */
|
||||
destroyFlag = false,
|
||||
/* ***************************** */
|
||||
|
||||
/* ******* Chart options******* */
|
||||
margin = args.margin ? args.margin : { top: 30, right: 50, bottom: 50, left: 50 },
|
||||
offset = args.offset ? args.offset : 'zero',
|
||||
color = args.color ? d3.scale.linear().range(args.color) : d3.scale.linear().range(['#e24700', '#f9e593']),
|
||||
shareYAxis = args.shareYAxis ? args.shareYAxis : false,
|
||||
tooltip = args.tooltip && typeof args.tooltip === 'boolean' && args.tooltip === false ? 'undefined' : typeof args.tooltip === 'function' ?
|
||||
tip().attr('class', 'k4-tip').html(args.tooltip).offset([-12, 0]) : tip().attr('class', 'k4-tip').html(function(d) {
|
||||
if (d.y < 1) { return '<span>x: ' + d.x + '</span><br><span>y: ' + d.y.toFixed(2) * 100 + '%</span>'; }
|
||||
return '<span>x: ' + d.x + '</span><br><span>y: ' + d.y + '</span>';
|
||||
}).offset([-12, 0]),
|
||||
/* ***************************** */
|
||||
|
||||
/* Parameters defined within the chart.render function */
|
||||
viz, selection, elemWidth, elemHeight, width, height,
|
||||
stack, layers, n, yGroupMax, yStackMax, keys,
|
||||
xScale, yScale, xAxis, yAxis,
|
||||
svg, layer, bars;
|
||||
/* ***************************** */
|
||||
|
||||
chart.render = function(data) {
|
||||
// removes elements to redraw the chart on subsequent calls
|
||||
d3.select(elem).selectAll('*').remove();
|
||||
|
||||
if (destroyFlag || !elem) {
|
||||
if (destroyFlag) { throw new Error('you destroyed this chart and then tried to use it again'); }
|
||||
else { throw new Error('there is no element present'); }
|
||||
}
|
||||
|
||||
// Selection function - returns an array of DOM elements with data bound
|
||||
selection = d3.selectAll(selectionFn(elem, data));
|
||||
|
||||
selection.each(function (d, i) {
|
||||
//console.log(d, i, this);
|
||||
viz = d3.select(this);
|
||||
|
||||
// width, height, margins
|
||||
elemWidth = parseInt(d3.select(this).style('width'), 10);
|
||||
elemHeight = parseInt(d3.select(this).style('height'), 10);
|
||||
width = elemWidth - margin.left - margin.right; // width of the parent element ???
|
||||
height = elemHeight - margin.top - margin.bottom; // height of the parent element ???
|
||||
|
||||
// preparing the data and scales
|
||||
stack = d3.layout.stack().values(function(d) { return d.values; });
|
||||
stack.offset(offset);
|
||||
layers = stack(d.series);
|
||||
n = layers.length; // number of layers
|
||||
yGroupMax = d3.max(layers, function (layer) { return d3.max(layer.values, function (d) { return d.y; }); });
|
||||
yStackMax = d3.max(layers, function (layer) { return d3.max(layer.values, function (d) { return d.y0 + d.y; }); });
|
||||
keys = d3.set(layers[0].values.map(function (d) { return d.x; })).values();
|
||||
|
||||
// axis components
|
||||
xScale = d3.scale.ordinal().domain(keys).rangeRoundBands([0, width], 0.1);
|
||||
yScale = d3.scale.linear().range([height, 0]).nice();
|
||||
xAxis = d3.svg.axis().scale(xScale).tickSize(3, 0).tickPadding(6).orient('bottom');
|
||||
yAxis = d3.svg.axis().scale(yScale).ticks(6).tickSize(-width, 0).tickPadding(4).orient('left');
|
||||
|
||||
// setting the y scale domain
|
||||
if (offset === 'group') { yScale.domain([0, yGroupMax]); }
|
||||
else { yScale.domain([0, yStackMax]); }
|
||||
|
||||
// maps color domain to range
|
||||
color.domain([0, n - 1]);
|
||||
|
||||
// canvas
|
||||
svg = d3.select(this).append('svg')
|
||||
.attr('class', 'canvas')
|
||||
.attr('width', '100%')
|
||||
.attr('height', '100%')
|
||||
.append('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
// background rect
|
||||
svg.append('rect')
|
||||
.attr('class', 'bkgd')
|
||||
.style('fill', '#fff')
|
||||
.style('opacity', 0.35)
|
||||
.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
// x axis
|
||||
svg.append('g')
|
||||
.attr('class', 'x axis')
|
||||
.attr('transform', 'translate(0,' + height + ')')
|
||||
.style('stroke-width', 0.5) // should probably be in the css file
|
||||
.call(xAxis);
|
||||
|
||||
// y axis
|
||||
svg.append('g')
|
||||
.attr('class', 'y axis')
|
||||
.style('stroke-width', 0.5) // should probably be in the css file
|
||||
.call(yAxis);
|
||||
|
||||
// layers
|
||||
layer = svg.selectAll('.layer')
|
||||
.data(function (d) { return d.series; })
|
||||
.enter().append('g')
|
||||
.attr('class', function (d, i) { return 'layer ' + i; })
|
||||
.style('fill', function (d, i) { return color(i); });
|
||||
|
||||
bars = layer.selectAll('rect')
|
||||
.data(function (d) { return d.values; });
|
||||
|
||||
// enter
|
||||
bars.enter().append('rect')
|
||||
.attr('class', function (d, i) { return 'rect ' + i; })
|
||||
/*
|
||||
.attr('x', function(d, i, j) {
|
||||
if (offset === 'group') { return xScale(d.x) + xScale.rangeBand() / n * j; }
|
||||
else { return xScale(d.x); }
|
||||
})
|
||||
.attr('width', function() {
|
||||
if (offset === 'group') { return xScale.rangeBand() / n; }
|
||||
else { return xScale.rangeBand(); }
|
||||
})
|
||||
.attr('y', function(d) {
|
||||
if (offset === 'group') { return yScale(d.y); }
|
||||
else { return yScale(d.y0 + d.y); }
|
||||
})
|
||||
.attr('height', function(d) {
|
||||
if (offset === 'group') { return height - yScale(d.y); }
|
||||
else { return yScale(d.y0) - yScale(d.y0 + d.y); }
|
||||
})
|
||||
*/
|
||||
.on('mouseover', dispatch.hover)
|
||||
.on('click', dispatch.click);
|
||||
|
||||
// update
|
||||
switch (offset) {
|
||||
case 'group':
|
||||
bars.transition()
|
||||
.attr('x', function (d, i, j) { return xScale(d.x) + xScale.rangeBand() / n * j; })
|
||||
.attr('width', xScale.rangeBand() / n)
|
||||
.attr('y', function (d) { return yScale(d.y); })
|
||||
.attr('height', function (d) { return height - yScale(d.y); });
|
||||
break;
|
||||
|
||||
default:
|
||||
bars
|
||||
.transition()
|
||||
.attr('x', function (d) { return xScale(d.x); })
|
||||
.attr('width', xScale.rangeBand())
|
||||
.attr('y', function (d) { return yScale(d.y0 + d.y); })
|
||||
.attr('height', function (d) { return yScale(d.y0) - yScale(d.y0 + d.y); });
|
||||
break;
|
||||
}
|
||||
|
||||
// exit
|
||||
bars.exit().remove();
|
||||
|
||||
// tooltip
|
||||
if (tooltip) { svg.call(tooltip); }
|
||||
|
||||
return svg;
|
||||
});
|
||||
|
||||
// Window resize
|
||||
//d3.select(window).on('resize', resize);
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
/*
|
||||
function yGroupMaxFn(data) {
|
||||
if (data.rows) {
|
||||
return yGlobalGroupMax = d3.max(data.rows.map(function(a) {
|
||||
return d3.max(a.columns, function(b) {
|
||||
return d3.max(b.layers, function(c) {
|
||||
return d3.max(c.values, function(d) {
|
||||
return d.y;
|
||||
});
|
||||
});
|
||||
});
|
||||
}));
|
||||
} else {
|
||||
return yGlobalGroupMax = d3.max(data.columns.map(function(a) {
|
||||
return d3.max(a.rows, function(b) {
|
||||
return d3.max(b.layers, function(c) {
|
||||
return d3.max(c.values, function(d) {
|
||||
return d.y;
|
||||
});
|
||||
});
|
||||
});
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function yGroupStackFn(data) {
|
||||
if (data.rows) {
|
||||
return yGlobalStackMax = d3.max(data.rows.map(function(a) {
|
||||
return d3.max(a.columns, function(b) {
|
||||
return d3.max(stack(b.layers), function(c) {
|
||||
return d3.max(c.values, function(d) {
|
||||
return d.y0 + d.y;
|
||||
});
|
||||
});
|
||||
});
|
||||
}));
|
||||
} else {
|
||||
return yGlobalStackMax = d3.max(data.columns.map(function(a) {
|
||||
return d3.max(a.rows, function(b) {
|
||||
return d3.max(stack(b.layers), function(c) {
|
||||
return d3.max(c.values, function(d) {
|
||||
return d.y0 + d.y;
|
||||
});
|
||||
});
|
||||
});
|
||||
}));
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
function resize() {
|
||||
selection.each(function(d) {
|
||||
svg = d3.select(this);
|
||||
|
||||
// width, height, margins
|
||||
elemWidth = parseInt(d3.select(this).style('width'), 10);
|
||||
elemHeight = parseInt(d3.select(this).style('height'), 10);
|
||||
width = elemWidth - margin.left - margin.right;
|
||||
height = elemHeight - margin.top - margin.bottom;
|
||||
|
||||
// axis components
|
||||
xScale.rangeRoundBands([0, width], 0.1);
|
||||
yScale.range([height, 0]).nice();
|
||||
|
||||
// preparing the data and scales
|
||||
layers = stack(d.series);
|
||||
yGroupMax = d3.max(layers, function (layer) { return d3.max(layer.values, function (d) { return d.y; }); });
|
||||
yStackMax = d3.max(layers, function (layer) { return d3.max(layer.values, function (d) { return d.y0 + d.y; }); });
|
||||
|
||||
// setting the y scale domain
|
||||
if (offset === 'group') { yScale.domain([0, yGroupMax]); }
|
||||
else { yScale.domain([0, yStackMax]); }
|
||||
|
||||
// background rect
|
||||
svg.select('rect.bkgd').attr('width', width).attr('height', height);
|
||||
|
||||
// update axes
|
||||
svg.select('.x.axis').call(xAxis.scale(xScale));
|
||||
svg.select('.y.axis').call(yAxis.scale(yScale).tickSize(-width, 0));
|
||||
|
||||
bars = svg.selectAll('rect.rect');
|
||||
|
||||
// update with transition
|
||||
switch (offset) {
|
||||
case 'group':
|
||||
bars
|
||||
.attr('x', function(d, i, j) { return xScale(d.x) + xScale.rangeBand() / n * j; })
|
||||
.attr('width', xScale.rangeBand() / n)
|
||||
.attr('y', function(d) { return yScale(d.y); })
|
||||
.attr('height', function(d) { return height - yScale(d.y); });
|
||||
break;
|
||||
|
||||
default:
|
||||
bars
|
||||
.attr('x', function(d) { return xScale(d.x); })
|
||||
.attr('width', xScale.rangeBand())
|
||||
.attr('y', function(d) { return yScale(d.y0 + d.y); })
|
||||
.attr('height', function(d) { return yScale(d.y0) - yScale(d.y0 + d.y); });
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// event handlers
|
||||
function mouseover(e) {
|
||||
mouseHandler('mouseover', e, d3.mouse(this), this);
|
||||
//toolTip.show(e);
|
||||
}
|
||||
|
||||
function mouseout(e) {
|
||||
mouseHandler('mouseout', e, d3.mouse(this), this);
|
||||
//toolTip.hide(e);
|
||||
}
|
||||
|
||||
function mousemove(e) {
|
||||
mouseHandler('mousemove', e, d3.mouse(this), this);
|
||||
//toolTip.show( e, d3.mouse( this ) );
|
||||
}
|
||||
|
||||
function click(e) {
|
||||
mouseHandler('click', e, d3.mouse(this), this);
|
||||
}
|
||||
|
||||
function drag(e) {
|
||||
//console.log('drag');
|
||||
}
|
||||
|
||||
function mouseHandler(type, e, mouse, target) {
|
||||
//console.log( type, e, mouse, target );
|
||||
}
|
||||
|
||||
// getters / setters
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) { return margin; }
|
||||
margin.top = typeof _.top !== 'undefined' ? _.top : margin.top;
|
||||
margin.right = typeof _.right !== 'undefined' ? _.right : margin.right;
|
||||
margin.bottom = typeof _.bottom !== 'undefined' ? _.bottom : margin.bottom;
|
||||
margin.left = typeof _.left !== 'undefined' ? _.left : margin.left;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.offset = function(_) {
|
||||
if (!arguments.length) { return offset; }
|
||||
offset = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.tooltip = function(_) {
|
||||
if (!arguments.length) { return tooltip; }
|
||||
tooltip = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) { return elemWidth; }
|
||||
elemWidth = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return elemHeight; }
|
||||
elemHeight = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return color; }
|
||||
color = d3.scale.linear().range(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.destroy = function(_) {
|
||||
/*
|
||||
Destroys all charts associated with the parent element
|
||||
if the argument passed is true. By default the argument
|
||||
is true.
|
||||
*/
|
||||
if (!arguments.length || _) {
|
||||
destroyFlag = _ || true;
|
||||
d3.select(elem).selectAll('*').remove();
|
||||
}
|
||||
destroyFlag = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
d3.rebind(chart, dispatch, 'on');
|
||||
|
||||
return chart;
|
||||
};
|
||||
});
|
||||
7
src/bower_components/K4D3/src/start.js
vendored
7
src/bower_components/K4D3/src/start.js
vendored
|
|
@ -1,7 +0,0 @@
|
|||
(function(root, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define([], factory);
|
||||
} else {
|
||||
root.k4 = factory();
|
||||
}
|
||||
}(this, function() {
|
||||
294
src/bower_components/K4D3/src/tooltip.js
vendored
294
src/bower_components/K4D3/src/tooltip.js
vendored
|
|
@ -1,294 +0,0 @@
|
|||
define(function(require) {
|
||||
'use strict';
|
||||
|
||||
var d3 = require('lib/d3/d3');
|
||||
|
||||
return function() {
|
||||
|
||||
// Based on Justin Palmer's d3.tip() function
|
||||
|
||||
var direction = d3_tip_direction,
|
||||
offset = d3_tip_offset,
|
||||
html = d3_tip_html,
|
||||
node = initNode(),
|
||||
svg = null,
|
||||
point = null,
|
||||
target = null,
|
||||
|
||||
// JT - add mouse
|
||||
mouse = null;
|
||||
|
||||
function tip (vis) {
|
||||
//console.log('vis', vis);
|
||||
svg = getSVGNode(vis);
|
||||
point = svg.createSVGPoint();
|
||||
document.body.appendChild(node);
|
||||
|
||||
// JT - add mouse listener
|
||||
$(document).mousemove(function (e) {
|
||||
mouse = { left: e.pageX, top: e.pageY};
|
||||
});
|
||||
}
|
||||
|
||||
// Public - show the tooltip on the screen
|
||||
//
|
||||
// Returns a tip
|
||||
tip.show = function() {
|
||||
var args = Array.prototype.slice.call(arguments);
|
||||
//console.log('args', args);
|
||||
if(args[args.length - 1] instanceof SVGElement) { target = args.pop(); }
|
||||
|
||||
var content = html.apply(this, args),
|
||||
poffset = offset.apply(this, args),
|
||||
dir = direction.apply(this, args),
|
||||
nodel = d3.select(node),
|
||||
//i = directions.length,
|
||||
coords;
|
||||
|
||||
nodel.html(content)
|
||||
.style({ opacity: 1, 'pointer-events': 'all' });
|
||||
|
||||
//while(i--) nodel.classed(directions[i], false);
|
||||
//coords = direction_callbacks.get(dir).apply(this);
|
||||
// nodel.classed(dir, true).style({
|
||||
// top: (coords.top + poffset[0]) + 'px',
|
||||
// left: (coords.left + poffset[1]) + 'px'
|
||||
// });
|
||||
var w = nodel[0][0].scrollWidth;
|
||||
var h = nodel[0][0].scrollHeight;
|
||||
nodel.classed(dir, true).style({
|
||||
top: (mouse.top - h - 4) + 'px',
|
||||
left: (mouse.left - w/2) + 'px'
|
||||
});
|
||||
return tip;
|
||||
};
|
||||
|
||||
// Public - hide the tooltip
|
||||
//
|
||||
// Returns a tip
|
||||
tip.hide = function() {
|
||||
var nodel = d3.select(node);
|
||||
nodel.style({ opacity: 0, 'pointer-events': 'none' });
|
||||
return tip;
|
||||
};
|
||||
|
||||
// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value.
|
||||
//
|
||||
// n - name of the attribute
|
||||
// v - value of the attribute
|
||||
//
|
||||
// Returns tip or attribute value
|
||||
tip.attr = function(n, v) {
|
||||
if (arguments.length < 2 && typeof n === 'string') {
|
||||
return d3.select(node).attr(n);
|
||||
} else {
|
||||
var args = Array.prototype.slice.call(arguments);
|
||||
d3.selection.prototype.attr.apply(d3.select(node), args);
|
||||
}
|
||||
return tip;
|
||||
};
|
||||
|
||||
// Public: Proxy style calls to the d3 tip container. Sets or gets a style value.
|
||||
//
|
||||
// n - name of the property
|
||||
// v - value of the property
|
||||
//
|
||||
// Returns tip or style property value
|
||||
tip.style = function(n, v) {
|
||||
if (arguments.length < 2 && typeof n === 'string') {
|
||||
return d3.select(node).style(n);
|
||||
} else {
|
||||
var args = Array.prototype.slice.call(arguments);
|
||||
d3.selection.prototype.style.apply(d3.select(node), args);
|
||||
}
|
||||
return tip;
|
||||
};
|
||||
|
||||
// Public: Set or get the direction of the tooltip
|
||||
//
|
||||
// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
|
||||
// sw(southwest), ne(northeast) or se(southeast)
|
||||
//
|
||||
// Returns tip or direction
|
||||
tip.direction = function(v) {
|
||||
if (!arguments.length) { return direction; }
|
||||
direction = v === null ? v : d3.functor(v);
|
||||
return tip;
|
||||
};
|
||||
|
||||
// Public: Sets or gets the offset of the tip
|
||||
//
|
||||
// v - Array of [x, y] offset
|
||||
//
|
||||
// Returns offset or
|
||||
tip.offset = function(v) {
|
||||
if (!arguments.length) { return offset; }
|
||||
offset = v === null ? v : d3.functor(v);
|
||||
return tip;
|
||||
};
|
||||
|
||||
// Public: sets or gets the html value of the tooltip
|
||||
//
|
||||
// v - String value of the tip
|
||||
//
|
||||
// Returns html value or tip
|
||||
tip.html = function(v) {
|
||||
if (!arguments.length) { return html; }
|
||||
html = v === null ? v : d3.functor(v);
|
||||
return tip;
|
||||
};
|
||||
|
||||
function d3_tip_direction() { return 'n'; }
|
||||
function d3_tip_offset() { return [0, 0]; }
|
||||
function d3_tip_html() { return ' '; }
|
||||
|
||||
/*
|
||||
var direction_callbacks = d3.map({
|
||||
n: direction_n,
|
||||
s: direction_s,
|
||||
e: direction_e,
|
||||
w: direction_w,
|
||||
nw: direction_nw,
|
||||
ne: direction_ne,
|
||||
sw: direction_sw,
|
||||
se: direction_se
|
||||
}),
|
||||
|
||||
directions = direction_callbacks.keys();
|
||||
|
||||
function direction_n() {
|
||||
var bbox = getScreenBBox();
|
||||
return {
|
||||
top: bbox.n.y - node.offsetHeight,
|
||||
left: bbox.n.x - node.offsetWidth / 2
|
||||
};
|
||||
}
|
||||
|
||||
function direction_s() {
|
||||
var bbox = getScreenBBox();
|
||||
return {
|
||||
top: bbox.s.y,
|
||||
left: bbox.s.x - node.offsetWidth / 2
|
||||
};
|
||||
}
|
||||
|
||||
function direction_e() {
|
||||
var bbox = getScreenBBox();
|
||||
return {
|
||||
top: bbox.e.y - node.offsetHeight / 2,
|
||||
left: bbox.e.x
|
||||
};
|
||||
}
|
||||
|
||||
function direction_w() {
|
||||
var bbox = getScreenBBox();
|
||||
return {
|
||||
top: bbox.w.y - node.offsetHeight / 2,
|
||||
left: bbox.w.x - node.offsetWidth
|
||||
};
|
||||
}
|
||||
|
||||
function direction_nw() {
|
||||
var bbox = getScreenBBox();
|
||||
return {
|
||||
top: bbox.nw.y - node.offsetHeight,
|
||||
left: bbox.nw.x - node.offsetWidth
|
||||
};
|
||||
}
|
||||
|
||||
function direction_ne() {
|
||||
var bbox = getScreenBBox();
|
||||
return {
|
||||
top: bbox.ne.y - node.offsetHeight,
|
||||
left: bbox.ne.x
|
||||
};
|
||||
}
|
||||
|
||||
function direction_sw() {
|
||||
var bbox = getScreenBBox();
|
||||
return {
|
||||
top: bbox.sw.y,
|
||||
left: bbox.sw.x - node.offsetWidth
|
||||
};
|
||||
}
|
||||
|
||||
function direction_se() {
|
||||
var bbox = getScreenBBox();
|
||||
return {
|
||||
top: bbox.se.y,
|
||||
left: bbox.e.x
|
||||
};
|
||||
}
|
||||
*/
|
||||
|
||||
function initNode() {
|
||||
var node = d3.select(document.createElement('div'));
|
||||
node.style({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
opacity: 0,
|
||||
'pointer-events': 'none',
|
||||
'box-sizing': 'border-box'
|
||||
});
|
||||
|
||||
return node.node();
|
||||
}
|
||||
function getSVGNode(el) {
|
||||
el = el.node();
|
||||
if(el.tagName.toLowerCase() === 'svg') { return el; }
|
||||
return el.ownerSVGElement;
|
||||
}
|
||||
/*
|
||||
// Private - gets the screen coordinates of a shape
|
||||
//
|
||||
// Given a shape on the screen, will return an SVGPoint for the directions
|
||||
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
|
||||
// sw(southwest).
|
||||
//
|
||||
// +-+-+
|
||||
// | |
|
||||
// + +
|
||||
// | |
|
||||
// +-+-+
|
||||
//
|
||||
// Returns an Object {n, s, e, w, nw, sw, ne, se}
|
||||
function getScreenBBox() {
|
||||
var targetel = target || d3.event.target,
|
||||
bbox = {},
|
||||
matrix = targetel.getScreenCTM(),
|
||||
tbbox = targetel.getBBox(),
|
||||
width = tbbox.width,
|
||||
height = tbbox.height,
|
||||
x = tbbox.x,
|
||||
y = tbbox.y,
|
||||
// scrollEl = document.documentElement ? document.documentElement : document.body,
|
||||
scrollEl = $(document), // JT
|
||||
scrollTop = scrollEl.scrollTop(),
|
||||
scrollLeft = scrollEl.scrollLeft();
|
||||
|
||||
point.x = x + scrollLeft;
|
||||
point.y = y + scrollTop;
|
||||
bbox.nw = point.matrixTransform(matrix);
|
||||
point.x += width;
|
||||
bbox.ne = point.matrixTransform(matrix);
|
||||
point.y += height;
|
||||
bbox.se = point.matrixTransform(matrix);
|
||||
point.x -= width;
|
||||
bbox.sw = point.matrixTransform(matrix);
|
||||
point.y -= height / 2;
|
||||
bbox.w = point.matrixTransform(matrix);
|
||||
point.x += width;
|
||||
bbox.e = point.matrixTransform(matrix);
|
||||
point.x -= width / 2;
|
||||
point.y -= height / 2;
|
||||
bbox.n = point.matrixTransform(matrix);
|
||||
point.y += height;
|
||||
bbox.s = point.matrixTransform(matrix);
|
||||
return bbox;
|
||||
}
|
||||
*/
|
||||
|
||||
return tip;
|
||||
};
|
||||
|
||||
});
|
||||
74
src/bower_components/K4D3/src/utils/selection.js
vendored
74
src/bower_components/K4D3/src/utils/selection.js
vendored
|
|
@ -1,74 +0,0 @@
|
|||
define(function(require) {
|
||||
'use strict';
|
||||
|
||||
var d3 = require('lib/d3/d3'),
|
||||
zeroInjection = require('src/utils/zeroInjection');
|
||||
|
||||
// adds an array to another array
|
||||
function addTo(to, array) {
|
||||
[].push.apply(to, array);
|
||||
}
|
||||
|
||||
/*
|
||||
Accepts a DOM element(s) and data.
|
||||
Returns an array of DOM elements on which charts
|
||||
will be rendered.
|
||||
*/
|
||||
function placeChart(elem, data) {
|
||||
var $el = elem instanceof Array ? elem : d3.select(elem).datum(data),
|
||||
charts = [];
|
||||
|
||||
if (data.rows) { addTo(charts, split(elem, 'height', 'width', data.rows, 'rows')); }
|
||||
else if (data.columns) { addTo(charts, split(elem, 'width', 'height', data.columns, 'columns')); }
|
||||
else {
|
||||
console.log($el);
|
||||
addTo(charts, $el.append('div')
|
||||
.attr('class', 'chart')
|
||||
.style('width', '100%')
|
||||
.style('height', '100%')[0]);
|
||||
}
|
||||
|
||||
return charts;
|
||||
}
|
||||
|
||||
/*
|
||||
Accepts a DOM element(s), 'width' and 'height', data and class name.
|
||||
Returns a DOM element array that has been split by class name,
|
||||
i.e. rows or columns.
|
||||
*/
|
||||
function split(elem, by, inherit, data, name) {
|
||||
var charts = [],
|
||||
$el = elem instanceof Array ? elem : d3.select(elem),
|
||||
node = elem instanceof Array ? $(elem[0]) : $(elem),
|
||||
// need to refactor
|
||||
size = ($(node).parent()[by]() / data.length) / $(node).parent()[by]() * 100,
|
||||
inheritedSize = node[inherit]() / node[inherit]() * 100;
|
||||
|
||||
if (!size || !inheritedSize || size === 0 || inheritedSize === 0) {
|
||||
if (!size || size === 0) {
|
||||
throw new Error('Chart cannot be rendered because ' + by + ' is ' + size + '.');
|
||||
} else {
|
||||
throw new Error('Chart cannot be rendered because ' + inherit + ' is ' + inheritedSize + '.');
|
||||
}
|
||||
}
|
||||
|
||||
$el.selectAll('div')
|
||||
.data(data)
|
||||
.enter().append('div')
|
||||
.attr('class', name)
|
||||
.style('width', function() { return by === 'width' ? size + "%": inheritedSize + "%"; })
|
||||
.style('height', function() { return by === 'height' ? size + "%" : inheritedSize + "%"; })
|
||||
.style('display', function() { return name === 'rows' ? 'block' : 'inline-block'; })
|
||||
.each(function(d) {
|
||||
var selection = d3.select(this);
|
||||
addTo(charts, placeChart(selection, d));
|
||||
});
|
||||
|
||||
return charts;
|
||||
}
|
||||
|
||||
return function(elem, data) {
|
||||
console.log(data);
|
||||
return zeroInjection(placeChart(elem, data));
|
||||
};
|
||||
});
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
define(function(require) {
|
||||
'use strict';
|
||||
|
||||
var d3 = require('lib/d3/d3'),
|
||||
_ = require('lib/lodash/dist/lodash');
|
||||
|
||||
return function zeroInj(selection) {
|
||||
var uniqueXKeys, uniqueXObjs = {};
|
||||
|
||||
// Gets the unique x values values from the data set.
|
||||
d3.selectAll(selection).each(function(d) {
|
||||
d.series.forEach(function(e) {
|
||||
e.values.forEach(function(f, i) {
|
||||
if (uniqueXObjs[f.x]) {
|
||||
if ( uniqueXObjs[f.x].i > i ) {
|
||||
uniqueXObjs[f.x].i = i;
|
||||
} else if ( uniqueXObjs[f.x].i < i ) {
|
||||
uniqueXObjs[f.x].i = i++;
|
||||
}
|
||||
} else {
|
||||
// add new obj with x val as key
|
||||
uniqueXObjs[f.x] = {"x": f.x, "i": i};
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// sort by n.i and get keys n.x
|
||||
uniqueXKeys = _.chain(uniqueXObjs)
|
||||
.sortBy( function (n){ return n.i; } )
|
||||
.pluck ( function (n){ return n.x; } )
|
||||
.value();
|
||||
|
||||
d3.selectAll(selection).each(function(data) {
|
||||
data.series.forEach(function(series) {
|
||||
uniqueXKeys.forEach(function(key, keyIndex) {
|
||||
var val = series.values[keyIndex];
|
||||
if (!val || val.x !== key) {
|
||||
series.values.splice(keyIndex, 0, { x: key, y: 0 });
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return selection;
|
||||
};
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue