A Scatterplot of the teas available at Song Tea and Ceramics. Data taken from their website. Thanks to Syntagmatic for his help with the Scatterplot design. The tea called Eighteen is hidden behind Huang Meigui and Gold Peony Red. This needs re-visiting.
Photos by Johnny Fogg borrowed from Song's Website.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #666666; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| fill: #666666; | |
| font-family: sans-serif; | |
| font-size: 14px; | |
| } | |
| text.axis_title { | |
| font-size: 15px; | |
| fill: black; | |
| font-weight: bold; | |
| } | |
| .node circle { | |
| fill-opacity: 0.75; | |
| stroke-opacity: 0.9; | |
| stroke: #555555; | |
| stroke-width: 1; | |
| } | |
| .node circle:hover { | |
| fill-opacity: 1; | |
| stroke-opacity: 1; | |
| stroke-width: 2; | |
| stroke: #444 !important; | |
| z-index: 20; | |
| } | |
| .tooltip { | |
| background-color: #f7f7f7; | |
| padding: 3px 12px; | |
| font-family: sans-serif; | |
| border: 1px solid #bbbbbb; | |
| box-shadow: 1px 1px 4px #bbbbbb; | |
| } | |
| .tooltip_title { | |
| font-weight: bold; | |
| font-size: 14px; | |
| margin: 5px 0; | |
| max-width: 300px; | |
| word-wrap: normal; | |
| } | |
| .tooltip_body { | |
| font-weight: normal; | |
| margin: 5px 0; | |
| } | |
| .tooltip_img { | |
| max-width: 240px; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| var dimensions = { x: "price_per_ounce", y: "brewing_time", r: "brewing_amount" }; | |
| var margin = {top: 50, right: 50, left: 90, bottom: 80}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x_axis, | |
| y_axis; | |
| var x = d3.scale.pow() | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var r = d3.scale.linear() | |
| .range([5,24]); | |
| var color = d3.scale.category20() | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.right + margin.left) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
| var tooltip = d3.select("body") | |
| .append("div") | |
| .attr("class", "tooltip") | |
| .style("position", "absolute") | |
| .style("z-index", "10") | |
| .style("visibility", "hidden"); | |
| d3.csv("song_scatter.csv", function(data) { | |
| data = data.map(function(d) { | |
| return { | |
| tea_name: d.tea, | |
| brewing_amount: +d["brewing_amount(g)"], | |
| brewing_temp: +d["brewing_temp(F)"], | |
| brewing_time: +d["brewing_time(minutes)"] * 60, | |
| brewing_volume: +d["brewing_volume(ml)"], | |
| price_per_ounce: +d["price_per_oz($)"], | |
| type: d.type, | |
| imgUrl: d.imgUrl, | |
| linkUrl: d.linkUrl | |
| }; | |
| }); | |
| x.domain(d3.extent(data, function(d) { return d[dimensions.x]; })); | |
| y.domain(d3.extent(data, function(d) { return d[dimensions.y]; })); | |
| r.domain(d3.extent(data, function(d) { return d[dimensions.r]; })); | |
| var node = svg.selectAll(".node") | |
| .data(data); | |
| node.enter() | |
| .append("g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { | |
| return "translate(" + x(d[dimensions.x]) + "," + y(d[dimensions.y]) + ")" | |
| }) | |
| node.append("a") | |
| .attr("xlink:href", function(d) { return d.linkUrl; }) // add these urls to csv later... | |
| .attr("target", "_blank") | |
| .append("circle") | |
| .attr("r", function(d) { return r(d[dimensions.r]); }) | |
| .style("fill", function(d) { return color(d.tea_name); }) | |
| .on("mouseover", function(d) { | |
| tooltip.html(""); | |
| tooltip.append("h3").attr("class", "tooltip_title"); | |
| tooltip.append("img").attr("class", "tooltip_img"); | |
| tooltip.append("pre").attr("class", "tooltip_body"); | |
| tooltip.select(".tooltip_title") | |
| .text(d.tea_name) | |
| tooltip.select("img") | |
| .attr("src", d.imgUrl); | |
| tooltip.select(".tooltip_body") | |
| .text( | |
| "type: " + d.type + "\n" + | |
| "price: $" + d.price_per_ounce + "/oz\n" + | |
| "brewing volume: " + d.brewing_volume + " ml\n" + | |
| "brewing amount: " + d.brewing_amount + " grams\n" + | |
| "brewint temperature: " + d.brewing_temp + " °F\n" + | |
| "brewing time: " + d.brewing_time + " seconds\n" | |
| ); | |
| return tooltip.style("visibility", "visible"); | |
| }) | |
| .on("mousemove", function() { | |
| return tooltip.style("top", (d3.event.pageY-52) + "px").style("left", (d3.event.pageX+18) + "px"); | |
| }) | |
| .on("mouseout", function() { | |
| return tooltip.style("visibility", "hidden"); | |
| }); | |
| // draw the axes | |
| x_axis = svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .append("text") | |
| .attr("transform", "translate(640,50)") | |
| .attr("class", "axis_title") | |
| .text("Price per ounce ($)") | |
| y_axis = svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(0" + ",0)") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "translate(-60,140) rotate(-90)") | |
| .attr("class", "axis_title") | |
| .text("Brewing Time (seconds)") | |
| }); | |
| </script> |
| tea | brewing_amount(g) | brewing_volume(ml) | brewing_temp(F) | brewing_time(minutes) | price_per_oz($) | type | imgUrl | |
|---|---|---|---|---|---|---|---|---|
| aged baozhong 1960 | 5 | 150 | 203 | 2 | 25 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/1/9/1960_baozhong-01.jpg | |
| buddha's hand | 6 | 150 | 203 | 2.5 | 23 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/u/buddha_hand_01.jpg | |
| dragonwell | 4 | 150 | 175 | 1 | 44 | green | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/dragonwell-01_1.jpg | |
| eighteen | 4 | 150 | 203 | 1.5 | 10.50 | red | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/e/i/eighteen-01.jpg | |
| formosa dahongpao 1992 | 5 | 150 | 205 | 1.5 | 37.5 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/1/9/1992_formosa_dahongpao-01.jpg | |
| formosa yancha | 6 | 150 | 205 | 2 | 23 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/f/o/formosa_yancha_1.jpg | |
| four seasons red | 5 | 150 | 203 | 1 | 27 | red | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/f/o/four_seasons_red_1.jpg | |
| gold peony red | 5 | 150 | 203 | 1.5 | 10 | red | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/g/o/gold_peony_red-01.jpg | |
| gold peony rolled leaf | 5 | 150 | 205 | 2 | 16 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/g/o/gold_peony_rolled-01.jpg | |
| gold peony twisted leaf | 5 | 150 | 205 | 2 | 14 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/g/o/gold_peony_twisted-01.jpg | |
| golden needle | 5 | 150 | 203 | 2 | 5 | red | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/g/o/golden_needle-01_1.jpg | |
| huang meigui | 4 | 150 | 200 | 1.5 | 11 | white | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/h/u/huang_meigui_1.jpg | |
| lishan orchid | 6 | 150 | 203 | 2 | 23 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/l/i/lishan_orchid_1.jpg | |
| lishan shuixian | 5 | 150 | 205 | 1 | 25 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/l/i/lishan_shuixian-01.jpg | |
| lishan winter sprout | 6 | 150 | 205 | 1 | 25 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/l/i/lishan_ws-01.jpg | |
| nantou dark | 6 | 150 | 205 | 2 | 11 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/n/a/nantou_dark-01.jpg | |
| old tree shuixian | 5 | 150 | 212 | 2 | 36 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/o/l/old_tree_shuixian-01.jpg | |
| old tree yunnan red | 5 | 150 | 208 | 1 | 11 | red | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/o/l/old_tree_yunnan-01.jpg | |
| red water shuixian | 5 | 150 | 205 | 1 | 27.5 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/r/e/red_water_shuixian-01.jpg | |
| red water tieguanyin | 5 | 150 | 205 | 2 | 25 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/r/e/red_water_tieguanyin-01.jpg | |
| shan lin xi winter sprout | 6 | 150 | 205 | 1 | 18 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/s/a/san_lin_xi_ws-01.jpg | |
| snow jasmine | 3 | 150 | 180 | 1 | 11 | scented | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/s/n/snow_jasmine-01.jpg | |
| twenty one | 3 | 150 | 203 | 1.5 | 19 | red | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/t/w/twenty_one-01.jpg | |
| wild mao feng | 4 | 150 | 180 | .5 | 12.5 | green | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/w/i/wild_maofeng-01.jpg | |
| winter shuixian | 5 | 150 | 205 | 1 | 25 | oolong | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/w/i/winter_shuixian-01.jpg | |
| zhu ye qing | 4 | 150 | 175 | 1 | 25 | green | https://songtea.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/z/h/zhu_ye_qing-01.jpg |
