'Programming/d3'에 해당되는 글 31건

  1. 2018.10.16 d3 pie with padding
  2. 2018.10.16 d3 enter exit datum
  3. 2018.10.16 d3 arc
  4. 2018.10.16 d3 color
  5. 2018.10.12 d3 timeline
  6. 2018.10.12 d3 관련 검색..
  7. 2018.10.11 d3 multi level pie 그래프
  8. 2018.10.02 d3 font color / weight
  9. 2018.10.01 d3 tooltop
  10. 2018.09.28 d3 를 이용하여 도넛 그래프 그리기
Programming/d32018. 10. 16. 19:32

d3 pie with padding

선을 그려서 공백을 그리는 기법

[링크 : http://bl.ocks.org/valex/fa6428755963692a73dfe7cef3faf990]


pie의 패딩 각도를 지정하는 기법

개인적으로는 이게 옳은 접근 방법이라고 보임

var pie = d3.layout.pie()

    .padAngle(.02); 

[링크 : https://bl.ocks.org/mbostock/f098d146315be4d1db52]


+

그나저나 저 간격 자체를 padding이라고 표현을 하는군..

저작자표시

'Programming > d3' 카테고리의 다른 글

d3 v3 doc  (0) 2018.10.17
d3 arc 직접 그리기  (0) 2018.10.17
d3 enter exit datum  (0) 2018.10.16
d3 arc  (0) 2018.10.16
d3 color  (0) 2018.10.16
Posted by 구차니
Programming/d32018. 10. 16. 16:17

d3 enter exit datum

d3는 차근차근 볼 수 있는 api 문서가 눈에 잘 안띄네...

아무튼 enter / exit / datum에 대한 설명과 전반적인 설명이 그나마 체계적으로 써있는 페이지 


[링크 : http://www.tutorialsteacher.com/d3js/data-binding-in-d3js]

저작자표시

'Programming > d3' 카테고리의 다른 글

d3 arc 직접 그리기  (0) 2018.10.17
d3 pie with padding  (0) 2018.10.16
d3 arc  (0) 2018.10.16
d3 color  (0) 2018.10.16
d3 timeline  (0) 2018.10.12
Posted by 구차니
Programming/d32018. 10. 16. 15:25

d3 arc

arc 그리는 방법

[링크 : http://bl.ocks.org/mbostock/5100636]

[링크 : https://bl.ocks.org/d3indepth/5cc68ffe573562772bed1e394b50f7dc]


label - 도표에 각 부분 선을 그어서 표기해주는 걔

[링크 : http://bl.ocks.org/dbuezas/9306799]


+

2018.10.17

걍 내가 의도한걸 구현하는데에는 이거 보다는 padding이 들어간 pie graph가 나을 듯

(특정 색상만 지정하도록 하면)

저작자표시

'Programming > d3' 카테고리의 다른 글

d3 pie with padding  (0) 2018.10.16
d3 enter exit datum  (0) 2018.10.16
d3 color  (0) 2018.10.16
d3 timeline  (0) 2018.10.12
d3 관련 검색..  (0) 2018.10.12
Posted by 구차니
Programming/d32018. 10. 16. 15:21

d3 color

d3 그래프에서 미리 지정된 색을 쓰는게 아닌 원하는 대로 색을 쓰는법 찾는중..


[링크 : http://bl.ocks.org/aaizemberg/78bd3dade9593896a59d]

[링크 : http://bl.ocks.org/WilliamQLiu/292ef433e312ac69ef14]

[링크 : https://github.com/d3/d3-color]

[링크 : https://d3-wiki.readthedocs.io/zh_CN/master/Colors/]


[링크 : https://stackoverflow.com/questions/21208031/how-to-customize-the-color-scale-in-a-d3-line-chart]



+

2018.10.17


    var color = d3.scale.linear()

        .range(['#d73027', '#1a9850'])

        .interpolate(d3.interpolateHcl); 

[링크 : https://github.com/d3/d3-interpolate]


d3랑 d4랑 함수들이 많이 달라진듯..

[링크 : https://stackoverflow.com/questions/41178111/d3js-d3-scale-category10-not-working]



+

donut/pie 그래프에 쓸 색상

    var color = d3.scale.ordinal()

        .range(["#65C400", "#2290EE", "#FFC096", "#5e5e5e"]); 

[링크 : https://stackoverflow.com/questions/33802750/how-to-change-color-of-donut-chart-created-using-d3-js]

저작자표시

'Programming > d3' 카테고리의 다른 글

d3 enter exit datum  (0) 2018.10.16
d3 arc  (0) 2018.10.16
d3 timeline  (0) 2018.10.12
d3 관련 검색..  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
Posted by 구차니
Programming/d32018. 10. 12. 17:31

d3 timeline

chart를 생성할때 d3.timeline()에 .stack()을 넣어주지 않으면 한줄로 나온다. -_-



function add_timeline() {
var testData = [
{
class: "pA", label: "person a", times: [
{ "starting_time": 1355752800000, "ending_time": 1355759900000 },
{ "starting_time": 1355767900000, "ending_time": 1355774400000 }]
},
{
class: "pB", label: "person b", times: [
{ "starting_time": 1355759910000, "ending_time": 1355761900000 }]
},
{
class: "pC", label: "person c", times: [
{ "starting_time": 1355761910000, "ending_time": 1355763910000 }]
}
];

var chart = d3.timeline()
.stack();

var svg = d3.select("#timeline")
.append("svg")
.attr("width", 500)
.attr("height", 300)
.datum(testData)
.call(chart);

}

[링크 : https://github.com/jiahuang/d3-timeline]

저작자표시

'Programming > d3' 카테고리의 다른 글

d3 arc  (0) 2018.10.16
d3 color  (0) 2018.10.16
d3 관련 검색..  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
d3 font color / weight  (0) 2018.10.02
Posted by 구차니
Programming/d32018. 10. 12. 08:27

d3 관련 검색..

gallery가 이것저것 키워드 얻는 용도랑, 예제 찾기로 쓰면 좋음

[링크 : https://github.com/d3/d3/wiki]

[링크 : https://github.com/d3/d3/wiki/Gallery]


timeline 그래프

[링크 : https://github.com/commodityvectors/d3-timeline]


태그 클라우드(나중에 블로그에...)

[링크 : https://www.jasondavies.com/wordcloud/]


enter/exit

[링크 : https://bost.ocks.org/mike/join/]

저작자표시

'Programming > d3' 카테고리의 다른 글

d3 color  (0) 2018.10.16
d3 timeline  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
d3 font color / weight  (0) 2018.10.02
d3 tooltop  (0) 2018.10.01
Posted by 구차니
Programming/d32018. 10. 11. 07:38

d3 multi level pie 그래프

직접 그리는 법을 찾아 보려고 하니

drilldown이라는 키워드가 보인다. 머하는 녀석인진 아직 파악 못함


[링크 : https://pshivale.github.io/psd3/]

[링크 : https://github.com/pshivale/psd3/blob/gh-pages/psd3.js]


drilldown

[링크 : https://stackoverflow.com/questions/23153403/drilldown-multiple-levels-highchart]

[링크 : http://bl.ocks.org/alessioalex/6448911]

저작자표시

'Programming > d3' 카테고리의 다른 글

d3 timeline  (0) 2018.10.12
d3 관련 검색..  (0) 2018.10.12
d3 font color / weight  (0) 2018.10.02
d3 tooltop  (0) 2018.10.01
d3 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
Posted by 구차니
Programming/d32018. 10. 2. 15:51

d3 font color / weight

의외로 쉽네? 싶기도 하고..


svg.append("text")
.style("font-weight", "bold")
.style("fill", "white")
.attr("x",-5)
.attr("y",5)

.text(conn); 


[링크 : https://stackoverflow.com/.../splitting-text-for-some-bold-and-some-not-on-functional-javascript-piece]

[링크 : https://stackoverflow.com/.../how-to-set-text-color-for-my-d3-chart-title]

저작자표시

'Programming > d3' 카테고리의 다른 글

d3 관련 검색..  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
d3 tooltop  (0) 2018.10.01
d3 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
d3 graph  (0) 2018.09.27
Posted by 구차니
Programming/d32018. 10. 1. 21:40

d3 tooltop

path.each() 가 현재 선택한 값을 d로 넘겨주고

그걸 이용해서 d.data에 path에서 연결된 dataset의 한개 항목을 넘겨준다.


[링크 : http://bl.ocks.org/arpitnarechania/577bd1d188d66dd7dffb69340dc2d9c9]

[링크 : https://stackoverflow.com/.../get-one-element-from-d3js-selection-by-index]

저작자표시

'Programming > d3' 카테고리의 다른 글

d3 관련 검색..  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
d3 font color / weight  (0) 2018.10.02
d3 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
d3 graph  (0) 2018.09.27
Posted by 구차니
Programming/d32018. 9. 28. 14:52

d3 를 이용하여 도넛 그래프 그리기

다른거 받아와서 쓰는데 이것저것 검색중..

function donut_instance(w, h, element_id) {
var dataset = [
{ name: 'IE', percent: 39.10 },
{ name: 'Chrome', percent: 32.51 },
{ name: 'Safari', percent: 13.68 },
{ name: 'Firefox', percent: 8.71 },
{ name: 'Others', percent: 6.01 }
];

var pie = d3.layout.pie()
.value(function (d) { return d.percent })
.sort(null)
.padAngle(.03);

//var w = 300, h = 300;

var outerRadius = (w * 0.60) / 2;
var innerRadius = (w * 0.30) / 2;;

var color = d3.scale.category20c();

var arc = d3.svg.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius);

var svg = d3.select(element_id)
.append("svg")
.attr({
width: w,
height: h,
class: 'shadow'
}).append('g')
.attr({
transform: 'translate(' + (w / 2) + ',' + (h / 2 + 2) + ')'
});

var path = svg.selectAll('path')
.data(pie(dataset))
.enter();

path.append('path')
.transition()
.duration(1000)
.attr({
d: arc,
fill: function (d, i) {
return color(d.data.name);
}
})
.attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d)
}
})
;

svg.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 5)
.attr("fill", "black")
.transition()
.duration(1000)
.attr("r", 25)
.attr("fill", "#3182bd");

svg.append("text")
.attr("x",-5)
.attr("y",5)
.text('5');
}


[링크 : https://blog.nacyot.com/articles/2015-02-02-d3-selection/]

[링크 : https://bl.ocks.org/rshaker/225c6df494811f46f6ea53eba63da817]

[링크 : https://www.tutorialspoint.com/d3js/d3js_transition.htm]

[링크 : https://www.tutorialspoint.com/d3js/d3js_animation.htm]

[링크 : http://bl.ocks.org/nadinesk/99393098950665c471e035ac517c2224]

저작자표시

'Programming > d3' 카테고리의 다른 글

d3 관련 검색..  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
d3 font color / weight  (0) 2018.10.02
d3 tooltop  (0) 2018.10.01
d3 graph  (0) 2018.09.27
Posted by 구차니

티스토리툴바