Как создать гистограмму, состоящую из очень маленьких квадратов

Question

Я пытаюсь использовать d3 для создания диаграммы, которая в итоге окажется почти как гистограмма. Однако я хотел бы сделать это, используя очень маленькие индивидуальные квадраты. Что-то, как на картинке ниже, но не обращая внимания на случайные квадраты пунктир вокруг:

http://i.imgur.com/jYSyhur.jpg

Каждый квадрат представляет собой голос (или группы голосов в зависимости от того, сколько голосов производится в определенный день) и может иметь 3 возможные значения , каждый с другим оттенком синего, т.е. голубого, синего и синего.

Один пример, который я уже нашел, это http://bost.ocks.org/mike/miserables/, но я хотел бы преобразовать этот стиль в гистограмму.

Я уже делал попытку сделать разметку в HTML с помощью таблиц и div, но это получило широкое распространение и привело к массовому замедлению скорости загрузки страницы - отсюда и использование SVG.

Любые идеи о том, как подойти к этому, будут оценены.

Answer 1

Основания для того, что вы хотите сделать, это многослойная Гистограмма: http://bl.ocks.org/mbostock/3886208

Однако, есть несколько вещей, которые вам нужно будет принять во внимание. У и х оси должны быть пропорциональны так что вам придется внимательно рассмотреть:

• размер графа
• число точек данных
• максимальное значение каждая точка данных может иметь

и выберите высоту, ширину и «значение» для каждого тика - каждый квадрат.

Я сделал демонстрационную скрипку здесь: http://jsfiddle.net/sa5RK/

Это предполагает несколько вещей (для простоты!):

• Каждый тик одно значение

• Высота & ширина коробка установлена ​​

  var boxheight = 6; 
  

• высота/wi DTH может быть динамическим на основе размера окна и значений данных

  var margin = {top: 20, right: 20, bottom: 80, left: 40}, 
      width = boxheight * data.length; 
  
  
  var max = d3.max(data, function(d){return d.a + d.b + d.c}); 
  var height = max * boxheight; 
  

Я надеюсь, что это достаточно, чтобы вы начали!

Другая ключевая вещь, которая поможет вам узнать, как каждый связанный с данными выбор может быть установлен в переменную, а выбор внутри нее позволит вам получить доступ к внешним связанным данным. например. ниже, каждая группа данных (значение в исходном массиве) -> имеет типов (а, б или в) -> имеет прямоугольники

var groups = svg.selectAll(".group") 
    .data(data) 
     .enter().append("g") 
     .attr("transform", function(d,i){return "translate(" + x(i) + ", 0)"}) 
     .attr("class", "group") 

var types = groups.selectAll(".type") 
    .data(function(d){return d.offsets}) 
     .enter().append("g") 
     .attr("transform", function(d){ return translate(0,y(d.y1))}) 
     .attr("class", "type") 
     .attr("fill", function(d){return color(d.type)}) 

types.selectAll("rect") 
    .data(function(d){return d3.range(0,d.value)}) 
     .enter().append("rect") 
     .attr("height", boxheight-0.5) 
     .attr("width", boxheight-0.5) 
     .attr("y", function(d){ return boxheight * d })