D3js：地形図を設計する方法は？

1.フォルダ名に保存します：/topo_map/topo.mk

＃topojsoning：final.json：levels.json topojson --id-property none --simplify = 0.5 -p name = elev -o final.json --levels.json＃さらに調査するための簡略化アプローチ。フィードバックを歓迎します。 ＃shp2jsoning：levels.json：levels.shp ogr2ogr -f GeoJSON -where'elev 0） '--NoDataValue = 0 level0050.tif：crop.tif gdal_calc.py -A Crop.tif --outfile = level0050.tif- calc = '50 *（A> 50） '--NoDataValue = 0 level0100.tif：crop.tif gdal_calc.py -A Crop.tif --outfile = level0100.tif --calc =' 100 *（A> 100） '--NoDataValue = 0 level0200.tif：crop.tif gdal_calc.py -A Crop.tif --outfile = level0200.tif --calc =' 200 *（A> 200） '-NoDataValue = 0 level0500.tif： Crop.tif gdal_calc.py -A Crop.tif --outfile = level0500.tif --calc = '500 *（A> 500）' --NoDataValue = 0 level1000.tif：crop.tif gdal_calc.py-作物。 tif --outfile = level1000.tif --calc = '1000 *（A> 1000）' --NoDataValue = 0 level2000.tif：crop.tif gdal_calc.py -A Crop.tif --outfile = level2000.tif- calc = '2000 *（A> 2000）' --NoDataValue = 0 level3000.tif：crop.tif gdal_calc.py -A Crop.tif --outfile = level3000.tif --calc = '3000 *（A> 3000） '--NoDataValue = 0 level4000.tif：crop.tif gdal_calc.py -A Crop.tif --outfile = level4000.tif --calc =' 4000 *（A> 4000） '-NoDataValue = 0 level5000.tif： Crop.tif gdal_calc.py -A Crop.tif --outfile = level5000.tif --calc = '5000 *（A> 5000）' --NoDataValue = 0＃boxing：crop.tif：ETOPO1_Ice_g_geotiff.tif gdal_translate -projwin -5.3 41.0 10.2 51.6 ETOPO1_Ice_g_geotiff.tif Crop.tif＃ulx uly lrx lry // WSEN＃unzip：ETOPO1_Ice_g_geotiff.tif：ETOPO1.zip unzip ETOPO1.zip touch ETOPO1_Ice_g_geotiff.tif＃download：ETOPO1。 /www.ngdc.noaa.gov/mgg/global/relief/ETOPO1/data/ice_surface/grid_registered/georeferenced_tiff/ETOPO1_Ice_g_geotiff.zip'clean：rm `ls | grep -v'zip '| grep -v'Makefile '`＃Makefile v4b（@hugo_lz）
  2.データを作成します makfileを実行することによって：
 
 
 
cd ./topo_map make -f ./topo.mk
  3.オートフォーカスを備えたD3jsおよびHTMLコード：  
 
svg {border：5px solid＃333;背景色：＃C6ECFF;} / * TOPO * / path.Topo_1 {fill：＃ACD0A5;ストローク：＃0978AB;ストローク幅：1px; } path.Topo_50 {fill：＃94BF8B; } path.Topo_100 {fill：＃BDCC96; } path.Topo_200 {fill：＃E1E4B5; } path.Topo_500 {fill：＃DED6A3; } path.Topo_1000 {fill：＃CAB982; } path.Topo_2000 {fill：＃AA8753; } path.Topo_3000 {fill：＃BAAE9A; } path.Topo_4000 {fill：＃E0DED8; } path.Topo_5000 {fill：#FFFFFF; } .download {背景：＃333;色：#FFF;フォントの太さ：900;ボーダー：2px実線＃B10000;パディング：4px;マージン：4px; } // 1. -------------- SETTINGS ------------- // // 10進数のGeo-frame_borders⁰：France var WNES = {' W '：-5.3、' N '：51.6、' E '：10.2、' S '：41.0}; //対象の地理値：var latCenter =（WNES.S + WNES.N）/ 2、lonCenter =（WNES.W + WNES.E）/ 2、geo_width =（WNES.E-WNES.W）、geo_height = （WNES.N-WNES.S）; // HTMLで予想されるフレームの寸法varwidth = 600、height = width *（geo_height / geo_width）; //プロジェクション：プロジェクション、スケールのリセット、変換var Projection = d3.geo.equirectangular（）。scale（1）.translate（[0、0]）; // SVGインジェクション：var svg = d3.select（ 'body'）。append（ 'svg'）。attr（ 'width'、width）.attr（ 'height'、height）; //パスvarpath = d3.geo.path（）。projection（projection）.pointRadius（4）; //データ（getJSON：TopoJSON）d3.json（ 'final.json'、showData）; // 2. ---------- FUNCTION ------------- // function showData（error、fra）{var Levels = topojson.feature（fra、fra.objects .levels）; //フォーカスエリアボックスは、スケールの導出と変換のために計算します。 // [[左、下]、[右、上]] // EWNS var b = path.bounds（Levels）、s = 1 / Math.max（（b [1] [0] -b [0 ] [0]）/幅、（b [1] [1] -b [0] [1]）/高さ）、t = [（幅-s *（b [1] [0] + b [0] [0]））/ 2、（高さ-s *（b [1] [1] + b [0] [1]））/ 2]; //プロジェクション更新プロジェクション.scale（s）.translate（t）; // Topoポリゴンを追加しますsvg.append（ 'path'）。datum（Levels）.attr（ 'd'、path）svg.selectAll（ '。levels'）。data（topojson.feature（fra、fra.objects.levels ）.features）.enter（）。append（ 'path'）。attr（ 'class'、function（d）{return'Topo_ '+ d.properties.name;}）。attr（' data-elev '、function （d）{return d.properties.name;}）。attr（ 'd'、path）} 
⇩ダウンロード-Chromeで動作します。他のウェブブラウザにフィードバックしてください。 
  
  4.結果は正確に次のようになります。 （関心のある分野に適用されます）
 
 
 
地図をオンラインで公開する場合は、リンクを共有してください:)
 
注：+1を歓迎します。