手書き風UIを実装できるJavaScriptライブラリー
2022年2月15日 JavaScript, Webサイト制作 手書きのものってどこか温かみがあって親近感がわきますよね。今回はそんな手書き風のUIを実装できるJavaScriptライブラリーを紹介します！ ↑私が10年以上利用している会計ソフト！ Rough Notation Webサイト｜GitHub テキストの一部を強調したり、注釈を入れたいところに手書き風マーカーを追加できます。まさに今書いてます！というようなアニメーションも面白いですね。 導入方法 JavaScriptファイルで import { annotate } from 'https://unpkg.com/rough-notation?module'; または npm でインストールします。 npm install --save rough-notation 実装方法 基本的には実装したい要素を指定して、装飾を指定し、
jquery.graphviz.svg - GraphvizのSVGデータを表示/機能追加するjQueryプラグイン MOONGIFT
チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。 そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。 jquery.graphviz.svgの使い方 表示しました。 ノードをクリックすると、ハイライト表示されます。 さらにズームイン/アウトができます。 jquery.graphviz.svgはGraphvizのSVGデータに対して、ハイライトとズームイン、ズームアウトを追加します。さらにデータをレスポンシブにしてくれるので、どのデバイスに対しても適切な表示が可能です。 jquery.graphviz.svgはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT L
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」
Charts.cssはデータ可視化のためのチャートCSSフレームワークです。HTMLによるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく見かける一般的なチャートやこれらのマルチデータ、パーセンテージや積み上げ式、3Dなど様々なビジュアライズも対応されています。 少しクセがある印象ですが、慣れれば問題なさそうでした。HTML形式のデータに対応する場合にあると作業がかなり楽になりそうですね。 動作サンプル及び簡単に使い方のご紹介です。基本的にはtableが使われ、classを付与する事でビジュアライズされます。 <table class="charts-css"> ... </table>単なるtableをビジュアライズするにはCharts.cssを読み込んだうえで上記のようにcharts-cssというclassを付与します
ちょっと面白いスクリプト！グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz
手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。 グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。 グラフやチャートは、現在7種類に対応しています。 棒グラフ（垂直） 棒グラフ（水平） ドーナツ 折れ線グラフ 円グラフ 散布図
ミニ折れ線グラフ
Result jQueryを使ったミニ折れ線グラフです。コードは長いのでCodepenでご参照ください セッティングは以下のようにすればいいだけ $(".micro-graph").graphiq({ data: coffees, fluidParent: ".little-container", height: 36.01, xLineCount: 0, lineWeight: 1.5, dotRadius: 4, yLines: false, xLines: true, dots: false, fillOpacity: 0.5, fill: false, colorUnits: "#c3ecf7" });楽でいいですね html<div class="micro-graph"></div>先ほどのセッティングで指定したclassを持った空要素を用意すればOK viaMicrograp
uPlot - 大量のデータを高速に描画するグラフライブラリ MOONGIFT
チャートライブラリに求められるニーズはたくさんあります。使えるグラフの種類が多いこと、カスタマイズが容易なこと、リアルタイムデータにも使えることなどなどです。すべてをまかなえるライブラリは多くないので、目的に合わせてライブラリを使い分けるのが良いでしょう。 今回紹介するuPlotはとにかく大量のデータを即座に表示したいというニーズにマッチしています。 uPlotの使い方 デモです。16.6万ものポイントをプロットしています。 最初の表示時のみ、データをオンラインで取得してきますが、二回目以降のアクセスではキャッシュが有効になるようです。データさえ取得されれば、実際の表示は瞬時に行われます。表示はもちろん、その後のスクロールもスムーズです。 uPlotはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 leeoniya/uPlot: An exceptio
手書き風のチャートを実装できる非依存のJavaScriptライブラリ・「roughViz.js」
roughViz.jsは手書き風のチャートを作成できる非依存のJSライブラリです 他ライブラリを必要とせず単体で動作してくれます。チャートの種類も棒チャートやドーナツ、散布図、円チャート、折れ線などよく使われるものに対応されており、今後も増える予定があるそうです 実装方法も手軽で簡単、CSVにも対応しています 動作テスト 動作サンプルです。開発者さんが用意していたものをお借りしました。簡単に使えるので手書きじゃなくても便利そう <script src="https://unpkg.com/rough-viz@1.0.4"></script>↑ スクリプトを読み込みます。CDNあるのでまずはこれを使って試すとよさそうですね new roughViz.BarH( { element: '#vis0', title: "SNS foo bar", titleFontSize: '1.5rem',
レーダーチャートを作れる非依存のシンプルなスクリプト・「maturity-radar」
maturity-radarはレーダーチャートを作成できるスクリプトです。非依存型で単体で動作します。 RPG等でもおなじみのレーダーチャートを手軽に作成する事が出来ます。諸事情により必要に迫られて方法を考えていたところ、こちらが見つかったので備忘録。2年前から更新はされていないようですが・・ 使用例空要素を作ります <div id="foo"></div>スクリプトを読み込みます <script src="https://rawcdn.githack.com/kolektiv/maturity-radar/master/dist/radar.js"></script>あとはセッティングするだけ <script> radar.show('#foo', { size: 300, curve: false, metrics: [ { name: "HP", range: [ "50", "10
d3.js v5をベースにしたチャートライブラリ・「Britecharts」
Britechartsはd3.jsのv5をベースにしたチャートライブラリです。チャートとコンポーネントを簡単に直感的に組み合わせる事が出来るのだそうです。リユースブルであり、シンプルなAPIを特徴としているのだそう。割と手軽な印象で学習コストは低くなりそうです。 動作サンプルがありましたのでお借りしました。 動作サンプル マウスホバーするとグラフと下部のデータが連動して動く、みたいなよくあるやつです。 正直、上のような簡単なチャートだけならもっと他にも軽量で簡単に使えるライブラリもありますのでBritechartsを使う必要性はないんですが、それなりのデータ量を扱うコンテンツでしたらあとで困らないように様々なケースに対応できるライブラリを選択しておいた方がよさげですね。 ざっくり手順<script src="https://cdnjs.cloudflare.com/ajax/libs/d3
編集できるtableと、その入力値に連動した簡易的なグラフ
Result 編集はcontenteditable属性を使っています。 動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください jQueryvar vis = function(e) { var count = $(e).children('td').not(':first-of-type').length; var width = $('.chart').height(); var barwidth = (width/count)-10; var heighest = 0; var chartTitle = $('th:first-of-type').html(); var tableTitle = $('.table-title').html(); var chartTitleVal = $(e).children('td:first-of-
簡単にレポートを作成できる「Googleデータスタジオ」を使ってみた
さまざまなデータをグラフや表で分かりやすく表示するためのツールはいろいろありますが、その中の一つが「Googleデータスタジオ」です。Googleが作ったサービスという利点を生かし、GoogleアナリティクスやAdWordsなど同じGoogle製のサービスとの連携が簡単ということで、実際にGoogleアナリティクスとの連携を試してみました。 データスタジオ（ベータ版） | データの視覚化とレポートの作成 | 無料版を試す - Google https://www.google.com/analytics/data-studio/ まずはGoogleデータスタジオのページへ行き、「無料版を試す」をクリックします。 Googleにログインします。ログインしたいアカウントをクリックして…… パスワードを入力し、「次へ」をクリック。 Googleデータスタジオを使えるようになりました。「空白」をク
billboard.js - インタラクティブ、プログラマブルなグラフライブラリ MOONGIFT
HTML5の表現力を活かすにはJavaScriptの活用が欠かせません。SVGやCanvasを使って図を描画することはできますが、JavaScriptを組み合わせることでよりインタラクティブにしたり、マウスイベントを使ったりできます。 今回紹介するのはbillboard.js、JavaScript製の再利用が容易なグラフライブラリです。 billboard.jsの使い方 グラフの一例です。 データをフィルタリングすると、他のデータが薄くなります。 折れ線グラフ。 タイムシリーズ。 曲線グラフ。 X軸の座標が異なるグラフ。 ステップグラフ。 エリアグラフ。 積み上げ型のエリアグラフ。 棒グラフ。 積み上げ型の棒グラフ。 散布図。 円グラフ。 ドーナッツグラフ。 ゲージグラフ。 複数のグラフの組み合わせ。 サブグラフ。 billboard.jsは表示に際してD3を使っています。そして、Java
Chartkick.js - 多数のグラフに対応したラッパーライブラリ MOONGIFT
Webシステムで一番苦労させられるのがグラフではないでしょうか。HTMLの表現力が上がったと言っても、コードを書かなければなりません。特にグラフやチャートになるとコード量も増えがちです。 そこで使ってみたいのがChartkick.jsです。多くのパターンに対応したクライアントサイドのグラフライブラリです。 Chartkick.jsの使い方 曲線のグラフ。 円グラフ。 ドーナッツグラフ。 棒グラフ。 横型。 エリアグラフ。 点だけのグラフ。 バブルチャート。 複数の要素を同時に。 横棒グラフでもできます。 横棒グラフで積み上げ型。 複数の要素でかつグルーピング。 色を変えた円グラフ。 データが一定でない要素同士でも。 10分ごとといった細かい単位でも。 細かい横棒グラフ。 Chartkick.jsは Chart.js、GoogleチャートそしてHighchartsに対応しており、これらのグラ
Create interactive jQuery Charts and Graphs with FusionCharts
Create Interactive Charts with the FusionCharts jQuery Plugin Use FusionCharts to create Gantt, Line, Pie, Area, and 150 other charts for your web application. Compatible with Bootstrap and jQuery UI, create interactive and responsive charts, support zooming, panning, APIs, animation, real-time updates, and drill-downs. A jQuery plugin is a code written in JavaScript that extends the functionality
cssCharts.js - スタイルシートでグラフを描画 MOONGIFT
HTML5によってWebの表現力は高まっています。特にSVGやCanvasを使えば高度なグラフィックが描けます。ただし使いこなすのはそうそう簡単ではありません。そのため、まだまだスタイルシートの活躍の場はとても多いです。 そこで使ってみたいのがcssCharts.jsです。スタイルシートとJavaScriptを使って作られたグラフライブラリで、簡単に使いこなせるのが大きな利点です。 cssCharts.jsの使い方 cssCharts.jsの描けるグラフです。まずは棒グラフ。 次はドーナッツグラフ。 ドーナッツグラフの2つの値版。 さらに中央を塗りつぶしたバージョン。 次に折れ線グラフ。 塗りつぶしをなくした版。 もっとシンプルに。 そしてポイントも取り除いた版。 最後にパイチャート。 オンマウスでタイトルを表示することもできます。 例えば棒グラフの場合は次のように指定します。 <!--
Gudang138 - Unleash Your Luck & Win Big Prizes Today!
Spin Your Way to Glory! Welcome to Gudang138 Slot! Ready to unleash your luck and dive into the most thrilling slot experience ever? Spin those reels and score some epic wins. 🎰✨
MetricsGraphics.js - Examples
Home Download Interactive Code Issues | Light style Dark style Accessible style Lines Multiple Lines Data Axes Rollovers Automatic time formatting Annotations Updating Other Brushing & Zooming Experimental Created by Ali Almossawi, Hamilton Ulmer — Metrics at Mozilla Shared under the Mozilla Public License.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript製のオープンソースなガントチャートライブラリ・「Frappe Gantt」
Canvasベースのグラフを描けるjQueryスクリプト・「Flot」
cssplot