geochart in d3.js

Question

私は、d3.jsでジオカートを行う方法のガイダンスや例を探しています。 Googleチャートでのようなものが必要ですし、カスタマイズが必要なので、d3.jsに変更しています。これまで私が見つけた最も近いd3.jsサンプルはthisですが、コードは非常に長く、私はもっと簡単なものを見つけることを望んでいます。

Answer 1

あなたはchoroplethマップをお探しですか？ここにはrecent example in 28 lines of codeがあります。

この例では、アラスカ、ハワイ、プエルトリコなどの米国の複合投影であるデフォルト投影d3.geo.albersUsaを使用しています。可視領域を変更したい場合は、おそらく投影を変更することもできます。 d3.geo.albersは、それが等面積であるため、choroplethマップに適しています。アルバープロジェクションでは、originを設定して、グローバルの特定の部分に集中できるようにし、すべての投影でscaleとtranslateを指定して地図を画面上に配置することができます。

ワールドマップを表示する場合は、extended projections pluginの進行中の開発についても見てください。これは、特に世界地図のために、Winkel Tripelのような有用な地図投影を追加します。 D3の次のリリースでは、任意の投影（アンテローシスカットを含む、dragging this exampleを試してください）、adaptive resampling、改善されたクリッピングなどの3次元回転など、いくつかのエキサイティングな新機能も含まれます。

チョコレートを着色する場合はもちろん、色の地理的な特徴はデータの関数として「塗りつぶし」スタイルを再定義することで好きです。

Answer 2

@mbostockと彼の答えに敬意を表して、私はこの質問に出くわす人のためにいくつかの追加リソースを追加すると考えました。

@ Yaron Navehが提供するリンクの例は、Mercator projectionのようです。 には、d3.jsのメルカトル投射施設の詳細があります。 @mbostockはまた、API内の各投影のブロック/要点を作成するのに十分親切です（この例の投影サムネイル画像をクリックしてください）。シンプルなメルカトル図法block/gistへのリンクは次のとおりです。

「募集の芸術について - あなたはどのように感じていますか？ @mbostockがデータの関数として塗りつぶしスタイルを使って色付けすることについて説明した少しのコードです。この例では、JSONファイル内の国名の最初の文字のユニコード値を単純に選択し、種別として「steelblue」（＃4682B4 = 4620980）を使用してその値からCSSカラーを作成しています（おそらく陰影/色合いを計算したい）。

d3.json("readme.json", function(collection) { 
    d3.select("svg").selectAll("path") 
     .data(collection.features) 
    .enter().append("path") 
     .attr("d", d3.geo.path().projection(d3.geo.mercator())) 
     .style("fill", function(d) { return '#'+Math.floor(d.properties.name.charCodeAt(0)/100*4620980).toString(16); }); 
}); 

あなたはblock/gistとしてここに完全な例をチェックアウトすることができます。

（@mbostock！ - このような素晴らしいツールをありがとう）