Подготовка данных к чертежу в d3.js из базы данных Ruby on Rails

Question

У меня есть столбец в базе данных с ответами на вопрос «источник реферала». Я запрашивая, что и возвращает хэш:

Clients.count(:all, :group => :referral_source) 

Какие результаты в следующем хэша:

{"Internet search (e.g., Google)?"=>26, 
"Personal referral (e.g., friend or family)"=>23, 
"Other"=>11, ""=>51, 
"Listserv (e.g., neighborhood listserv)"=>5, 
"Walk by"=>5} 

В представлении, я хотел бы построить эти результаты в виде гистограммы с d3. JS. Я нашел этот красивый d3.js example с диаграммой, которая выглядит точно так, как хотелось бы, чтобы мой график выглядел. Моя проблема заключается в использовании CSV-данных.

Как я могу получить свои данные в формате, который этот пример использует прямо из рельсов. Другими словами, я хотел бы мои данные, чтобы выглядеть массив объектов для передачи JavaScript в представлении:

var data = [ {"Name": "Internet search (e.g., Google)?", "Count": 26}, 
      {"Name": "Personal referral (e.g., friend or family)", "Count": 23}, 
      ... ] 

Как изменить этот хэш (или запрос), чтобы получить его в нужный формат?

Answer 1

D3-generator.com - это хорошая ссылка для начала работы с D3.js. Я также нашел полезный D3 tutorials, но я не видел горизонтальную гистограмму с ярлыками.

Я решил свой вопрос, переназначив свой хэш на новый массив. Похоже, это возможно сделать с оригинальным запросом, но я не уверен в Activerecord/SQL, чтобы это произошло.

Вот как я переназначен хэш в массив объектов, которые могут быть использованы с D3-генератора в Рубине

@referral_source = Client.count(:all, :group => :referral_source) 
remap = @referral_source.map {|k, v| { Name: k, Count: v} } 

=> {{:Name=>"Internet search (e.g., Google)?", :Count=>26}, ... ] 

Тогда я сделал .to_json на том, что в представлении. Мне потребовалось гораздо больше времени, чем я думал, что это выяснится.