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

  1. 2018.12.26 d3 axis / time domain
  2. 2018.12.23 d3 mouseover
  3. 2018.12.21 d3 time domain
  4. 2018.12.21 d3 double line graph
  5. 2018.11.27 d3 axis
  6. 2018.11.26 d3 온도/습도 그래프
  7. 2018.11.21 d3 multi line graph
  8. 2018.11.21 d3.time.format
  9. 2018.11.15 d3 pie 칸색 바꾸기
  10. 2018.11.15 d3 update 두번째 검색내용..
Programming/d32018.12.26 16:35

시간 축 관련해서 헤메고 있는데..

어쩌다 보니 링크가 날아가서.. (-_-)


아무튼 요약하자면

new Date()를 통해 받은 값이라도 domain()에 쓰려면 new Date()를 날짜 객체로 바꾸어 주어야 한다는 것 정도?

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

d3 axis / time domain  (0) 2018.12.26
d3 mouseover  (0) 2018.12.23
d3 time domain  (0) 2018.12.21
d3 double line graph  (0) 2018.12.21
d3 axis  (0) 2018.11.27
d3 온도/습도 그래프  (0) 2018.11.26
Posted by 구차니

댓글을 달아 주세요

Programming/d32018.12.23 22:54

mouseover는 d3 라기 보다는 그냥 순수(?)한 mouseover 이벤트로 구현하는 듯


      svg.selectAll("circle")

          .data(dataset)

          .enter()

          .append("circle")

          .attr(circleAttrs)  // Get attributes from circleAttrs var

          .on("mouseover", handleMouseOver)

          .on("mouseout", handleMouseOut); 


[링크 : http://bl.ocks.org/WilliamQLiu/76ae20060e19bf42d774]

[링크 : http://bl.ocks.org/phil-pedruco/9032348]

[링크 : http://bl.ocks.org/d3noob/a22c42db65eb00d4e369]

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

d3 axis / time domain  (0) 2018.12.26
d3 mouseover  (0) 2018.12.23
d3 time domain  (0) 2018.12.21
d3 double line graph  (0) 2018.12.21
d3 axis  (0) 2018.11.27
d3 온도/습도 그래프  (0) 2018.11.26
Posted by 구차니

댓글을 달아 주세요

Programming/d32018.12.21 19:51

희한하리 만치 시간축에 대해서 년/월/일 시:분:초 까지 출력을 하기 힘드네?

가장 바라는건 일 단위는 전부 출력하고 그 외에는 시분초만 출력하는건데 가능하려나?


[링크 : http://bl.ocks.org/ssmaroju/8af70edf235c6fcfe01bd7c1a4f95b96]

[링크 : https://stackoverflow.com/questions/33388547/time-axis-in-d3-js-with-specific-time-zone]

[링크 : http://www.d3noob.org/2012/12/formatting-date-time-on-d3js-graph.html]

[링크 : https://www.dashingd3js.com/lessons/d3-time-scales]

[링크 : http://bl.ocks.org/jebeck/9671241]

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

d3 axis / time domain  (0) 2018.12.26
d3 mouseover  (0) 2018.12.23
d3 time domain  (0) 2018.12.21
d3 double line graph  (0) 2018.12.21
d3 axis  (0) 2018.11.27
d3 온도/습도 그래프  (0) 2018.11.26
Posted by 구차니

댓글을 달아 주세요

Programming/d32018.12.21 17:37

d3.v4 기준

두개의 값을 출력하는 녀석(2계열)


[링크 : https://bl.ocks.org/brianbancroft/d4e65c54a1e7f16d5187ea03820e7c36]

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

d3 mouseover  (0) 2018.12.23
d3 time domain  (0) 2018.12.21
d3 double line graph  (0) 2018.12.21
d3 axis  (0) 2018.11.27
d3 온도/습도 그래프  (0) 2018.11.26
d3 multi line graph  (0) 2018.11.21
Posted by 구차니

댓글을 달아 주세요

Programming/d32018.11.27 13:44

d3.time.scale.utc() // 시간

d3.time.scale() // 월&일

[링크 : http://bl.ocks.org/jebeck/9671241]


domain

[링크 : https://stackoverflow.com/questions/11807574/d3-using-strings-as-axis-ticks]

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


d3.extent

[링크 : http://lumiamitie.github.io/r_tutorial/D3vis02]

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

d3 time domain  (0) 2018.12.21
d3 double line graph  (0) 2018.12.21
d3 axis  (0) 2018.11.27
d3 온도/습도 그래프  (0) 2018.11.26
d3 multi line graph  (0) 2018.11.21
d3.time.format  (0) 2018.11.21
Posted by 구차니

댓글을 달아 주세요

Programming/d32018.11.26 13:13

서로 다른 계열의 데이터를 출력하는 방법을 찾는 중..


[링크 : https://github.com/LonnyGomes/attic-temperature-graph]



+

2018.12.21


[링크 : http://blog.fraggod.net/2016/08/05/d3-chart-for-common-temperaturerh-time-series-data.html[

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

d3 double line graph  (0) 2018.12.21
d3 axis  (0) 2018.11.27
d3 온도/습도 그래프  (0) 2018.11.26
d3 multi line graph  (0) 2018.11.21
d3.time.format  (0) 2018.11.21
d3 pie 칸색 바꾸기  (0) 2018.11.15
Posted by 구차니

댓글을 달아 주세요

Programming/d32018.11.21 19:06


[링크 : https://beta.observablehq.com/@mbostock/d3-multi-line-chart]


d3.v4

d3.line 

[링크 : https://bl.ocks.org/d3noob/4db972df5d7efc7d611255d1cc6f3c4f]

[링크 : https://codepen.io/zakariachowdhury/pen/JEmjwq]



d3 3.5.3

[링크 : https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91]


+ 2018.11.22

[링크 : http://bl.ocks.org/hunzy/11110940] grid

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

d3 axis  (0) 2018.11.27
d3 온도/습도 그래프  (0) 2018.11.26
d3 multi line graph  (0) 2018.11.21
d3.time.format  (0) 2018.11.21
d3 pie 칸색 바꾸기  (0) 2018.11.15
d3 update 두번째 검색내용..  (0) 2018.11.15
Posted by 구차니

댓글을 달아 주세요

Programming/d32018.11.21 11:31

식별자로 바로바로 나온다.

근데.. 먼가 좀 직관적이지 않네?


var formatMillisecond = d3.timeFormat(".%L"),

    formatSecond = d3.timeFormat(":%S"),

    formatMinute = d3.timeFormat("%I:%M"),

    formatHour = d3.timeFormat("%I %p"),

    formatDay = d3.timeFormat("%a %d"),

    formatWeek = d3.timeFormat("%b %d"),

    formatMonth = d3.timeFormat("%B"),

    formatYear = d3.timeFormat("%Y"); 

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

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

d3 온도/습도 그래프  (0) 2018.11.26
d3 multi line graph  (0) 2018.11.21
d3.time.format  (0) 2018.11.21
d3 pie 칸색 바꾸기  (0) 2018.11.15
d3 update 두번째 검색내용..  (0) 2018.11.15
d3 update enter  (0) 2018.11.12
Posted by 구차니

댓글을 달아 주세요

Programming/d32018.11.15 18:48

출력할 데이터에 label, value 외에 color를 이용하여 해당 칸을 직접 색 지정이 가능한 라이브러리

흐음.. 이걸 원한건 아닌데 ㅠㅠ


data: {

content: [

{ label: "Bushtit", value: 5 },

{ label: "Chickadee", value: 2 },

{ label: "Elephants", value: 6, color: "#00aa00" }, // here! 

]}

[링크 : http://d3pie.org/website/examples/colors.html]

[링크 : http://d3pie.org/]


+

좀 다르면서도 위와 같은 접근 방법

직접 fill color를 지정해주도록 .data(pie()) 이후에 추가해주면 되는 듯 하다.

var path = svg.selectAll('path')

.data(pie(data))

.enter()

.append('path')

.attr('d', arc)

.attr('fill', function(d, i) {

return data[i].color;

});


[

{ "count": 10,"color":"rgb(0,154,205)" },

{ "count": 20 ,"color":"rgb(139,119,101)"},

{ "count": 30,"color":"rgb(255,140,0)" },

{ "count": 40,"color":"rgb(127,255,0)" }


[링크 : https://www.knowlarity.com/blog/creating-pie-chart-d3-js-step-step/]

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

d3 multi line graph  (0) 2018.11.21
d3.time.format  (0) 2018.11.21
d3 pie 칸색 바꾸기  (0) 2018.11.15
d3 update 두번째 검색내용..  (0) 2018.11.15
d3 update enter  (0) 2018.11.12
d3 svg circle  (0) 2018.11.01
Posted by 구차니

댓글을 달아 주세요

Programming/d32018.11.15 18:39

update라는 함수가 존재하는 것은 아니고

data() 함수를 통해 값을 묶어주고(bind)

enter()로 새로운 항목을 추가하고

exit()로 나가면서 삭제하거나 어떠한 다른 행위를 하면서 (예, exit().remove() )

업데이트 하는 action을 구현한다 라는 개념..


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

[링크 : https://lumiamitie.github.io/d3/d3-enter-update-exit/]

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

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

d3.time.format  (0) 2018.11.21
d3 pie 칸색 바꾸기  (0) 2018.11.15
d3 update 두번째 검색내용..  (0) 2018.11.15
d3 update enter  (0) 2018.11.12
d3 svg circle  (0) 2018.11.01
d3 svg string width in px  (0) 2018.11.01
Posted by 구차니

댓글을 달아 주세요