Лучший способ служить / производить силуэт США? - PullRequest
Новая
       25

Лучший способ служить / производить силуэт США?

2 голосов
/ 04 января 2012

Я отвечаю за доставку страниц для отображения первичных результатов выборов в США по штатам. На каждой странице нужен баннер с изображением штата, размером примерно 250 на 250 пикселей. Теперь все, что мне нужно сделать, это выяснить, как обслуживать / генерировать эти изображения ...

  1. Я копался в документации / примерах для Protovis и думаю, что я мог бы поднять контуры координат штата- мне пришлось бы вручную преобразовать данные координат, чтобы они были выровнены по размеру правильно (ick)

  2. На другом конце умного / грубого спектра огромный спрайт или серия спрайтов. Даже с сжатием PNG 8 размер файла сетка из 50 неперекрывающихся 250x250px спрайтов является проблемой, и к сожалению, такой файл, кажется, не существует, поэтому мне придется его создать с руки. Также неприятно.

У кого есть идея получше?

Ответ: правильное решение - перейти на d3.

Что мы взломали на данный момент: 

 drawStateInBox = function(box, state, color) {
   var w = $("#" + box).width(),
           h = $("#" + box).height(),
           off_x = 0,
           off_y = 0;
           borders = us_lowres[state].borders;

   //Preserve aspect ratio
   delta_lat = pv.max(borders[0], function(b) b.lat) - pv.min(borders[0], function(b) b.lat);
   delta_lng = pv.max(borders[0], function(b) b.lng) - pv.min(borders[0], function(b) b.lng);

   if (delta_lat / h > delta_lng / w) {
     scaled_h = h;
     scaled_w = w * delta_lat / delta_lng;
     off_x = (w - scaled_w) / 2;
   } else {
     scaled_h = h * delta_lat / delta_lng;
     scaled_w = w;
     off_y = (h - scaled_h) / 2;
   }

   var scale = pv.Geo.scale()
           .domain(us_lowres[state].borders[0])
           .range({x: off_x, y: off_y},
           {x: scaled_w + off_x, y: scaled_h + off_y});


   var vis = new pv.Panel(state)
           .canvas(box)
           .width(w)
           .height(h)
           .data(borders)
           .add(pv.Line)
           .data(function(l) l)
           .left(scale.x)
           .top(scale.y)
           .fillStyle(function(d, l, c) {
             return(color);
           })
           .lineWidth(0)
           .strokeStyle(color)
           .antialias(false);

   vis.render();
 };

Ответы [ 2 ]

1 голос
/ 09 февраля 2012

На 50states.com есть набор карт, например http://www.50states.com/maps/alabama.htm,, что составляет около 5 КБ. Грубо говоря, это 250 КБ для всего набора. Поскольку вы упомянули об их использовании отдельно, вот ваш ответ.

Или вы делаете с этим больше, чем просто показываете схему?

1 голос
/ 04 января 2012

d3 , кажется, имеет возможность создавать карты, аналогичные тем, которые вы хотите.В этом примере показаны как округа, так и штаты, поэтому вы можете просто опустить округа и затем предоставить результаты выборов в правильном формате.

...