japan-map-js - 日本のクリッカブルな地図を表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 集まったデータをただ一覧にしているだけではインパクトは薄くなってしまいます。どう可視化するかが問題です。時系列で比較する場合は棒グラフや折れ線グラフ、グループの場合は円グラフなど、データによって選ばれるグラフは異なります。 もしデータが地域に合わせて作られるなら、地図上にマッピングするのがいいでしょう。日本地図にマッピングするなら使えるのがjapan-map-jsです。 japan-map-jsの使い方 デモです。都道府県名を出しているパターンです。 クリックすると、どの都道府県か分かります。 色分けもできます。 コロナウィルスのデータと合わせているパターンです。 japan-map-jsを使えば日本地図上にデータを可視化するのが簡単に実現できます。元々japan-mapで使われて
[JS]SVGを使った滑らかで美しいアニメーションのプログレスバーを簡単に実装できるスクリプト -ProgressBar.js
Custom Shaped Path: 最後はパスを設定して描きます。 ProgressBar.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... <script src="js/progressbar.js"></script> </body> Step 2: HTML 一つ目のデモ「Line」を例に。 プログレスバーを配置する要素をdivなどで用意します。 <div class="example-container" id="example-line-container"></div> Step 3: JavaScript 「Line」を描くには下記のように指定します。 var element = document.getElementById('example-line-container'); var line = new
![[JS]SVGを使った滑らかで美しいアニメーションのプログレスバーを簡単に実装できるスクリプト -ProgressBar.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf1acaeed0e4459fde1bd723379666670b18a628/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102006.gif)
Chartist - Simple responsive charts
You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included. Get awesome Dashboard Templates by Creative TimAre y
ブラウザ上でホワイトボードを共有できる「Whiteboard Fox」を使ってみた
by Bryan & Lyn . SNSで「ここを図解したい！」と思った時や、遠隔地にいる人とちょっとしたミーティングがしたい時に、アプリやソフトウェアなしでURLを共有するだけで同じホワイトボードを使えるのが「Whiteboard Fox」です。 Whiteboard Fox - Simple Online Whiteboard http://whiteboardfox.com/ 実際にホワイトボードを使う様子は以下のムービーから確認できます。 「Whiteboard Fox」を使ってみた - YouTube アプリが必要でなく、ウェブサイト上でホワイトボードを使うことが可能なので、タブレット・スマホ・PCからアクセスできます。 ホワイトボードを使うには「Start Drawing」をクリック。 すると、方眼紙の横にメニューツールがある画面が表示されました。 デフォルト状態ではペンが選択
Google ChromeでスクロールキャプチャできるChrome拡張「Webpage Screenshot」
Google ChromeでスクロールキャプチャできるChrome拡張「Webpage Screenshot」を紹介します。 この拡張を利用すれば、画面キャプチャやスクロールキャプチャはもちろん、ページ上に図形や文字を描いたり、ページ上でテキスト編集を行うこともできます。 １．インストール 「Chrome ウェブストア - Webpage Screenshot」のページ右側にある「CHROMEに追加」をクリック。 「追加」をクリック。これでインストールが開始します。 インストールが完了すると次のようなページが表示されます。 ２．キャプチャする キャプチャしたいウェブサイトの右上にあるカメラマークのアイコンをクリック。 メニューが表示されます。ここでは「ページすべてをスクリーンショット」を選択します。 スクロールキャプチャが開始します。 キャプチャが完了すると次のような画面が表示されます。
[JS]スマホ・デスクトップに対応したインタラクティブなマップが作成できるスクリプト -Leaflet
jQueryなど他のスクリプトに依存せずに、インタラクティブなマップを作成できる軽量のスクリプトを紹介します。 Leaflet - a modern, lightweight JavaScript library for interactive maps デモページ [ad#ad-2] Leafletは、ユーザビリティ、パフォーマンス、サイズ、フレキシビリティを重視して開発されており、デスクトップとモバイルの主要なブラウザでインタラクティブなマップを作成できるBSDライセンスのスクリプトです。 Leafletの主な特徴 タイルレイヤー マーカー、ポリゴン、ポリライン、サークルの設置 ポップアップ イメージのオーバーレイ ドラッグ操作でパン ホイール・ダブルクリックでズーム Shift+ドラッグでバウンディングボックス タッチドラッグでパン（スマホ） マルチタッチでズーム（iOS） ダブルタ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSと1つのdiv要素で出来る表現いろいろ
zzapwebdesign.com