Красота - это справедливость! Эти библиотеки подрывают ваше представление о взаимодействии данных

Vue.js визуализация данных
Красота - это справедливость! Эти библиотеки подрывают ваше представление о взаимодействии данных

предисловие

как параUIИ чувствительный к анимации симпатичный, в дополнение к ежедневной разработке, он также обратит внимание на некоторые красивые библиотеки диаграмм и плагины.

Далее я познакомлю вас с некоторымиweb/python/vue/reactКрасивая библиотека/реализация с открытым исходным кодом.

1. Библиотека карт ветра, нарисованных от руки:roughViz.js

на основеD3(v5), roughjs, иhandy.

1.1 Как измерить

Есть три способа измерения:

Шероховатость:

Тип линии:

Толщина линии:

1.2 Разнообразие словосочетаний

короткий ответCDN:

<script src="https://unpkg.com/rough-viz@1.0.5"></script>

npm:

npm install rough-viz

react/vue:

npm install react-roughviz
npm install vue-roughviz

даже вPythonтакже может:

pip install roughviz

1.3 Простота использования

Сначала определите дваdiv

<div id="vis0"></div>
<div id="vis1"></div>

послеnewДва примера:

new roughViz.BarH(
  {
    element: '#vis0',
    title: "Vehicles I've Had",
    titleFontSize: '1.5rem',
    legend: false,
    margin: {top: 50, bottom: 100, left: 160, right: 0},
    data: {
      labels: ['1992 Ford Aerostar Van', '2013 Kia Rio', '1980 Honda CB 125s', '1992 Toyota Tercel'],
      values: [8, 4, 6, 2]
    },
    xLabel: 'Time Owned (Years)',
    strokeWidth: 2,
    fillStyle: 'zigzag-line',
    highlight: 'gold',
  }
);

  new roughViz.BarH(
    {
      element: '#vis1',
      titleFontSize: '1.5rem',
      data: 'https://raw.githubusercontent.com/jwilber/random_data/master/owTanks.csv'
      color: 'tan',
      labels: 'name',
      values: 'health',
      title: "Overwatch Tank Health",
      roughness: 4,
    }
  );

Вся конфигурация очень проста, включая:

  • data: источник данных, поддерживает простые объекты илиcsvформатировать файл
  • roughness: Линии грубые и хаотичные. Если его настроить на 10, то станет так:

онлайн опытdemo: block builder.org/all I вторник/419…

Для конкретного использования, пожалуйста, обратитесь к официальной документации:GitHub.com/Все вторники/Мясо…

2. Эффект взрыва шрифта Douyin:react-three-fiber

Webиreact-nativeДоступна высокая производительностьThreejs for reactбиблиотека.

допустимыйReactВнешнее управление циклом рендеринга без дополнительных затрат.

В последней версии используетсяHooksСпособ написания, в отличие от предыдущей принудительной совместимостиThreejs, дружелюбнее писать.

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

Некоторые из следующих спецэффектов:

Если кто-то узнает...начальник поведет?

Реализация эффекта взрыва Douyin:

Который использует библиотеку:react-spring,ЭтоreactЛучшая библиотека анимации, без исключения.

Официальная документация:GitHub.com/react-judgment день, когда вы…

Взрыв шрифта:код sandbox.io / да / есть 3 31 числа по 13 числа в…

3. Внешний вид в плеере отвечает за:Mini Music Player - VueJS

Один, написанный иностранным другомVue.jsМузыкальный проигрыватель потрясающий.

Взаимодействие и логика также очень отточены.

Исходный код:codespray.IO/JavaScript J…

4. UIИзысканная библиотека проверки карты:interactive-paycard

в этом ноябреVueКак только выйдет новая библиотека, будет безумие3k+звезда, слишком хорошо.

полное имя библиотекиvue-interactive-paycard

ReactАвтор издания заявил, что оно тоже скоро выйдет.

Исходный код:GitHub.com/Уши Мухаммеда…

5. Настоящая* динамическая визуализация данных:SandDance

Произведено Microsoft, это должен быть бутик

SandDanceэто использоватьVegaДля компоновки диаграммы используйтеDeck.glпровестиWebGLоказывать.

Чтобы анимация оставалась гладкой и красивой на таком большом количестве данных, Microsoft Dad может это сделать.

Я встаю на колени первым, ты свободен.

Кроме того, библиотеку можно использовать несколькими способами:

  1. Power BIИспользование в программе:
    • PowerBIЭто программное обеспечение для визуализации данных, выпущенное Microsoft, которое может создавать различные отчеты за относительно короткое время.

2. VSCodeФорма плагина:3. Веб-версия иReact:

Официальный сайт:sanddance.js.org/

Опыт:sanddance.js.org/app/

6. Реализуйте свой собственныйAR: AR.js+Three.js+Autodesk 3D

Это очень интересная реализация, общий процесс таков:

  1. Откройте браузер на телефоне
  2. AR.jsпрограмма запускается
  3. ARToolKitТег изображения распознан
  4. A-Frame.jsначать звонитьThree.jsРендеринг 3D-моделей
  5. отображать на экране

6.1 Этапы реализации

1. Найдите модель

Сначала мы на первом местеhttps://sketchfab.comЗагрузите ваши любимые 3D-модели

2. Загрузите 3D-модель

скачатьglTFФормат(AФреймворк обеспечиваетglTF,OBJОфициальный сайт двух форматов рекомендуется использоватьglTF)

3. Создатьindex.htmlи вставьте эти коды


<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>

<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
        <a-marker type='pattern' url='res/pattern-marker.patt'>
            <a-entity position='-3 2 0' text="width: 5; value:I am Psyduck. We are pokemon. We love you"></a-entity>
            <a-entity position='0 0 0' gltf-model="url(res/scene.gltf)"></a-entity>
        </a-marker>
    </a-scene>
</body>
  • Строки с 1 по 3: Дата всех наборов js в
  • Строка 6: использоватьA-frameизhtmlдобавить тегa-sceneкамеру и поставитьAR.jsвставлять
  • Строка 7: МаркерMarkerесли отмеченоMarkerКогда он появится в камере, он будет делать следующие вещи
  • Строка 8: Добавьте то, что вы хотите сказать другому человеку
  • Строка 9: Новый3DМодель

4. Разверните приложение.

5. Создайте идентифицируемый QR-код

6. Сделайте физическую карту

7. Сканировать

оригинал:AR использует AR.js для создания маленькой карточки, которая заставляет другую сторону охать!

Пожалуйста, наслаждайтесь моделью стоимостью 2199 долларов.

И потрясающая девушка-модель "Этот убийца не слишком холоден".

Это слишком красиво.

хочу испытатьAR.jsВы можете увеличить изображение ниже и отсканировать его с помощью камеры.

4. Постскриптум и цитата

Изначально я хотел собрать десяток и сделать репост, но после долгих поисков нет библиотеки с открытым исходным кодом, которая могла бы броситься в глаза.

Я умоляю вас порекомендовать несколько библиотек с открытым исходным кодом, которые недостаточно хороши., добавлю, спасибо.

❤️ После прочтения трех вещей

Если вы найдете этот контент вдохновляющим, я хотел бы пригласить вас сделать мне три небольших одолжения:

  1. Ставьте лайк, чтобы больше людей увидело этот контент
  2. Обратите внимание на «Учителей фронтенд-убеждения» и время от времени делитесь оригинальными знаниями.
  3. Также смотрите другие статьи

Персональный WeChat учителя-убеждающего:huab119

Вы также можете прийти ко мнеGitHubПолучите исходные файлы всех статей в блоге:

Руководство по убеждению:GitHub.com/Roger-Hi RO/…Давай поиграем. ~

Категории