create account

[D3.js] Britecharts 사이트 소개 by codingman

View this thread on: hive.blog |  peakd.com |  ecency.com
dclick · @codingman · (edited)
$5.06
[D3.js] Britecharts 사이트 소개
# [D3.js] Britecharts 사이트 소개
-----
D3.js를 공부하다가 재밌는 사이트를 발견했네요. Britecharts 사이트 인데 D3.js 기반의 라이브러리 API 함수를 제공해주는데 업그레이드 형태의 라이브러리인 것 같아요. 차트 시각화가 좀 더 정교하고 멋진 표현을 쉽게 만들 수 있게 해주는 것 같은데 아직 사용해 보지 않았고 코딩을 봐서는 꽤 깔끔하게 차트 코딩이 이루어지는 것 같아 보이네요. 간단히 소개만 합니다.

## 1. Britecharts 사이트
-----
Britecharts 사이트 github 사이트에 등록된 곳이네요.

![](https://i.imgur.com/11g3XFy.jpg)

여기서, API 항목을 클릭하면 대충 각 차트 형태들을 아래 그림을 보는 것처럼 나누었고 사용방법에 대해서 자세히 소개하고 있네요.

![](https://i.imgur.com/VX76nMy.jpg)

위 API 에서 Bar를 클릭했는데 대충 영문으로 설명을 자세히 나와 있네요.

## 2. Britecharts 세팅
-----

위의 사이트 이미지에서 Getting Started라는 걸 클릭하면 세팅하는 방법이 아래와 같이 나옵니다. 4가지 방식인데 설치를 하든 직접 링크 연결을 하든 선택해서 하면 되는 것 같더군요.

![](https://i.imgur.com/d1USeDa.jpg)

## 3. Britecharts 예제
-----
사이트 보시면 Demos항목이 있는데 거기 Bar Chart를 한번 클릭해 봤네요.
![](https://i.imgur.com/U924HM1.jpg)

code를 보시면 엄청 간결하죠. D3.js를 어느정도 공부하고 이걸고 공부하면 재밌을 것 같네요.

## 마무리
-----
오늘은 우연히 발견한 Britecharts를 소개 해봤네요. 어느정도 D3.js 지식이 있는 상태에서 이걸 사용하여 차트 시각화하면 꽤 유용할 듯 싶네요. 나중에 d3.js가 정리가 되면 한번 이것도 공부해 봐야 겠네요.
***
#####  <sub> **Sponsored ( Powered by [dclick](https://www.dclick.io) )** </sub>
##### [DCLICK: An Incentivized Ad platform by Proof of Click - 스팀 기반 애드센스를 소개합니다.](https://api.dclick.io/v1/c?x=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiJjb2RpbmdtYW4iLCJ1cmwiOiJodHRwczovL3N0ZWVtaXQuY29tL2RjbGljay9AZGNsaWNrL2RjbGljay1hbi1pbmNlbnRpdml6ZWQtYWQtcGxhdGZvcm0tYnktcHJvb2Ytb2YtY2xpY2stIiwicGVybWxpbmsiOiJkM2pzLWJyaXRlY2hhcnRzLS0xNTM5MDQyNjE3MzY5IiwiaWF0IjoxNTM5MDQyNjE3LCJleHAiOjE4NTQ0MDI2MTd9.aY476rxPNixu4rPaC2ww6U4WaHU6w0nebS574QGIhDk)
<sup>안녕하세요 스티미언 여러분. 오늘 여러분께 스팀 블록체인 기반 광고 플랫폼 DCLICK을 소개...</sup>
<br><center>![logo](https://steemitimages.com/200x100/https://cdn.steemitimages.com/DQmbjkrc5UT4GgZXygAnS3mLrboAy7Y8gr7R7guB8HG3f5n/logopad500.png)<br><br>이 글은 스팀 기반 광고 플랫폼<br>[dclick](https://www.dclick.io) 에 의해 작성 되었습니다.</center>
👍  , , , , , , , , , , , , , , , , ,
properties (23)
authorcodingman
permlinkd3js-britecharts--1539042617369
categorydclick
json_metadata{"tags":["dclick","kr-dev","jjangjjangman","busy","interesteem"],"community":"busy","app":"busy/2.5.6","format":"markdown","users":[],"links":["https://www.dclick.io","https://api.dclick.io/v1/c?x=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiJjb2RpbmdtYW4iLCJ1cmwiOiJodHRwczovL3N0ZWVtaXQuY29tL2RjbGljay9AZGNsaWNrL2RjbGljay1hbi1pbmNlbnRpdml6ZWQtYWQtcGxhdGZvcm0tYnktcHJvb2Ytb2YtY2xpY2stIiwicGVybWxpbmsiOiJkM2pzLWJyaXRlY2hhcnRzLS0xNTM5MDQyNjE3MzY5IiwiaWF0IjoxNTM5MDQyNjE3LCJleHAiOjE4NTQ0MDI2MTd9.aY476rxPNixu4rPaC2ww6U4WaHU6w0nebS574QGIhDk","https://www.dclick.io"],"image":["https://i.imgur.com/11g3XFy.jpg","https://i.imgur.com/VX76nMy.jpg","https://i.imgur.com/d1USeDa.jpg","https://i.imgur.com/U924HM1.jpg","https://steemitimages.com/200x100/https://cdn.steemitimages.com/DQmbjkrc5UT4GgZXygAnS3mLrboAy7Y8gr7R7guB8HG3f5n/logopad500.png"]}
created2018-10-08 23:50:18
last_update2018-10-08 23:52:21
depth0
children11
last_payout2018-10-15 23:50:18
cashout_time1969-12-31 23:59:59
total_payout_value3.887 HBD
curator_payout_value1.178 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,832
author_reputation23,188,231,710,844
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,904,657
net_rshares3,564,767,942,799
author_curate_reward""
vote details (18)
@nalumsiss · 
화요일이 일요일 같다보니 .. 괜히 오늘 출근 피곤 하네요 ㅡ ㅡ 
저도 기초 코딩 공부 얼른 해야 할텐데.. 
초등 필수 라면서요 아짜가 좀 알아야 아니 지금이라도 알아야 이 방면으로 놀이 할텐데 
급 걱정이 드네요 
![B062ED77-2C6A-412F-8C3E-63C9FED064AE.jpeg](https://cdn.steemitimages.com/DQmefsZf9YH5BKjik4ZvC1LBdhkGjt1p2hpgbBp48jXovi3/B062ED77-2C6A-412F-8C3E-63C9FED064AE.jpeg)
properties (22)
authornalumsiss
permlinkre-codingman-d3js-britecharts--1539042617369-20181009t223401245z
categorydclick
json_metadata{"tags":["dclick"],"image":["https://cdn.steemitimages.com/DQmefsZf9YH5BKjik4ZvC1LBdhkGjt1p2hpgbBp48jXovi3/B062ED77-2C6A-412F-8C3E-63C9FED064AE.jpeg"],"app":"steemit/0.1"}
created2018-10-09 22:34:03
last_update2018-10-09 22:34:03
depth1
children1
last_payout2018-10-16 22:34:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length288
author_reputation12,164,911,411,561
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,968,471
net_rshares0
@codingman · 
수요일이 월요일 같은 기분의 하루가 될듯요.
properties (22)
authorcodingman
permlinkre-nalumsiss-re-codingman-d3js-britecharts--1539042617369-20181010t001142117z
categorydclick
json_metadata{"tags":["dclick"],"app":"steemit/0.1"}
created2018-10-10 00:11:42
last_update2018-10-10 00:11:42
depth2
children0
last_payout2018-10-17 00:11:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length24
author_reputation23,188,231,710,844
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,971,823
net_rshares0
@seo70 · 
새로운걸 알게 됐네요. 덕분에
properties (22)
authorseo70
permlinkre-codingman-d3js-britecharts--1539042617369-20181009t084358439z
categorydclick
json_metadata{"community":"busy","app":"busy/2.5.6","format":"markdown","tags":["dclick"],"users":[],"links":[],"image":[]}
created2018-10-09 08:44:00
last_update2018-10-09 08:44:00
depth1
children1
last_payout2018-10-16 08:44:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length16
author_reputation36,974,848,812,549
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,926,807
net_rshares0
@codingman · 
코딩은 진짜 다양한 것 같아요.
공부하면 할 수록 새로운 것들이 발견 되네요.
properties (22)
authorcodingman
permlinkre-seo70-re-codingman-d3js-britecharts--1539042617369-20181009t133752380z
categorydclick
json_metadata{"tags":["dclick"],"app":"steemit/0.1"}
created2018-10-09 13:37:51
last_update2018-10-09 13:37:51
depth2
children0
last_payout2018-10-16 13:37:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length43
author_reputation23,188,231,710,844
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,941,138
net_rshares0
@shinekey · 
ㅋㅋ저는 왜 머리가 아플까요.  ㅋㅋ dclick도 눌러주는 센스 ~
properties (22)
authorshinekey
permlinkre-codingman-d3js-britecharts--1539042617369-20181009t051506565z
categorydclick
json_metadata{"tags":["dclick"],"app":"steemit/0.1"}
created2018-10-09 05:15:09
last_update2018-10-09 05:15:09
depth1
children1
last_payout2018-10-16 05:15:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length38
author_reputation273,945,537,612
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,917,801
net_rshares0
@codingman · 
감사합니다.
딱한명 클릭했네요. ㅋㅋ ^^
properties (22)
authorcodingman
permlinkre-shinekey-re-codingman-d3js-britecharts--1539042617369-20181009t133704644z
categorydclick
json_metadata{"tags":["dclick"],"app":"steemit/0.1"}
created2018-10-09 13:37:03
last_update2018-10-09 13:37:03
depth2
children0
last_payout2018-10-16 13:37:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length23
author_reputation23,188,231,710,844
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,941,097
net_rshares0
@steemitboard · 
Congratulations @codingman! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/commented.png)](http://steemitboard.com/@codingman) Award for the number of comments received

<sub>_Click on the badge to view your Board of Honor._</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/spanish/@steemitboard/presentamos-el-ranking-de-steemitboard"><img src="https://steemitimages.com/64x128/https://cdn.steemitimages.com/DQmfRVpHQhLDhnjDtqck8GPv9NPvNKPfMsDaAFDE1D9Er2Z/header_ranking.png"></a></td><td><a href="https://steemit.com/spanish/@steemitboard/presentamos-el-ranking-de-steemitboard">Presentamos el Ranking de SteemitBoard</a></td></tr><tr><td><a href="https://steemit.com/steemitboard/@steemitboard/introducing-steemitboard-ranking"><img src="https://steemitimages.com/64x128/https://cdn.steemitimages.com/DQmfRVpHQhLDhnjDtqck8GPv9NPvNKPfMsDaAFDE1D9Er2Z/header_ranking.png"></a></td><td><a href="https://steemit.com/steemitboard/@steemitboard/introducing-steemitboard-ranking">Introducing SteemitBoard Ranking</a></td></tr></table>

> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-codingman-20181009t184838000z
categorydclick
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-10-09 18:48:36
last_update2018-10-09 18:48:36
depth1
children0
last_payout2018-10-16 18:48:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,541
author_reputation38,975,615,169,260
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,958,243
net_rshares0
@susunhwa · 
응원 합니다.~~^^
properties (22)
authorsusunhwa
permlinkre-codingman-d3js-britecharts--1539042617369-20181009t141656519z
categorydclick
json_metadata{"tags":["dclick"],"app":"steemit/0.1"}
created2018-10-09 14:16:57
last_update2018-10-09 14:16:57
depth1
children1
last_payout2018-10-16 14:16:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length11
author_reputation3,110,727,684,322
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,943,464
net_rshares0
@codingman · 
감사합니다.
properties (22)
authorcodingman
permlinkre-susunhwa-re-codingman-d3js-britecharts--1539042617369-20181010t001052101z
categorydclick
json_metadata{"tags":["dclick"],"app":"steemit/0.1"}
created2018-10-10 00:10:51
last_update2018-10-10 00:10:51
depth2
children0
last_payout2018-10-17 00:10:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length6
author_reputation23,188,231,710,844
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,971,796
net_rshares0
@syskwl · 
Britecharts 사이트 D3.js 공부하는 분들은 꼭 기어해야할 사이트네요
properties (22)
authorsyskwl
permlinkre-codingman-d3js-britecharts--1539042617369-20181009t095206363z
categorydclick
json_metadata{"tags":["dclick"],"app":"steemit/0.1"}
created2018-10-09 09:51:00
last_update2018-10-09 09:51:00
depth1
children1
last_payout2018-10-16 09:51:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length44
author_reputation47,893,805,890,212
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,929,483
net_rshares0
@codingman · 
차트를 더 간결하게 코딩하게 해서 배울만한 라이브러리네요.
properties (22)
authorcodingman
permlinkre-syskwl-re-codingman-d3js-britecharts--1539042617369-20181009t133535133z
categorydclick
json_metadata{"tags":["dclick"],"app":"steemit/0.1"}
created2018-10-09 13:35:33
last_update2018-10-09 13:35:33
depth2
children0
last_payout2018-10-16 13:35:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length32
author_reputation23,188,231,710,844
root_title"[D3.js] Britecharts 사이트 소개"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id72,941,007
net_rshares0
Help/Feedback