2015-06-01 66 views
0

我創建了自己的具有行政區域的Germany.json。d3具有不同日期和時間的等值線圖

至於這個Germany.json數據,我創建了一個簡單的表2列: (行政區域的名稱)(行政區域的速率)

我的地圖的偉大工程,但我的工作尚未完成接着就,隨即。

我有4列(日期,時間,行政區域和費率)的詳細表。

因此,如果您先選擇日期,然後再選擇時間,則可以創建Choropleth地圖。選擇日期和時間後,給定輸入的地圖顯示出來。

這裏的問題是,我是一個JavaScript的初學者。 我在腦海中有一些想法,但我無法將想法轉化爲代碼。

這就是爲什麼我在這裏要求幫助和想法。

我在問甚至有可能嗎?

http://www.vincentbroute.fr/mapael/usecases/world/

在上面的鏈接的地圖是最有趣的地區分佈圖到目前爲止,我還發現,有共同的東西與我想要的地圖。

感謝您閱讀這篇文章。

這裏是我的代碼:

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 

 
.properties { 
 
    fill: none; 
 
} 
 

 
//Hier werden die Farben für verschiedene Kategorien zugeteilt 
 
.q0-9 { fill:rgb(247,251,255); } 
 
.q1-9 { fill:rgb(222,235,247); } 
 
.q2-9 { fill:rgb(198,219,239); } 
 
.q3-9 { fill:rgb(158,202,225); } 
 
.q4-9 { fill:rgb(107,174,214); } 
 
.q5-9 { fill:rgb(66,146,198); } 
 
.q6-9 { fill:rgb(33,113,181); } 
 
.q7-9 { fill:rgb(8,81,156); } 
 
.q8-9 { fill:rgb(8,48,107); } 
 

 

 

 
</style> 
 

 
<body> 
 
<script src="http://d3js.org/d3.v3.js"></script> 
 
<script src="http://d3js.org/topojson.v1.js"></script> 
 
<script src="http://d3js.org/colorbrewer.v1.js"></script> 
 
<script src="http://d3js.org/queue.v1.js"></script> 
 
</body> 
 
<script> 
 
    
 
    
 
//Größe der Karte wird eingestellt 
 
var width = 1050, 
 
\t height = 1000; 
 
\t 
 
var rateById = d3.map(); 
 
//Skalierung für die Einfärbung 
 
var quantize = d3.scale.quantize() 
 
    .domain([1, 50]) 
 
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; })); 
 
\t 
 
//Skalierung und Ausrichtung auf deutschland 
 
var projection = d3.geo.albers() 
 
    .center([10.4, 51.35]) 
 
    .rotate([1, 0]) 
 
    .parallels([50, 60]) 
 
    .scale(1200 * 5) 
 
    .translate([width/2, height/2]); 
 
//D3 Projection wird angelegt 
 
var path = d3.geo.path() 
 
    .projection(projection); 
 

 

 
//svg wird angelegt 
 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 
//Warteschlange zum Ausführen des Skripts wird angelegt 
 
queue() 
 
    .defer(d3.json, "germany.json") 
 
    .defer(d3.tsv, "test2.tsv", function(d) { 
 
\t \t rateById.set(d.NAME_2, +d.rate); 
 
\t \t }) 
 
    .await(ready); 
 

 
//Karte wird geladen und mit den gewünschten Properties geöffnet und zugewiesen \t 
 
function ready(error, de) { 
 
    svg.append("g") 
 
     .attr("class", "properties") 
 
    svg.selectAll("path") 
 
     .data(topojson.feature(de, de.objects.collection).features) 
 
    .enter().append("path") 
 
     .attr("class", function(d) { 
 
\t \t return quantize(rateById.get(d.properties.NAME_2)); 
 
\t }) 
 
     .attr("d", path); 
 

 

 
} 
 

 
//d3.select(self.frameElement).style("height", height + "px"); 
 
</script>

+0

//不是*那個人*,但不是它叫做「Choropleth」,來自希臘語xωροπληθών? –

回答

0

那麼到底是什麼問題了嗎?你究竟在哪裏卡住?

爲了讓你開始,你可能想看看我剛纔建立的this simple demo app。當選擇七個數據集中的一個時,它將數據集從公共API加載到分區映射中。另外,您可以更改顏色方案。

此演示也完全響應,支持縮放和地圖全屏模式支持。雖然我還沒有將代碼作爲回購協議發佈,但它是開源的,您可以隨心所欲地使用它。見下面的截圖...

Screenshot

+0

好吧,我有一個正在尋找像這樣大的數據表:\t \t \t \t \t < - 開頭段:JS隱藏:假 - > < - 語言:郎HTML - > \t \t \t \t \t區域1個\t區域2 \t地區... 日期(DD.MM.YYYY)\t時間(24小時) 01.01.2010 \t \t \t 0:0 \t \t 01.01.2010 \t \t 0:15 \t 01.01.2010 \t \t 0:30 ... 01.01.2010 \t \t 23:45 2010年2月1日\t \t 0: 00 2010年2月1日\t \t 0:15 ... \t \t \t .. 31.12.2010 \t \t 23:45 <! - end snippet - >現在我需要選擇你想要的日期和時間,然後我的地圖將被創建。我不知道如何在html或javascript中完成這項工作。 –

+0

@StefanSchaefer:你可以創建一個小的http://jsfiddle.net/來展示你已經擁有的東西,並提供更多關於缺失的細節嗎? –

0

http://jsfiddle.net/8nfc4cfk/

queue() 
.defer(d3.json, "germany.json") 
.defer(d3.tsv, "test2.tsv", function(d) { 
    rateById.set(d.NAME_2, +d.rate); 
    }) 
.await(ready); 


function ready(error, de) { 
svg.append("g") 
    .attr("class", "properties") 
svg.selectAll("path") 
    .data(topojson.feature(de, de.objects.collection).features) 
.enter().append("path") 
    .attr("class", function(d) { 
    return quantize(rateById.get(d.properties.NAME_2)); 
    }) 
    .attr("d", path); 

如何上傳我的數據,並以.json到的jsfiddle?我剛剛拿到了它在我的驅動

This is how the data.csv will look like

上現在的問題:如何當你選擇一個日期和時間與日期選取器和滑塊的時間獲取地圖。我不知道如何編碼這個

相關問題