Skip to content

Commit 8a6b847

Browse files
cmpoliscmpolis
committed
quick first pass at d3-annotate, can:
- create annotations from filter fn(or none/all) initially - drag to move annotations - ctrl+click to remove annotation - shit+click to edit annotation(from <input type=text>)
1 parent 14527ad commit 8a6b847

File tree

6 files changed

+420
-4
lines changed

6 files changed

+420
-4
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
build/
33
node_modules
44
npm-debug.log
5+
favicon.ico

‎README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,17 @@ If you use NPM, `npm install d3-annotate`. Otherwise, download the [latest relea
1010

1111
```js
1212
var annotation = d3.annoate()
13+
.container(svg.append('g'))
1314
.key((d) => d.id) // if annotation will be applied to data selection
1415
.text((d) => `${d.name}: ${d.score}`)
1516
.show((d) => d.score > 100); // can be true, false or fn
1617
// TODO: .dx(), .dy(), .canWrite, .canMove, .canDelete
1718

18-
annotation.editMode(true); // enable controls, false by default
19+
// TODO
20+
annotation.editMode(true); // enable controls, true by default
1921

2022
var bubbles = d3.selectAll('circle').data(teams, (d) => d.id);
2123
bubbles.enter().append('circle').....
2224

23-
bubbles.call(annotation());
25+
bubbles.call(annotation);
2426
```

‎demo/iris.html

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!--
2+
Sample scatter plot from @mbostock based on R/Iris dataset
3+
https://bl.ocks.org/mbostock/3887118 (converted from v3 to v4)
4+
-->
5+
6+
<!DOCTYPE html>
7+
<meta charset="utf-8">
8+
<style>
9+
10+
body {
11+
font: 10px sans-serif;
12+
}
13+
14+
.axis path,
15+
.axis line {
16+
fill: none;
17+
stroke: #000;
18+
shape-rendering: crispEdges;
19+
}
20+
21+
.dot {
22+
stroke: #000;
23+
}
24+
25+
.label { fill: #999; }
26+
27+
/*
28+
* d3-annotate
29+
*/
30+
31+
.d3-an-container .annotation {
32+
cursor: move;
33+
}
34+
.d3-an-container .annotation.dragging {
35+
cursor: grabbing;
36+
cursor: -moz-grabbing;
37+
cursor: -webkit-grabbing;
38+
text-decoration: underline;
39+
}
40+
.d3-an-text-edit {
41+
position: fixed;
42+
top: 40px;
43+
left: 40px;
44+
}
45+
46+
</style>
47+
<body>
48+
<script src="//d3js.org/d3.v4.js"></script>
49+
<script src="../build/d3-annotate.js"></script>
50+
<script>
51+
52+
var margin = {top: 20, right: 20, bottom: 30, left: 40},
53+
width = 960 - margin.left - margin.right,
54+
height = 500 - margin.top - margin.bottom;
55+
56+
var x = d3.scaleLinear()
57+
.range([0, width]);
58+
59+
var y = d3.scaleLinear()
60+
.range([height, 0]);
61+
62+
var color = d3.scaleOrdinal(d3.schemeCategory10);
63+
64+
var xAxis = d3.axisBottom()
65+
.scale(x);
66+
67+
var yAxis = d3.axisLeft()
68+
.scale(y);
69+
70+
var svg = d3.select("body").append("svg")
71+
.attr("width", width + margin.left + margin.right)
72+
.attr("height", height + margin.top + margin.bottom)
73+
.append("g")
74+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
75+
76+
d3.tsv("./iris.tsv", function(error, data) {
77+
if (error) throw error;
78+
79+
data.forEach(function(d) {
80+
d.sepalLength = +d.sepalLength;
81+
d.sepalWidth = +d.sepalWidth;
82+
});
83+
84+
x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();
85+
y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();
86+
87+
svg.append("g")
88+
.attr("class", "x axis")
89+
.attr("transform", "translate(0," + height + ")")
90+
.call(xAxis)
91+
.append("text")
92+
.attr("class", "label")
93+
.attr("x", width)
94+
.attr("y", -6)
95+
.style("text-anchor", "end")
96+
.text("Sepal Width (cm)");
97+
98+
svg.append("g")
99+
.attr("class", "y axis")
100+
.call(yAxis)
101+
.append("text")
102+
.attr("class", "label")
103+
.attr("transform", "rotate(-90)")
104+
.attr("y", 6)
105+
.attr("dy", ".71em")
106+
.style("text-anchor", "end")
107+
.text("Sepal Length (cm)")
108+
109+
svg.selectAll(".dot")
110+
.data(data)
111+
.enter().append("circle")
112+
.attr("class", "dot")
113+
.attr("r", 3.5)
114+
.attr("cx", function(d) { return x(d.sepalWidth); })
115+
.attr("cy", function(d) { return y(d.sepalLength); })
116+
.style("fill", function(d) { return color(d.species); });
117+
118+
var legend = svg.selectAll(".legend")
119+
.data(color.domain())
120+
.enter().append("g")
121+
.attr("class", "legend")
122+
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
123+
124+
legend.append("rect")
125+
.attr("x", width - 18)
126+
.attr("width", 18)
127+
.attr("height", 18)
128+
.style("fill", color);
129+
130+
legend.append("text")
131+
.attr("x", width - 24)
132+
.attr("y", 9)
133+
.attr("dy", ".35em")
134+
.style("text-anchor", "end")
135+
.text(function(d) { return d; });
136+
137+
//
138+
// annotations
139+
var annotationG = svg.append('g'),
140+
annotation = window.annotation = d3.annotate()
141+
// .show(true)
142+
.show(false)
143+
// .show((d) => d.species !== "versicolor")
144+
.text((d) => `${d.species}: ${d.sepalWidth.toFixed(1)} x ${d.sepalLength.toFixed(1)}`)
145+
.container(annotationG);
146+
147+
svg.selectAll('.dot').call(annotation);
148+
});
149+
150+
</script>

‎demo/iris.tsv

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
sepalLength sepalWidth petalLength petalWidth species
2+
5.1 3.5 1.4 0.2 setosa
3+
4.9 3.0 1.4 0.2 setosa
4+
4.7 3.2 1.3 0.2 setosa
5+
4.6 3.1 1.5 0.2 setosa
6+
5.0 3.6 1.4 0.2 setosa
7+
5.4 3.9 1.7 0.4 setosa
8+
4.6 3.4 1.4 0.3 setosa
9+
5.0 3.4 1.5 0.2 setosa
10+
4.4 2.9 1.4 0.2 setosa
11+
4.9 3.1 1.5 0.1 setosa
12+
5.4 3.7 1.5 0.2 setosa
13+
4.8 3.4 1.6 0.2 setosa
14+
4.8 3.0 1.4 0.1 setosa
15+
4.3 3.0 1.1 0.1 setosa
16+
5.8 4.0 1.2 0.2 setosa
17+
5.7 4.4 1.5 0.4 setosa
18+
5.4 3.9 1.3 0.4 setosa
19+
5.1 3.5 1.4 0.3 setosa
20+
5.7 3.8 1.7 0.3 setosa
21+
5.1 3.8 1.5 0.3 setosa
22+
5.4 3.4 1.7 0.2 setosa
23+
5.1 3.7 1.5 0.4 setosa
24+
4.6 3.6 1.0 0.2 setosa
25+
5.1 3.3 1.7 0.5 setosa
26+
4.8 3.4 1.9 0.2 setosa
27+
5.0 3.0 1.6 0.2 setosa
28+
5.0 3.4 1.6 0.4 setosa
29+
5.2 3.5 1.5 0.2 setosa
30+
5.2 3.4 1.4 0.2 setosa
31+
4.7 3.2 1.6 0.2 setosa
32+
4.8 3.1 1.6 0.2 setosa
33+
5.4 3.4 1.5 0.4 setosa
34+
5.2 4.1 1.5 0.1 setosa
35+
5.5 4.2 1.4 0.2 setosa
36+
4.9 3.1 1.5 0.2 setosa
37+
5.0 3.2 1.2 0.2 setosa
38+
5.5 3.5 1.3 0.2 setosa
39+
4.9 3.6 1.4 0.1 setosa
40+
4.4 3.0 1.3 0.2 setosa
41+
5.1 3.4 1.5 0.2 setosa
42+
5.0 3.5 1.3 0.3 setosa
43+
4.5 2.3 1.3 0.3 setosa
44+
4.4 3.2 1.3 0.2 setosa
45+
5.0 3.5 1.6 0.6 setosa
46+
5.1 3.8 1.9 0.4 setosa
47+
4.8 3.0 1.4 0.3 setosa
48+
5.1 3.8 1.6 0.2 setosa
49+
4.6 3.2 1.4 0.2 setosa
50+
5.3 3.7 1.5 0.2 setosa
51+
5.0 3.3 1.4 0.2 setosa
52+
7.0 3.2 4.7 1.4 versicolor
53+
6.4 3.2 4.5 1.5 versicolor
54+
6.9 3.1 4.9 1.5 versicolor
55+
5.5 2.3 4.0 1.3 versicolor
56+
6.5 2.8 4.6 1.5 versicolor
57+
5.7 2.8 4.5 1.3 versicolor
58+
6.3 3.3 4.7 1.6 versicolor
59+
4.9 2.4 3.3 1.0 versicolor
60+
6.6 2.9 4.6 1.3 versicolor
61+
5.2 2.7 3.9 1.4 versicolor
62+
5.0 2.0 3.5 1.0 versicolor
63+
5.9 3.0 4.2 1.5 versicolor
64+
6.0 2.2 4.0 1.0 versicolor
65+
6.1 2.9 4.7 1.4 versicolor
66+
5.6 2.9 3.6 1.3 versicolor
67+
6.7 3.1 4.4 1.4 versicolor
68+
5.6 3.0 4.5 1.5 versicolor
69+
5.8 2.7 4.1 1.0 versicolor
70+
6.2 2.2 4.5 1.5 versicolor
71+
5.6 2.5 3.9 1.1 versicolor
72+
5.9 3.2 4.8 1.8 versicolor
73+
6.1 2.8 4.0 1.3 versicolor
74+
6.3 2.5 4.9 1.5 versicolor
75+
6.1 2.8 4.7 1.2 versicolor
76+
6.4 2.9 4.3 1.3 versicolor
77+
6.6 3.0 4.4 1.4 versicolor
78+
6.8 2.8 4.8 1.4 versicolor
79+
6.7 3.0 5.0 1.7 versicolor
80+
6.0 2.9 4.5 1.5 versicolor
81+
5.7 2.6 3.5 1.0 versicolor
82+
5.5 2.4 3.8 1.1 versicolor
83+
5.5 2.4 3.7 1.0 versicolor
84+
5.8 2.7 3.9 1.2 versicolor
85+
6.0 2.7 5.1 1.6 versicolor
86+
5.4 3.0 4.5 1.5 versicolor
87+
6.0 3.4 4.5 1.6 versicolor
88+
6.7 3.1 4.7 1.5 versicolor
89+
6.3 2.3 4.4 1.3 versicolor
90+
5.6 3.0 4.1 1.3 versicolor
91+
5.5 2.5 4.0 1.3 versicolor
92+
5.5 2.6 4.4 1.2 versicolor
93+
6.1 3.0 4.6 1.4 versicolor
94+
5.8 2.6 4.0 1.2 versicolor
95+
5.0 2.3 3.3 1.0 versicolor
96+
5.6 2.7 4.2 1.3 versicolor
97+
5.7 3.0 4.2 1.2 versicolor
98+
5.7 2.9 4.2 1.3 versicolor
99+
6.2 2.9 4.3 1.3 versicolor
100+
5.1 2.5 3.0 1.1 versicolor
101+
5.7 2.8 4.1 1.3 versicolor
102+
6.3 3.3 6.0 2.5 virginica
103+
5.8 2.7 5.1 1.9 virginica
104+
7.1 3.0 5.9 2.1 virginica
105+
6.3 2.9 5.6 1.8 virginica
106+
6.5 3.0 5.8 2.2 virginica
107+
7.6 3.0 6.6 2.1 virginica
108+
4.9 2.5 4.5 1.7 virginica
109+
7.3 2.9 6.3 1.8 virginica
110+
6.7 2.5 5.8 1.8 virginica
111+
7.2 3.6 6.1 2.5 virginica
112+
6.5 3.2 5.1 2.0 virginica
113+
6.4 2.7 5.3 1.9 virginica
114+
6.8 3.0 5.5 2.1 virginica
115+
5.7 2.5 5.0 2.0 virginica
116+
5.8 2.8 5.1 2.4 virginica
117+
6.4 3.2 5.3 2.3 virginica
118+
6.5 3.0 5.5 1.8 virginica
119+
7.7 3.8 6.7 2.2 virginica
120+
7.7 2.6 6.9 2.3 virginica
121+
6.0 2.2 5.0 1.5 virginica
122+
6.9 3.2 5.7 2.3 virginica
123+
5.6 2.8 4.9 2.0 virginica
124+
7.7 2.8 6.7 2.0 virginica
125+
6.3 2.7 4.9 1.8 virginica
126+
6.7 3.3 5.7 2.1 virginica
127+
7.2 3.2 6.0 1.8 virginica
128+
6.2 2.8 4.8 1.8 virginica
129+
6.1 3.0 4.9 1.8 virginica
130+
6.4 2.8 5.6 2.1 virginica
131+
7.2 3.0 5.8 1.6 virginica
132+
7.4 2.8 6.1 1.9 virginica
133+
7.9 3.8 6.4 2.0 virginica
134+
6.4 2.8 5.6 2.2 virginica
135+
6.3 2.8 5.1 1.5 virginica
136+
6.1 2.6 5.6 1.4 virginica
137+
7.7 3.0 6.1 2.3 virginica
138+
6.3 3.4 5.6 2.4 virginica
139+
6.4 3.1 5.5 1.8 virginica
140+
6.0 3.0 4.8 1.8 virginica
141+
6.9 3.1 5.4 2.1 virginica
142+
6.7 3.1 5.6 2.4 virginica
143+
6.9 3.1 5.1 2.3 virginica
144+
5.8 2.7 5.1 1.9 virginica
145+
6.8 3.2 5.9 2.3 virginica
146+
6.7 3.3 5.7 2.5 virginica
147+
6.7 3.0 5.2 2.3 virginica
148+
6.3 2.5 5.0 1.9 virginica
149+
6.5 3.0 5.2 2.0 virginica
150+
6.2 3.4 5.4 2.3 virginica
151+
5.9 3.0 5.1 1.8 virginica

‎package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,15 @@
1717
"url": "https://github.com/cmpolis/d3-annotate.git"
1818
},
1919
"scripts": {
20-
"pretest": "rm -rf build && mkdir build && rollup -f umd -n d3 -o build/d3-annotate.js -- index.js",
20+
"pretest": "rm -rf build && mkdir build && rollup -g d3-drag:d3,d3-selection:d3 -f umd -n d3 -o build/d3-annotate.js -- index.js",
2121
"test": "tape 'test/**/*-test.js'",
2222
"prepublish": "npm run test && uglifyjs build/d3-annotate.js -c -m -o build/d3-annotate.min.js",
2323
"postpublish": "zip -j build/d3-annotate.zip -- LICENSE README.md build/d3-annotate.js build/d3-annotate.min.js"
2424
},
25+
"dependencies": {
26+
"d3-drag": "1.0",
27+
"d3-selection": "1.0"
28+
},
2529
"devDependencies": {
2630
"rollup": "0.27",
2731
"tape": "4",

0 commit comments

Comments
 (0)