DC.js-거품 형 차트
거품 형 차트는 데이터의 3 차원을 표시하는 데 사용됩니다. 데이터 포인트가 거품으로 대체되는 분산 형 차트의 변형입니다. 거품 크기는 데이터 차원과 관련하여 표시됩니다. 수평 및 수직 축을 값 축으로 사용합니다. 이 장에서는 버블 차트에 대해 자세히 설명합니다.
버블 차트 방법
거품 형 차트를 그리기 전에 다음 사항을 이해해야합니다. dc.bubbleChart클래스 및 메서드. dc.bubbleChart는 믹스 인을 사용하여 아래에 나열된 차트를 그리는 기본 기능을 얻습니다.
- dc.bubbleMixin
- dc.coordinateGridMixin
dc.bubbleChart의 전체 클래스 다이어그램은 다음과 같습니다.
dc.bubbleChart는 위에서 지정한 믹스 인의 모든 메서드를 가져옵니다. 또한 아래에 설명 된 버블 차트를 그리는 자체 방법이 있습니다.
elasticRadius ([반지름])
이 방법은 버블 반경을 활성화하는 데 사용됩니다. 이것을 비활성화하면 버블 반경이 자동으로 조정됩니다.
sortBubbleSize ([sortBubbleSize])
이 방법은 거품에서 정렬 기능을 활성화하는 데 사용됩니다. 작은 거품이 먼저 나온 다음 점차 증가합니다.
거품 형 차트 그리기
DC에서 버블 차트를 그리겠습니다. 이렇게하려면 아래 단계를 따라야합니다.
1 단계 : 변수 정의
아래와 같이 변수를 정의하겠습니다.
var chart = dc.bubbleChart('#bubble');여기서 bubbleChart 함수는 id bubble과 매핑됩니다.
2 단계 : 데이터 읽기
데이터 읽기 howell1.csv 파일.
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}데이터가 없으면 오류를 반환합니다. 이제 데이터를 교차 필터에 할당합니다. 여기서 우리는 이미 howell1.csv 파일을 다운로드했습니다. 여기에 동일한 파일이 사용되며 다음 코드 블록과 유사합니다.
"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0
....................
.....................3 단계 : 레코드 가져 오기
아래에 주어진 코딩을 사용하여 레코드를 가져옵니다.
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});여기에서는 성별을 확인하고 위의 공식을 사용하여 x 축 높이와 너비 범위를 설정했습니다.
4 단계 : 치수 설정
아래에 주어진 코딩을 사용하여 치수를 설정할 수 있습니다.
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});차원이 할당 된 후 아래에 주어진 코딩을 사용하여 성별을 그룹화합니다.
var genderGroup = genderDimension.group().reduceCount();5 단계 : 차트 생성
이제 아래에 주어진 코딩을 사용하여 버블 차트를 생성하십시오.
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})여기,
차트 너비를 1200으로, 높이를 400으로 지정했습니다.
다음으로 여백 포인트를 지정했습니다.
그런 다음 성별 차원과 그룹을 할당했습니다.
키 및 값 접근자는 거품에서 키와 값을 반환합니다.
공식을 사용하여 반경 값 접근 자 함수를 계산합니다. Math.floor((p.value / 10)) + 1.
6 단계 : 거품 그리기
이제 아래에 주어진 코딩을 사용하여 거품을 그립니다.
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});여기,
d3.scale.linear 함수는 x 축에 대해 지정된 도메인 범위 [0,240]로 새 선형 스케일을 생성하는 데 사용됩니다.
마찬가지로 y 및 반경 선형 스케일 값을 할당했습니다.
최소 반경 레이블 값을 1000으로, x 축 및 y 축 패딩 값을 각각 200 및 100으로 지정했습니다.
다음으로 최대 버블 상대 크기 값을 0.7로 지정했습니다.
수평 및 수직 그리드 선을 렌더링 한 다음 버블 키 및 값의 제목으로 매핑합니다.
7 단계 : TickFormat 설정
아래에 주어진 코딩을 사용하여 x 및 y 축의 티켓 형식을 설정하십시오-
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});마지막으로 chart.render() 방법.
8 단계 : 작업 예
전체 코드 목록은 다음 코드 블록에 나와 있습니다. 웹 페이지 만들기bubble.html 다음 변경 사항을 추가하십시오.
<html>
<head>
<title>Bubble chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "bubble"></div>
</div>
<script language = "javascript">
var chart = dc.bubbleChart('#bubble');
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});
var genderGroup = genderDimension.group().reduceCount();
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});
chart.render();
});
</script>
</body>
</html>이제 브라우저를 요청하면 다음과 같은 응답이 표시됩니다.