Имах желание да отделя около час, за да разгледам още веднъж d3.js в подготовка за някои проекти за визуализация на данни, които може да предстоят на работа.

Прегледах страхотната книга Интерактивна визуализация на данни за мрежата преди около година, но оттогава не съм използвал d3, за да правя нищо, така че основно започвам от нулата. Когато искате да научите d3, вие бързо намирате Mike Bostock, който до голяма степен е човекът, когато става дума за данни, а именно чрез d3, откакто го създаде. И така, прегледах неговия „Да направим урок за карта“ отново и след това реших да опитам да го модифицирам леко, като използвам данни за Северна Америка (малко съм хоумър).

ПРЕСПУСКАНЕ до крайния резултат.

Пример, модифициран за използване на данни от Северна Америка

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.