Slide 1
Slide 1 text
7VFKT%KTͰ
άϥϑΛඳ͘
7VFKT5PLZPWNFFUVQ
!IPHFTVLF@
Slide 2
Slide 2 text
!IPHFTVLF@
Slide 3
Slide 3 text
7VFKTͰάϥϑΛ
ඳ͖͍ͨ
Slide 4
Slide 4 text
%KTΛ͍͍ͨ
Slide 5
Slide 5 text
7VFKT%KTͬͯ
Ͱ͖Δͷʁ
Slide 6
Slide 6 text
ͬͯΈ·ͨ͠
Slide 7
Slide 7 text
%&.0
IUUQHSBQIIPHFTVLFOFU
Slide 8
Slide 8 text
·ͣ7VFΛΘͣʹॻ͍ͯΈΔ
const dataset = [ 10, 20, 5, 3, 8, 40, 20, 35];
const w = 200, h = 100, margin = 5;
const svg = d3.select(‘.graph').append('svg')
.attr('width', w + margin).attr('height', h + margin);
const xScale = d3.scaleLinear().domain([0, dataset.length]).range([margin, w - margin]);
const yScale = d3.scaleLinear().domain([d3.min(dataset), d3.max(dataset)]).range([h -
margin, margin]);
const xAxis = d3.axisBottom(xScale);
svg.append('g')
.attr('transform', `translate(0, ${h})`)
.call(xAxis);
const yAxis = d3.axisLeft(yScale);
svg.append('g')
.attr('transform', `translate(${margin}, 0)`)
.call(yAxis);
const d3line = d3.line()
.x((d, i) => xScale(i))
.y(d => yScale(d))
.curve(d3.curveLinear);
svg.append('path')
.attr(‘d', d3line(dataset))
.style('stroke-width', 2)
.style('stroke', 'steelblue')
.style('fill', 'none');
Slide 9
Slide 9 text
͜ΕΛ7VF
ίϯϙʔωϯτʹམͱ͠ࠐΉ
Slide 10
Slide 10 text
const dataset = [ 10, 20, 5, 3, 8, 40, 20, 35];
const w = 200, h = 100, margin = 5;
const svg = d3.select(‘.graph').append('svg')
.attr('width', w + margin).attr('height', h + margin);
const xScale = d3.scaleLinear().domain([0, dataset.length]).range([margin, w - margin]);
const yScale = d3.scaleLinear().domain([d3.min(dataset), d3.max(dataset)]).range([h -
margin, margin]);
const xAxis = d3.axisBottom(xScale);
svg.append('g')
.attr('transform', `translate(0, ${h})`)
.call(xAxis);
const yAxis = d3.axisLeft(yScale);
svg.append('g')
.attr('transform', `translate(${margin}, 0)`)
.call(yAxis);
const d3line = d3.line()
.x((d, i) => xScale(i))
.y(d => yScale(d))
.curve(d3.curveLinear);
svg.append('path')
.attr(‘d', d3line(dataset))
.style('stroke-width', 2)
.style('stroke', 'steelblue')
.style('fill', 'none');
9:࣠ͷඳը
QBUIͷඳը
47(ཁૉͷੜ
ೖྗσʔλΛඳըྖҬʹ
Ϛοϐϯά͢Δؔͷੜ
ݩͷίʔυ
Slide 11
Slide 11 text
:࣠
9࣠
ύε
ίϯϙʔωϯτׂ
άϥϑશମ
Slide 12
Slide 12 text
5FNQMBUF
1BUI
computed: {
line () {
return d3.line()
.x(d => this.xScale(d.x))
.y(d => this.yScale(d.y))
.curve(d3.curveLinear);
},
d () {
return this.line(this.data);
},
},
4DSJQU
47(ͷཁૉΛ
ςϯϓϨʔτʹॻ͘
ύεͷ࠲ඪͱͳΔ
EଐੑͷΛੜ
Slide 13
Slide 13 text
5FNQMBUF
1BUI
computed: {
line () {
return d3.line()
.x(d => this.xScale(d.x))
.y(d => this.yScale(d.y))
.curve(d3.curveLinear);
},
d () {
return this.line(this.data);
},
},
4DSJQU
ͱΛͲͷΑ͏ͳۂઢͰ
ิؒ͢Δ͔ͷࢦఆ
Slide 14
Slide 14 text
computed: {
xAxis () {
return d3.axisBottom(this.xScale)
.tickSizeInner(10) // ઢͷ͞ʢଆʣ
.tickSizeOuter(15) // ઢͷ͞ʢ֎ଆʣ
.tickPadding(10) // ઢͱςΩετͷؒͷڑ
.ticks(4); // ઢͷ
},
},
mounted () {
d3.select(this.$el).call(this.xAxis);
},
9:࣠
5FNQMBUF
4DSJQU
࣠ΓΛ
Hཁૉʹ
ඳը͢Δ
Slide 15
Slide 15 text
computed: {
xAxis () {
return d3.axisBottom(this.xScale)
.tickSizeInner(10) // ઢͷ͞ʢଆʣ
.tickSizeOuter(15) // ઢͷ͞ʢ֎ଆʣ
.tickPadding(10) // ઢͱςΩετͷؒͷڑ
.ticks(4); // ઢͷ
},
},
mounted () {
d3.select(this.$el).call(this.xAxis);
},
͜͜
9:࣠
5FNQMBUF
4DSJQU
࣠ͷΓʹ
ؔ͢ΔઃఆΛߦ͏
Slide 16
Slide 16 text
Ξχϝʔγϣϯ
w $44USBOTJUJPOͰQBUIΛΞχϝʔγϣϯͰ͖Δʁ
w $ISPNFҎ֎Ͱ
Ͱ͖ͳ͍
w ผͷखஈ͕ඞཁ
Slide 17
Slide 17 text
Ξχϝʔγϣϯ
w 5XFFO-JUFKTΛ͏
w ͋ΔΛࢦఆͷඵͰɺࢦఆͷ·ͰঃʑʹมԽͤ͞Δ
ػೳΛ࣋ͭ
const hoge = { a: 0 };
TweenLite.to(hoge, 3, { a: 100 });
AIPHFBAͷΛඵ͔͚ͯ·ͰมԽͤ͞Δ
Slide 18
Slide 18 text
Ξχϝʔγϣϯ
w 5XFFO-JUFKTΛQBUIͷEଐੑʹ༻͍Δ͜ͱͰΞχϝʔγϣ
ϯՄೳ
ࢀߟঢ়ଶͷτϥϯδγϣϯ7VFKTIUUQTKQWVFKTPSHWHVJEFUSBOTJUJPOJOHTUBUFIUNM
Slide 19
Slide 19 text
άϥϑͷඳը͕Ͱ͖ͨ
Slide 20
Slide 20 text
%&.0ͷίʔυ
IUUQTHJUIVCDPNIPHFTVLFWVFEEFNP
հͰ͖·ͤΜͰ͕ͨ͠ɺ
πʔϧνοϓͷ࣮͍ͬͯ·͢
Slide 21
Slide 21 text
Ҏ্Ͱ͢
͋Γ͕ͱ͏͍͟͝·ͨ͠