DC.js - wykres bąbelkowy
Wykres bąbelkowy służy do wyświetlania trzech wymiarów danych. Jest to odmiana wykresu punktowego, w którym punkty danych są zastępowane bąbelkami. Rozmiary bąbelków są przedstawiane w odniesieniu do wymiaru danych. Wykorzystuje osie poziome i pionowe jako osie wartości. W tym rozdziale szczegółowo opisano wykres bąbelkowy.
Metody wykresów bąbelkowych
Zanim przejdziemy do rysowania wykresu bąbelkowego, powinniśmy zrozumieć dc.bubbleChartklasa i jej metody. Dc.bubbleChart używa mixinów, aby uzyskać podstawowe funkcje rysowania wykresów, które są wymienione poniżej -
- dc.bubbleMixin
- dc.coordinateGridMixin
Pełny diagram klas wykresu dc.bubbleChart jest następujący -
Dc.bubbleChart pobiera wszystkie metody z wyżej określonych mixinów. Ma również własne metody rysowania wykresu bąbelkowego, które wyjaśniono poniżej -
elastycznyRadius ([promień])
Ta metoda służy do włączania promienia bąbelków. Jeśli to wyłączymy, promień bąbelka zostanie automatycznie przeskalowany.
sortBubbleSize ([sortBubbleSize])
Ta metoda służy do włączania funkcji sortowania w bąbelkach. Mniejsze bąbelki pojawią się najpierw, a następnie stopniowo się zwiększą.
Narysuj wykres bąbelkowy
Narysujmy wykres bąbelkowy w DC. Aby to zrobić, musimy wykonać kroki podane poniżej -
Krok 1: Zdefiniuj zmienną
Zdefiniujmy zmienną, jak pokazano poniżej -
var chart = dc.bubbleChart('#bubble');W tym przypadku funkcja bubbleChart jest mapowana z bąbelkiem id.
Krok 2: Przeczytaj dane
Odczytaj dane z howell1.csv plik.
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Jeśli nie ma danych, zwraca błąd. Teraz przypisz dane do filtra krzyżowego. Tutaj już pobraliśmy plik howell1.csv. Ten sam plik zostanie użyty tutaj i będzie wyglądał podobnie do następującego bloku kodu.
"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
....................
.....................Krok 3: pobierz rekordy
Pobierzmy rekordy za pomocą kodu podanego poniżej -
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);
});Tutaj sprawdziliśmy płeć i ustawiliśmy zakres wysokości i szerokości na osi X za pomocą powyższego wzoru.
Krok 4: Ustaw wymiar
Wymiar możemy ustawić korzystając z kodowania podanego poniżej -
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});Po przypisaniu wymiaru pogrupuj płeć za pomocą kodu podanego poniżej -
var genderGroup = genderDimension.group().reduceCount();Krok 5: Wygeneruj wykres
Teraz wygeneruj wykres bąbelkowy, używając kodowania podanego poniżej -
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);
})Tutaj,
Przypisaliśmy szerokość wykresu jako 1200, a wysokość jako 400.
Następnie określiliśmy punkty marginesu.
Następnie przypisaliśmy wymiar i grupę płci.
Metoda dostępu klucza i wartości zwraca klucz i wartość z bąbelków.
Oblicz funkcję akcesora wartości promienia za pomocą wzoru - Math.floor((p.value / 10)) + 1.
Krok 6: Narysuj bąbelki
Teraz narysuj bąbelki, używając kodu podanego poniżej -
.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;
});Tutaj,
Funkcja d3.scale.linear służy do konstruowania nowej skali liniowej z określonym zakresem domeny [0,240] dla osi x.
Podobnie, przypisaliśmy y i wartości skali liniowej promienia.
Określiliśmy minimalną wartość etykiety promienia jako 1000, wartości dopełnienia osi X i Y odpowiednio jako 200 i 100.
Następnie określiliśmy maksymalny względny rozmiar bąbelka na 0,7.
Renderuj poziome i pionowe linie siatki, a następnie mapuj z tytułem klucza bąbelkowego i wartości.
Krok 7: Ustaw TickFormat
Ustaw formaty biletów dla osi X i Y, używając kodowania podanego poniżej -
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});Na koniec wyrenderuj wykres przy użyciu chart.render() metoda.
Krok 8: Przykład roboczy
Pełna lista kodu jest pokazana w poniższym bloku kodu. Utwórz stronę internetowąbubble.html i dodaj do niego następujące zmiany.
<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>Teraz poproś przeglądarkę, a zobaczymy następującą odpowiedź.