Skip to content

Commit 356bbf4

Browse files
wx-chevalierwx-chevalier
committed
feat: update
1 parent e2d9538 commit 356bbf4

File tree

27 files changed

+6264
-84
lines changed

27 files changed

+6264
-84
lines changed

‎data-visualization/cases/hamilton/src/FilterGraph.js‎

Lines changed: 224 additions & 77 deletions
Large diffs are not rendered by default.

‎data-visualization/cases/hamilton/src/visualizations/Visualization.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ var Visualization = React.createClass({
4343

4444
simulation
4545
.on('tick', this.forceTick)
46-
// .on('end', this.forceEnd)
46+
.on('end', this.forceEnd)
4747
.stop();
4848
},
4949

@@ -110,12 +110,12 @@ var Visualization = React.createClass({
110110
// interpolate,
111111
// this.props
112112
// );
113-
Lines.drawPaths(
114-
this.ctx,
115-
this.props.linePositions,
116-
interpolate,
117-
this.props
118-
);
113+
// Lines.drawPaths(
114+
// this.ctx,
115+
// this.props.linePositions,
116+
// interpolate,
117+
// this.props
118+
// );
119119
// Songs.highlightSong(
120120
// this.ctx,
121121
// this.props.songPositions,

‎data-visualization/d3/shape/arc/concentric-arcs.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="description" content="Basic beginner's source code to drawing arcs in D3 using dynamically-generated data.">
7+
<title>JavaScript D3: Drawing Concentric Arcs (Part I)</title>
8+
<style type='text/css'>
9+
.click-circle{
10+
cursor: pointer;
11+
}
12+
13+
@keyframes rotate {
14+
0% {
15+
transform: rotate(0deg);
16+
}
17+
50% {
18+
transform: rotate(180deg);
19+
}
20+
100% {
21+
transform: rotate(360deg);
22+
}
23+
}
24+
25+
svg {
26+
animation: rotate 20s ease-out infinite;
27+
animation-fill-mode: backwards;
28+
}
29+
</style>
30+
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
31+
32+
</head>
33+
34+
<body>
35+
<div class="chart"></div>
36+
<script type="text/javascript" src="./concentric-arcs.js"></script>
37+
</body>
38+
</html>

‎data-visualization/d3/shape/arc/concentric-arcs.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
var width = window.innerWidth,
2+
height = window.innerHeight;
3+
4+
// append svg to the DIV
5+
d3.select('.chart')
6+
.append('svg:svg')
7+
.attr('width', width)
8+
.attr('height', height);
9+
10+
var render = function(dataset) {
11+
console.log(dataset);
12+
13+
// select the svg
14+
vis = d3.select('svg');
15+
16+
// set constants
17+
var PI = Math.PI;
18+
var arcMin = window.width * 0.4; // inner radius of the first arc
19+
var arcWidth = 15; // width
20+
var arcPad = 1; // padding between arcs
21+
22+
// arc accessor
23+
// d and i are automatically passed to accessor functions,
24+
// with d being the data and i the index of the data
25+
var drawArc = d3.svg
26+
.arc()
27+
.innerRadius(function(d, i) {
28+
return arcMin + i * arcWidth + arcPad;
29+
})
30+
.outerRadius(function(d, i) {
31+
return arcMin + (i + 1) * arcWidth;
32+
})
33+
.startAngle(0 * (PI / 180))
34+
.endAngle(function(d, i) {
35+
return d * 6 * (PI / 180);
36+
});
37+
38+
// bind the data
39+
var arcs = vis.selectAll('path.arc-path').data(dataset);
40+
41+
// *** update existing arcs -- redraw them ***
42+
arcs.attr('d', drawArc).attr('fill', function(d) {
43+
// we need to redefine the fills as well since we have new data,
44+
// otherwise the colors would no longer be relative to the data
45+
// values (and arc length). if your fills weren't relative to
46+
// the data, this would not be necessary
47+
var grn = Math.floor((1 - d / 60) * 255);
48+
return 'rgb(0, ' + grn + ', 0)';
49+
});
50+
51+
// draw arcs for new data
52+
arcs
53+
.enter()
54+
.append('svg:path')
55+
.attr('class', 'arc-path') // assigns a class for easier selecting
56+
.attr('transform', `translate(${window.width / 2}, ${window.height / 2})`) // sets position--easier than setting x's and y's
57+
.attr('fill', function(d) {
58+
// fill is an rgb value with the green value determined by the data
59+
// smaller numbers result in a higher green value (1 - d/60)
60+
// you should also look into using d3 scales to create gradients
61+
var grn = Math.floor((1 - d / 60) * 255);
62+
return 'rgb(0, ' + grn + ', 0)';
63+
})
64+
.attr('d', drawArc); // draw the arc
65+
};
66+
67+
// you can safely ignore the code below.
68+
// the code is used to create a click area for people to regenerate
69+
// arcs by generating a new data set and calling render on that set
70+
71+
// for generating a random array of times
72+
var generateTimes = function(quantity) {
73+
var i,
74+
times = [];
75+
76+
for (i = 0; i < quantity; i++) {
77+
times.push(Math.round(Math.random() * 60));
78+
}
79+
80+
return times;
81+
};
82+
83+
// drawing the click area
84+
var initialize = function() {
85+
var arcMin = 75; // this should match the arcMin in render()
86+
var times = generateTimes(6);
87+
88+
render(times);
89+
90+
// making the click circle
91+
if (!d3.selectAll('circle.click-circle')[0].length) {
92+
// if there is no click area..
93+
d3.select('svg')
94+
.append('circle')
95+
.attr('class', 'click-circle')
96+
.attr('transform', `translate(${window.width / 2}, ${window.height / 2})`)
97+
.attr('r', arcMin * 0.85)
98+
.attr('fill', 'rgba(201, 201, 201, 0.5)')
99+
.on('click', function(d) {
100+
times = generateTimes(6);
101+
render(times);
102+
});
103+
}
104+
};
105+
106+
initialize();

‎data-visualization/d3/shape/circle/.gitkeep‎

Whitespace-only changes.

‎data-visualization/mo/constant-particle-burst/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
https://codepen.io/luckyluke007/pen/ZraYgN

‎data-visualization/mo/diffuse-button/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist/
2+
.cache

‎data-visualization/mo/diffuse-button/index.css‎

Whitespace-only changes.

‎data-visualization/mo/diffuse-button/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<html>
2+
<style>
3+
body,
4+
html {
5+
padding: 0;
6+
margin: 0;
7+
width: 100%;
8+
height: 100%;
9+
background: #EA485C;
10+
overflow: hidden;
11+
}
12+
</style>
13+
14+
<body></body>
15+
16+
<script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
17+
<script src="./index.js"></script>
18+
</html>

‎data-visualization/mo/diffuse-button/index.js‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
// 颜色
2+
const COLORS = {
3+
RED: '#FD5061',
4+
YELLOW: '#FFCEA5',
5+
BLACK: '#29363B',
6+
WHITE: 'white',
7+
VINOUS: '#A50710'
8+
};
9+
10+
// 过渡时间
11+
const DURATION = 800;
12+
13+
// 父元素图形，只用于整体的位置的变化
14+
const showBase = new mojs.Shape({
15+
fill: 'none',
16+
radius: 20,
17+
x: {
18+
[-150]: 0,
19+
easing: 'cubic.out'
20+
},
21+
y: {
22+
[90]: 0,
23+
easing: 'cubic.out'
24+
},
25+
duration: DURATION + 400,
26+
// 动画执行完毕，添加样式、事件
27+
onComplete() {
28+
this.el.style.cursor = 'pointer';
29+
this.el.addEventListener('click', scaleAnime, false);
30+
}
31+
});
32+
33+
// 最后执行的圆形扩散
34+
const circle = new mojs.Shape({
35+
fill: COLORS.WHITE,
36+
parent: showBase.el, // 定义父元素
37+
radius: 50,
38+
scale: {
39+
0.4: 1
40+
},
41+
duration: 650,
42+
opacity: {
43+
0.5: 0
44+
},
45+
delay: DURATION + 100,
46+
easing: 'cubic.out'
47+
});
48+
49+
const showUp = new mojs.Shape({
50+
fill: 'none',
51+
stroke: COLORS.WHITE,
52+
parent: showBase.el, // 定义父元素
53+
radius: {
54+
0: 10
55+
},
56+
angle: {
57+
560: 270
58+
},
59+
strokeWidth: {
60+
0: 22,
61+
easing: 'cubic.inout'
62+
},
63+
strokeDasharray: '100%',
64+
strokeDashoffset: {
65+
'-100%': '0%',
66+
easing: 'cubic.in'
67+
},
68+
strokeLinecap: 'round',
69+
duration: DURATION
70+
})
71+
.then({
72+
scale: 0.75,
73+
duration: 250
74+
})
75+
.then({
76+
scale: 1,
77+
duration: 300
78+
});
79+
80+
const addButtonCross = new mojs.Shape({
81+
shape: 'cross',
82+
parent: showUp.el, // 定义旋转的圆形为父元素
83+
fill: 'none',
84+
stroke: COLORS.VINOUS,
85+
radius: 6,
86+
strokeLinecap: 'round',
87+
isShowStart: true,
88+
duration: DURATION,
89+
angle: {
90+
0: -360
91+
},
92+
scale: {
93+
0: 1
94+
},
95+
y: {
96+
35: 0
97+
},
98+
x: {
99+
35: 0
100+
}
101+
}).then({
102+
angle: -540,
103+
duration: DURATION / 2,
104+
easing: 'cubic.out'
105+
});
106+
107+
const timelineback = new mojs.Timeline();
108+
timelineback.add(showBase, circle, showUp, addButtonCross).play();
109+
110+
// 点击按钮放大动画
111+
function scaleAnime() {
112+
circle
113+
.tune({
114+
delay: 0,
115+
scale: {
116+
0.4: 30
117+
},
118+
opacity: 1,
119+
duration: 500,
120+
easing: 'cubic.inout'
121+
})
122+
.replay();
123+
}

0 commit comments

Comments
 (0)