Использование данных .tsv в D3

Question

Я пытаюсь использовать демографические данные .tsv в D3 для создания интерактивных пирамид населения, и, хотя у меня достаточно знаний о D3 для их создания, я не знаю, как загрузить данные. Я использую только данные JSON, изучая, как использовать D3 (с помощью замечательной книги Майка Дьюара), но до сих пор я не использовал данные TSV или CSV.

Можете ли вы мне помочь, чтобы я мог начать работу с этим проектом? Я знаю, что мне нужно использовать d3.tsv («файл», функция), но некоторые вещи все еще меня беспокоят. Например, если я хочу создавать divs или SVG-прямоугольники для каждого бита данных в столбце, как я могу сообщить программе получить «i» из данных?

Это пример данных:

AGE A08 M08 F08 A09 M09 F09 
0 40.8 20.9 19.9 40.9 20.9 19.9 
1 40.7 20.8 19.9 40.8 20.9 19.9 
2 40.6 20.8 19.8 40.7 20.9 19.9 
3 40.5 20.7 19.7 40.6 20.8 19.8 

Является ли это даже .tsv? Насколько я понимаю, tsv означает значения, разделенные вкладкой, в то время как они разделены пробелом. Если это не файл .tsv, как я могу его использовать?

Answer 1

Да, d3.tsv() является вашим другом, если вы разобрали true TSV. По правде говоря, я имею в виду, что это похоже на CSV, но с вкладками вместо запятых. В форматированной таблице, приведенной в качестве примера, иногда могут быть две последовательные вкладки, только для достижения правильного расстояния между столбцами, и это не будет представлять собой TSV. Я предполагаю, что ваш TSV-файл в порядке.

Что касается Вашего вопроса о получении i для каждого значения: хорошо, часто, данные CSV/TSV представлен в 2-мерном виде таблицы, в этом случае вы не просто иметь дело с i но и j. То есть таблицы структурированы в терминах строк и столбцов, а не только плоский список значений. В d3 есть образец для работы с такими вещами. Например, проверьте this example или this tutorial (прокрутите вниз до раздела Связывание двухмерных данных).

Если вы хотите создать прямоугольник SVG для каждого значения, вы, вероятно, все равно хотите следовать двухмерному шаблону таблицы, а не сглаживать данные. В этом случае вы должны создать группу SVG для каждой строки и вложить в каждую группу прямоугольники, соответствующие значениям каждой строки.

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

Если вы действительно придумали случай, в котором вам нужно сгладить данные в один массив значений, вы сделали бы это на простом javascript, используя цикл, который собирает значения любым способом, в котором вы нуждаетесь. Но я сомневаюсь, что вам нужно будет спуститься по этому маршруту.