DC.js-산점도
산점도는 수학적 다이어그램의 한 유형입니다. 데카르트 좌표를 사용하여 데이터 세트에 대한 일반적으로 두 개의 변수 값을 표시합니다. 데이터는 포인트 모음으로 표시되며 포인트는 색상이 지정 될 수 있습니다. 이 장에서는 산점도에 대해 자세히 설명합니다.
산점도 방법
산점도를 그리기 전에 다음 사항을 이해해야합니다. dc.scatterPlot클래스 및 메서드. dc.scatterPlot은 믹스 인을 사용하여 차트를 그리는 기본 기능을 얻습니다. dc.scatterPlot에서 사용하는 믹스 인은 다음과 같습니다.
- dc.coordinateGridMixin
dc.scatterPlot의 전체 클래스 다이어그램은 다음과 같습니다.
dc.scatterPlot은 위에서 지정한 믹스 인의 모든 메서드를 가져옵니다. 다음과 같이 산점도를 그리는 자체 방법이 있습니다.
customSymbol ([symbol])
이 메서드는 기호 생성기를 가져 오거나 설정하는 데 사용됩니다.
emptySize ([크기])
이 메서드는 그룹이 비어있을 때 심볼의 반경을 설정하거나 가져 오는 데 사용됩니다.
excludedColor ([색상])
이 메서드는 차트의 필터에서 제외 된 기호의 색상을 가져 오거나 설정하는 데 사용됩니다.
excludedOpacity ([불투명도])
이 메서드는 차트의 필터에서 제외 된 기호의 불투명도를 가져 오거나 설정하는 데 사용됩니다.
excludedSize ([크기])
차트 필터에서 제외 된 심볼의 크기를 설정하거나 가져 오는 데 사용됩니다.
highlightSize ([크기])
강조 표시된 기호의 반경을 설정하거나 가져 오는 데 사용됩니다.
기호 ([유형])
각 포인트에 사용되는 기호 유형을 가져 오거나 설정하는 데 사용됩니다.
산점도 그리기
DC에서 산점도를 그리겠습니다. 이 예에서는 다음과 같은 데이터 세트를 사용합니다.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
...............
...............위의 샘플 파일에는 많은 레코드가 포함되어 있습니다. 다음 링크를 클릭하고 DC 위치에 저장하여 파일을 다운로드 할 수 있습니다.
howell1.csv
이제 DC에서 분산 형 차트를 그리는 다음 단계를 따르십시오.
1 단계 : 변수 정의
아래와 같이 변수를 정의하겠습니다.
var chart = dc.scatterPlot('#scatter');여기서 scatterplot () 함수는 id scatter와 매핑됩니다.
2 단계 : 데이터 읽기
아래와 같이 howell1.csv 파일에서 데이터를 읽습니다.
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}데이터가 없으면 오류를 반환합니다. 나중에 데이터를 교차 필터에 할당합니다.
3 단계 : 레코드 가져 오기
아래에 주어진 코딩을 사용하여 레코드를 가져옵니다.
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
});여기서는 성별을 확인했습니다.
4 단계 : 치수 설정
아래에 주어진 코딩을 사용하여 치수를 설정할 수 있습니다-
var hwDimension = mycrossfilter.dimension(function(data) {
return [Math.floor(data.height), Math.floor(data.weight)];
});차원이 할당 된 후 아래에 주어진 코딩을 사용하여 성별을 그룹화합니다.
var hwGroup = hwDimension.group().reduceCount();5 단계 : 차트 생성
이제 아래에 주어진 코딩을 사용하여 히트 맵을 생성합니다.
chart
.width(800)
.height(600)
.x(d3.scale.linear().domain([0,180]))
.y(d3.scale.linear().domain([0,100]))
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Weight")
.symbolSize(8)
.clipPadding(10)
.dimension(hwDimension)
.group(hwGroup);여기,
- 차트 너비는 800으로, 높이는 600으로 지정했습니다.
- x 및 y 축 모두에 d3.scale.linear () 함수를 적용했습니다.
- brushOn 값을 false로 활성화했습니다.
- 그런 다음 x 축 레이블을 높이로, y 축 레이블을 무게로 지정합니다.
- 심볼 크기를 8로, 패딩 값을 10으로 설정합니다.
- 마지막으로 데이터를 그룹화하고 차트를 렌더링합니다.
6 단계 : 작업 예
전체 코드 목록은 다음과 같습니다. 웹 페이지 만들기scatter.html 다음 변경 사항을 추가하십시오.
<html>
<head>
<title>Scatter plot 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 = "scatter"></div>
</div>
<script language = "javascript">
var chart = dc.scatterPlot('#scatter');
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";
}
});
var hwDimension = mycrossfilter.dimension(function(data) {
return [Math.floor(data.height), Math.floor(data.weight)];
});
var hwGroup = hwDimension.group().reduceCount();
chart
.width(800)
.height(600)
.x(d3.scale.linear().domain([0,180]))
.y(d3.scale.linear().domain([0,100]))
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Weight")
.symbolSize(8)
.clipPadding(10)
.dimension(hwDimension)
.group(hwGroup);
chart.render();
});
</script>
</body>
</html>이제 브라우저를 요청하면 다음과 같은 응답이 표시됩니다.