70 тысяч звездочек на гитхабе и сотни интересных проектов. Кажется, что D3 это что-то большое и очень сложное, но это не так. Я расскажу об основах D3 и поделюсь опытом разработки инфографики Бюростат.
Рубрика «svg» - 5
Просто о D3.js
2017-11-10 в 11:03, admin, рубрики: d3.js, javascript, svg, векторная графика, визуализация, визуализация данных, Инфографика, Работа с векторной графикойРуководство по alt-text от слабовидящего веб-разработчика
2017-11-07 в 9:05, admin, рубрики: accessibility, alt-text, html, IT-стандарты, svg, логотипы, скринридерЭта статья содержит всё, что вам нужно знать об alt-text! Когда их использовать и как идеально их подготовить. Подготовил я, Дэниель, веб-разработчик с частичной потерей зрения, который ежедневно использует скринридер.
Мой опыт с картинками в вебе
Во время сёрфинга в вебе я использую сочетание увелителя экрана и скринридера. Как показывает практика, увеличение экрана удобнее на дисплеях большого размера, а скринридер — на меньших устройствах.
Читать полностью »
Как правильно вставлять SVG
2017-09-15 в 16:00, admin, рубрики: html, html-верстка, html5, svg, Блог компании HTML Academy, верстка сайтов, графика, для начинающих, Разработка веб-сайтов
Низкие ветвистые деревья
2017-08-30 в 16:12, admin, рубрики: css, javascript, svg, ux/ui, визуализация данных, разработка мобильных приложений, структуры данныхПод сим поэтическим названием скрывается идея удобного представления древовидных структур данных и практической его реализации. Может, что-то подобное где-то уже было, но я не встречал; и тут мой приятель Эдуард Аверюшкин предложил интересную идею, которую я попытался развить.
Классическое представление дерева сущностей (например, меню разделов сайта, главное меню в программах) довольно удобно и наглядно в случае «высокого» дерева с не слишком глубокой вложенностью элементов. Будь то выпадающее меню (как главное строковое меню программ) или раскрывающееся (как в левой панели популярных файловых менеджеров), всё довольно удобно и наглядно. А что если дерево низкое и развесистое? У каждого родителя детей мало, зато вложенность достигает, скажем, 10. Или 50…
Генерация Галактики и обучение начальным знаниям астрономии
2017-08-08 в 9:29, admin, рубрики: svg, астрономия, идея, обучение, Учебный процесс в ITВведение
Некоторое время назад я дома решил посмотреть, что нового появилось на тему космоса за последнее время. За этим делом меня застал мой 7 летний сын, проявив большой интерес к этой тематике. Пока я ломал голову, как просто и доходчиво, а также в каком именно объеме дать ребенку информацию по космосу, я наткнулся на статью, где написано, что принято решение вернуть в российские школы предмет «Астрономия» в 2017-2018 учебном году, но только с 11 класса. Это и стало тем событием, которое подвигло меня написать эту статью, чтобы помочь ознакомить с азами астрономии детей до 11 класса.
По сути 7 летний ребенок является представителем определенной выборки пользователей, которая либо интересуется астрономией уже сейчас, либо заинтересуется ей в будущем. Именно для них, а также для тех, кто будет давать знания о звездах я предлагаю попробовать приведенных ниже способ. Основной идей является генерация Галактики с использованием реальных данных (эту часть я беру на себя), и последующее использование результата генерации либо в играх, либо в качестве учебного пособия теми, кто хотел бы сделать изучение астрономии более интересным…
«Гоночки» на SVG
2017-06-22 в 11:36, admin, рубрики: javascript, playground.js, Raphael.js, svg, разработка игр
Вводная часть
Аркадная js игра. Прототипом послужили так называемые «Гоночки в клетку»(в каком-то детском журнале видел). Смысл в том, что на тетрадном листе рисуется трасса и игроки ходят по клеткам. За один ход можно увеличить скорость на один или уменьшить. Если «врезаешься» в стену, то продолжаешь от этого места с единичной скоростью.
Читать полностью »
GraphicsJS – графическая JavaScript библиотека
2017-06-20 в 8:52, admin, рубрики: anychart, dom, graphicsjs, html5, javascript, javascript api, javascript library, open source, svg, tutorial, vml, zindex, анимация, бесплатное по, виртуальный dom, графика, интерактивная графика, открытое ПО, открытый исходный код, открытый код, процедурная генерация, Разработка веб-сайтов, разработка игр, рисование, трансформации
Перевод статьи. Англоязычный оригинал опубликован на SitePoint – "Introducing GraphicsJS, a Powerful Lightweight Graphics Library".
HTML5 – основа основ современного веба. И сегодня, когда встает задача создать интерактивную графику, выбор чаще всего падает на такие технологии, как SVG и Canvas. Flash позабыт, Silverlight – редкая птица, обитающая на задворках веба, и почти никто не помнит сторонние ActiveX и Java-плагины.
Плюсы и минусы SVG и Canvas хорошо известны – в целом все сводится к тому, что для создания интерактивных элементов и работы с ними больше подходит SVG. Это векторный формат, основанный на XML, и, когда изображение загружается на страницу с использованием тега <svg>, каждый его внутренний элемент становится доступен в SVG DOM.
В данной статье я хочу рассказать о GraphicsJS. Это мощная графическая JavaScript-библиотека с открытым исходным кодом, основанная на технологии SVG (VML для старых версий IE). Начну с краткого введения в основы GraphicsJS, а затем проиллюстрирую возможности библиотеки двумя небольшими, но наглядными примерами. Первый из них посвящен изобразительному искусству. Второй покажет, как менее чем за 50 строк кода сделать простую арт-игру в жанре таймкиллера.Читать полностью »
Поддержка SVG и режим CompactOverlay в приложениях UWP
2017-05-02 в 5:59, admin, рубрики: compactoverlay, creators, svg, topmost, update, uwp, разработка под windows, разработка под windows phone, метки: creators
Хочу продемонстрировать несколько простых, но интересных нововведений, которые принесло с собой для разработчиков обновление Creators Update.
На данный момент, для того, чтобы скачать и установить Creators Update SDK необходимо быть Windows инсайдером. Сейчас доступно SDK сборки под номером 15063. Найти его можно на страничке разработчиков сайта Windows Insider.
Кроме обновленной 10-ки и Creators Update SDK вам понадобится еще и Visual Studio 2017.
Читать полностью »
SVG спрайт с webpack одной строкой
2017-05-01 в 20:40, admin, рубрики: javascript, svg, svg-sprite, webpack, webpack 2, Разработка веб-сайтовПару дней назад вышла полностью обновлённая версия svg-sprite-loader — webpack лоадера для создания SVG спрайтов. Внутри я подробно рассскажу о том как он работает и чем облегчает жизнь разработчику.
Первые шаги к Web SCADA-системе. Оживляем мнемосхему в браузере с помощью AngularJS
2017-04-12 в 11:55, admin, рубрики: AngularJS, javascript, scada, scada в браузере, svg, автоматизация, асу тп, АСУТП, визуализация данных, диспетчеризация, Промышленное программированиеСегодня мы поговорим об отображении мнемосхем технологических объектов в браузере посредством таких технологий как SVG, JavaScript и т.д.
Опишем, что мы хотим получить:
- Мнемосхема открывается в браузере. Графика – SVG.
- Вверху мнемосхемы кнопки переходов на другие мнемосхемы.
- Данные обновляются раз в секунду.
- По клику на изображение выключателя появляется окно, из которого его можно включить или отключить.
SCADA-система (точнее её серверная часть) позволяет добавлять пользовательские html-страницы. Я не буду вручную набирать код страницы, а нарисую простую схему в редакторе, потом покажу, что получилось и как это работает.
Читать полностью »