Имах желание да отделя около час, за да разгледам още веднъж d3.js в подготовка за някои проекти за визуализация на данни, които може да предстоят на работа.
Прегледах страхотната книга Интерактивна визуализация на данни за мрежата преди около година, но оттогава не съм използвал d3, за да правя нищо, така че основно започвам от нулата. Когато искате да научите d3, вие бързо намирате Mike Bostock, който до голяма степен е човекът, когато става дума за данни, а именно чрез d3, откакто го създаде. И така, прегледах неговия „Да направим урок за карта“ отново и след това реших да опитам да го модифицирам леко, като използвам данни за Северна Америка (малко съм хоумър).
ПРЕСПУСКАНЕ до крайния резултат.
Пример, модифициран за използване на данни от Северна Америка
- Командите ogr2ogr и topojson в урока на Майк са заменени с тези:
ogr2ogr -f GeoJSON -където „ADM0_A3 IN („САЩ“, „МОЖЕ“, „MEX“)“ subunits.json ne_10m_admin_0_map_subunits.shp
ogr2ogr -f GeoJSON -където „ISO_A2 IN („US“, „CA“, „MX“) И SCALERANK ‹ 8“ places.json ne_10m_populated_places.shp
topojson -o nam.json — id-property SU_A3 — свойства name=NAME — subunits.json places.json
var projection = d3.geo.mercator() .center([100, 50]) .scale(240) .rotate([-180,0]);
- Извадени етикети. Последната ми част от JavaScript изглежда така:
var width = 960, height = 1160; var projection = d3.geo.mercator() .center([100, 50]) .scale(240) .rotate([-180,0]); var path = d3.geo.path() .projection(projection); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); d3.json("nam.json", function(error, nam) { var subunits = topojson.feature(nam, nam.objects.subunits); svg.selectAll(".subunit") .data(subunits.features) .enter().append("path") .attr("class", function(d) { return "subunit " + d.id; }) .attr("d", path); svg.append("path") .datum(topojson.mesh(nam, nam.objects.subunits, function(a, b) { return a !== b; })) .attr("d", path) .attr("class", "subunit-boundary"); svg.selectAll(".subunit-label") .data(subunits.features) .enter().append("text") .attr("class", function(d) { return "subunit-label " + d.id; }) .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) .attr("dy", ".35em") .text(function(d) { return d.properties.name; }); svg.append("path") .datum(places) .attr("d", path) .attr("class", "place"); body { background-color: #e0f3f8; } .subunit.USB { fill: #d73027; } .subunit.USK { fill: #fc8d59; } .subunit.USH { fill: #ffffbf; } .subunit.CAN { fill: #4575b4; } .subunit.MEX { fill: #fee090; } .subunit-boundary { fill: none; stroke: white; stroke-width: 3; stroke-linejoin: round; } .subunit-label { fill: #404040; fill-opacity: 1; font-size: 20px; font-weight: 600; text-anchor: middle;
Имам много да уча, но това беше забавно начало.
Първоначално публикувано в pdb.space.