D3.js 작가 Mike Bostock 씨의 최신 샘플을 많이 볼 수 있는 bl.ocks.org 입니다만, GitHub 계정을 가지고 있는 사용자라면 누구라도 투고가 가능합니다.http://bl.ocks.org/<GitHub id>를 방문하면 과거에 작성한 gist를 자동으로 가져와 표시됩니다.

자신도 때때로 게시하고 있습니다.
htp // bl. 오크스. 오 rg/오소켄

절차

public gist를 새로 작성

파일은 무엇이든 좋지만, index.html는 좋을 것 같습니다

[Gist description]은 기사 제목으로 취급됩니다. blocks 목록에 표시되면 blocks의 제목으로 사용됩니다.

gist clone

readme.md 및 index.html 및 thumbnail.png를 리포지토리에 만들고 push

readme.md는 blocks iframe 바로 아래에 설명으로 표시됩니다

index.html는 블록의 iframe에 배포됩니다. 해상도는 960px*500px입니다(고정?)

thumbnail.png는 블록 목록을 표시하는 데 사용됩니다. 해상도는 230px*120px입니다

동일한 gist 내에 있으면 상대 경로로 액세스할 수 있습니다. 데이터를 gist에 함께 배치하는 경우가 많음

다른 gist 리소스에 액세스하려면 /<GitHub id>/raw/<gist id>/<リソース名>에서 수행 할 수 있습니다

.

Tips

로컬에서 blocks와 유사한 디렉토리 구성 재현

로컬 환경에 bl.ocks.org 와 같은 디렉토리 구성을 만들어 localhost 를 세우면 디버그나 썸네일의 생성이 편합니다. 자신은 gist/<GitHub id>/raw/ 에 gist 를 clone 하고 있습니다. 자신의 지금의 디렉토리 구성은 이런 느낌.

gist/
  └ osoken/
      └ raw/
         ├ 8fd61d9bf581691a794a/
         |   ├ data.json
         |   ├ index.html
         |   ├ readme.md
         |   └ thumbnail.png
         ├ 9e5ec69346e972c54884/
         |   └ ...
         └ ...

그리고 gist 디렉토리가 /가 되도록 localhost를 세우고 있습니다.

[osoken@somewhere gist]$ python -m SimpleHTTPServer

이렇게하면 다른 gist 리소스의 URL이 blocks의 URL /<GitHub id>/raw/<gist id>/<リソース名>과 일치합니다. 예를 들어 8fd61d9bf581691a794a 에서 사용한 data.json 를 다른 gist 에서도 사용하고 싶을 때는 /osoken/raw/8fd61d9bf581691a794a/data.json 로 이용할 수 있다, 라고 하는 느낌입니다.

썸네일 생성

phantomjs 명령 유용합니다. 웹 페이지의 스크린 샷을 찍는 rasterize.js이라는 스크립트가 포함되어 있으므로 그것을 사용하여 960px*500px로 만든 다음 imagemagick의 mogrify 명령으로 230px*120px로 축소합니다. .

[osoken@somewhere gist]$ phantomjs rasterize.js http://localhost:8000/osoken/raw/8fd61d9bf581691a794a/ osoken/raw/8fd61d9bf581691a794a/thumbail.png  960px*500px
[osoken@somewhere gist]$ mogrify -resize 230x120 osoken/raw/8fd61d9bf581691a794a/thumbnail.png