DC.js - mapa cieplna
Mapa Temperatur to graficzna reprezentacja danych w postaci mapy, w której wartości danych są przedstawiane w postaci kolorów. W tym rozdziale szczegółowo opisano mapę cieplną.
Zanim przejdziemy do rysowania mapy cieplnej, powinniśmy zrozumieć dc.heatMapklasa i jej metody. Dc.heatMap używa miksów, aby uzyskać podstawową funkcjonalność rysowania wykresów, które są wymienione poniżej -
- dc.colorMixin
- dc.marginMixin
- dc.baseMixin
Pełny diagram klas mapy dc.heatMap jest następujący -
Dc.heatMap pobiera wszystkie metody z wyżej określonych mixinów. Ma własne metody rysowania mapy cieplnej, które wyjaśniono poniżej -
boxOnClick ([handler])
Ta metoda służy do pobierania lub ustawiania modułu obsługi, gdy kliknięta zostanie pojedyncza komórka w mapie termicznej.
cols ([cols])
Ta metoda jest używana do pobierania lub ustawiania kluczy do tworzenia kolumn mapy ciepła.
colsLabel ([etykieta])
Ta metoda służy do pobierania lub ustawiania etykiety kolumny, która jest reprezentowana jako nazwa kolumny. Podobnie możemy również wykonać etykietę wiersza.
wiersze ([wiersze])
Ta metoda służy do pobierania lub ustawiania wartości używanych do tworzenia wierszy mapy termicznej.
xAxisOnClick ([handler])
Ta metoda jest używana do pobierania lub ustawiania modułu obsługi, gdy kliknięto znacznik kolumny na osi x.
xBorderRadius ([obramowanie])
Ta metoda służy do ustawiania promienia granicy X. Jeśli wartość jest ustawiona na 0, otrzymasz pełne prostokąty.
Narysuj mapę cieplną
Narysujmy mapę cieplną w DC. Aby to zrobić, musimy wykonać kroki podane poniżej -
Krok 1: Zdefiniuj zmienną
Zdefiniujmy zmienną, jak pokazano poniżej -
var chart = dc.heatMap('#heatmap');Tutaj funkcja heatMap jest odwzorowywana z mapą ciepła id.
Krok 2: Przeczytaj dane
Przeczytaj dane z howell1.csv plik, jak pokazano poniżej -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Tutaj użyliśmy tego samego pliku howell1.csv i wygląda to tak, jak pokazano poniżej -
"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) {
x.age = Math.floor(x.age) + 1;
x.heightRange = Math.floor(x.height / 10) + 1;
x.weightRange = Math.floor(x.weight / 10) + 1;
if(x.male == 1) {
x.gender = 1;
} else {
x.gender = 2;
}
});Tutaj sprawdziliśmy płeć i ustawiliśmy zakres wysokości i szerokości osi x za pomocą powyższego wzoru.
Krok 4: Ustaw wymiar
Możesz ustawić wymiar za pomocą kodowania podanego poniżej -
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});Po przypisaniu wymiaru pogrupuj płeć za pomocą kodu podanego poniżej -
var genderGroup = genderDimension.group().reduceCount();Krok 5: Wygeneruj wykres
Teraz wygeneruj mapę cieplną, używając kodu podanego poniżej -
chart
.width(20 * 45 + 80)
.height(2 * 45 + 40)
.dimension(ageDimension)
.group(ageGroup)
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.key[0]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
return "Height Range: " + ((d.key[1] - 1) * 10) + " - " + (d.key[1] * 10) + "cm\n" +
"Gender: " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
"Count: " + (d.value) + " count";
})
.calculateColorDomain()
chart.render();
});Tutaj,
- Przypisaliśmy szerokość wykresu jako 20 × 45 + 80, a wysokość jako 2 × 45 + 40.
- Następnie przypisaliśmy wymiar i grupę płci.
- Metoda dostępu klucza i wartości zwraca klucz i wartość z map popularności.
- Aby zwrócić kolor, musimy użyć funkcji colorAccessor ().
- Na koniec ustaw tytuł i wyrenderuj wykres.
Krok 6: Przykład roboczy
Pełne kodowanie jest następujące. Utwórz stronę internetowąheatmap.html i dodaj do niego następujące zmiany.
<html>
<head>
<title>DC heat map 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 = "heatmap"></div>
</div>
<script language = "javascript">
var chart = dc.heatMap('#heatmap');
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
x.age = Math.floor(x.age) + 1;
x.heightRange = Math.floor(x.height / 10) + 1;
x.weightRange = Math.floor(x.weight / 10) + 1;
if(x.male == 1) {
x.gender = 1;
} else {
x.gender = 2;
}
});
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});
var ageGroup = ageDimension.group().reduceCount();
chart
.width(20 * 45 + 80)
.height(2 * 45 + 40)
.dimension(ageDimension)
.group(ageGroup)
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.key[0]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
return "Height Range: " + ((d.key[1] - 1) * 10) + " - " +
(d.key[1] * 10) + "cm\n" +
"Gender: " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
"Count: " + (d.value) + " count";})
.calculateColorDomain()
chart.render();
});
</script>
</body>
</html>Teraz poproś przeglądarkę, a zobaczymy następującą odpowiedź.