小さいことはいいことだ。小さいグラフに特化したフリーのjsチャートライブラリ３選。
写真はうちのみーこ。
スマホでも見やすいグラフを使う機会があるプログラマ・デザイナーの皆さまへ。小さいグラフを綺麗に描画できるJavascriptのライブラリを紹介します。
1. Peity
http://benpickles.github.io/peity/
HTMLの要素をSVGの小さいチャートに変換してくれる使い易いライブラリです。これだけでパイチャートを描画できます。
<span class="pie">1/5</span>
<script>
$("span.pie").peity("pie");
</script>
2. MetricsGraphics.js
Mozillaが開発している日付をX軸としたタイムラインチャートに特化しているライブラリです。
Javascriptでオプションを指定してチャートを描画します。
d3.json('data/fake_users1.json', function(data) {
data = MG.convert.date(data, 'date');
MG.data_graphic({
title: "Line Chart",
description: "This is a simple line chart. You can remove the area portion by adding area: false to the arguments list.",
data: data,
width: 600,
height: 200,
right: 40,
target: document.getElementById('fake_users1'),
x_accessor: 'date',
y_accessor: 'value'
});
});オプションをオフにしていくと線だけのスパークラインも可能です。
- d3.jsに依存
- SVGで描画
- X軸の日付/日時を補完したり自動調節してくれる
3. jQuery Pparkline
jQueryを冠に付けた小ささに特化したチャートライブラリです。Sparklines（スパークライン）と銘打っていますがパイチャートやバーチャート等も揃っています。
<p>
Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<script>
$('.inlinesparkline').sparkline();
</script>
- jQueryに依存
- canvasで描画
- 3年程メンテされてないので使う時はGitHubを見て（https://github.com/gwatts/jquery.sparkline/）メンテナンスされているフォークを探して使った方が良いかも。
小さく描画するコツ
Tool for my cat should drink amount of water every day
Photo is MikoTheCat.
When you select the weight of the cat in the select box, to display the amount of water drink necessary on one day.
Cat Weight：
Weight 4.0kg cat should drink 198 ml water every day.
Formula
Weight ^ 0.75 * 70ml.
猫が1日に必要な水分量を体重から計算するツール
写真はうちのみーこ。
猫が腎臓の病気になるのを予防するため、1日に必要とする水分摂取量を自動計算するツールをさっと作りました。
下のセレクトボックスで飼い猫の体重を選択すると、選択した体重に必要な水分量のグラム数が切り替わります。1日に飲んでもらいたい水分量の目安にお使い下さい。
1日に必要な水分量の計算ツール
猫の体重：
体重4.0kgの猫が1日に必要な必要水分量は198mlです。
※注意1※成猫が必要とする水分量の目安です。
※注意2※この必要水分量は、水以外にもウェットフード等の食事に含まれる水分も含んだ量です。
※注意3※器に入れた水は気化して減少します。また気化量は温度・風・湿度によって変動します。器から減った量で猫が飲んだ水分量を測定する場合は一定の気化量も計算に含めて下さい。
計算式
体重の0.75乗×70mlとしています。
簡易的に計算する場合、猫の体重1kgに対して40～50mlの水が目安になります。
この計算ツールを作った背景
飼い猫の多くが水分不足による腎臓の病気になるらしく、この予防には毎日適量の水分を取る事が効果的と獣医さんから教えて貰いました。
猫は砂漠地帯で生息していたため、少ない水分量で生きていける体の仕組みを備えています。この「砂漠」で生きて行くための仕組みが猫の腎臓に負荷をかけ、慢性腎不全などの症状を起こします。
今回の熊本県・大分県の震災で飼い猫と車に避難した方も多いと聞きます。慣れない環境で水を飲まなくなって病気が心配な方もいると思います。
飼い猫に水を適量飲んでもらうための目安となる、どこからでも使える簡単なツールが欲しかったので作りました。
猫に水を多めに飲んでもらうには？
箇条書きで手短にまとめます。
- 水の置き場所を増やす。（1か所を2か所に、2か所を3か所に）
- 水の置き場所を変える。（トイレから離す、餌置き場から離すなど）
- 新鮮な水に入れ替える頻度を増やす。
- 猫が好きな食べ物の匂いがする水を準備する。
- 少し暖かい水にする。（好む猫もいる）
- スプーンなどで直接水を口元に運ぶ。
- ヒゲが当たらない器に変える。
- 食事と水を混ぜる。
我が家ではチャオチュールの袋をスプーン変わりに水をすくって口元に運ぶと喜んで飲みます。
