Song Tea Scatterplot

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="https://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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js