Мне захотелось потратить час или около того, чтобы еще раз взглянуть на d3.js в рамках подготовки к некоторым проектам визуализации данных, которые могут появиться на работе.
Я прочитал замечательную книгу Интерактивная визуализация данных для Интернета год назад или около того, но с тех пор ни разу не использовал d3, так что, по сути, я начинаю с нуля. Когда вы хотите изучить d3, вы быстро найдете Майка Бостока, который в значительной степени является человеком, когда дело доходит до данных, а именно через d3, с тех пор, как он его создал. Итак, я еще раз просмотрел его Давайте сделаем учебник по карте и после этого решил попробовать немного изменить его, используя данные для Северной Америки (я немного гомер).
ПРОПУСТИТЬ до конечного результата.
Пример изменен для использования данных Северной Америки
- Команды ogr2ogr и topojson в Учебнике Майка заменены на следующие:
ogr2ogr -f GeoJSON -where «ADM0_A3 IN («США», «CAN», «MEX»)» subunits.json ne_10m_admin_0_map_subunits.shp
ogr2ogr -f GeoJSON -где «ISO_A2 IN (‘US’, ‘CA’, ‘MX’) AND SCALERANK ‹ 8” places.json ne_10m_populated_places.shp
topojson -o nam.json — id-property SU_A3 — properties 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.
