Responsive bar charts in HTML and CSS - 9elements
Building flexible data visualizations for international sites For our international clients, we have created dynamic charts and data visualizations for the web. Charts typically render shapes like lines and paths, rectangles and circles. They contain text for titles, axis labels, numerical values and legends. SVG is the good fit for this purpose. It embeds directly into HTML and pairs well with CS
ブラウザでフローチャートを作れるシンプルなスクリプト・「Flowy」 - かちびと.net
Flowyはブラウザでフローチャートを作成出来るスクリプトです。シンプルで軽量なコードですがjQueryに依存します 上図のように左ペインからブロックをD&Dで追加、右ペインで各ブロックを編集するUIとなっていますので直感的な操作でフローチャートを作成する事が出来ます 基本的な機能のみの提供で、完成されているようなものでは無いようで、あくまでフローチャートを作成出来る機能を提供するもののようです example var spacing_x = 40; var spacing_y = 100; // 初期化 flowy($("#canvas"), drag, release, snapping, spacing_x, spacing_y); 初期化します。例ではブロックサイズを定義していますがデフォルトで設定されています function snapping(drag) { //例：ドラッグす
Open Source Javascript Gantt
Try it! Drag tasks across the timeline, resize to change duration, click to view more information Usage Dependencies: momentjs and snapsvg Include it in your html <script src="frappe-gantt.min.js" /> Create an svg element <svg id="gantt"></svg> Initiliaze a new Gantt object var tasks = [ { id: 'Task 1', name: 'Redesign website', start: '2016-12-28', end: '2016-12-31', progress: 20, dependencies: '
グラフや図解の説明テキスト | Accessible & Usable
公開日 : 2018年8月4日 (2020年6月13日 更新) カテゴリー : アクセシビリティ ウェブコンテンツの中で、視覚的な情報提示としてグラフや図解を用いる場合、アクセシビリティ (特に視覚障害者に対する情報保障) はどのように両立したらよいでしょうか。主宰しているウェブアクセシビリティの勉強会で、質問が寄せられたので、考えてみました。 グラフも図解も「画像」なので、alt 属性で代替テキストを記述すれば...とまずは思うかもしれません。ただし、alt 属性内に要約をコンパクトにまとめられればよいのですが、多くの場合、グラフや図解は情報量が多いため、テキストに起こしてみると記述は説明的で長くなりがちです。また、alt 属性内のテキストはセマンティックに構造化することができず、長いテキストでも平坦な記述 (情報の優先度付けなどのない「べた書き」) にならざるを得ないため、スクリーンリ
Investment Calculator
How much money do I need for retirement?How much should you have saved when you retire…
エル版・Web制作の業務チャート｜Webディレクター・ハラヒロシのブログ
ふだん自分たちがやっているWeb制作業務を体系的にまとめるとどんな感じかな？と思ってXmindでサックリつくったチャートがこれ。深く考えていないのでツリー構造がおかしいところ、過不足等あると思いますがお許しを。いやー...やることいっぱいあるなぁ...。 これをつくってみた目的はふたつ。 【1】新人デザイナー向けに、どの業務からやってもらうかをマークする ・徐々に周辺業務に広げていくことで経験値が実感できる ・目標を立てやすい ・全体のなかの位置づけを理解し、俯瞰する力がつく 【2】中堅デザイナー向けに、棚卸をしてもらう機会に ・得意なこと、苦手なこと、やってみたいこと...自分を客観的に見つめなおしてもらう ・スキルアップまたはスキルチェンジの足掛かりに ・案件をどこまでカバーしていくかのチェック材料に使える マンガ「Webクリエイター・ウルトラエル」 ITが発展した下界に下りてきた忍者
Accessible SVGs | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let’s see how this will impact users of assistive technology (AT) and what is needed
色の組み合わせ方を身につけよう: 棒グラフや円グラフなど、データをビジュアル化した際に効果的な配色
センスの良いカラーパレットを手に入れるのは簡単ですが、データを見せるための正しいカラーパレットを見つけることは非常に困難です。データの情報を正しく、効果的に伝える必要がある時に適したカラーパレットを紹介します。 Finding the Right Color Palettes for Data Visualizations 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 既存のカラーパレットの注意点 データに最適なカラーの3つのポイント 分かりやすいデータのためのカラーパレット 既存のカラーパレットの注意点 まずは、既存のカラーパレットを調査してみました。 ほとんどのカラーパレットは、複雑なグラフやデータをビジュアル化するためにはデザインされていないことに気がつきました。既存のカラーパレットが適さない理由は、3つです。 1. アクセシ
The Careers of the Founders
Sources & Methodology We selected 33 company founders from a range of eras and industries, then created timelines of their working lives by breaking their stories down into their successes, their failures, and the companies they founded along the way. Sources Love it? Embed it on your website or blog: × <a href="https://fleximize.com/careers-of-the-founders/" target="_blank"><img src="https://flex
How To Make Charts With SVG | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! In my first post about making charts, I looked at methods that solely relied on CSS. I argued that this wasn’t the best option in most cases; there are just too many tricky design and development hurdles to overcome. Generally speaking, it’s best to make charts with a combination of SVG, Jav
20 best JavaScript charting libraries
A quick note before we start: I have covered top 20 libraries below. It might get little confusing when you try to pick one for your project as there are many factors to consider. So here is something for help – a small guide on factors to consider while choosing a JavaScript chart library from the makers of FusionCharts (covered at #2 below). It explores 14 different factors that go into making t
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
Variance Charts
Build powerful data visualizations for the web. Without writing JavaScript. Variance empowers engineers, designers, journalists, scientists, and analysts to build elegant bespoke data graphics for the web, using only HTML & CSS. Our intuitive, markup-based grammar emphasizes clear, practical graphics and serves as the foundation for a wide range of visualizations.
D3.js – 円グラフのポイント | DevelopersIO
はじめに 前回に引き続き、今回はD3.jsで円グラフを表示する上でポイントとなる点を取り上げ また公式サイトのサンプルソースを解析してみたいと思います。 ポイントについて D3.jsで円グラフを描くには ・データ一つ一つを表すパイ(扇)を設定する ・各パイに円弧を指定して円グラフとする という手順となります。 それらパイ(扇)、円弧を描くのが、D3.jsの以下の関数となります。 ・d3.layout.pie パイを作成します。 ・d3.svg.arc arc(円弧)を作成します。 詳細については、公式サイトのAPI Referenceを参考にしてください。 API Reference · mbostock/d3 Wiki · GitHub サンプルソース 上記のポイントを踏まえ、公式サイトに乗せられている Pie Chart を解析し、コメントを追加しました。 <!DOCTYPE html
Pop Chart | The things you love. Charted.
Please note that framed and panel-mounted orders require an extra 3-6 business days of processing time. Shipping Internationally? Canada Delivery time: Standard (Prints Without Finishing Options Only): 4-10 business days Standard (Prints With Finishing Options and All Other Items): 2-7 business days Expedited: 2-4 business days Priority: 2-3 business days United Kingdom Delivery time: Standard: 3-
美しくデザインされたビジュアルデータのまとめ | コリス
プレゼンやインフォグラフィック、ウェブページのキャッチ用の画像など、印象的にデータや情報を見せる美しくかっこよくデザインされたビジュアルデータをdribbbleから紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Solving Problems With CSS Grid: The Gantt Chart | Envato Tuts+
Web制作の参考になる！サイトマップやハイレベルサイトマップ、フローチャートなどのまとめ | コリス
データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」
無料で使えるプロジェクト管理ツール「gantter」を使ってみて、これはもう手放せないと思ったポイント3つ | バシャログ。
