Перетворіть нудну стару електронну таблицю в інтерактивну веб-карту, хронологію чи таблицю за допомогою простого HTML, використовуючи безкоштовний проект із відкритим вихідним кодом.

Виставка займає набори даних розміром близько 500 рядків, графіки розташування на карті Google, дати на інтерактивній часовій шкалі та відображення зображень та посилань у вигляді таблиці та мініатюр. Переглядач може сортувати, шукати та фільтрувати дані в будь-якому представленні експонатів, не завантажуючи сторінку. Ви можете змусити Exhibit робити все це одним файлом HTML і електронною таблицею - не потрібно хардкор програмування.

Щоб спробувати це, я вчора зібрав свою першу візуалізацію виставки під назвою "Бродвейські шоу", яку я бачив за останні 17 років. Чому? Ну, я хочу позбутися стопки Playbills, що збирається на моїй полиці, але я хочу пригадати, які шоу я бачив і коли. Тож я сфотографував кожну обкладинку Playbill (див. Цей набір Flickr), ввів інформацію про кожне шоу в цю електронну таблицю Google і підключив їх до Exhibit, використовуючи HTML та CSS, вилучені з інших прикладів виставки. Пограйте тут із собою, або поглядіть на те, що було вироблено нижче.

Кілька переглядів виставок у дії

Щоб переключитися між переглядами на моїй виставі на Бродвеї, виберіть, клацніть на верхньому рядку посилань (Таблиця, мініатюри, карта, хронологія, плитки). Давайте подивимось на кожну.

Перший і типовий вигляд - це простий табличний вигляд ("Таблиця"), який дуже схожий на вашу електронну таблицю. Тут ви можете натиснути будь-яку назву стовпця, щоб сортувати елементи, шукати за ключовим словом або фільтрувати за "гранями", які я встановив на правій бічній панелі (чи було шоу музичним чи п'єсовим, театром та поза скріншотом, помітним актором члени).

Ілюстрація до статті під назвою "Виставка" Перетворює вашу електронну таблицю на інтерактивну веб-сторінку


Для перегляду даних, що вишикуються у вигляді блоків, спробуйте переглянути ескіз, де я використовував більшу версію своїх зображень Playbill, щоб зробити більш візуальним подання мого списку. За замовчуванням у мене тут є Афіші, відсортовані за типом шоу (музичні або відтворення) та згруповані як такі. Клацніть посилання "відсортовано за", щоб змінити ці налаштування.

Ілюстрація до статті під назвою "Виставка" Перетворює вашу електронну таблицю на інтерактивну веб-сторінку


Ці два приклади є загальними способами подання списків. Перегляд карти та часової шкали - це те, що стає справді цікавим.

Щоб підключити карту Google до своїх даних, вам потрібно включити координати широти та довготи у свою таблицю, як я. (Щоб легко їх отримати, скопіюйте та вставте свій стовпець адреси на цю корисну веб-сторінку пакетного геокодування.) Ось як виглядає карта театрів, у яких я відвідував.

Ілюстрація до статті під назвою "Виставка" Перетворює вашу електронну таблицю на інтерактивну веб-сторінку


Хронологія, в яку я закохався ще в 2006 році, - також надзвичайно класний спосіб перегляду даних про дату у ваших даних. Колір кодуйте точки на часовій шкалі (помаранчеві точки - це мюзикл, у моєму випадку - сині), а перетягніть та опускайте шкалу часу назад та вперед, щоб побачити графіки. Клацніть на будь-якій точці, щоб побачити деталі щодо самого шоу. Повернувшись у часі, ви можете побачити, що я відвідував набагато більше шоу в кінці 90-х, ніж будь-який інший період.

Ескіз попереднього перегляду статті
Geek to Live: прокрутіть власну шкалу часу

автор: Джина Трапані

Ілюстрація до статті під назвою "Виставка" Перетворює вашу електронну таблицю на інтерактивну веб-сторінку

Більше прикладів виставки в дії

Моя потворна колекція Playbill - це дуже скромне та корисне використання цього потужного інструменту. Ознайомтеся з кількома гарнішими та навчальнішими прикладами виставки в дії:

  • Президенти США – ознайомтеся з графіком кожного президентства та картами місць народження та смерті в США
  • Мільярдери в історії - акуратна візуалізація карт, яка показує вам гроші.
  • Міста США за населенням - Нью-Йорк має велике давнє коло.

Зробіть свій власний експонат

Виставка складається з двох файлів: одного HTML-файлу та одного файлу даних (який повинен бути JSON у форматі, який підтримує електронні таблиці Google). Зараз, щоб зробити свій власний виставку, ви повинні бути дуже гарними у складанні HTML (та CSS, якщо ви хочете, щоб це виглядало добре), але є безліч навчальних посібників та прикладів, щоб провести вас через речі (і зірвати) від хорошого коду від).

Щоб зробити своє, вся необхідна документація знаходиться у розділі "Вікі-автор" виставки.

Початківцям, ви хочете спершу ознайомитись із Посібником з початку роботи. Потім, після того, як виставка MIT Nobelists Exhibition запрацює, починайте збирати власні дані. Я перейшов на тему "Як зробити виставку" з даних, поданих безпосередньо з електронної таблиці Google, а потім застосував наступні підручники для налаштування кожного перегляду: перегляд мініатюр, подання на карту, перегляд часової шкали та табличний вигляд.

Переваги та обмеження експозиції

Досить дивовижно, що ви можете робити цей вид веб-базування даних, не торкаючись фактичної бази даних, але ціна зручності - це обмеження кількості даних, які ви можете використовувати. Виставка - це всі JavaScript, тому продуктивність знизиться, якщо у вас великий набір даних, понад 500 рядків. Наприклад, якби хтось захотів зробити візуалізацію своїх підписників у Twitter (доступно, зручно, як JSON завдяки API Twitter), вони будуть добре, якщо за ними буде менше 500 людей.

Але для невеликих наборів даних, які ви хочете легко опублікувати у своєму блозі чи інтрамережі компанії, виставка - це вірний спосіб справити враження на своїх читачів чи шефа. (Блогери, плагін виставки WordPress також вийде в найближчі тижні.) На веб-сайті виставки ви знайдете додаткові приклади та документацію.

Покажіть перетворення вашої електронної таблиці на інтерактивну веб-сторінку [Smarterware]

Розумніше - це редактор Lifehacker emeritus Джина Трапані, недалеко від хакера. Щоб отримати найновіші відомості від Smarterware, обов'язково підпишіться на RSS-канал Smarterware RSS. Щоб дізнатися більше, перегляньте щотижневу функцію розумного програмного забезпечення Gina тут на Lifehacker.

Рекомендуємо Вибір Редакції