US Choropleth

데모는 등치 시각화를 보여줍니다. 각주는 연간 평균 기온에 따라 색상이 지정됩니다. 온도 데이터는 다른 데이터 소스에서로드됩니다.

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; // import { httpRequest } from '@mescius/wijmo'; import { Position, Palettes } from '@mescius/wijmo.chart'; import { FlexMap, GeoMapLayer, ColorScale } from '@mescius/wijmo.chart.map'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let map = new FlexMap('#map', { header: 'Average Temperature By State', legend: { position: Position.Left }, tooltip: { content: (f) => f.name + ' ' + dataMap.get(f.name) + '°F' }, layers: [ new GeoMapLayer({ url: 'data/US.json', itemsSourceChanged: (s, a) => { map.zoomTo(s.getGeoBBox()); }, colorScale: new ColorScale({ colors: Palettes.Diverging.RdYlBu, binding: (o) => dataMap.get(o.properties.name), scale: (v) => 1 - v, format: 'n0"°F"' }) }) ] }); let dataMap = new Map(); httpRequest('data/temp.json', { success: xhr => { JSON.parse(xhr.responseText).forEach(el => dataMap.set(el.State, parseFloat(el.AverageTemperature))); } }); } //
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo US Choropleth</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="map"></div> </div> </body> </html>
body { margin-bottom: 24px; } .wj-flexmap { max-width: 600px; }
[ { "State": "Alabama", "AverageTemperature": "62.8000" }, { "State": "Alaska", "AverageTemperature": "26.6000" }, { "State": "Arizona", "AverageTemperature": "60.3000" }, { "State": "Arkansas", "AverageTemperature": "60.4000" }, { "State": "California", "AverageTemperature": "59.4000" }, { "State": "Colorado", "AverageTemperature": "45.1000" }, { "State": "Connecticut", "AverageTemperature": 49 }, { "State": "Delaware", "AverageTemperature": "55.3000" }, { "State": "Florida", "AverageTemperature": "70.7000" }, { "State": "Georgia", "AverageTemperature": "63.5000" }, { "State": "Hawaii", "AverageTemperature": 70 }, { "State": "Idaho", "AverageTemperature": "44.4000" }, { "State": "Illinois", "AverageTemperature": "51.8000" }, { "State": "Indiana", "AverageTemperature": "51.7000" }, { "State": "Iowa", "AverageTemperature": "47.8000" }, { "State": "Kansas", "AverageTemperature": "54.3000" }, { "State": "Kentucky", "AverageTemperature": "55.6000" }, { "State": "Louisiana", "AverageTemperature": "66.4000" }, { "State": "Maine", "AverageTemperature": 41 }, { "State": "Maryland", "AverageTemperature": "54.2000" }, { "State": "Massachusetts", "AverageTemperature": "47.9000" }, { "State": "Michigan", "AverageTemperature": "44.4000" }, { "State": "Minnesota", "AverageTemperature": "41.2000" }, { "State": "Mississippi", "AverageTemperature": "63.4000" }, { "State": "Missouri", "AverageTemperature": "54.6000" }, { "State": "Montana", "AverageTemperature": "42.7000" }, { "State": "Nebraska", "AverageTemperature": "48.8000" }, { "State": "Nevada", "AverageTemperature": "49.9000" }, { "State": "New Hampshire", "AverageTemperature": "43.8000" }, { "State": "New Jersey", "AverageTemperature": "52.7000" }, { "State": "New Mexico", "AverageTemperature": "53.4000" }, { "State": "New York", "AverageTemperature": "45.4000" }, { "State": "North Carolina", "AverageTemperature": 59 }, { "State": "North Dakota", "AverageTemperature": "40.4000" }, { "State": "Ohio", "AverageTemperature": "50.7000" }, { "State": "Oklahoma", "AverageTemperature": "59.6000" }, { "State": "Oregon", "AverageTemperature": "48.4000" }, { "State": "Pennsylvania", "AverageTemperature": "48.8000" }, { "State": "Rhode Island", "AverageTemperature": "50.1000" }, { "State": "South Carolina", "AverageTemperature": "62.4000" }, { "State": "South Dakota", "AverageTemperature": "45.2000" }, { "State": "Tennessee", "AverageTemperature": "57.6000" }, { "State": "Texas", "AverageTemperature": "64.8000" }, { "State": "Utah", "AverageTemperature": "48.6000" }, { "State": "Vermont", "AverageTemperature": "42.9000" }, { "State": "Virginia", "AverageTemperature": "55.1000" }, { "State": "Washington", "AverageTemperature": "48.3000" }, { "State": "West Virginia", "AverageTemperature": "51.8000" }, { "State": "Wisconsin", "AverageTemperature": "43.1000" }, { "State": "Wyoming", "AverageTemperature": 42 } ]
{"type":"FeatureCollection", "features": [ {"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-95.16,49.37],[-95.16,49.01],[-95.18,48.99],[-97.23,48.99],[-97.1,48.65],[-97.16,48.53],[-97.12,48.43],[-97.14,48.38],[-97.12,48.28],[-97.12,48.13],[-97.04,47.95],[-97,47.92],[-97.01,47.9],[-96.99,47.81],[-96.95,47.78],[-96.86,47.6],[-96.87,47.42],[-96.84,47.39],[-96.85,47.26],[-96.83,47.17],[-96.83,47],[-96.81,46.94],[-96.76,46.92],[-96.8,46.79],[-96.78,46.72],[-96.79,46.64],[-96.75,46.6],[-96.75,46.5],[-96.72,46.44],[-96.6,46.32],[-96.6,46.22],[-96.56,46.17],[-96.56,46.1],[-96.58,46.02],[-96.56,45.94],[-96.59,45.84],[-96.64,45.76],[-96.84,45.65],[-96.86,45.6],[-96.77,45.51],[-96.71,45.42],[-96.69,45.41],[-96.57,45.39],[-96.49,45.35],[-96.45,45.3],[-96.45,43.5],[-95.15,43.5],[-93.85,43.5],[-92.55,43.5],[-91.25,43.5],[-91.24,43.74],[-91.28,43.8],[-91.28,43.9],[-91.3,43.93],[-91.36,43.94],[-91.41,44.01],[-91.47,44.03],[-91.54,44.07],[-91.66,44.07],[-91.82,44.16],[-91.95,44.34],[-92.1,44.44],[-92.29,44.47],[-92.33,44.53],[-92.39,44.58],[-92.58,44.61],[-92.82,44.76],[-92.78,44.82],[-92.78,44.89],[-92.76,44.93],[-92.8,45.08],[-92.77,45.09],[-92.75,45.13],[-92.77,45.19],[-92.76,45.28],[-92.71,45.33],[-92.66,45.43],[-92.75,45.56],[-92.88,45.58],[-92.9,45.61],[-92.89,45.7],[-92.77,45.81],[-92.77,45.83],[-92.7,45.91],[-92.57,45.96],[-92.53,45.99],[-92.47,46],[-92.43,46.03],[-92.36,46.03],[-92.32,46.07],[-92.29,46.08],[-92.29,46.66],[-92.22,46.66],[-92.2,46.71],[-92.16,46.73],[-92.14,46.76],[-92.11,46.77],[-91.96,46.73],[-91.47,46.92],[-90.65,47.31],[-89.96,47.29],[-89.5,48],[-89.71,48],[-89.78,48.02],[-89.92,47.99],[-90,48.02],[-90.07,48.1],[-90.12,48.12],[-90.49,48.1],[-90.54,48.08],[-90.59,48.1],[-90.75,48.08],[-90.79,48.1],[-90.81,48.16],[-90.85,48.19],[-90.84,48.22],[-90.87,48.23],[-91.07,48.17],[-91.28,48.06],[-91.37,48.06],[-91.43,48.04],[-91.49,48.05],[-91.57,48.05],[-91.59,48.09],[-91.69,48.1],[-91.72,48.11],[-91.7,48.14],[-91.74,48.18],[-91.85,48.2],[-91.98,48.24],[-92.01,48.26],[-92.04,48.33],[-92.07,48.35],[-92.15,48.35],[-92.28,48.33],[-92.3,48.31],[-92.29,48.25],[-92.37,48.22],[-92.46,48.33],[-92.49,48.43],[-92.53,48.45],[-92.66,48.44],[-92.7,48.45],[-92.72,48.46],[-92.71,48.48],[-92.63,48.5],[-92.65,48.54],[-92.88,48.58],[-92.98,48.62],[-93.26,48.63],[-93.39,48.61],[-93.45,48.6],[-93.46,48.56],[-93.49,48.54],[-93.78,48.52],[-93.81,48.54],[-93.84,48.62],[-93.87,48.64],[-94.23,48.65],[-94.29,48.71],[-94.52,48.7],[-94.59,48.73],[-94.69,48.78],[-94.71,48.81],[-94.71,48.91],[-94.81,49.17],[-94.81,49.21],[-94.84,49.31],[-94.93,49.35],[-95.1,49.35],[-95.16,49.37]]]},"properties":{"name":"Minnesota","name_local":"","admin":"United States of America","type":"State"}}, {"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[-117.04,48.99],[-118.48,48.99],[-119.8,48.99],[-121.33,48.99],[-122.75,48.99],[-122.73,48.96],[-122.8,48.96],[-122.81,48.93],[-122.76,48.94],[-122.75,48.92],[-122.77,48.87],[-122.7,48.83],[-122.7,48.79],[-122.7,48.8],[-122.66,48.78],[-122.67,48.73],[-122.64,48.72],[-122.57,48.78],[-122.51,48.76],[-122.5,48.74],[-122.53,48.69],[-122.5,48.68],[-122.49,48.64],[-122.46,48.62],[-122.44,48.58],[-122.47,48.55],[-122.53,48.58],[-122.57,48.59],[-122.49,48.53],[-122.49,48.45],[-122.51,48.45],[-122.57,48.49],[-122.58,48.46],[-122.63,48.52],[-122.7,48.5],[-122.66,48.45],[-122.68,48.43],[-122.65,48.4],[-122.62,48.41],[-122.58,48.44],[-122.56,48.43],[-122.57,48.41],[-122.53,48.37],[-122.48,48.36],[-122.39,48.3],[-122.38,48.28],[-122.4,48.24],[-122.45,48.26],[-122.53,48.25],[-122.51,48.15],[-122.38,48.06],[-122.35,48.05],[-122.38,48.1],[-122.46,48.14],[-122.47,48.18],[-122.44,48.23],[-122.38,48.21],[-122.36,48.12],[-122.34,48.09],[-122.24,48.03],[-122.22,48.04],[-122.19,48.03],[-122.21,47.99],[-122.32,47.94],[-122.34,47.87],[-122.4,47.8],[-122.38,47.72],[-122.43,47.66],[-122.34,47.6],[-122.35,47.56],[-122.38,47.6],[-122.41,47.57],[-122.37,47.5],[-122.37,47.44],[-122.33,47.39],[-122.33,47.36],[-122.42,47.32],[-122.43,47.3],[-122.4,47.28],[-122.43,47.26],[-122.54,47.32],[-122.54,47.28],[-122.57,47.21],[-122.65,47.13],[-122.72,47.09],[-122.82,47.17],[-122.83,47.14],[-122.86,47.13],[-122.85,47.17],[-122.9,47.13],[-122.89,47.05],[-122.92,47.06],[-122.94,47.09],[-122.94,47.13