とよりジャバスクリプトD3ライブラリに慣れになってきて、私は別のカクテルレシピのこの可視化が見つかりました：Information is beautiful - Cocktailsカクテルレシピデータの可視化
私はこれが行われたか疑問？ D3jsでこれを行う機会はありますか、これは基本的に非常に手作業のようなものですか？
カクテル中の成分の相対量を視覚化するために、スタックレイアウトを使用することができます。しかし、私はどのようにカクテルグラスのさまざまな形状に対処するか分かりません。
それでは、聞かせてテーブルこれは良いアイデアはd3でやっているかどうかの会話は（どこ楽しいことで？だ）と話しに関する我々はd3でこれを行うことができる方法。以下のコードではSVG imageを借用し、グラデーションの塗りつぶしを適用してカクテルのさまざまな部分を示します。最後に、いくつかのラベルがそのすべてを包む...
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<style>
svg{
font: 12px sans-serif;
}
</style>
</head>
<body>
<script>
// our cocktail glass
var glassPath = "m 60,350 c -4.74218,-0.7989 -7.33654,-2.5714 -7.33654,-5.0124 0,-2.4848 2.03654,-4.0776 5.21357,-4.0776 1.54746,0 3.59496,-0.4138 4.55,-0.9197 1.97894,-1.0481 9.10335,-3.4326 24.23643,-8.1118 5.775,-1.7856 11.4,-3.6018 12.5,-4.0358 1.1,-0.434 4.3253,-1.3074 7.16733,-1.9408 5.71266,-1.2732 7.4813,-2.8015 9.21631,-7.9635 0.64176,-1.9094 2.38458,-4.7427 3.87294,-6.2962 l 2.70609,-2.8245 -0.2841,-27.7039 c -0.15625,-15.2371 -0.68535,-33.7788 -1.17577,-41.2038 -0.49042,-7.425 -1.20657,-21.825 -1.59145,-32 -0.94914,-25.0923 -1.70127,-27.1843 -15.45994,-43 -3.11003,-3.575 -7.5473,-9.326 -9.8606,-12.7799 -4.25363,-6.3511 -14.06748,-25.7631 -14.0826,-27.8558 -0.005,-0.6246 -0.68044,-2.4246 -1.50205,-4 -0.82161,-1.57534 -1.49661,-3.90636 -1.5,-5.18002 -0.003,-1.27366 -0.46743,-3.17763 -1.0312,-4.23105 -0.56377,-1.05341 -1.45572,-4.96133 -1.98212,-8.68426 -0.88933,-6.28986 -2.39223,-14.81377 -3.51606,-19.94188 -0.65359,-2.98237 -5.07693,-8.04956 -9.42012,-10.7913 -3.31741,-2.09419 -6.56863,-3.11638 -17.55666,-5.51985 -13.14833,-2.87601 -26.01544,-13.25971 -31.54627,-25.45769 -3.44329,-7.59403 -6.63083,-22.12177 -6.86935,-31.30823 l -0.0844,-3.25 131,0 131,0 -0.0844,3.25 c -0.23852,9.18646 -3.42606,23.7142 -6.86935,31.30823 -5.53083,12.19798 -18.39794,22.58168 -31.54627,25.45769 -10.98803,2.40347 -14.23925,3.42566 -17.55666,5.51985 -4.34319,2.74174 -8.76653,7.80893 -9.42012,10.7913 -1.12383,5.12811 -2.62673,13.65202 -3.51606,19.94188 -0.5264,3.72293 -1.41835,7.63085 -1.98212,8.68426 -0.56377,1.05342 -1.02781,2.95739 -1.0312,4.23105 -0.003,1.27366 -0.67839,3.60468 -1.5,5.18002 -0.82161,1.5754 -1.49753,3.3754 -1.50205,4 -0.0151,2.0927 -9.82897,21.5047 -14.0826,27.8558 -2.3133,3.4539 -6.75057,9.2049 -9.8606,12.7799 -13.75867,15.8157 -14.5108,17.9077 -15.45994,43 -0.38488,10.175 -1.10103,24.575 -1.59145,32 -0.49042,7.425 -1.01952,25.9667 -1.17577,41.2038 l -0.2841,27.7039 2.70609,2.8245 c 1.48836,1.5535 3.23118,4.3868 3.87294,6.2962 1.73501,5.162 3.50365,6.6903 9.21631,7.9635 2.84203,0.6334 6.06733,1.5068 7.16733,1.9408 1.1,0.434 6.725,2.2502 12.5,4.0358 15.13308,4.6792 22.25749,7.0637 24.23643,8.1118 0.95504,0.5059 3.00254,0.9197 4.55,0.9197 5.51258,0 7.05386,4.7477 2.50848,7.727 -2.52335,1.6539 -7.71319,1.7828 -77.25,1.9187 -40.9997,0.08 -76.41846,-0.17 -78.70837,-0.5557 z"
// some drinks to show
var data = [
{
drink: "Angel Face",
parts: [
{
unit: 3,
name: "Calvados"
},{
unit: 3,
name: "Apricot Brandy"
},{
unit: 3,
name: "Gin"
}
]
}, {
drink: "Aviation",
parts: [
{
unit: 1.5,
name: "Maraschino"
},{
unit: 1.5,
name: "Lemon Juice"
},{
unit: 4.5,
name: "Gin"
}
]
}
];
// 47 percent of our glass is where the liquid is
var colorPercent = 47,
// 3 percent is the empty spot on top
// 50 percent is the stem
startPercent = 50 - colorPercent,
// width and height of the glass
drinkWidth = 265,
drinkHeight = 350,
colors = d3.scale.category10();
// calculate percentages...
data.forEach(function(d0){
var totPercent = startPercent,
total = d3.sum(d0.parts, function(d1){ return d1.unit; });
d0.gradient = [];
d0.parts.forEach(function(d1){
d1.startPercent = totPercent;
d0.gradient.push({
percent: totPercent,
color: colors(d1.name)
});
totPercent += ((d1.unit/total) * colorPercent);
d1.endPercent = totPercent;
d0.gradient.push({
percent: totPercent,
color: colors(d1.name)
});
});
});
var svg = d3.select('body')
.append('svg')
.attr('width', (drinkWidth * data.length) + 5)
.attr('height', drinkHeight + 20);
// a g for each glass;
var glass = svg.selectAll('.drink')
.data(data)
.enter()
.append('g')
.attr('class', 'drink')
.attr('transform', function(d,i){
return 'translate(' + (drinkWidth * i) + ',0)';
})
// the glass
glass
.append('path')
.attr('d', glassPath)
.style('stroke', 'black')
.style('fill', function(d,i){
return 'url(#grad' + i + ')';
});
// text labels of drink
glass
.append("text")
.attr("x", drinkWidth/2)
.attr("y", drinkHeight)
.text(function(d){
return d.drink;
})
.attr("dy", "1em")
.style("text-anchor", "middle")
.style("font-size", "16");
// text labels of drink parts
glass.selectAll('.label')
.data(function(d){
return d.parts;
})
.enter()
.append('text')
.attr('class', 'label')
.text(function(d){
return d.unit + " " + d.name;
})
.style("fill", "black")
.attr("x", drinkWidth/2)
.attr("y", function(d){
return (((d.startPercent + d.endPercent)/2)/100) * drinkHeight;
})
.attr("dy", "1em")
.style("text-anchor", "middle");
// our gradients
var grad = svg.append('defs')
.selectAll('linearGradient')
.data(data)
.enter()
.append('linearGradient')
.attr('id', function(d,i){
return "grad" + i;
})
.attr('x1', '0%')
.attr('x2', '0%')
.attr('y1', '0%')
.attr('y2', '100%');
// no liquid top of glass
grad.append("stop")
.attr("offset", "0%")
.style("stop-color", "white");
grad.append("stop")
.attr("offset", startPercent + "%")
.style("stop-color", "white");
var e = grad.selectAll('.color')
.data(function(d){
return d.gradient
})
.enter();
e.append("stop")
.attr('id', function(d,i){
return 'stop' + 1;
})
.attr("offset", function(d){
return d.percent + '%';
})
.style("stop-color", function(d){
return d.color;
});
// stem of glass
grad.append("stop")
.attr("offset", "50%")
.style("stop-color", "black");
grad.append("stop")
.attr("offset", "100%")
.style("stop-color", "black");
</script>
</body>
</html>D3でこのようなことをするのは、スマートフォンで釘のボードを叩くようなものです。最終的には仕事を終えることになりますが、これを行うために間違ったツールを選んでしまいました。
スマートフォンのように、D3にはさまざまな可能性がありますが、この作業にはD3で達成できないほどの視覚的詳細が必要です。
グラフィックエディタツールは、フォント、色、レイヤーなどが揃った合成画像を作成することができます。カクテルインフォグラフィックは、このようなタスクに最適です。小さなミントの葉、桃の苦味、ブラックベリーをキャンバスに簡単に追加できます。
一方、グラフィックエディタで簡単なbarchartを作成することもできます。私はこれをやったことがあります（私に理由を聞かないでください）、正しい割合の棒を描くために数学をしなければなりませんでした。
達成する必要があるジョブの種類ごとにツールがあります。重要なことは、正しいものを選択する方法を知ることです。 D3はData Driven Documentsの略で、これはすべてを示します。 DATAがあるときはいつでも、D3を選択します。
カクテルインフォグラフィックにはデータがあることがわかります。確かに。しかし、データ視覚化のシンプルではあるが非常に重要な概念、つまり信号対雑音比（コンセプトを説明しているthisの記事を参照）を教えてください。これは何らかのノイズが存在するかどうかの品質メトリックと似ていますあなたのデータ（ノイズとデザインを混同しないでください）。これに答えると、私はの信号対設計比©を思いついた。 （私はこの研究をバックアップしていないので、私と一緒に裸にしてください）、それはのデータ以外にどれくらいのデザインが必要なのかを教えてくれるでしょう。カクテルインフォグラフィックでは、データよりもはるかに多くのデザインがあります。したがって、D3はこのタスクには適していません。
結論として：各タスクは、それを達成するために設計された特定のツールに最適です。タスクに適したツールを選択する方法を学ぶ - これは少なくともあなたの時間を節約します。
我々は、データ・インク率、タフティのコンセプトあなたの「信号対設計比」と呼ぶ： ます。http：/ /www.infovis-wiki.net/index。php/Data-Ink_Ratio –
私は、Tufteのデータインク比は信号対設計比ではなく「信号対ノイズ」比であると思います。彼の著書「量的情報の視覚的表示」では、たくさんのデータを表示するチャートやその他のビジュアルについて語っています。 2次元平面では、彼はデータのいくつかの特徴を表示することを管理する。 「シグナルとデザイン」の比は、データが少ないビジュアルもありますが、そのデータ（各成分のパーセンテージ）だけを表示すると、そのような魅力的なメガネやショットと同じ効果はありません。 – iulian
こんにちは、私はあなたの答えをありがとうございます。私はあなたが正しい答えをしていると思います。 D3はこの目的のための理想的なツールではないかもしれません。特に、果物のような小さな細部になると、そうである。したがって、私は何とかしていましたが、Marksの答えに驚いていました。これは、D3が何をすることができるのか、私が期待していた以上のものです。再度、ありがとうございます。 – verticoe