오랫만에 D3.js post를 쓰게 되었네요. D3.js 홈페이지에서 공부 할만한 예제를 찾아보니 Gauge 예제 중 괜찮은 예제를 발견되어 오늘은 이 예제를 기반으로 간단히 실험을 해보았습니다.
Curtis Bratton’s Block 의 Gauge 예제입니다. 원리만 불가피하게 코드를 인용하여 post에 올리게 되었네요. 대충 느낌만 보시기 바랍니다. 자세한 소스는 출처에 가셔서 보시고 공부하시면 될 듯 싶네요.
위 출처에 가시면
liquidFillGauge.js
이렇게 따로 만들어 놓았더군요. 그래서 불러다 원하는 형태로 설정만 해서 출력만 시키면 되기 때문에 무지 간단하네요.
var gauge1 = loadLiquidFillGauge("g1", 50);
위와 같이 loadLiquidFillGauge()함수로 디폴트 Gauge Chart를 만들 수 있습니다.
loadLiquidFillGauge(출력태그 ID, 출력 수치)
Gauge Chart를 출력한 태그 ID에 이미지가 출력하고 출력한 Gauge Chart의 텍스트 값을 출력 수치에 맞게 출력이 자동으로 되게 만들어 놓았더군요.
<svg id="g1" width="97%" height="250" ></svg>
<script language="JavaScript">
var gauge1 = loadLiquidFillGauge("g1", 50);
</script>
[결과]
출처의 예제를 보니깐 디폴트로 사용 하는 방법 외에도 하나하나 디테일적으로 설정을 할 수 있게 코딩을 해놓았더군요.
<svg id="g1" width="97%" height="250" ></svg>
<script language="JavaScript">
var config1 = liquidFillGaugeDefaultSettings();
config1.circleColor = "#FF0000"; //테두리 색상
config1.textColor = "#00FF00"; //텍스트 색상
config1.waveTextColor = "#0000FF"; //웨이브 텍스트 색상
config1.waveColor = "#FF00FF"; //웨이브 색상
config1.circleThickness = 0.1; // 테두리 두깨
config1.textVertPosition = 0.5; // 텍스트 위치
config1.waveAnimateTime = 500; //웨이브 애니메이션 시간
var gauge1= loadLiquidFillGauge("g1", 50, config1);
</script>
예제의 한부분이네요. 값들을 변경을 해보았습니다. 변경했을 때 Gauge Chart 이미지가 어떻게 바뀌는지 살펴보니깐 위에 달아놓은 주석과 같이 변경이 되네요. 이렇게 하나하나 수정을 할 수 있게 되어 있네요.
[결과]
우연히 발견한 D3.js 예제 중 하나를 한번 시험해 봤네요. Curtis Bratton’s Block의 예제인데 liquidFillGauge.js 부분만 보면 머리가 아플 수 있지만 코딩을 모르더라도 위 디폴트로 사용하거나 아니면 디테일 설정에서 해당 속성값만 지정해주면 자유자재로 Gauge Chart를 만들어 사용할 수 있어 괜찮아 보이네요.
여기서, 실시간 데이터와 연동하면 꽤 재밌는 표현을 할 수 있을 듯 싶네요.
loadLiquidFillGauge("g1", 데이터, config1);
예전에 다른 Gauge Chart로 스팀보팅파워를 수치로 나타냈는데 이것도 데이터 부분에서 실시간으로 갱신만 이루어지게 표현하면 원하는 결과를 얻을 수 있을 것 같네요.
오늘은 간단히 D3.js에 공개된 예제 중 하나를 선택해 쉽게 접근하여 결과를 만들어 봤습니다. D3.js 예제들을 보면 긴 코딩들이 많지만 이렇게 핵심부분만 이해하면 불필요한 코딩을 다 생략하고 필요한 부분만을 가지고 짧고 쉬운 코딩을 할 수 있습니다.
마지막으로 다양한 표현은 자료 출처에 가셔서 한번 꼭 읽어보시기 바랍니다. 코딩 전체를 올려서 실험 결과를 같이 보여 드려야 하지만 제가 만든 코딩이 아니기 때문에 핵심적인 부분만 간단히 설명하고 그 설명을 기반으로 자료 출처에 가셔서 예제를 보고 직접 코딩을 해보시기 바랍니다.