mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Add K4D3 to bower.json, update it
This commit is contained in:
Rashid Khan
parent
f3862c0428
commit
f28ca585e3
41 changed files with 2220 additions and 4859 deletions
|
|
@ -28,6 +28,7 @@
|
|||
"angular-route": "~1.2.14",
|
||||
"gridster": "~0.5.0",
|
||||
"angular-mocks": "~1.2.14",
|
||||
"K4D3": "git@github.com:elasticsearch/K4D3.git",
|
||||
"font-awesome": "~4.0.3",
|
||||
"requirejs-text": "~2.0.10",
|
||||
"async": "~0.2.10",
|
||||
|
|
|
|||
7
src/bower_components/K4D3/.bower.json
vendored
7
src/bower_components/K4D3/.bower.json
vendored
|
|
@ -32,14 +32,13 @@
|
|||
"topojson": "~1.4.6"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"_release": "1a5f428a2b",
|
||||
"_release": "482f0b6eaf",
|
||||
"_resolution": {
|
||||
"type": "branch",
|
||||
"branch": "master",
|
||||
"commit": "1a5f428a2b4493e9a11934956a7ac8ad9328a5c8"
|
||||
"commit": "482f0b6eafa5996c835b45ba5df1d112c31ac071"
|
||||
},
|
||||
"_source": "git@github.com:elasticsearch/K4D3.git",
|
||||
"_target": "*",
|
||||
"_originalSource": "git@github.com:elasticsearch/K4D3.git",
|
||||
"_direct": true
|
||||
"_originalSource": "git@github.com:elasticsearch/K4D3.git"
|
||||
}
|
||||
19
src/bower_components/K4D3/GruntFile.js
vendored
19
src/bower_components/K4D3/GruntFile.js
vendored
|
|
@ -16,22 +16,9 @@ module.exports = function(grunt) {
|
|||
src: [
|
||||
'src/start.js',
|
||||
'src/core.js',
|
||||
'src/modules/area.js',
|
||||
'src/modules/dendrogram.js',
|
||||
'src/modules/heatmap.js',
|
||||
'src/tooltip.js',
|
||||
'src/legend.js',
|
||||
'src/modules/histogram.js',
|
||||
'src/modules/horizon.js',
|
||||
'src/modules/line.js',
|
||||
'src/modules/map.js',
|
||||
'src/modules/pie.js',
|
||||
'src/modules/scatterplot.js',
|
||||
'src/modules/sparkline.js',
|
||||
'src/modules/spider.js',
|
||||
'src/modules/sunburst.js',
|
||||
'src/modules/sortedTable.js',
|
||||
'src/modules/timeBars.js',
|
||||
'src/modules/treemap.js',
|
||||
'src/modules/table.js',
|
||||
'src/end.js'
|
||||
],
|
||||
dest: 'k4.d3.js'
|
||||
|
|
@ -65,7 +52,7 @@ module.exports = function(grunt) {
|
|||
copy: {
|
||||
css: {
|
||||
files: [
|
||||
{ src: 'style/k4.d3.css', dest: 'k4.d3.css' }
|
||||
{ src: 'src/css/k4.d3.css', dest: 'k4.d3.css' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
65
src/bower_components/K4D3/Makefile
vendored
65
src/bower_components/K4D3/Makefile
vendored
|
|
@ -1,18 +1,55 @@
|
|||
# target is the final output for your library
|
||||
TARGET=k4.js
|
||||
SRC_FILES=$(shell find src -type f -name "*.js")
|
||||
BUILD_OPTIONS=build/build.js
|
||||
RJS=node_modules/.bin/r.js
|
||||
JS_FILES = \
|
||||
src/start.js \
|
||||
src/core.js \
|
||||
src/modules/area.js \
|
||||
src/modules/dendrogram.js \
|
||||
src/modules/heatmap.js \
|
||||
src/modules/histogram.js \
|
||||
src/modules/horizon.js \
|
||||
src/modules/line.js \
|
||||
src/modules/map.js \
|
||||
src/modules/map-flat.js \
|
||||
src/modules/map-globe.js \
|
||||
src/modules/pie.js \
|
||||
src/modules/scatterplot.js \
|
||||
src/modules/sortedTable.js \
|
||||
src/modules/sparkline.js \
|
||||
src/modules/spider.js \
|
||||
src/modules/sunburst.js \
|
||||
src/modules/table.js \
|
||||
src/modules/treemap.js \
|
||||
src/end.js
|
||||
|
||||
all: build
|
||||
CSS_FILES = \
|
||||
src/css/k4.d3.css
|
||||
|
||||
build: $(TARGET)
|
||||
JS_COMPILER = \
|
||||
uglifyjs
|
||||
|
||||
CSS_COMPILER = \
|
||||
cssmin
|
||||
|
||||
all: k4.d3.js k4.d3.min.js k4.d3.css k4.d3.min.css
|
||||
k4.d3.js: $(JS_FILES)
|
||||
k4.d3.min.js: $(JS_FILES)
|
||||
k4.d3.css: $(CSS_FILES)
|
||||
k4.d3.min.css: $(CSS_FILES)
|
||||
|
||||
k4.d3.js: Makefile
|
||||
rm -f $@
|
||||
cat $(filter %.js,$^) >> $@
|
||||
|
||||
k4.d3.js: Makefile
|
||||
rm -f $@
|
||||
cat $(filter %.css,$^) >> $@
|
||||
|
||||
%.min.js:: Makefile
|
||||
rm -f $@
|
||||
$(JS_COMPILER) k4.d3.js >> $@
|
||||
|
||||
%.min.css:: Makefile
|
||||
rm -f $@
|
||||
$(CSS_COMPILER) k4.d3.css >> $@
|
||||
|
||||
clean:
|
||||
rm -rf $(TARGET) node_modules
|
||||
|
||||
$(TARGET): $(RJS)
|
||||
$(RJS) -o $(BUILD_OPTIONS) out=$(TARGET)
|
||||
|
||||
$(RJS):
|
||||
npm install
|
||||
rm -rf k4.d3*.js k4.d3*.css
|
||||
|
|
|
|||
2
src/bower_components/K4D3/README.md
vendored
2
src/bower_components/K4D3/README.md
vendored
|
|
@ -4,7 +4,7 @@ D3 Visualization Library for Kibana 4!
|
|||
## Environment Setup
|
||||
1. Fork the repository. You will need node, npm, bower, and grunt installed.
|
||||
|
||||
a. Install node and npm.
|
||||
a. Download and install <a href="http://nodejs.org/download">Node</a>.
|
||||
|
||||
b. To install Bower, run:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Time bars</title>
|
||||
<title>Animated bars</title>
|
||||
<style>
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
t = +now;
|
||||
data1.push(next1());
|
||||
|
||||
var viz1 = k4.timebars()
|
||||
var viz1 = k4.animatedbars()
|
||||
.width(900)
|
||||
.height(300)
|
||||
//.animatedTransition(true)
|
||||
4
src/bower_components/K4D3/examples/area.html
vendored
4
src/bower_components/K4D3/examples/area.html
vendored
|
|
@ -38,7 +38,7 @@
|
|||
height: 100px;
|
||||
padding: 5px;
|
||||
font: 12px sans-serif;
|
||||
background: black;
|
||||
background: lightgray;
|
||||
border: 0px;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
var viz = k4.area()
|
||||
.height(500)
|
||||
.width(960)
|
||||
.interpolate("linear")
|
||||
.interpolate("cardinal")
|
||||
.x(function(d) { return formatDate(d.x); })
|
||||
.y(function(d) { return d.y; });
|
||||
|
||||
|
|
|
|||
550
src/bower_components/K4D3/examples/histogram.html
vendored
550
src/bower_components/K4D3/examples/histogram.html
vendored
|
|
@ -6,73 +6,507 @@
|
|||
body {
|
||||
font: 10px sans-serif;
|
||||
fill: #444;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.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;
|
||||
background: #e5e5e5;
|
||||
padding-top: 70px;
|
||||
}
|
||||
</style>
|
||||
<!-- k4.d3.css stylesheet -->
|
||||
<link rel="stylesheet" href="../k4.d3.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="histogram1"></div>
|
||||
<div id="histogram2"></div>
|
||||
<div id="element" style="height: 100%"></div>
|
||||
|
||||
<!-- javascript files -->
|
||||
<script src="../lib/d3/d3.min.js"></script>
|
||||
<script src="../k4.d3.js"></script>
|
||||
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// tests 1 - random data
|
||||
var data1 = [];
|
||||
for (var i = 0; i < 20; i++) {
|
||||
data1.push({ x: i, y: Math.random() });
|
||||
}
|
||||
var viz1 = k4.histogram()
|
||||
.width(700)
|
||||
.height(400)
|
||||
.xValue(function(d) { return d.x; })
|
||||
.yValue(function(d) { return d.y; });
|
||||
d3.select("#histogram1")
|
||||
.datum(data1)
|
||||
.call(viz1);
|
||||
|
||||
// tests 2 - random data
|
||||
var data2 = [];
|
||||
for (var i = 0; i < 120; i++) {
|
||||
data2.push({ x: i, y: 1 + Math.sin(i/30) - 0.5});
|
||||
}
|
||||
console.log(data2);
|
||||
var viz2 = k4.histogram()
|
||||
.width(900)
|
||||
.height(300)
|
||||
.bargap(0.1)
|
||||
.color("#ffa30f")
|
||||
.xValue(function(d) { return d.x; })
|
||||
.yValue(function(d) { return d.y; });
|
||||
d3.select("#histogram2")
|
||||
.datum(data2)
|
||||
.call(viz2);
|
||||
|
||||
var data = {
|
||||
"rows": [
|
||||
{
|
||||
"columns": [
|
||||
{
|
||||
"label": "200 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"layers": [
|
||||
{
|
||||
"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",
|
||||
"layers": [
|
||||
{
|
||||
"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",
|
||||
"layers": [
|
||||
{
|
||||
"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}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"columns": [
|
||||
{
|
||||
"label": "200 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"layers": [
|
||||
{
|
||||
"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",
|
||||
"layers": [
|
||||
{
|
||||
"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",
|
||||
"layers": [
|
||||
{
|
||||
"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}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"columns": [
|
||||
{
|
||||
"label": "200 requests",
|
||||
"xAxisLabel": "Date",
|
||||
"yAxisLabel": "Average Request Size in Bytes",
|
||||
"layers": [
|
||||
{
|
||||
"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",
|
||||
"layers": [
|
||||
{
|
||||
"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",
|
||||
"layers": [
|
||||
{
|
||||
"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;
|
||||
|
||||
$("#element").width("100%");
|
||||
$("#element").height(0);
|
||||
d3.select(elem).style("padding-bottom", "40%");
|
||||
|
||||
myChart = new k4.Chart(elem, { type: "histogram", stacktype: "expand", yGroup: true, color: ['#81dfe2','#0762b7'] });
|
||||
myChart.render(data);
|
||||
console.log(d3.select(elem).style("padding-bottom"));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
296
src/bower_components/K4D3/examples/histogramlayers.html
vendored
Normal file
296
src/bower_components/K4D3/examples/histogramlayers.html
vendored
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
<!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>
|
||||
40
src/bower_components/K4D3/examples/line.html
vendored
40
src/bower_components/K4D3/examples/line.html
vendored
|
|
@ -35,22 +35,38 @@
|
|||
<script>
|
||||
var formatDate = d3.time.format("%b %Y").parse,
|
||||
data = [
|
||||
{x: "Jan 2013", y: 256, z: 'New York'},
|
||||
{x: "Feb 2013", y: 770, z: 'New York'},
|
||||
{x: "May 2013", y: 159, z: 'New York'},
|
||||
{x: "Oct 2013", y: 106, z: 'New York'},
|
||||
{x: "Jan 2013", y: 456, z: 'San Francisco'},
|
||||
{x: "Feb 2013", y: 370, z: 'San Francisco'},
|
||||
{x: "May 2013", y: 659, z: 'San Francisco'},
|
||||
{x: "Oct 2013", y: 806, z: 'San Francisco'}
|
||||
{
|
||||
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)
|
||||
.x(function(d) { return formatDate(d.x); })
|
||||
.y(function(d) { return d.y; })
|
||||
.z(function(d) { return d.z; });
|
||||
.width(960);
|
||||
|
||||
d3.select("#area-chart")
|
||||
.datum(data)
|
||||
|
|
|
|||
2
src/bower_components/K4D3/examples/pie.html
vendored
2
src/bower_components/K4D3/examples/pie.html
vendored
|
|
@ -29,8 +29,6 @@
|
|||
];
|
||||
|
||||
var viz = k4.pie()
|
||||
.width(500)
|
||||
.height(500)
|
||||
.label(function(d) { return d.label; })
|
||||
.value(function(d) { return d.value; });
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
var viz = k4.sparkline()
|
||||
.height(100)
|
||||
.width(300)
|
||||
.interpolate("basis")
|
||||
.interpolate("cardinal")
|
||||
.x(function(d) { return formatDate(d.x); })
|
||||
.y(function(d) { return d.y; });
|
||||
|
||||
|
|
|
|||
2
src/bower_components/K4D3/index.html
vendored
2
src/bower_components/K4D3/index.html
vendored
|
|
@ -60,11 +60,13 @@
|
|||
<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>
|
||||
|
|
|
|||
55
src/bower_components/K4D3/k4.d3.css
vendored
Normal file
55
src/bower_components/K4D3/k4.d3.css
vendored
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/* 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;
|
||||
}
|
||||
|
||||
/*.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;
|
||||
}
|
||||
2712
src/bower_components/K4D3/k4.d3.js
vendored
2712
src/bower_components/K4D3/k4.d3.js
vendored
File diff suppressed because it is too large
Load diff
1
src/bower_components/K4D3/k4.d3.min.css
vendored
Normal file
1
src/bower_components/K4D3/k4.d3.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.arc path{stroke:#fff}div.col{display:inline-block}.axis line,.axis path{stroke:#aaa;fill:none}.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}
|
||||
2
src/bower_components/K4D3/k4.d3.min.js
vendored
2
src/bower_components/K4D3/k4.d3.min.js
vendored
File diff suppressed because one or more lines are too long
2
src/bower_components/K4D3/karma.conf.js
vendored
2
src/bower_components/K4D3/karma.conf.js
vendored
|
|
@ -10,7 +10,7 @@ module.exports = function(config) {
|
|||
files: [
|
||||
//{pattern: 'lib/**/*.js', included: false},
|
||||
{pattern: 'lib/d3/*.js', included: true},
|
||||
{pattern: 'src/**/*.js', included: true},
|
||||
{pattern: 'k4.d3.js', included: true},
|
||||
{pattern: 'test/*Spec.js', included: true},
|
||||
{pattern: 'test/**/*Spec.js', included: true}
|
||||
],
|
||||
|
|
|
|||
99
src/bower_components/K4D3/src/core.js
vendored
99
src/bower_components/K4D3/src/core.js
vendored
|
|
@ -1,96 +1,19 @@
|
|||
k4.version = '0.0.0';
|
||||
/*
|
||||
* Main module
|
||||
* Accepts an html element and a config object.
|
||||
* Calls all other K4 modules.
|
||||
* Returns the charting function.
|
||||
*/
|
||||
|
||||
k4.namespace = function (ns_string) {
|
||||
k4.Chart = function(elem, args) {
|
||||
'use strict';
|
||||
|
||||
var parts = ns_string.split('.'),
|
||||
parent = k4,
|
||||
i;
|
||||
if (typeof(k4[args.type]) !== 'function') { throw args.type + " is not a supported k4 function."; }
|
||||
|
||||
// strip redundant leading global
|
||||
if (parts[0] === 'k4') {
|
||||
parts = parts.slice(1);
|
||||
}
|
||||
var type = args.type,
|
||||
chartFunc = k4[type](elem, args);
|
||||
|
||||
for (i = 0; i < parts.length; i += 1) {
|
||||
// create a property if it doesn't exist
|
||||
if (typeof parent[parts[i]] === 'undefined') {
|
||||
parent[parts[i]] = {};
|
||||
}
|
||||
parent = parent[parts[i]];
|
||||
}
|
||||
|
||||
return parent;
|
||||
return chartFunc;
|
||||
};
|
||||
|
||||
k4.mouseover = function (config) {
|
||||
'use strict';
|
||||
|
||||
var selection = config.selection,
|
||||
data = config.data || data,
|
||||
xScale = config.xScale || xScale,
|
||||
yScale = config.yScale || yScale,
|
||||
width = config.width || innerWidth,
|
||||
height = config.height || innerHeight,
|
||||
focus = selection.append('g')
|
||||
.attr('class', 'focus')
|
||||
.style('display', 'none');
|
||||
|
||||
var tip = d3.select('#tip');
|
||||
|
||||
focus.append('circle')
|
||||
.attr('r', 4.5);
|
||||
|
||||
focus.append('text')
|
||||
.attr('x', 9)
|
||||
.attr('dy', '.35em');
|
||||
|
||||
focus.append('div')
|
||||
.attr('class', 'tooltip')
|
||||
.attr('x', 9)
|
||||
.attr('dy', '.35em');
|
||||
|
||||
selection.append('rect')
|
||||
.attr('class', 'overlay')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.on('mouseover', function() {
|
||||
focus.style('display', null);
|
||||
})
|
||||
.on('mouseout', function() {
|
||||
focus.style('display', 'none');
|
||||
})
|
||||
.on('mousemove', mousemove);
|
||||
|
||||
var tip = selection.append('rect')
|
||||
.attr('class', 'tooltip')
|
||||
.attr('width', 150)
|
||||
.attr('height', 50);
|
||||
|
||||
|
||||
function mousemove() {
|
||||
var x0 = xScale.invert(d3.mouse(this)[0]),
|
||||
bisectDate = d3.bisector(function(d) { return d[0]; }).left,
|
||||
i = bisectDate(data, x0, 1),
|
||||
d0 = data[i - 1],
|
||||
d1 = data[i],
|
||||
last = data.length - 1,
|
||||
d = last === data.indexOf(d0) ? d0 : x0 - d0[0] > d1[0] - x0 ? d1 : d0;
|
||||
focus.attr("transform", "translate(" + xScale(d[0]) + "," + yScale(d[1]) + ")");
|
||||
focus.select('text').text(d[0] + ", " + d[1]);
|
||||
focus.select('div').attr('visibility', 'visible');
|
||||
|
||||
|
||||
//tip.attr('visibility', 'visible')
|
||||
console.log( 'mousemove', xScale(d[0]), yScale(d[1]) );
|
||||
tip.attr("x", function() {
|
||||
return xScale(d[0]);//+'px';
|
||||
})
|
||||
.attr("y", function() {
|
||||
return yScale(d[1]);//+'px';
|
||||
})
|
||||
.style("fill", "#333");
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
|
|
|||
56
src/bower_components/K4D3/src/css/k4.d3.css
vendored
56
src/bower_components/K4D3/src/css/k4.d3.css
vendored
|
|
@ -1 +1,55 @@
|
|||
/* Stylings that will blow your mind! */
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/*.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;
|
||||
}
|
||||
|
|
|
|||
64
src/bower_components/K4D3/src/legend.js
vendored
Normal file
64
src/bower_components/K4D3/src/legend.js
vendored
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
k4.legend = 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;
|
||||
};
|
||||
154
src/bower_components/K4D3/src/modules/area.js
vendored
154
src/bower_components/K4D3/src/modules/area.js
vendored
|
|
@ -1,154 +0,0 @@
|
|||
|
||||
k4.area = function() {
|
||||
'use strict';
|
||||
|
||||
var margin = {top: 20, right: 50, bottom: 50, left: 50},
|
||||
width = 960,
|
||||
height = 500,
|
||||
getX = function(d) { return d[0]; },
|
||||
getY = function(d) { return d[1]; },
|
||||
interpolate = 'cardinal',
|
||||
xScale = d3.time.scale(),
|
||||
yScale = d3.scale.linear(),
|
||||
xAxis = d3.svg.axis()
|
||||
.scale(xScale)
|
||||
.ticks(10)
|
||||
.tickPadding(6)
|
||||
.orient('bottom'),
|
||||
yAxis = d3.svg.axis()
|
||||
.scale(yScale)
|
||||
.ticks(10)
|
||||
.tickPadding(6)
|
||||
.orient('left'),
|
||||
area = d3.svg.area().x(X).y1(Y),
|
||||
line = d3.svg.line().x(X).y(Y),
|
||||
color = d3.scale.category10();
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
|
||||
var innerWidth = width - margin.left - margin.right,
|
||||
innerHeight = height - margin.top - margin.bottom,
|
||||
svg = d3.select(this).selectAll('svg').data([data]),
|
||||
gEnter = svg.enter().append('svg').append('g'),
|
||||
g = svg.select('g');
|
||||
|
||||
data = data.map(function(d, i) {
|
||||
return [getX.call(data, d, i), getY.call(data, d, i)];
|
||||
});
|
||||
|
||||
xScale
|
||||
.domain(d3.extent(data, function(d) { return d[0]; })).nice()
|
||||
.range([0, innerWidth]);
|
||||
|
||||
yScale
|
||||
.domain([0, d3.max(data, function(d) { return d[1]; })]).nice()
|
||||
.range([innerHeight, 0]);
|
||||
|
||||
area.interpolate(interpolate);
|
||||
line.interpolate(interpolate);
|
||||
|
||||
gEnter.append('rect').attr('class', 'background');
|
||||
gEnter.append('path').attr('class', 'area');
|
||||
gEnter.append('path').attr('class', 'line');
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
|
||||
svg
|
||||
.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
g.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
|
||||
|
||||
g.select('.background')
|
||||
.attr('width', innerWidth)
|
||||
.attr('height', innerHeight);
|
||||
|
||||
g.select('.area')
|
||||
.attr('d', area(data))
|
||||
.attr('d', area.y0(yScale.range()[0]))
|
||||
.attr('fill', function(d) {
|
||||
return typeof color === 'object' ? color : color(d);
|
||||
})
|
||||
.style('opacity', 0.5);
|
||||
|
||||
g.select('.line')
|
||||
.attr('d', line(data))
|
||||
.attr('fill', 'none')
|
||||
.style('stroke', function(d) {
|
||||
return typeof color === 'object' ? color : color(d);
|
||||
})
|
||||
.style('stroke-width', 3.5);
|
||||
|
||||
g.select('g.x.axis')
|
||||
.attr('transform', 'translate(0,' + yScale.range()[0] + ')')
|
||||
.call(xAxis.tickSize(-innerHeight));
|
||||
|
||||
g.select('g.y.axis')
|
||||
.call(yAxis.tickSize(-innerWidth));
|
||||
|
||||
/* Mouseover */
|
||||
k4.mouseover({
|
||||
selection: g,
|
||||
data: data,
|
||||
xScale: xScale,
|
||||
yScale: yScale
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function X(d) {
|
||||
return xScale(d[0]);
|
||||
}
|
||||
|
||||
function Y(d) {
|
||||
return yScale(d[1]);
|
||||
}
|
||||
|
||||
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.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) { return getX; }
|
||||
getX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) { return getY; }
|
||||
getY = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.interpolate = function(_) {
|
||||
if (!arguments.length) { return interpolate; }
|
||||
interpolate = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return color; }
|
||||
color = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
|
||||
k4.dendrogram = function() {
|
||||
'use strict';
|
||||
|
||||
var width = 600,
|
||||
height = 2000,
|
||||
color = d3.scale.category10(),
|
||||
cluster = d3.layout.cluster()
|
||||
.size([height, width - 200]),
|
||||
diagonal = d3.svg.diagonal()
|
||||
.projection(function(d) { return [d.y, d.x]; });
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var nodes = cluster.nodes(data),
|
||||
links = cluster.links(nodes);
|
||||
|
||||
var svg = d3.select(this).append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.append('g')
|
||||
.attr('transform', 'translate(120,0)');
|
||||
|
||||
svg.selectAll('.link')
|
||||
.data(links)
|
||||
.enter().append('path')
|
||||
.attr('class', 'link')
|
||||
.attr('d', diagonal);
|
||||
|
||||
var node = svg.selectAll('.node')
|
||||
.data(nodes)
|
||||
.enter().append('g')
|
||||
.attr('class', 'node')
|
||||
.attr('transform', function(d) { return 'translate(' + d.y + ',' + d.x + ')'; });
|
||||
|
||||
node.append('circle')
|
||||
.attr('r', 4.5)
|
||||
.style('fill', function(d) {
|
||||
return d.children ? '#ffffff' : color(d.name);
|
||||
})
|
||||
.style('stroke', function(d) {
|
||||
return d.children ? '#4682B4': color(d.name);
|
||||
});
|
||||
|
||||
node.append('text')
|
||||
.attr('dx', function(d) { return d.children ? -8 : 8; })
|
||||
.attr('dy', 3)
|
||||
.style('text-anchor', function(d) { return d.children ? 'end' : 'start'; })
|
||||
.text(function(d) { return d.name; });
|
||||
});
|
||||
}
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return color; }
|
||||
color = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.cluster = function(_) {
|
||||
if (!arguments.length) { return cluster; }
|
||||
cluster = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.diagonal = function(_) {
|
||||
if (!arguments.length) { return diagonal; }
|
||||
diagonal = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
};
|
||||
215
src/bower_components/K4D3/src/modules/heatmap.js
vendored
215
src/bower_components/K4D3/src/modules/heatmap.js
vendored
|
|
@ -1,215 +0,0 @@
|
|||
|
||||
k4.heatmap = function() {
|
||||
'use strict';
|
||||
|
||||
var margin = {top: 20, right: 20, bottom: 20, left: 50},
|
||||
width = 500,
|
||||
height = 500,
|
||||
rad = 0,
|
||||
rows = 10,
|
||||
cols = 20,
|
||||
strokecolor = '#666',
|
||||
strokeweight = 0,
|
||||
xValue = function(d) { return d[0]; }, // x axis point
|
||||
yValue = function(d) { return d[1]; }, // y axis point
|
||||
zValue = function(d) { return d[2]; }, // z for radius
|
||||
xScale = d3.scale.linear(),
|
||||
yScale = d3.scale.linear(),
|
||||
zScale = d3.scale.linear(),
|
||||
xAxis = d3.svg.axis()
|
||||
.scale(xScale)
|
||||
.orient('bottom')
|
||||
//.tickSize(height)
|
||||
.tickPadding(6)
|
||||
.ticks(10),
|
||||
yAxis = d3.svg.axis()
|
||||
.scale(yScale)
|
||||
.orient('left')
|
||||
//.tickSize(width)
|
||||
.tickPadding(6)
|
||||
.ticks(10),
|
||||
// colors = d3.scale.category10(),
|
||||
colors = ['#1d2b38','#1a415d','#005c75','#007784','#009286','#49ac7e','#89c272'],
|
||||
colorScale = d3.scale.quantile();
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
|
||||
selection.each(function(data) {
|
||||
//console.log(data);
|
||||
|
||||
var availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
//container = d3.select(this);
|
||||
|
||||
var vals = data.map(function(n) { return n.z; });
|
||||
//console.log(vals);
|
||||
|
||||
var gridw = availableWidth / (cols-1);
|
||||
var gridh = availableHeight / (rows-1);
|
||||
|
||||
colorScale.domain(vals).range(colors);
|
||||
data = data.map(function(d, i) {
|
||||
return [xValue.call(data, d, i), yValue.call(data, d, i), zValue.call(data, d, i)];
|
||||
});
|
||||
|
||||
xScale
|
||||
//.domain([ d3.min(data, function(d) { return d[0]; }), d3.max(data, function(d) { return d[0]; }) ])//.nice()
|
||||
.domain([ 1, cols ])//.nice()
|
||||
.range([ 1, availableWidth ]);
|
||||
|
||||
yScale
|
||||
//.domain([ d3.min(data, function(d) { return d[1]; }), d3.max(data, function(d) { return d[1]; }) ])//.nice()
|
||||
.domain([ 1, rows ])//.nice()
|
||||
.range([ availableHeight, 1 ]);
|
||||
|
||||
zScale
|
||||
.domain([ d3.min(data, function(d) { return d[2]; }), d3.max(data, function(d) { return d[2]; }) ])
|
||||
.range([2, 10]); // do we need?
|
||||
|
||||
var svg = d3.select(this).selectAll('svg').data([data]);
|
||||
|
||||
var gEnter = svg.enter().append('svg').append('g').attr('class', 'inner');
|
||||
gEnter.append('g').attr('class', 'bkgd');
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'points');
|
||||
|
||||
svg.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
gEnter.select('g.points')
|
||||
.selectAll('.vertices')
|
||||
.data(data)
|
||||
.enter().append('rect')
|
||||
.attr('x', function(d) {
|
||||
return ( (d[0]-1) * gridw ) - (gridh * 0.5);
|
||||
})
|
||||
.attr('y', function(d) {
|
||||
return ( (d[1]-1) * gridh ) - (gridh * 1);
|
||||
})
|
||||
.attr('rx', rad)
|
||||
.attr('ry', rad)
|
||||
.attr('class', 'block')
|
||||
.attr('width', gridw)
|
||||
.attr('height', gridh)
|
||||
//.attr('transform', 'translate(' + (gridw / -2) + ', ' + (gridh / -2) + ')')
|
||||
.style('fill', function(d) {
|
||||
return colorScale(d[2]);
|
||||
})
|
||||
.style('fill-opacity', function () {
|
||||
return 0.8;
|
||||
})
|
||||
.style('stroke', function () {
|
||||
// return colorScale(d[2]);
|
||||
return strokecolor;
|
||||
})
|
||||
.style('stroke-width', function () {
|
||||
return strokeweight;
|
||||
});
|
||||
|
||||
var g = svg.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
|
||||
|
||||
g.select('g.x.axis')
|
||||
.attr('transform', 'translate(' + 0 + ',' + ( yScale.range()[0] ) + ')')
|
||||
.call(xAxis.tickSize(-availableHeight));
|
||||
|
||||
g.select('g.y.axis')
|
||||
.attr('transform', 'translate(' + ( gridh / -2 ) + ',' + ( gridh / -2 )+ ')')
|
||||
.call(yAxis.tickSize(-availableWidth));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function X(d) {
|
||||
return xScale(d[0]);
|
||||
}
|
||||
|
||||
function Y(d) {
|
||||
return yScale(d[1]);
|
||||
}
|
||||
|
||||
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.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.rows = function(_) {
|
||||
if (!arguments.length) { return rows; }
|
||||
rows = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.cols = function(_) {
|
||||
if (!arguments.length) { return cols; }
|
||||
cols = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.colors = function(_) {
|
||||
if (!arguments.length) { return colors; }
|
||||
colors = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.strokecolor = function(_) {
|
||||
if (!arguments.length) { return strokecolor; }
|
||||
strokecolor = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.strokeweight = function(_) {
|
||||
if (!arguments.length) { return strokeweight; }
|
||||
strokeweight = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.rad = function(_) {
|
||||
if (!arguments.length) { return rad; }
|
||||
rad = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xValue = function(_) {
|
||||
if (!arguments.length) { return xValue; }
|
||||
xValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yValue = function(_) {
|
||||
if (!arguments.length) { return yValue; }
|
||||
yValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.zValue = function(_) {
|
||||
if (!arguments.length) { return zValue; }
|
||||
zValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return colors; }
|
||||
colors = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
};
|
||||
408
src/bower_components/K4D3/src/modules/histogram.js
vendored
408
src/bower_components/K4D3/src/modules/histogram.js
vendored
|
|
@ -1,165 +1,311 @@
|
|||
|
||||
k4.histogram = function() {
|
||||
k4.histogram = function(elem, args) {
|
||||
'use strict';
|
||||
|
||||
var chart = {},
|
||||
|
||||
var margin = {top: 20, right: 20, bottom: 20, left: 50},
|
||||
width = 500,
|
||||
height = 500,
|
||||
bargap = 0.2,
|
||||
color = "#1191e0",
|
||||
//color = d3.scale.category10(),
|
||||
xValue = function(d) { return d[0]; }, // x axis point
|
||||
yValue = function(d) { return d[1]; }, // y axis point
|
||||
xScale = d3.scale.ordinal(),
|
||||
yScale = d3.scale.linear(),
|
||||
xAxis = d3.svg.axis()
|
||||
.scale(xScale)
|
||||
.orient('bottom')
|
||||
.tickSize(-height)
|
||||
.tickSubdivide(true)
|
||||
.tickPadding(6)
|
||||
.ticks(10),
|
||||
yAxis = d3.svg.axis()
|
||||
.scale(yScale)
|
||||
.orient('left')
|
||||
.tickSize(width)
|
||||
.tickPadding(6)
|
||||
.ticks(10);
|
||||
/* ********** Sizing DOM Elements ************* */
|
||||
// accessing the element width/height
|
||||
elemWidth = parseInt(d3.select(elem).style("width"), 10),
|
||||
elemHeight = parseInt(d3.select(elem).style("padding-bottom"), 10),
|
||||
// number of rows
|
||||
numRows = data.rows.length,
|
||||
// number of charts
|
||||
n = data.rows[0].columns.length,
|
||||
// number of layers per chart
|
||||
m = data.rows[0].columns[0].layers.length,
|
||||
// row width
|
||||
outerWidth = elemWidth,
|
||||
// row height
|
||||
outerHeight = elemHeight / numRows,
|
||||
margin = {
|
||||
top: outerHeight * 0.05,
|
||||
right: outerWidth * 0.01,
|
||||
bottom: outerHeight * 0.15,
|
||||
left: outerWidth * 0.05
|
||||
},
|
||||
// svg width/height
|
||||
width = outerWidth/n - margin.left - margin.right,
|
||||
height = outerHeight - margin.top - margin.bottom,
|
||||
/* ************************************************** */
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
// console.log(data);
|
||||
/* ************* Data manipulation **************** */
|
||||
// pulls out the x-axis key values
|
||||
keys = data.rows[0].columns[0].layers[0].values.map(function(item) { return item.x; }),
|
||||
// defines the stack.offset()
|
||||
stacktype = args.stacktype || 'zero', // 'zero', 'expand', 'group'
|
||||
stack = d3.layout.stack().offset(stacktype).values(function(d) { return d.values; }),
|
||||
// calculates the y-axis max value for all charts, i.e. grouped and stacked
|
||||
yGroup = args.yGroup || false,
|
||||
yGroupMax = d3.max(data.rows.map(function(data) {
|
||||
return d3.max(data.columns, function(col) {
|
||||
return d3.max(stack(col.layers), function(layer) {
|
||||
return d3.max(layer.values, function(d) {
|
||||
return d.y;
|
||||
});
|
||||
});
|
||||
});
|
||||
})),
|
||||
yStackMax = d3.max(data.rows.map(function(data) {
|
||||
return d3.max(data.columns, function(col) {
|
||||
return d3.max(stack(col.layers), function(layer) {
|
||||
return d3.max(layer.values, function(d) {
|
||||
return d.y0 + d.y;
|
||||
});
|
||||
});
|
||||
});
|
||||
})),
|
||||
/* **************************************************** */
|
||||
|
||||
var availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom,
|
||||
container = d3.select(this);
|
||||
/* *************** D3 parameters ********************* */
|
||||
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).ticks(6).tickSize(3, 0).tickPadding(6).orient('bottom'),
|
||||
yAxis = d3.svg.axis().scale(yScale).ticks(6).tickSize(-(width), 0).tickPadding(4).orient('left'),
|
||||
color = d3.scale.linear().domain([0, m - 1]).range(args.color) ||
|
||||
d3.scale.linear().domain([0, m - 1]).range(['#e24700', '#f9e593']),
|
||||
toolTip = k4.tooltip().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]),
|
||||
svg, g, layer;
|
||||
/* ******************************************************** */
|
||||
|
||||
data = data.map(function(d, i) {
|
||||
return [xValue.call(data, d, i), yValue.call(data, d, i)];
|
||||
chart.render = function(data) {
|
||||
|
||||
// append svg(s)
|
||||
svg = getSvg(elem, data);
|
||||
|
||||
// render each chart
|
||||
g = svg.append('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
|
||||
.each(function(d) {
|
||||
var g = d3.select(this);
|
||||
|
||||
var yMax = d3.max(d.layers, function(d) {
|
||||
return d3.max(d.values, function(e) {
|
||||
return e.y;
|
||||
});
|
||||
});
|
||||
console.log(yMax);
|
||||
console.log(yGroupMax);
|
||||
|
||||
var yStack = d3.max(d.layers, function(d) {
|
||||
return d3.max(d.values, function(e) {
|
||||
return e.y0 + e.y;
|
||||
});
|
||||
});
|
||||
|
||||
// Change y/xScale domain based on stacktype
|
||||
if (stacktype === 'expand') { yScale.domain([0, 1]); }
|
||||
|
||||
if (stacktype === 'group' && yGroup) {
|
||||
xScale.rangeRoundBands([0, width], 0.2);
|
||||
yScale.domain([0, yGroupMax]);
|
||||
} else {
|
||||
xScale.rangeRoundBands([0, width], 0.2);
|
||||
yScale.domain([0, yMax]);
|
||||
}
|
||||
|
||||
if (stacktype === 'zero' && yGroup) {
|
||||
yScale.domain([0, yStackMax]);
|
||||
} else {
|
||||
yScale.domain([0, yStack]);
|
||||
}
|
||||
|
||||
// background rect
|
||||
g.append('g')
|
||||
.append('rect')
|
||||
.attr('class', 'bkgd')
|
||||
.style('fill', '#fff')
|
||||
.style('opacity', 0.35)
|
||||
.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
// x axis
|
||||
g.append('g')
|
||||
.attr('class', 'x axis')
|
||||
.attr('transform', 'translate(0,' + height + ')')
|
||||
.style('stroke-width', 0.5)
|
||||
.call(xAxis);
|
||||
|
||||
// y axis
|
||||
g.append('g')
|
||||
.attr('class', 'y axis')
|
||||
.style('stroke-width', 0.5)
|
||||
.call(yAxis);
|
||||
|
||||
// layer of bars
|
||||
layer = g.selectAll('.layer')
|
||||
.data(function(d) { return stack(d.layers); })
|
||||
.enter().append('g')
|
||||
.attr('class', 'layer')
|
||||
.style('fill', function(d, i) { return color(i); });
|
||||
|
||||
//Enter
|
||||
// bars for stack, expand, group
|
||||
layer.selectAll('rect')
|
||||
.data(function(d) { return d.values; })
|
||||
.enter().append('rect');
|
||||
|
||||
// Update
|
||||
if (stacktype === 'group') {
|
||||
layer.selectAll('rect')
|
||||
.attr('x', function(d, i, j) { return xScale(d.x) + xScale.rangeBand() / m * j; })
|
||||
.attr('width', xScale.rangeBand() / m)
|
||||
.attr('y', function(d) { return yScale(d.y); })
|
||||
.attr('height', function(d) { return height - yScale(d.y); })
|
||||
.on('mouseover', toolTip.show)
|
||||
.on('mouseout', toolTip.hide);
|
||||
} else {
|
||||
layer.selectAll('rect')
|
||||
.attr('width', xScale.rangeBand())
|
||||
.attr('x', function(d) { return xScale(d.x); })
|
||||
.attr('y', function(d) { return yScale(d.y0 + d.y); })
|
||||
.attr('height', function(d) { return yScale(d.y0) - yScale(d.y0 + d.y); })
|
||||
.on('mouseover', toolTip.show)
|
||||
.on('mouseout', toolTip.hide);
|
||||
}
|
||||
|
||||
//Exit
|
||||
layer.selectAll('rect').data(function(d) { return d.values; }).exit().remove();
|
||||
});
|
||||
|
||||
xScale
|
||||
.domain( data.map(function(d) { return d[0]; }) )//.nice()
|
||||
.rangeBands([0, availableWidth], bargap);
|
||||
// Window resize
|
||||
d3.select(window).on('resize', resize);
|
||||
|
||||
yScale
|
||||
.domain([0, d3.max(data, function(d) { return d[1]; })]).nice()
|
||||
.range([availableHeight, 0]);
|
||||
// k4 tooltip function
|
||||
g.call(toolTip);
|
||||
|
||||
var svg = d3.select(this).selectAll('svg').data([data]);
|
||||
|
||||
var gEnter = svg.enter().append('svg').append('g').attr('class', 'inner');
|
||||
gEnter.append('g').attr('class', 'bkgd');
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'bargroup');
|
||||
return svg;
|
||||
};
|
||||
|
||||
svg.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
var bars = gEnter.selectAll('g.bargroup')
|
||||
.selectAll('.vertices')
|
||||
.data(data);
|
||||
// append layout divs to elem and bind layout data
|
||||
function getSvg(elem, data) {
|
||||
var rows, cols, svg;
|
||||
|
||||
bars.exit().remove();
|
||||
rows = d3.select(elem).selectAll('div')
|
||||
.data(data.rows)
|
||||
.enter().append('div')
|
||||
.attr('class', function(d, i) { return 'row r' + i; });
|
||||
|
||||
var barsEnter = bars.enter()
|
||||
.append('rect')
|
||||
.attr('x', function(d) { return xScale(d[0]); })
|
||||
.attr('width', xScale.rangeBand())
|
||||
.attr('y', function(d) { return yScale(d[1]); })
|
||||
.attr('height', function(d) { return availableHeight - yScale(d[1]); });
|
||||
cols = rows.selectAll('div')
|
||||
.data(function(d) { return d.columns; })
|
||||
.enter().append('div')
|
||||
.attr('class', function(d,i){ return 'col c' + i; });
|
||||
|
||||
bars
|
||||
.attr('class', function(d,i) {
|
||||
return yValue(d,i) < 0 ? 'bar negative' : 'bar positive';
|
||||
})
|
||||
.style("fill", function () {
|
||||
return color;
|
||||
});
|
||||
//.style("stroke", function (d) {
|
||||
// return color(0);
|
||||
//});
|
||||
svg = cols.append('svg')
|
||||
.attr("width", outerWidth/n)
|
||||
.attr("height", outerHeight);
|
||||
|
||||
var g = svg.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
|
||||
return svg;
|
||||
}
|
||||
|
||||
g.select('g.bkgd')
|
||||
.append('rect')
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
g.select('g.x.axis')
|
||||
.attr('transform', 'translate(0,' + yScale.range()[0] + ')')
|
||||
function resize() {
|
||||
/* Update graph using new width and height */
|
||||
var elemWidth = parseInt(d3.select(elem).style("width"), 10),
|
||||
elemHeight = parseInt(d3.select(elem).style("padding-bottom"), 10),
|
||||
outerWidth = elemWidth / n,
|
||||
outerHeight = elemHeight / numRows,
|
||||
width = outerWidth - margin.left - margin.right,
|
||||
height = outerHeight - margin.top - margin.bottom;
|
||||
|
||||
d3.select(".row r").style("width", elemWidth).style("height", outerHeight);
|
||||
d3.select(".col c").style ("width", outerWidth).style("height", outerHeight);
|
||||
svg.attr("width", outerWidth).attr("height", outerHeight);
|
||||
|
||||
g.each(function(d) {
|
||||
var g = d3.select(this);
|
||||
|
||||
var yMax = d3.max(d.layers, function(d) { return d3.max(d.values, function(e) { return e.y; }); });
|
||||
var yStack = d3.max(d.layers, function(d) { return d3.max(d.values, function(e) { return e.y0 + e.y; }); });
|
||||
|
||||
// Change y/xScale domain based on stacktype
|
||||
// Change y/xScale domain based on stacktype
|
||||
if (stacktype === 'expand') { yScale.domain([0, 1]); }
|
||||
|
||||
if (stacktype === 'group' && yGroup) {
|
||||
yScale.domain([0, yGroupMax]);
|
||||
xScale.rangeRoundBands([0, width], 0.2);
|
||||
} else {
|
||||
yScale.domain([0, yMax]);
|
||||
xScale.rangeRoundBands([0, width], 0.2);
|
||||
}
|
||||
|
||||
if (stacktype === 'zero' && yGroup) {
|
||||
yScale.domain([0, yStackMax]);
|
||||
} else {
|
||||
yScale.domain([0, yStack]);
|
||||
}
|
||||
|
||||
/* Update the range of the scale with new width/height */
|
||||
if (stacktype === "group") { xScale.rangeRoundBands([0, width], 0.4); }
|
||||
else { xScale.rangeRoundBands([0, width], 0.1); }
|
||||
yScale.range([height, 0]).nice();
|
||||
xAxis.ticks(Math.max(width/50, 2));
|
||||
yAxis.ticks(Math.max(height/20, 2)).tickSize(-(width), 0);
|
||||
|
||||
if (width < 300 && height < 80) {
|
||||
g.select('.x.axis').style('display', 'none');
|
||||
} else {
|
||||
g.select('.x.axis').style('display', 'initial');
|
||||
g.select('.y.axis').style('display', 'initial');
|
||||
}
|
||||
|
||||
g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
g.selectAll(".bkgd").attr("width", width).attr("height", height);
|
||||
|
||||
/* Update the axis with the new scale */
|
||||
g.select('.x.axis')
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis);
|
||||
|
||||
g.select('g.y.axis')
|
||||
//.attr('transform', 'translate(-6,0)')
|
||||
.call(yAxis.tickSize(-availableWidth));
|
||||
g.select('.y.axis')
|
||||
.call(yAxis);
|
||||
|
||||
/* Force D3 to recalculate and update the line */
|
||||
if (stacktype === "group") {
|
||||
layer.selectAll("rect")
|
||||
.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); });
|
||||
}
|
||||
|
||||
g.selectAll('rect')
|
||||
.attr("width", xScale.rangeBand())
|
||||
.attr("x", function(d) { return xScale(d.x); })
|
||||
.attr("height", function(d) { return yScale(d.y0) - yScale(d.y0 + d.y); })
|
||||
.attr("y", function(d) { return yScale(d.y0 + d.y); });
|
||||
});
|
||||
}
|
||||
|
||||
function X(d) {
|
||||
return xScale(d[0]);
|
||||
}
|
||||
|
||||
function Y(d) {
|
||||
return yScale(d[1]);
|
||||
}
|
||||
|
||||
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.margin = function() {
|
||||
if (!args.margin) { return margin; }
|
||||
margin.top = typeof args.margin.top !== 'undefined' ? args.margin.top : margin.top;
|
||||
margin.right = typeof args.margin.right !== 'undefined' ? args.margin.right : margin.right;
|
||||
margin.bottom = typeof args.margin.bottom !== 'undefined' ? args.margin.bottom : margin.bottom;
|
||||
margin.left = typeof args.margin.left !== 'undefined' ? args.margin.left : margin.left;
|
||||
return margin;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
chart.width = function() {
|
||||
if (!args.width) { return width; }
|
||||
width = args.width;
|
||||
return width;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
chart.height = function() {
|
||||
if (!args.height) { return height; }
|
||||
height = args.height;
|
||||
return height;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return color; }
|
||||
bargap = _;
|
||||
chart.color = function() {
|
||||
if (!args.color) { return color; }
|
||||
color = args.color;
|
||||
return color;
|
||||
};
|
||||
|
||||
chart.bargap = function(_) {
|
||||
if (!arguments.length) { return bargap; }
|
||||
bargap = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xValue = function(_) {
|
||||
if (!arguments.length) { return xValue; }
|
||||
xValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yValue = function(_) {
|
||||
if (!arguments.length) { return yValue; }
|
||||
yValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return color; }
|
||||
color = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
|
||||
};
|
||||
191
src/bower_components/K4D3/src/modules/horizon.js
vendored
191
src/bower_components/K4D3/src/modules/horizon.js
vendored
|
|
@ -1,191 +0,0 @@
|
|||
|
||||
k4.horizon = function() {
|
||||
'use strict';
|
||||
|
||||
// Based on d3.horizon plugin by Jason Davies
|
||||
var width = 960,
|
||||
height = 40,
|
||||
bands = 1,
|
||||
duration = 0,
|
||||
mode = 'offset', // or mirror
|
||||
interpolate = 'linear', // or basis, monotone, step-before, etc.
|
||||
x = function(d) { return d[0]; },
|
||||
y = function(d) { return d[1]; },
|
||||
d3_horizonArea = d3.svg.area(),
|
||||
d3_horizonId = 0,
|
||||
color = d3.scale.linear()
|
||||
.domain([-1, 0, 0, 1])
|
||||
.range(['#08519c', '#bdd7e7', '#bae4b3', '#006d2c']);
|
||||
|
||||
// For each small multiple…
|
||||
function horizon(selection) {
|
||||
selection.each(function(d) {
|
||||
var g = d3.select(this),
|
||||
//n = 2 * bands + 1,
|
||||
xMin = Infinity,
|
||||
xMax = -Infinity,
|
||||
yMax = -Infinity,
|
||||
x0, // old x-scale
|
||||
y0, // old y-scale
|
||||
id; // unique id for paths
|
||||
|
||||
// Compute x- and y-values along with extents.
|
||||
var data = d.map(function(d, i) {
|
||||
var xValue = x.call(this, d, i),
|
||||
yValue = y.call(this, d, i);
|
||||
|
||||
if (xValue < xMin) { xMin = xValue; }
|
||||
if (xValue > xMax) { xMax = xValue; }
|
||||
if (-yValue > yMax) { yMax = -yValue; }
|
||||
if (yValue > yMax) { yMax = yValue; }
|
||||
|
||||
return [xValue, yValue];
|
||||
});
|
||||
|
||||
// Compute the new x- and y-scales, and transform.
|
||||
var x1 = d3.scale.linear().domain([xMin, xMax]).range([0, width]),
|
||||
y1 = d3.scale.linear().domain([0, yMax]).range([0, height * bands]),
|
||||
t1 = d3_horizonTransform(bands, height, mode), t0;
|
||||
|
||||
// Retrieve the old scales, if this is an update.
|
||||
if (this.__chart__) {
|
||||
x0 = this.__chart__.x;
|
||||
y0 = this.__chart__.y;
|
||||
t0 = this.__chart__.t;
|
||||
id = this.__chart__.id;
|
||||
} else {
|
||||
x0 = x1.copy();
|
||||
y0 = y1.copy();
|
||||
t0 = t1;
|
||||
id = ++d3_horizonId;
|
||||
}
|
||||
|
||||
g.append('rect')
|
||||
.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
// We'll use a defs to store the area path and the clip path.
|
||||
// defs are graphical objects to be defined for later reuse.
|
||||
var defs = g.selectAll('defs')
|
||||
.data([null]);
|
||||
|
||||
// The clip path is a simple rect.
|
||||
defs.enter().append('defs').append('clipPath')
|
||||
.attr('id', 'd3_horizon_clip' + id)
|
||||
.append('rect')
|
||||
.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
defs.select('rect').transition()
|
||||
.duration(duration)
|
||||
.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
// We'll use a container to clip all horizon layers at once.
|
||||
g.selectAll('g')
|
||||
.data([null])
|
||||
.enter().append('g')
|
||||
.attr('clip-path', 'url(#d3_horizon_clip' + id + ')');
|
||||
|
||||
// Instantiate each copy of the path with different transforms.
|
||||
var path = g.select('g').selectAll('path')
|
||||
.data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)), Number);
|
||||
|
||||
var d0 = d3_horizonArea
|
||||
.interpolate(interpolate)
|
||||
.x(function(d) { return x0(d[0]); })
|
||||
.y0(height * bands)
|
||||
.y1(function(d) { return height * bands - y0(d[1]); })
|
||||
(data);
|
||||
|
||||
var d1 = d3_horizonArea
|
||||
.x(function(d) { return x1(d[0]); })
|
||||
.y1(function(d) { return height * bands - y1(d[1]); })
|
||||
(data);
|
||||
|
||||
path.enter().append('path')
|
||||
.style('fill', color)
|
||||
.attr('transform', t0)
|
||||
.attr('d', d0);
|
||||
|
||||
path.transition()
|
||||
.duration(duration)
|
||||
.style('fill', color)
|
||||
.attr('transform', t1)
|
||||
.attr('d', d1);
|
||||
|
||||
path.exit().transition()
|
||||
.duration(duration)
|
||||
.attr('transform', t1)
|
||||
.attr('d', d1)
|
||||
.remove();
|
||||
|
||||
// Stash the new scales.
|
||||
this.__chart__ = {x: x1, y: y1, t: t1, id: id};
|
||||
});
|
||||
|
||||
d3.timer.flush();
|
||||
}
|
||||
|
||||
function d3_horizonTransform(bands, height, mode) {
|
||||
return mode === 'offset' ? function(d) { return 'translate(0,' + (d + (d < 0) - bands) * height + ')'; }
|
||||
: function(d) { return (d < 0 ? 'scale(1,-1)' : '') + 'translate(0,' + (d - bands) * height + ')'; };
|
||||
}
|
||||
|
||||
horizon.duration = function(_) {
|
||||
if (!arguments.length) { return duration; }
|
||||
duration = +_;
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.bands = function(_) {
|
||||
if (!arguments.length) { return bands; }
|
||||
bands = +_;
|
||||
color.domain([-bands, 0, 0, bands]);
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.mode = function(_) {
|
||||
if (!arguments.length) { return mode; }
|
||||
mode = _ + '';
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.colors = function(_) {
|
||||
if (!arguments.length) { return color.range(); }
|
||||
color.range(_);
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.interpolate = function(_) {
|
||||
if (!arguments.length) { return interpolate; }
|
||||
interpolate = _ + '';
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.x = function(_) {
|
||||
if (!arguments.length) { return x; }
|
||||
x = _;
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.y = function(_) {
|
||||
if (!arguments.length) { return y; }
|
||||
y = _;
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = +_;
|
||||
return horizon;
|
||||
};
|
||||
|
||||
horizon.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = +_;
|
||||
return horizon;
|
||||
};
|
||||
|
||||
return horizon;
|
||||
};
|
||||
182
src/bower_components/K4D3/src/modules/line.js
vendored
182
src/bower_components/K4D3/src/modules/line.js
vendored
|
|
@ -1,182 +0,0 @@
|
|||
|
||||
k4.line = function() {
|
||||
'use strict';
|
||||
|
||||
var margin = {top: 20, right: 50, bottom: 50, left: 50},
|
||||
width = 760,
|
||||
height = 120,
|
||||
getX = function(d) { return d[0]; },
|
||||
getY = function(d) { return d[1]; },
|
||||
getZ = function(d) { return d[2]; },
|
||||
interpolate = 'cardinal',
|
||||
xScale = d3.time.scale(),
|
||||
yScale = d3.scale.linear(),
|
||||
xAxis = d3.svg.axis()
|
||||
.scale(xScale)
|
||||
.orient('bottom')
|
||||
.ticks(10)
|
||||
.tickPadding(6),
|
||||
yAxis = d3.svg.axis()
|
||||
.scale(yScale)
|
||||
.orient('left')
|
||||
.ticks(10)
|
||||
.tickPadding(6),
|
||||
line = d3.svg.line()
|
||||
.x(function(d) { return xScale(d.x); })
|
||||
.y(function(d) { return yScale(d.y); }),
|
||||
color = d3.scale.category10();
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
|
||||
var innerWidth = width - margin.left - margin.right,
|
||||
innerHeight = height - margin.top - margin.bottom;
|
||||
|
||||
data = data.map(function(d, i) {
|
||||
return [getX.call(data, d, i), getY.call(data, d, i), getZ.call(data, d, i)];
|
||||
});
|
||||
|
||||
xScale
|
||||
.domain(d3.extent(data, function(d) { return d[0]; })).nice()
|
||||
.range([0, width - margin.left - margin.right]);
|
||||
|
||||
yScale
|
||||
.domain([0, d3.max(data, function(d) { return d[1]; })]).nice()
|
||||
.range([height - margin.top - margin.bottom, 0]);
|
||||
|
||||
line.interpolate(interpolate);
|
||||
|
||||
color.domain(data.map(function(d) { return d[2]; }));
|
||||
|
||||
var groups = color.domain().map(function(name) {
|
||||
data.forEach(function(d) {
|
||||
console.log(d[2] === name);
|
||||
if (d[2] === name) {
|
||||
return {
|
||||
name: name,
|
||||
values: {x: d[0], y: d[1]}
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
console.log(groups);
|
||||
|
||||
var svg = d3.select(this).selectAll('svg').data([data]);
|
||||
|
||||
var gEnter = svg.enter().append('svg').append('g');
|
||||
gEnter.append('rect').attr('class', 'background');
|
||||
gEnter.append('g').attr('class', 'line');
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'points');
|
||||
|
||||
svg
|
||||
.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
var g = svg.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
|
||||
|
||||
// Circles
|
||||
g.select('.points').selectAll('.points').append('circle')
|
||||
.data(data)
|
||||
.enter().append('circle')
|
||||
.attr('class', 'points')
|
||||
.attr('cx', X)
|
||||
.attr('cy', Y)
|
||||
.attr('r', 4.5)
|
||||
.style('fill', 'white')
|
||||
.style('fill-opacity', function () {
|
||||
return 1;
|
||||
})
|
||||
.style('stroke', function(d) {
|
||||
return typeof color === 'object' ? color[d] : color(d[2]);
|
||||
})
|
||||
.style('stroke-width', function () {
|
||||
return 1.5;
|
||||
});
|
||||
|
||||
g.select('.background')
|
||||
.attr('width', innerWidth)
|
||||
.attr('height', innerHeight);
|
||||
|
||||
g.select('.line').selectAll('.series').data(groups)
|
||||
.enter().append('path')
|
||||
.attr('class', 'series')
|
||||
.attr('d', function(d) { return line(d.values); })
|
||||
.attr('fill', 'none')
|
||||
.attr('stroke', function(d) {
|
||||
return typeof color === 'object' ? color[d.name] : color(d.name);
|
||||
})
|
||||
.attr('stoke-width', 3);
|
||||
|
||||
g.select('.x.axis')
|
||||
.attr('transform', 'translate(0,' + yScale.range()[0] + ')')
|
||||
.call(xAxis.tickSize(-innerHeight));
|
||||
|
||||
g.select('.y.axis')
|
||||
.call(yAxis.tickSize(-innerWidth));
|
||||
});
|
||||
}
|
||||
|
||||
function X(d) {
|
||||
return xScale(d[0]);
|
||||
}
|
||||
|
||||
function Y(d) {
|
||||
return yScale(d[1]);
|
||||
}
|
||||
|
||||
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.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) { return getX; }
|
||||
getX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) { return getY; }
|
||||
getY = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.z = function(_) {
|
||||
if (!arguments.length) { return getZ; }
|
||||
getZ = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.interpolate = function(_) {
|
||||
if (!arguments.length) { return interpolate; }
|
||||
interpolate = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return color; }
|
||||
color = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
};
|
||||
195
src/bower_components/K4D3/src/modules/map-flat.js
vendored
195
src/bower_components/K4D3/src/modules/map-flat.js
vendored
|
|
@ -1,195 +0,0 @@
|
|||
|
||||
k4.map = function() {
|
||||
'use strict';
|
||||
|
||||
var margin = {top: 10, right: 10, bottom: 10, left: 10},
|
||||
width = 700,
|
||||
height = 400,
|
||||
xValue = function(d) { return d[0]; },
|
||||
colorScale = d3.scale.quantile();
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
|
||||
var innerWidth = width - margin.left - margin.right,
|
||||
innerHeight = height - margin.top - margin.bottom;
|
||||
|
||||
// data = data.map(function(d, i) {
|
||||
// return [xValue.call(data, d, i), yValue.call(data, d, i)];
|
||||
// });
|
||||
|
||||
var svg = d3.select(this).selectAll('svg').data([data]);
|
||||
svg.enter().append('svg').attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
|
||||
// map vars
|
||||
var precision = 0.25;
|
||||
var colors = ['#ffebbc','#f8d294','#f2b96e','#ed9d4c','#e97f2e','#e55c13','#e02c00'];
|
||||
var colorScale = d3.scale.quantile()
|
||||
.domain([ 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0 ])
|
||||
.range(colors);
|
||||
|
||||
// projections
|
||||
//var projection = d3.geo.orthographic()
|
||||
// .scale(245)
|
||||
// .rotate([30.2,-41.1])
|
||||
// .translate([width / 2, height / 2])
|
||||
// .clipAngle(90)
|
||||
// .clipExtent([[1, 1], [width - 1, height - 1]])
|
||||
// .precision(0.1);
|
||||
|
||||
var projection = d3.geo.mercator()
|
||||
.scale( (width + 1) / 2 / Math.PI )
|
||||
.translate([width / 2, height / 1.55])
|
||||
//.clipAngle(90)
|
||||
.clipExtent([[1, 1], [width - 1, height - 1]])
|
||||
.precision(0.1);
|
||||
|
||||
var path = d3.geo.path()
|
||||
.projection(projection);
|
||||
|
||||
var graticule = d3.geo.graticule();
|
||||
|
||||
var fg, co, mousePoint = true;
|
||||
|
||||
|
||||
|
||||
//d3.json("../lib/json/world-110m.json", function(error, world) {
|
||||
|
||||
// console.log('MAP', error, world);
|
||||
// bkgd/water
|
||||
svg.append("path")
|
||||
.datum({type: "Sphere"})
|
||||
.attr("class", "fg water")
|
||||
.attr("d", path);
|
||||
|
||||
// graticule
|
||||
svg.append("path")
|
||||
.datum(graticule)
|
||||
.attr("class", "fg graticule")
|
||||
.attr("d", path);
|
||||
|
||||
// topojson land
|
||||
svg.insert("path")
|
||||
.datum(topojson.feature(data, data.objects.land))
|
||||
.attr("class", "fg land")
|
||||
.attr("d", path);
|
||||
|
||||
// add random data to country properties
|
||||
var countryData = topojson.feature(data, data.objects.countries).features;
|
||||
for (var i = 0; i < countryData.length; i++) {
|
||||
countryData[i].properties = {
|
||||
id: countryData[i].id,
|
||||
val: Math.random()
|
||||
};
|
||||
}
|
||||
|
||||
// topojson countries
|
||||
svg.selectAll("path.countries")
|
||||
.data(countryData)
|
||||
.enter().append("path")
|
||||
.attr("class", function(d) {
|
||||
return "fg countries id" + d.id;
|
||||
})
|
||||
.style("fill", function(d) {
|
||||
return colorScale(d.properties.val);
|
||||
})
|
||||
.attr("d", path);
|
||||
|
||||
// edge
|
||||
svg.append("path")
|
||||
.datum({type: "Sphere"})
|
||||
.attr("class", "fg edge")
|
||||
.attr("d", path);
|
||||
|
||||
|
||||
fg = svg.selectAll(".fg");
|
||||
co = svg.selectAll(".countries");
|
||||
|
||||
// call zoom
|
||||
fg.call(d3.behavior.zoom()
|
||||
.translate(projection.translate())
|
||||
.scale(projection.scale())
|
||||
.scaleExtent([100, 300])
|
||||
.on("zoom", redraw));
|
||||
|
||||
|
||||
// hover
|
||||
co.on("mouseover", function(n) {
|
||||
console.log("id:", n.properties.id, "val:", n.properties.val);
|
||||
// bring to front by sort
|
||||
co.sort(function(a, b) {
|
||||
if (a.id === n.id) {
|
||||
return 1;
|
||||
} else {
|
||||
if (b.id === n.id) {
|
||||
return -1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// get globe rotate lat, long
|
||||
fg.on("mousedown", function(n) {
|
||||
console.log("Clicked at:", projection.invert(d3.mouse(this))[1], projection.invert(d3.mouse(this))[0]);
|
||||
})
|
||||
|
||||
// get globe rotate lat, long
|
||||
fg.on("mouseup", function(n) {
|
||||
console.log("Map center:", -projection.rotate()[1], -projection.rotate()[0]);
|
||||
})
|
||||
|
||||
// zoom
|
||||
//fg.call(d3.geo.zoom()
|
||||
// .projection(projection)
|
||||
// .scaleExtent([projection.scale() * 0.6, projection.scale() * 8])
|
||||
// .on("zoom.redraw", function() {
|
||||
// d3.event.sourceEvent.preventDefault();
|
||||
// fg.attr("d", path);
|
||||
// })
|
||||
//);
|
||||
|
||||
//});
|
||||
|
||||
function redraw() {
|
||||
if (d3.event) {
|
||||
projection
|
||||
.translate(d3.event.translate)
|
||||
.scale(d3.event.scale);
|
||||
|
||||
}
|
||||
svg.selectAll("path").attr("d", path);
|
||||
var t = projection.translate();
|
||||
//xAxis.attr("x1", t[0]).attr("x2", t[0]);
|
||||
//yAxis.attr("y1", t[1]).attr("y2", t[1]);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
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.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
};
|
||||
266
src/bower_components/K4D3/src/modules/map-globe.js
vendored
266
src/bower_components/K4D3/src/modules/map-globe.js
vendored
|
|
@ -1,266 +0,0 @@
|
|||
|
||||
k4.map = function() {
|
||||
'use strict';
|
||||
|
||||
var margin = {top: 10, right: 10, bottom: 10, left: 10},
|
||||
width = 600,
|
||||
height = 600,
|
||||
scale = 245,
|
||||
// zValue = function(d) { return d[0]; },
|
||||
colorScale = d3.scale.quantile();
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
|
||||
var innerWidth = width - margin.left - margin.right,
|
||||
innerHeight = height - margin.top - margin.bottom;
|
||||
|
||||
// data = data.map(function(d, i) {
|
||||
// return [zValue.call(data, d, i), yValue.call(data, d, i)];
|
||||
// });
|
||||
|
||||
var svg = d3.select(this).selectAll('svg').data([data]);
|
||||
svg.enter().append('svg').attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
// map vars
|
||||
var precision = 0.25;
|
||||
var colors = ['#ffebbc','#f8d294','#f2b96e','#ed9d4c','#e97f2e','#e55c13','#e02c00'];
|
||||
var colorScale = d3.scale.quantile()
|
||||
.domain([ 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0 ])
|
||||
.range(colors);
|
||||
|
||||
// projection
|
||||
var projection = d3.geo.orthographic()
|
||||
.scale(scale)
|
||||
.translate([width/2, height/2])
|
||||
.precision(0.1)
|
||||
.rotate([52.8, -49.6])
|
||||
.clipAngle(90)
|
||||
.clipExtent([[1, 1], [width - 1, height - 1]])
|
||||
|
||||
// scales for fading/sizing labels/points
|
||||
var opacityScale = d3.scale.linear()
|
||||
.domain([200, 150])
|
||||
.range([1,0]);
|
||||
|
||||
var ptSizeScale = d3.scale.linear()
|
||||
.domain([500, 150])
|
||||
.range([12,7]);
|
||||
|
||||
var path = d3.geo.path().projection(projection).pointRadius(2);
|
||||
|
||||
var graticule = d3.geo.graticule();
|
||||
|
||||
var win = d3.select(window)
|
||||
.on('mousemove', mouseMove)
|
||||
.on('mouseup', mouseUp);
|
||||
|
||||
var svg = d3.select('body')
|
||||
.append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.on('mousedown', mouseDown)
|
||||
.call(d3.behavior.zoom()
|
||||
.translate(projection.translate())
|
||||
.scale(projection.scale())
|
||||
.scaleExtent([50,500])
|
||||
.on('zoom', function() {
|
||||
reZoom();
|
||||
})
|
||||
);
|
||||
|
||||
// graticule
|
||||
svg.append('path')
|
||||
.datum(graticule)
|
||||
.attr('class', 'graticule noclick')
|
||||
.attr('d', path);
|
||||
|
||||
// land shape
|
||||
svg.append('path')
|
||||
.datum(topojson.object(world, world.objects.land))
|
||||
.attr('class', 'land noclick')
|
||||
.attr('d', path);
|
||||
|
||||
// shading sphere
|
||||
//svg.append('path')
|
||||
// .datum({type: 'Sphere'})
|
||||
// .attr('class','noclick')
|
||||
// .style('fill', 'url(#globe_shading)');
|
||||
|
||||
// country shapes
|
||||
svg.append('g').attr('class', 'countries')
|
||||
.selectAll('path')
|
||||
.data(topojson.object(world, world.objects.countries).geometries)
|
||||
.enter().append('path')
|
||||
.attr('class', 'countries')
|
||||
.attr('d', path)
|
||||
.on('mouseover', function(d) {
|
||||
console.log('country id: ' + d.id);
|
||||
});
|
||||
|
||||
// edge sphere
|
||||
svg.append('path')
|
||||
.datum({type: 'Sphere'})
|
||||
.attr('class', 'edge noclick')
|
||||
.attr('d', path);
|
||||
|
||||
|
||||
// place points
|
||||
svg.append('g').attr('class','points noclick')
|
||||
.selectAll('text')
|
||||
.data(places.features)
|
||||
.enter().append('path')
|
||||
.attr('class', 'point')
|
||||
.attr('d', path);
|
||||
|
||||
// place labels
|
||||
svg.append('g').attr('class','labels noclick')
|
||||
.selectAll('text')
|
||||
.data(places.features)
|
||||
.enter().append('text')
|
||||
.attr('class', 'label')
|
||||
.text(function(d) {
|
||||
return d.properties.name;
|
||||
});
|
||||
|
||||
reDraw();
|
||||
|
||||
//
|
||||
function positionLabels() {
|
||||
|
||||
var centerPos = projection.invert([width/2,height/2]);
|
||||
var arc = d3.geo.greatArc();
|
||||
var s = projection.scale();
|
||||
|
||||
// labels
|
||||
svg.selectAll('.label')
|
||||
.attr('text-anchor',function(d) {
|
||||
var x = projection(d.geometry.coordinates)[0];
|
||||
if (x < (width/2) - 20) {
|
||||
return 'end';
|
||||
} else if (x < (width/2) + 20) {
|
||||
return 'middle';
|
||||
} else {
|
||||
return 'start';
|
||||
}
|
||||
})
|
||||
.attr('transform', function(d) {
|
||||
var loc = projection(d.geometry.coordinates),
|
||||
x = loc[0],
|
||||
y = loc[1],
|
||||
xoffset = 6,
|
||||
yoffset = -3;
|
||||
if (x < width/2) {
|
||||
xoffset = -6;
|
||||
}
|
||||
if (x < (width/2) - 20) {
|
||||
yoffset = -1;
|
||||
} else if (x < (width/2) + 20) {
|
||||
yoffset = -6;
|
||||
} else {
|
||||
yoffset = -1;
|
||||
}
|
||||
return 'translate(' + (x + xoffset) + ',' + (y + yoffset) + ')';
|
||||
})
|
||||
.style('opacity', function() {
|
||||
return opacityScale(s);
|
||||
})
|
||||
.style('font-size', function() {
|
||||
return ptSizeScale(s);
|
||||
})
|
||||
.style('display',function(d) {
|
||||
var dist = arc.distance({source: d.geometry.coordinates, target: centerPos});
|
||||
if (dist > 1.57) {
|
||||
return 'none';
|
||||
} else {
|
||||
return 'inline';
|
||||
}
|
||||
});
|
||||
|
||||
// points
|
||||
svg.selectAll('.point')
|
||||
.style('opacity', function() {
|
||||
return opacityScale(s);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function reDraw() {
|
||||
svg.selectAll('path').attr('d', path);
|
||||
positionLabels();
|
||||
// console.log('Map center: ', -projection.rotate()[1], -projection.rotate()[0]);
|
||||
}
|
||||
|
||||
function reZoom() {
|
||||
if (d3.event) { projection.scale(d3.event.scale); }
|
||||
svg.selectAll('*').attr('d', path);
|
||||
positionLabels();
|
||||
// console.log('Map scale: ', d3.event.scale);
|
||||
}
|
||||
|
||||
// window mousemove
|
||||
function mouseMove() {
|
||||
if (m0) {
|
||||
// limit vertical rotation between 55 & -55
|
||||
var m1 = [d3.event.pageX, d3.event.pageY],
|
||||
o1 = [o0[0] + (m1[0] - m0[0]) / 6, o0[1] + (m0[1] - m1[1]) / 6];
|
||||
if (o1[1] > 55) {
|
||||
o1[1] = 55;
|
||||
}
|
||||
if (o1[1] < -55) {
|
||||
o1[1] = -55;
|
||||
}
|
||||
projection.rotate(o1);
|
||||
reDraw();
|
||||
}
|
||||
}
|
||||
|
||||
// window mouseup
|
||||
function mouseUp() {
|
||||
if (m0) {
|
||||
mouseMove();
|
||||
m0 = null;
|
||||
}
|
||||
}
|
||||
|
||||
// svg mousedown
|
||||
var m0, o0;
|
||||
function mouseDown() {
|
||||
m0 = [d3.event.pageX, d3.event.pageY];
|
||||
o0 = projection.rotate();
|
||||
d3.event.preventDefault();
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
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.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.scale = function(_) {
|
||||
if (!arguments.length) { return scale; }
|
||||
scale = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
};
|
||||
332
src/bower_components/K4D3/src/modules/map.js
vendored
332
src/bower_components/K4D3/src/modules/map.js
vendored
|
|
@ -1,332 +0,0 @@
|
|||
|
||||
k4.map = function() {
|
||||
'use strict';
|
||||
|
||||
var margin = {top: 10, right: 10, bottom: 10, left: 10},
|
||||
width = 600,
|
||||
height = 600,
|
||||
scale = 245,
|
||||
shading = false,
|
||||
labels = true,
|
||||
watercolor = "#ddd",
|
||||
countrycolor = "#ddd",
|
||||
pointcolor = "#ddd",
|
||||
rotate = [52.8, -49.6],
|
||||
colorScale = d3.scale.quantile();
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
|
||||
var innerWidth = width - margin.left - margin.right,
|
||||
innerHeight = height - margin.top - margin.bottom;
|
||||
|
||||
var svg = d3.select(this).selectAll('svg').data([0]);
|
||||
svg.enter().append('svg').attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
// map vars
|
||||
var colors = ['#ffebbc','#f8d294','#f2b96e','#ed9d4c','#e97f2e','#e55c13','#e02c00'];
|
||||
var colorScale = d3.scale.quantile()
|
||||
.domain([ 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0 ])
|
||||
.range(colors);
|
||||
|
||||
// projection
|
||||
var projection = d3.geo.orthographic()
|
||||
.scale(scale)
|
||||
.translate([width/2, height/2])
|
||||
.precision(0.1)
|
||||
.rotate(rotate)
|
||||
.clipAngle(90)
|
||||
.clipExtent([[1, 1], [width - 1, height - 1]]);
|
||||
|
||||
// scales for fading/sizing labels/points
|
||||
var opacityScale = d3.scale.linear()
|
||||
.domain([200, 150])
|
||||
.range([1,0]);
|
||||
|
||||
var ptSizeScale = d3.scale.linear()
|
||||
.domain([500, 150])
|
||||
.range([12,7]);
|
||||
|
||||
var path = d3.geo.path().projection(projection).pointRadius(2);
|
||||
|
||||
var graticule = d3.geo.graticule();
|
||||
|
||||
// map data
|
||||
var land = data[0];
|
||||
var countries = data[1];
|
||||
var places = data[2];
|
||||
|
||||
//var win = d3.select(window)
|
||||
// .on('mousemove', mouseMove)
|
||||
// .on('mouseup', mouseUp);
|
||||
|
||||
svg.on('mousemove', mouseMove)
|
||||
.on('mouseup', mouseUp)
|
||||
.on('mousedown', mouseDown)
|
||||
.call(d3.behavior.zoom()
|
||||
.translate(projection.translate())
|
||||
.scale(projection.scale())
|
||||
.scaleExtent([50,500])
|
||||
.on('zoom', function() {
|
||||
reZoom();
|
||||
})
|
||||
);
|
||||
|
||||
// shading def
|
||||
var globe_shading = svg.append("defs")
|
||||
.append("radialGradient")
|
||||
.attr("id", "globe_shading")
|
||||
.attr("cx", "50%")
|
||||
.attr("cy", "40%");
|
||||
globe_shading.append("stop")
|
||||
.attr("offset","50%")
|
||||
.attr("stop-color", "#fff")
|
||||
.attr("stop-opacity","0.2");
|
||||
globe_shading.append("stop")
|
||||
.attr("offset","100%")
|
||||
.attr("stop-color", "#253d56")
|
||||
.attr("stop-opacity","0.4");
|
||||
|
||||
// water sphere
|
||||
svg.append("path")
|
||||
.datum({type: "Sphere"})
|
||||
.attr("class", "water noclick")
|
||||
.style('fill', watercolor)
|
||||
.attr("d", path);
|
||||
|
||||
// graticule
|
||||
svg.append('path')
|
||||
.datum(graticule)
|
||||
.attr('class', 'graticule noclick')
|
||||
.attr('d', path);
|
||||
|
||||
// land shape
|
||||
svg.append('path')
|
||||
.datum(land)
|
||||
.attr('class', 'land noclick')
|
||||
.attr('d', path);
|
||||
|
||||
// shading sphere - optional
|
||||
if (shading) {
|
||||
svg.append('path')
|
||||
.datum({type: 'Sphere'})
|
||||
.attr('class','noclick')
|
||||
.style('fill', 'url(#globe_shading)');
|
||||
}
|
||||
|
||||
// country shapes
|
||||
svg.append('g')
|
||||
.attr('class', 'countries')
|
||||
.selectAll('path')
|
||||
.data(countries)
|
||||
.enter().append('path')
|
||||
.attr('class', 'countries')
|
||||
.attr('d', path)
|
||||
.style('fill', countrycolor)
|
||||
.on('mouseover', function(d) {
|
||||
console.log('country id: ' + d.id);
|
||||
});
|
||||
|
||||
// edge sphere
|
||||
svg.append('path')
|
||||
.datum({type: 'Sphere'})
|
||||
.attr('class', 'edge noclick')
|
||||
.attr('d', path);
|
||||
|
||||
// place points
|
||||
svg.append('g').attr('class','points noclick')
|
||||
.selectAll('text')
|
||||
.data(places)
|
||||
.enter().append('path')
|
||||
.attr('class', 'point')
|
||||
.style('fill', pointcolor)
|
||||
.attr('d', path);
|
||||
|
||||
// place labels
|
||||
svg.append('g').attr('class','labels noclick')
|
||||
.selectAll('text')
|
||||
.data(places)
|
||||
.enter().append('text')
|
||||
.attr('class', 'label')
|
||||
.text(function(d) {
|
||||
return d.properties.name;
|
||||
});
|
||||
|
||||
reDraw();
|
||||
|
||||
//
|
||||
function positionLabels() {
|
||||
|
||||
var centerPos = projection.invert([width/2,height/2]);
|
||||
var arc = d3.geo.greatArc();
|
||||
var s = projection.scale();
|
||||
|
||||
// labels
|
||||
svg.selectAll('.label')
|
||||
.attr('text-anchor',function(d) {
|
||||
var x = projection(d.geometry.coordinates)[0];
|
||||
if (x < (width/2) - 20) {
|
||||
return 'end';
|
||||
} else if (x < (width/2) + 20) {
|
||||
return 'middle';
|
||||
} else {
|
||||
return 'start';
|
||||
}
|
||||
})
|
||||
.attr('transform', function(d) {
|
||||
var loc = projection(d.geometry.coordinates),
|
||||
x = loc[0],
|
||||
y = loc[1],
|
||||
xoffset = 6,
|
||||
yoffset = -3;
|
||||
if (x < width/2) {
|
||||
xoffset = -6;
|
||||
}
|
||||
if (x < (width/2) - 20) {
|
||||
yoffset = -1;
|
||||
} else if (x < (width/2) + 20) {
|
||||
yoffset = -6;
|
||||
} else {
|
||||
yoffset = -1;
|
||||
}
|
||||
return 'translate(' + (x + xoffset) + ',' + (y + yoffset) + ')';
|
||||
})
|
||||
.style('opacity', function() {
|
||||
return opacityScale(s);
|
||||
})
|
||||
.style('font-size', function() {
|
||||
return ptSizeScale(s);
|
||||
})
|
||||
.style('display',function(d) {
|
||||
var dist = arc.distance({source: d.geometry.coordinates, target: centerPos});
|
||||
if (dist > 1.57) {
|
||||
return 'none';
|
||||
} else {
|
||||
return 'inline';
|
||||
}
|
||||
});
|
||||
|
||||
// points
|
||||
svg.selectAll('.point')
|
||||
.style('opacity', function() {
|
||||
return opacityScale(s);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function reDraw() {
|
||||
svg.selectAll('path').attr('d', path);
|
||||
positionLabels();
|
||||
console.log('Map center: ', -projection.rotate()[1], -projection.rotate()[0]);
|
||||
}
|
||||
|
||||
function reZoom() {
|
||||
if (d3.event) { projection.scale(d3.event.scale); }
|
||||
svg.selectAll('*')
|
||||
.attr('d', path);
|
||||
positionLabels();
|
||||
console.log('Map scale: ', d3.event.scale);
|
||||
}
|
||||
|
||||
// window mousemove
|
||||
function mouseMove() {
|
||||
if (m0) {
|
||||
// limit vertical rotation between 55 & -55
|
||||
var m1 = [d3.event.pageX, d3.event.pageY],
|
||||
o1 = [o0[0] + (m1[0] - m0[0]) / 6, o0[1] + (m0[1] - m1[1]) / 6];
|
||||
if (o1[1] > 55) {
|
||||
o1[1] = 55;
|
||||
}
|
||||
if (o1[1] < -55) {
|
||||
o1[1] = -55;
|
||||
}
|
||||
projection.rotate(o1);
|
||||
reDraw();
|
||||
}
|
||||
}
|
||||
|
||||
// window mouseup
|
||||
function mouseUp() {
|
||||
if (m0) {
|
||||
mouseMove();
|
||||
m0 = null;
|
||||
}
|
||||
}
|
||||
|
||||
// svg mousedown
|
||||
var m0, o0;
|
||||
function mouseDown() {
|
||||
m0 = [d3.event.pageX, d3.event.pageY];
|
||||
o0 = projection.rotate();
|
||||
d3.event.preventDefault();
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
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.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.rotate = function(_) {
|
||||
if (!arguments.length) { return rotate; }
|
||||
rotate = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.scale = function(_) {
|
||||
if (!arguments.length) { return scale; }
|
||||
scale = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.shading = function(_) {
|
||||
if (!arguments.length) { return shading; }
|
||||
shading = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.labels = function(_) {
|
||||
if (!arguments.length) { return labels; }
|
||||
labels = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.watercolor = function(_) {
|
||||
if (!arguments.length) { return watercolor; }
|
||||
watercolor = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.countrycolor = function(_) {
|
||||
if (!arguments.length) { return countrycolor; }
|
||||
countrycolor = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.pointcolor = function(_) {
|
||||
if (!arguments.length) { return pointcolor; }
|
||||
pointcolor = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
};
|
||||
116
src/bower_components/K4D3/src/modules/pie.js
vendored
116
src/bower_components/K4D3/src/modules/pie.js
vendored
|
|
@ -1,116 +0,0 @@
|
|||
|
||||
k4.pie = function() {
|
||||
'use strict';
|
||||
|
||||
var width = 500,
|
||||
height = 500,
|
||||
radius = Math.min(width, height)/ 2,
|
||||
sort = null,
|
||||
label = function(d) { return d[0]; },
|
||||
value = function(d) { return d[1]; },
|
||||
outerRadius = radius - 10,
|
||||
innerRadius = 0,
|
||||
color = d3.scale.category10(),
|
||||
arc = d3.svg.arc(),
|
||||
pie = d3.layout.pie();
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
data = data.map(function(d, i) {
|
||||
return [label.call(data, d, i), value.call(data, d, i)];
|
||||
});
|
||||
|
||||
arc
|
||||
.outerRadius(outerRadius)
|
||||
.innerRadius(innerRadius);
|
||||
|
||||
pie
|
||||
.sort(sort)
|
||||
.value(function(d) { return d[1]; });
|
||||
|
||||
var svg = d3.select(this).append('svg');
|
||||
|
||||
svg
|
||||
.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
var gEnter = svg.append('g')
|
||||
.attr('transform', 'translate(' + width/2 + ', ' + height/2 + ')');
|
||||
|
||||
var g = gEnter.selectAll('.arc')
|
||||
.data(pie(data))
|
||||
.enter().append('g')
|
||||
.attr('class', 'arc')
|
||||
.style('stroke-width', 2);
|
||||
|
||||
g.append('path')
|
||||
.attr('d', arc)
|
||||
.style('fill', function (d) {
|
||||
return color(d.data[0]);
|
||||
});
|
||||
|
||||
g.append('text')
|
||||
.attr('transform', function (d) { return 'translate(' + arc.centroid(d) + ')'; })
|
||||
.attr('dy', '.35em')
|
||||
.style('text-anchor', 'middle')
|
||||
.style('fill', 'white')
|
||||
.text(function(d) { console.log(d); return d.data[0]; });
|
||||
});
|
||||
}
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.radius = function(_) {
|
||||
if (!arguments.length) { return radius; }
|
||||
radius = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.sort = function(_) {
|
||||
if (!arguments.length) { return sort; }
|
||||
sort = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.label = function(_) {
|
||||
if (!arguments.length) { return label; }
|
||||
label = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.value = function(_) {
|
||||
if (!arguments.length) { return value; }
|
||||
value = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.outerRadius = function(_) {
|
||||
if (!arguments.length) { return outerRadius; }
|
||||
outerRadius = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.innerRadius = function(_) {
|
||||
if (!arguments.length) { return innerRadius; }
|
||||
innerRadius = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return color; }
|
||||
color = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
};
|
||||
163
src/bower_components/K4D3/src/modules/scatterplot.js
vendored
163
src/bower_components/K4D3/src/modules/scatterplot.js
vendored
|
|
@ -1,163 +0,0 @@
|
|||
|
||||
k4.scatterplot = function() {
|
||||
'use strict';
|
||||
|
||||
var margin = {top: 20, right: 20, bottom: 20, left: 50},
|
||||
width = 500,
|
||||
height = 500,
|
||||
xValue = function(d) { return d[0]; }, // x axis point
|
||||
yValue = function(d) { return d[1]; }, // y axis point
|
||||
zValue = function(d) { return d[2]; }, // z for radius
|
||||
xScale = d3.scale.linear(),
|
||||
yScale = d3.scale.linear(),
|
||||
zScale = d3.scale.linear(),
|
||||
xAxis = d3.svg.axis()
|
||||
.scale(xScale)
|
||||
.orient('bottom')
|
||||
.tickSize(height)
|
||||
.tickPadding(6)
|
||||
.ticks(10),
|
||||
yAxis = d3.svg.axis()
|
||||
.scale(yScale)
|
||||
.orient('left')
|
||||
.tickSize(width)
|
||||
.tickPadding(6)
|
||||
.ticks(10),
|
||||
color = d3.scale.category10();
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
// console.log(data);
|
||||
|
||||
var availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
//container = d3.select(this);
|
||||
|
||||
data = data.map(function(d, i) {
|
||||
return [xValue.call(data, d, i), yValue.call(data, d, i), zValue.call(data, d, i)];
|
||||
});
|
||||
|
||||
xScale
|
||||
.domain([0, d3.max(data, function(d) { return d[0]; })]).nice()
|
||||
.range([0, availableWidth]);
|
||||
|
||||
yScale
|
||||
.domain([0, d3.max(data, function(d) { return d[1]; })]).nice()
|
||||
.range([availableHeight, 0]);
|
||||
|
||||
zScale
|
||||
.domain([0, d3.max(data, function(d) { return d[2]; })])
|
||||
.range([2, 10]); // change for sqrt
|
||||
|
||||
var svg = d3.select(this).selectAll('svg').data([data]);
|
||||
|
||||
var gEnter = svg.enter().append('svg').append('g').attr('class', 'inner');
|
||||
gEnter.append('g').attr('class', 'bkgd');
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'points');
|
||||
|
||||
svg.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
var vertices = gEnter.select('g.points')
|
||||
.selectAll('.vertices')
|
||||
.data(data)
|
||||
.enter().append('circle')
|
||||
.attr('class', 'vertices');
|
||||
//vertices.exit().remove();
|
||||
vertices.attr('cx', function(d) {
|
||||
return xScale(d[0]);
|
||||
})
|
||||
.attr('cy', function(d) {
|
||||
return yScale(d[1]);
|
||||
})
|
||||
.attr('r', function(d) {
|
||||
return zScale(d[2]);
|
||||
})
|
||||
.style('fill', function (d) {
|
||||
return color(d[2]);
|
||||
})
|
||||
.style('fill-opacity', function () {
|
||||
return 0.4;
|
||||
})
|
||||
.style('stroke', function (d) {
|
||||
return color(d[2]);
|
||||
})
|
||||
.style('stroke-width', function () {
|
||||
return 1.5;
|
||||
});
|
||||
|
||||
var g = svg.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
|
||||
|
||||
g.select('g.bkgd')
|
||||
.append('rect')
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
g.select('g.x.axis')
|
||||
.attr('transform', 'translate(0,' + yScale.range()[0] + ')')
|
||||
.call(xAxis.tickSize(-availableHeight));
|
||||
|
||||
g.select('g.y.axis')
|
||||
.call(yAxis.tickSize(-availableWidth));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function X(d) {
|
||||
return xScale(d[0]);
|
||||
}
|
||||
|
||||
function Y(d) {
|
||||
return yScale(d[1]);
|
||||
}
|
||||
|
||||
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.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xValue = function(_) {
|
||||
if (!arguments.length) { return xValue; }
|
||||
xValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yValue = function(_) {
|
||||
if (!arguments.length) { return yValue; }
|
||||
yValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.zValue = function(_) {
|
||||
if (!arguments.length) { return zValue; }
|
||||
zValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return color; }
|
||||
color = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
|
||||
k4.sparkline = function() {
|
||||
'use strict';
|
||||
|
||||
var margin = {top: 20, right: 20, bottom: 20, left: 50},
|
||||
width = 760,
|
||||
height = 120,
|
||||
xValue = function(d) { return d[0]; },
|
||||
yValue = function(d) { return d[1]; },
|
||||
interpolate = 'linear',
|
||||
xScale = d3.time.scale(),
|
||||
yScale = d3.scale.linear(),
|
||||
line = d3.svg.line()
|
||||
.x(X)
|
||||
.y(Y);
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
data = data.map(function(d, i) {
|
||||
return [xValue.call(data, d, i), yValue.call(data, d, i)];
|
||||
});
|
||||
console.log(data);
|
||||
|
||||
xScale
|
||||
.domain(d3.extent(data, function(d) { return d[0]; }))
|
||||
.range([0, width - margin.left - margin.right]);
|
||||
|
||||
yScale
|
||||
.domain([0, d3.max(data, function(d) { return d[1]; })])
|
||||
.range([height - margin.top - margin.bottom, 0]);
|
||||
|
||||
line.interpolate(interpolate);
|
||||
|
||||
var svg = d3.select(this).selectAll('svg').data([data]);
|
||||
|
||||
var gEnter = svg.enter().append('svg').append('g')
|
||||
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
|
||||
|
||||
gEnter.append('path')
|
||||
.attr('class', 'sparkline')
|
||||
.attr('d', line);
|
||||
|
||||
svg.attr('width', width)
|
||||
.attr('height', height);
|
||||
});
|
||||
}
|
||||
|
||||
function X(d) {
|
||||
return xScale(d[0]);
|
||||
}
|
||||
|
||||
function Y(d) {
|
||||
return yScale(d[1]);
|
||||
}
|
||||
|
||||
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.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) { return xValue; }
|
||||
xValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) { return yValue; }
|
||||
yValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.interpolate = function (_) {
|
||||
if (!arguments.length) { return interpolate; }
|
||||
interpolate = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
|
||||
k4.spiderChart = function() {
|
||||
'use strict';
|
||||
|
||||
};
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
|
||||
k4.sunburst = function() {
|
||||
'use strict';
|
||||
|
||||
var width = 960,
|
||||
height = 700,
|
||||
radius = Math.min(width, height) / 2,
|
||||
color = d3.scale.category20c(),
|
||||
x = d3.scale.linear()
|
||||
.range([0, 2 * Math.PI]),
|
||||
y = d3.scale.sqrt()
|
||||
.range([0, radius]),
|
||||
value = function(d) { return 1; },
|
||||
partition = d3.layout.partition(),
|
||||
arc = d3.svg.arc()
|
||||
.startAngle(function(d) { return d.x; })
|
||||
.endAngle(function(d) { return d.x + d.dx; })
|
||||
.innerRadius(function(d) { return Math.sqrt(d.y); })
|
||||
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var svg = d3.select(this).append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.append('g')
|
||||
.attr('transform', 'translate(' + width/2 + ',' + height * 0.52 + ')');
|
||||
|
||||
partition
|
||||
.sort(null)
|
||||
.size([2 * Math.PI, radius * radius])
|
||||
.value(value);
|
||||
|
||||
svg.datum(data).selectAll('path')
|
||||
.data(partition.nodes)
|
||||
.enter().append('path')
|
||||
.attr('display', function(d) { return d.depth ? null : "none"; })
|
||||
.attr('d', arc)
|
||||
.style('stroke', '#fff')
|
||||
.style('fill', function(d) { return color((d.children ? d : d.parent).name); })
|
||||
.style('fill-rule', 'evenodd');
|
||||
});
|
||||
}
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.radius = function(_) {
|
||||
if (!arguments.length) { return radius; }
|
||||
radius = _;
|
||||
return radius;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return color; }
|
||||
color = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) { return xValue; }
|
||||
xValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) { return yValue; }
|
||||
yValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.value = function(_) {
|
||||
if (!arguments.length) { return value; }
|
||||
value = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
};
|
||||
80
src/bower_components/K4D3/src/modules/table.js
vendored
80
src/bower_components/K4D3/src/modules/table.js
vendored
|
|
@ -1,80 +0,0 @@
|
|||
|
||||
k4.table = function() {
|
||||
'use strict';
|
||||
|
||||
var row = function(d) { return d; },
|
||||
column = function(d) { return d3.keys(d[0]); },
|
||||
columns;
|
||||
|
||||
function table(selection) {
|
||||
selection.each(function(data) {
|
||||
|
||||
columns = column.call(this, data);
|
||||
|
||||
data = row.call(this, data);
|
||||
|
||||
var table = d3.select(this).append('table')
|
||||
.attr('id', 'data-table')
|
||||
.attr('class', 'table table-striped table-bordered table-hover')
|
||||
.attr('cellpadding', 0)
|
||||
.attr('cellspacing', 0)
|
||||
.attr('border', 0)
|
||||
.style('border-collapse', 'collapse');
|
||||
|
||||
var thead = table.append('thead')
|
||||
.attr('class', 'sorting');
|
||||
|
||||
var tbody = table.append('tbody');
|
||||
//tfoot = table.append('tfoot');
|
||||
|
||||
// append the header row
|
||||
thead.append('tr')
|
||||
.selectAll('th')
|
||||
.data(columns)
|
||||
.enter()
|
||||
.append('th')
|
||||
.text(function(column) { return column; })
|
||||
.style('border', '1px black solid')
|
||||
.style('padding', '5px');
|
||||
|
||||
// create a row for each object in the data
|
||||
var rows = tbody.selectAll('tr')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('tr');
|
||||
|
||||
// create a cell in each row for each column
|
||||
rows.selectAll('td')
|
||||
.data(function(row) {
|
||||
return columns.map(function(column) {
|
||||
return {column: column, value: row[column]};
|
||||
});
|
||||
})
|
||||
.enter()
|
||||
.append('td')
|
||||
.text(function(d) { return d.value; })
|
||||
.style('border', '1px black solid')
|
||||
.style('padding', '5px');
|
||||
|
||||
// uppercase the column headers
|
||||
table.selectAll('thead th')
|
||||
.text(function(column) {
|
||||
return column.charAt(0).toUpperCase() + column.substr(1);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
table.row = function(_) {
|
||||
if (!arguments.length) { return row; }
|
||||
row = _;
|
||||
return table;
|
||||
};
|
||||
|
||||
table.column = function(_) {
|
||||
if (!arguments.length) { return column; }
|
||||
column = _;
|
||||
return table;
|
||||
};
|
||||
|
||||
return table;
|
||||
};
|
||||
231
src/bower_components/K4D3/src/modules/timeBars.js
vendored
231
src/bower_components/K4D3/src/modules/timeBars.js
vendored
|
|
@ -1,231 +0,0 @@
|
|||
|
||||
k4.timebars = function() {
|
||||
'use strict';
|
||||
|
||||
var customTimeFormat = d3.time.format.multi([
|
||||
['.%L', function(d) { return d.getMilliseconds(); }],
|
||||
[':%S', function(d) { return d.getSeconds(); }],
|
||||
['%I:%M', function(d) { return d.getMinutes(); }],
|
||||
['%I %p', function(d) { return d.getHours(); }],
|
||||
['%a %d', function(d) { return d.getDay() && d.getDate() !== 1; }],
|
||||
['%b %d', function(d) { return d.getDate() !== 1; }],
|
||||
['%B', function(d) { return d.getMonth(); }],
|
||||
['%Y', function() { return true; }]
|
||||
]);
|
||||
|
||||
var margin = {top: 20, right: 20, bottom: 20, left: 50},
|
||||
width = 500,
|
||||
height = 500,
|
||||
bargap = 0.2,
|
||||
color = '#1191e0',
|
||||
transitionInterval = false,
|
||||
xTimeInterval = false,
|
||||
maxBars = false,
|
||||
xValue = function(d) { return d[0]; }, // x axis point
|
||||
yValue = function(d) { return d[1]; }, // y axis point
|
||||
xScale = d3.time.scale(),
|
||||
yScale = d3.scale.linear(),
|
||||
xAxis = d3.svg.axis()
|
||||
.scale(xScale)
|
||||
.orient('bottom')
|
||||
.tickFormat(customTimeFormat)
|
||||
.tickSubdivide(true)
|
||||
.tickPadding(6)
|
||||
.ticks(20),
|
||||
yAxis = d3.svg.axis()
|
||||
.scale(yScale)
|
||||
.orient('left')
|
||||
.tickSize(width)
|
||||
.tickPadding(6)
|
||||
.ticks(5);
|
||||
|
||||
function chart(selection) {
|
||||
|
||||
selection.each(function(data) {
|
||||
|
||||
var availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
|
||||
data = data.map(function(d, i) {
|
||||
//console.log(d);
|
||||
return [xValue.call(data, d, i), yValue.call(data, d, i)];
|
||||
});
|
||||
|
||||
// axes
|
||||
xAxis
|
||||
//.innerTickSize(-availableHeight)
|
||||
.outerTickSize(-availableHeight)
|
||||
.ticks(d3.time.seconds, 1)
|
||||
.tickPadding(6);
|
||||
|
||||
yAxis.tickSize(-availableWidth);
|
||||
|
||||
// update the x-scale
|
||||
xScale
|
||||
.domain([data[0][0], data[data.length - 1][0]])//.nice()
|
||||
.range([0, availableWidth]);
|
||||
|
||||
// update the y-scale
|
||||
yScale
|
||||
.domain([0, d3.max(data, function(d) { return d[1]; })]).nice()
|
||||
.rangeRound([availableHeight, 0]);
|
||||
|
||||
var svg = d3.select(this).selectAll('svg').data([data]);
|
||||
|
||||
var gEnter = svg.enter().append('svg').append('g').attr('class', 'inner');
|
||||
|
||||
// groups
|
||||
gEnter.append('g').attr('class', 'bkgd');
|
||||
gEnter.append('g').attr('class', 'x axis');
|
||||
gEnter.append('g').attr('class', 'y axis');
|
||||
gEnter.append('g').attr('class', 'bargroup');
|
||||
|
||||
// need to add the clip rect
|
||||
|
||||
// bind data to bars
|
||||
var bars = svg.select('g.inner').select('g.bargroup').selectAll('.bars')
|
||||
.data(data, function(d) { return d[0]; });
|
||||
|
||||
// bars enter/append
|
||||
bars.enter().append('rect')
|
||||
.attr('class', 'bars')
|
||||
.attr('x', function(d) {
|
||||
|
||||
console.log( 'ANIMATION', data.length, availableWidth/data.length);
|
||||
|
||||
return xScale( d[0] + xTimeInterval ) - 0;
|
||||
})
|
||||
.attr('y', function(d) {
|
||||
return yScale( d[1] );
|
||||
})
|
||||
.attr('width', availableWidth / data.length * ( 1 - bargap))
|
||||
.attr('height', function(d) {
|
||||
return availableHeight - yScale( d[1] );
|
||||
})
|
||||
.style('fill', function () {
|
||||
return color;
|
||||
})
|
||||
.transition()
|
||||
.duration(transitionInterval)
|
||||
.attr('x', function(d) {
|
||||
return xScale( d[0] + ( 0.5 * bargap ));
|
||||
});
|
||||
|
||||
// update all bars
|
||||
bars.transition()
|
||||
.duration(transitionInterval)
|
||||
.attr('x', function(d) {
|
||||
return xScale( d[0] + ( 0.5 * bargap ));
|
||||
})
|
||||
.attr('width', availableWidth / data.length * ( 1 - bargap));
|
||||
|
||||
// bars exit/remove
|
||||
bars.exit()
|
||||
.transition()
|
||||
.duration(transitionInterval)
|
||||
.attr('x', function(d) {
|
||||
return xScale( d[0] - xTimeInterval + ( 0.5 * bargap ));
|
||||
})
|
||||
.remove();
|
||||
|
||||
// update the outer dimensions
|
||||
svg.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
// update the inner dimensions
|
||||
var g = svg.select('g')
|
||||
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
|
||||
|
||||
g.select('g.bkgd')
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
// update the x-axis
|
||||
g.select('g.x.axis')
|
||||
.transition()
|
||||
.duration(transitionInterval)
|
||||
.attr('transform', 'translate(0,' + yScale.range()[0] + ')')
|
||||
.call(xAxis);
|
||||
|
||||
// update the y-axis
|
||||
g.select('g.y.axis')
|
||||
.transition()
|
||||
.duration(transitionInterval)
|
||||
.call(yAxis);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
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.width = function(_) {
|
||||
if (!arguments.length) { return width; }
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) { return height; }
|
||||
height = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.transitionInterval = function(_) {
|
||||
if (!arguments.length) { return transitionInterval; }
|
||||
transitionInterval = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xTimeInterval = function(_) {
|
||||
if (!arguments.length) { return xTimeInterval; }
|
||||
xTimeInterval = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.maxBars = function(_) {
|
||||
if (!arguments.length) { return maxBars; }
|
||||
maxBars = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return color; }
|
||||
bargap = _;
|
||||
return color;
|
||||
};
|
||||
|
||||
chart.bargap = function(_) {
|
||||
if (!arguments.length) { return bargap; }
|
||||
bargap = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xValue = function(_) {
|
||||
if (!arguments.length) { return xValue; }
|
||||
xValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yValue = function(_) {
|
||||
if (!arguments.length) { return yValue; }
|
||||
yValue = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) { return color; }
|
||||
color = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
return chart;
|
||||
|
||||
};
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
|
||||
k4.treemap = function() {
|
||||
'use strict';
|
||||
|
||||
};
|
||||
5
src/bower_components/K4D3/src/start.js
vendored
5
src/bower_components/K4D3/src/start.js
vendored
|
|
@ -1,4 +1,6 @@
|
|||
(function(root, factory) {
|
||||
'use strict';
|
||||
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(factory);
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
|
|
@ -7,4 +9,5 @@
|
|||
root.k4 = factory();
|
||||
}
|
||||
}(this, function() {
|
||||
var k4 = {};
|
||||
var k4 = { version: '0.0.0' };
|
||||
|
||||
|
|
|
|||
278
src/bower_components/K4D3/src/tooltip.js
vendored
Normal file
278
src/bower_components/K4D3/src/tooltip.js
vendored
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
k4.tooltip = function() {
|
||||
'use strict';
|
||||
|
||||
// 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;
|
||||
|
||||
function tip(vis) {
|
||||
svg = getSVGNode(vis);
|
||||
point = svg.createSVGPoint();
|
||||
document.body.appendChild(node);
|
||||
}
|
||||
|
||||
// Public - show the tooltip on the screen
|
||||
//
|
||||
// Returns a tip
|
||||
tip.show = function() {
|
||||
var args = Array.prototype.slice.call(arguments);
|
||||
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'
|
||||
});
|
||||
|
||||
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,
|
||||
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;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue