block by dhoboy 4bc1739adeef2257485c1f2d086cd58d

Song Tea Scatterplot

Full Screen

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.

index.html

<!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="//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>

song_scatter.csv

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