TommyCoin80/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Data from the 2017 Unofficial Guide to Walt Disney World.  This scatter plot compares a hotel's cost with its quality rating, in stars, from the Unofficial Guide. Mousing over any of the points will display a readout with detail on the hotel. A regression line (average quality units per cost unit) is plotted. Hotels with better than average value are in the green. Hotels with worse than average value are in the red.
Built with blockbuilder.org

  
## data.js

var data = [
    {name:"Bay Lake Tower at Disney's Contemporary Resort",quality:4.5,room:95,cost:13,group:"Contemporary"},
    {name:"Disney's Animal Kingdom Villas (Kidani Village)",quality:4.5,room:95,cost:11.25, group:"Animal Kingdom"},
    {name:"Disney's Contemporary Resort",quality:4.5,room:93,cost:10.25, group:"Contemporary"},
    {name:"Disney's Grand Floridian Resort & Spa",quality:4.5,room:93,cost:15,group:"Grand Floridian"},
    {name:"The Villas at Disney's Grand Floridian Resort & Spa",quality:4.5,room:93,cost:20, group:"Grand Floridian"},
    {name:"Disney's Polynesian Village Resort",quality:4.5,room:92,cost:12.25, group:"Polynesian"},
    {name:"Disney's Polynesian Village, Villas & Bungalows",quality:4.5,room:92,cost:13.75, group:"Polynesian"},
    {name:"Disney's Animal Kingdom Villas (Jambo House)",quality:4.5,room:91,cost:11.25, group:"Animal Kingdom"},
    {name:"Boulder Ridge Villas at Disney's Wilderness Lodge",quality:4.5,room:90,cost:10.75, group:"Wilderness Lodge"},
    {name:"Disney's Beach Club Resort",quality:4.5,room:90,cost:10.75, group:"Yacht and Beach"},
    {name:"Disney's Beach Club Villas",quality:4.5,room:90,cost:12, group:"Yacht and Beach"},
    {name:"Disney's BoardWalk Villas",quality:4.5,room:90,cost:12, group:"Boardwalk"},
    {name:"Disney's Old Key West Resort",quality:4.5,room:90,cost:9.25, group:"Old Key West"},
    {name:"Disney's Saratoga Springs Resort & Spa",quality:4.5,room:90,cost:9.25, group:"Saratoga Springs"},
    {name:"Treehouse Villas at Disney's Saratoga Springs Resort & Spa",quality:4.5,room:90,cost:23, group:"Saratoga Springs"},
    {name:"Walt Disney World Dolphin",quality:4.5,room:90,cost:4.75, group:"Swan and Dolphin"},
    {name:"Walt Disney World Swan",quality:4.5,room:90,cost:5, group:"Swan and Dolphin"},
    {name:"Disney's Animal Kingdom Lodge",quality:4,room:89,cost:9, group:"Animal Kingdom"},
    {name:"Disney's BoardWalk Inn",quality:4,room:89,cost:11, group:"Boardwalk"},
    {name:"Disney's Yacht Club Resort",quality:4,room:89,cost:10.75, group:"Yacht and Beach"},
    {name:"Disney's Fort Wilderness Resort (cabins)",quality:4,room:86,cost:8.75, group:"Fort Wilderness"},
    {name:"Disney's Wilderness Lodge",quality:4,room:86,cost:8.75, group:"Wilderness Lodge"},
    {name:"Disney's Port Orleans Resort-French Quarter",quality:4,room:84,cost:5, group:"Port Orleans" },
    {name:"Disney's Coronado Springs Resort",quality:4,room:83,cost:4.75, group:"Coronado Springs"},
    {name:"Disney's Port Orleans Resort-Riverside",quality:4,room:83,cost:5, group:"Port Orleans"},
    {name:"Disney's Art of Animation Resort",quality:3.5,room:80,cost:3.75, group:"Art of Animation"},
    {name:"Disney's Caribbean Beach Resort",quality:3.5,room:80,cost:4.75, group:"Caribbean Beach"},
    {name:"Disney's All-Star Movies Resort",quality:3,room:73,cost:3, group:"All-Star and Pop Century"},
    {name:"Disney's All-Star Music Resort",quality:3,room:73,cost:3,group:"All-Star and Pop Century"},
    {name:"Disney's All-Star Sports Resort",quality:3,room:73,cost:3,group:"All-Star and Pop Century"},
    {name:"Disney's Pop Century Resort",quality:3,room:71,cost:3.25,group:"All-Star and Pop Century"}
];

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
  <head>
   	<link href='https://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<style>

body {
	margin:auto;
	font-family: 'Josefin Sans', sans-serif;
	font-size:100%;
}

text {
	font-family: 'Josefin Sans', sans-serif;
}

</style>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="ValueChart.js"></script>
<script src="data.js"></script>
<div id="chart"><div>
<script>

var vc = new ValueChart(data,"chart");
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## ValueChart.js
var ValueChart = function(data,elementId,width,height,margin) {
    //Set Defaults
    margin = margin || {top:10,left:80,bottom:40,right:30};
    width = width || 960 - margin.left - margin.right;
    height = height || 500 - margin.top - margin.bottom;

    //Object to store selection
    var s = {};
    //Draw Plot Area
    s.svg = d3.select("#" + elementId)
        .append("svg")
        .attr("height", height + margin.top + margin.bottom)
        .attr("width", width + margin.left + margin.right)
        .style("-webkit-user-select","none") // Disable Highlighting
        .style("cursor","default"); // Disable cursor style changes

    s.chart = s.svg.append("g")
        .attr("transform","translate(" + margin.left + "," + margin.top + ")");

    s.chart.append("clipPath")
        .attr("id","regLineClip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);

    // Object to store scales
    var scale = {};

    var ytv = [2.5,3,3.5,4,4.5,5];

    scale.x = d3.scaleLinear()
        .domain(d3.extent(data.map(function(d) { return d.cost;})))
        .range([0,width])
        .nice();

    scale.y = d3.scaleLinear()
        .domain(d3.extent(ytv))
        .range([height,0])

    scale.color = d3.scaleOrdinal()
        .domain(d3.set(data.map(function(d) { return d.name;})).values());

    scale.color.range(scale.color.domain().map(function(d,i) { return d3.interpolateSpectral(i/scale.color.domain().length)}));

    //Object to store axes
    var axis = {};

    axis.x = d3.axisBottom(scale.x).tickFormat(function(d) {
        if(d<=4) {
           return Array(d+1).join('$')
        } else {
            return ('$') + "×" + (d);
        }

    })
    axis.y = d3.axisLeft(scale.y).tickValues(ytv).tickFormat(function(d) {
        return Array(Math.floor(d) + 1).join('★') + Array(Math.ceil(d)-Math.floor(d) + 1).join('½') })

    //Object to store grids
    var grid = {};

    grid.x = d3.axisBottom(scale.x)
        .tickSizeInner(-height)
        .tickFormat("");

    grid.y = d3.axisLeft(scale.y)
        .tickSizeInner(-width)
        .tickFormat("")
        .tickValues(ytv);

    // Calculate reg line and draw line, polygons and labels

    var regCoefs = lsReg(
        data.map(function(d) { return scale.x(d.cost)}),
        data.map(function(d) { return scale.y(d.quality)})
    );

    s.chart.append("polygon")
        .attr("clip-path", "url(#regLineClip)")
        .style("fill","#5cb85c")
        .style("fill-opacity",.25)
        .attr("points", "0,0 0," + regCoefs[1] + " " + width + "," + (width*regCoefs[0] + regCoefs[1]) )

     s.chart.append("polygon")
        .attr("clip-path", "url(#regLineClip)")
        .style("fill","#d9534f")
        .style("fill-opacity",.25)
        .attr("points", "0," + regCoefs[1] + " 0," + height + " " + width + "," + height + " " + width + "," +  (width*regCoefs[0] + regCoefs[1]) )

    s.line = s.chart.append("line")
        .attr("clip-path", "url(#regLineClip)")
        .attr("x1", 0)
        .attr("y1", regCoefs[1] )
        .attr("x2", width)
        .attr("y2", width*regCoefs[0] + regCoefs[1])
        .style("stroke","white")
        .attr("stroke-dasharray","5 5")

    // Draw reg line label

    s.chart.append("g")
        .attr("transform","translate(" +scale.x(5) + "," + scale.y(3.75) + ")")
        .append("text")
        .attr("dy", -15)
        .attr("dx",26)
        .text("More ★★ per $")
        .attr("transform","rotate(-19.0)")
        .style("fill","white")
        .style("font-weight","bold")
        .style("font-size","1.5em");

    s.chart.append("g")
        .attr("transform","translate(" +scale.x(10.0) + "," + scale.y(4.2) + ")")
        .append("text")
        .attr("dy",30)
        .attr("dx",-26)
        .text("More $$ per ★")
        .attr("transform","rotate(-19.0)")
        .style("fill","white")
        .style("font-weight","bold")
        .style("font-size","1.5em");

    // Draw Grids
    // Object to store grid selections

    s.grid = {};

    s.grid.x = s.chart.append("g")
        .attr("transform","translate(0," + height + ")")
        .call(grid.x)
        .each(function(d) {
            d3.select(this)
                .style("opacity", .15)
                .select(".domain")
                    .style("display","none")
        });

    s.grid.y = s.chart.append("g")
        .call(grid.y)
        .each(function(d) {
            d3.select(this)
                .style("opacity", .15)
                .select(".domain")
                    .style("display","none")
        });

    // Draw Axes
    // Object to store axis selection
    s.axis = {};

    s.axis.x = s.chart.append("g")
        .attr("transform","translate(0," + (height + 16) + ")")
        .call(axis.x);

    s.axis.x.append("text")
        .text("Cost")
        .style("fill","black")
        .attr("dx", width)
        .attr("dy", -3)
        .attr("text-anchor","end")

    s.axis.y = s.chart.append("g")
        .attr("transform","translate(-16,0)")
        .call(axis.y)

    s.axis.y.append("text")
        .attr("transform","rotate(90)")
        .text("Quality")
        .style("fill","black")
        .attr("dy", -5)
        .attr("text-anchor","start");

    //Simulate Forces to jitter points
    var force = d3.forceSimulation(data)
      .force("x", d3.forceX(function(d) { return scale.x(d.cost); }).strength(1))
      .force("y", d3.forceY(function(d) { return scale.y(d.quality); }).strength(1))
      .force("collide", d3.forceCollide(6))
      .stop();

     for (var i = 0; i < 120; ++i) force.tick();


    // Draw Points
    s.points = s.chart.selectAll(".point")
        .data(data)
        .enter()
        .append("g")
        .attr("transform",function(d) { return "translate(" + d.x + "," + d.y+ ")"})
        .on("mouseenter", mouseenterPoint)
        .on("mouseleave", mouseleavePoint);

    s.points.append("circle")
        .attr("r",6)
        .style("fill", function(d) { return scale.color(d.name)})
        .style("stroke","gray");

    //Setup the readout
    // Object to store readout components
    s.readout = {};

    s.readout.g = s.chart.append("g")
        .attr("transform","translate(" + (width*2/3) + "," + height*(4/5) + ")")
        .style("display","none");

    s.readout.underlay = s.readout.g.append("rect")
    s.readout.rect = s.readout.g.append("rect")

    s.readout.name = s.readout.g.append("text")
    		.attr("y",6)
        .attr("text-anchor","middle");

    s.readout.scores = s.readout.g.append("text")
        .attr("dy",24)
        .attr("text-anchor","middle")

    // Functions to update the readout
    function mouseenterPoint(d) {
        var rx,ry;
        var rw = 0;

        s.readout.g.style("display",null)

        s.readout.name.text(d.name)
            .style("fill","black")
            .each(function(d) {
                var bb = this.getBBox();
                bb.width > rw ? rw = bb.width : null;
                ry = bb.y;
            });

        // Quality in stars, cost in $, +/- for cost
        var quality, cost, costSign;

        // Calculate how many stars to display
        quality = Array(Math.floor(d.quality) + 1).join('★') + Array(Math.ceil(d.quality)-Math.floor(d.quality) + 1).join('½');


         // Calculate whether to include a +/- sign
        if(d.cost - Math.floor(d.cost) >= .75) {
            costSign = "+";
        } else if(d.cost - Math.floor(d.cost) >= .25) {
            costSign = "-";
        }   else {
            costSign = "";
        }

        // Calculate how many $ to display
        if(d.cost<6) {
            cost = Array(Math.floor(d.cost)+1).join('$')
        } else {
            cost =  ('$') + "×" + (Math.floor(d.cost));
        }

        s.readout.scores.text("Quality: " + quality + "     Cost: " + cost+costSign + "     Room: " + d.room)
            .attr("xml:space", "preserve")
            .style("fill","black")
            .each(function(d) {
                var bb = this.getBBox();
                bb.width > rw ? rw = bb.width : null;
            });

        s.readout.underlay.attr("x", -(rw+8)/2)
            .attr("y", ry)
            .attr("width", rw+8)
            .attr("height",38)
            .attr("rx",4)
            .style("fill", "white")
            .style("fill-opacity",.5)
            .style("stroke-width",2);


        s.readout.rect.attr("x", -(rw+8)/2)
            .attr("y", ry)
            .attr("width", rw+8)
            .attr("height",38)
            .attr("rx",4)
            .style("fill", scale.color(d.name))
            .style("fill-opacity",.5)
            .style("stroke", scale.color(d.name))
            .style("stroke-width",2);

    }

    function mouseleavePoint() {
        s.readout.g.style("display","none")
    }

    function lsReg(X,Y) {
	    var meanX = d3.mean(X),
		    meanY = d3.mean(Y);

	    var ssXX = d3.sum(X.map(function(d) { return Math.pow(d - meanX, 2); })),
		    ssYY = d3.sum(Y.map(function(d) { return Math.pow(d - meanY, 2); }));

	    var ssXY = d3.sum(X.map(function(d, i) { return (d - meanX) * (Y[i] - meanY);}))

	    var slope = ssXY / ssXX;
	    var intercept = meanY - (meanX * slope);

	    return [slope, intercept];
    }

}

	var data = [
	{name:"Bay Lake Tower at Disney's Contemporary Resort",quality:4.5,room:95,cost:13,group:"Contemporary"},
	{name:"Disney's Animal Kingdom Villas (Kidani Village)",quality:4.5,room:95,cost:11.25, group:"Animal Kingdom"},
	{name:"Disney's Contemporary Resort",quality:4.5,room:93,cost:10.25, group:"Contemporary"},
	{name:"Disney's Grand Floridian Resort & Spa",quality:4.5,room:93,cost:15,group:"Grand Floridian"},
	{name:"The Villas at Disney's Grand Floridian Resort & Spa",quality:4.5,room:93,cost:20, group:"Grand Floridian"},
	{name:"Disney's Polynesian Village Resort",quality:4.5,room:92,cost:12.25, group:"Polynesian"},
	{name:"Disney's Polynesian Village, Villas & Bungalows",quality:4.5,room:92,cost:13.75, group:"Polynesian"},
	{name:"Disney's Animal Kingdom Villas (Jambo House)",quality:4.5,room:91,cost:11.25, group:"Animal Kingdom"},
	{name:"Boulder Ridge Villas at Disney's Wilderness Lodge",quality:4.5,room:90,cost:10.75, group:"Wilderness Lodge"},
	{name:"Disney's Beach Club Resort",quality:4.5,room:90,cost:10.75, group:"Yacht and Beach"},
	{name:"Disney's Beach Club Villas",quality:4.5,room:90,cost:12, group:"Yacht and Beach"},
	{name:"Disney's BoardWalk Villas",quality:4.5,room:90,cost:12, group:"Boardwalk"},
	{name:"Disney's Old Key West Resort",quality:4.5,room:90,cost:9.25, group:"Old Key West"},
	{name:"Disney's Saratoga Springs Resort & Spa",quality:4.5,room:90,cost:9.25, group:"Saratoga Springs"},
	{name:"Treehouse Villas at Disney's Saratoga Springs Resort & Spa",quality:4.5,room:90,cost:23, group:"Saratoga Springs"},
	{name:"Walt Disney World Dolphin",quality:4.5,room:90,cost:4.75, group:"Swan and Dolphin"},
	{name:"Walt Disney World Swan",quality:4.5,room:90,cost:5, group:"Swan and Dolphin"},
	{name:"Disney's Animal Kingdom Lodge",quality:4,room:89,cost:9, group:"Animal Kingdom"},
	{name:"Disney's BoardWalk Inn",quality:4,room:89,cost:11, group:"Boardwalk"},
	{name:"Disney's Yacht Club Resort",quality:4,room:89,cost:10.75, group:"Yacht and Beach"},
	{name:"Disney's Fort Wilderness Resort (cabins)",quality:4,room:86,cost:8.75, group:"Fort Wilderness"},
	{name:"Disney's Wilderness Lodge",quality:4,room:86,cost:8.75, group:"Wilderness Lodge"},
	{name:"Disney's Port Orleans Resort-French Quarter",quality:4,room:84,cost:5, group:"Port Orleans" },
	{name:"Disney's Coronado Springs Resort",quality:4,room:83,cost:4.75, group:"Coronado Springs"},
	{name:"Disney's Port Orleans Resort-Riverside",quality:4,room:83,cost:5, group:"Port Orleans"},
	{name:"Disney's Art of Animation Resort",quality:3.5,room:80,cost:3.75, group:"Art of Animation"},
	{name:"Disney's Caribbean Beach Resort",quality:3.5,room:80,cost:4.75, group:"Caribbean Beach"},
	{name:"Disney's All-Star Movies Resort",quality:3,room:73,cost:3, group:"All-Star and Pop Century"},
	{name:"Disney's All-Star Music Resort",quality:3,room:73,cost:3,group:"All-Star and Pop Century"},
	{name:"Disney's All-Star Sports Resort",quality:3,room:73,cost:3,group:"All-Star and Pop Century"},
	{name:"Disney's Pop Century Resort",quality:3,room:71,cost:3.25,group:"All-Star and Pop Century"}
	];
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<link href='https://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
	<style>

	body {
	margin:auto;
	font-family: 'Josefin Sans', sans-serif;
	font-size:100%;
	}

	text {
	font-family: 'Josefin Sans', sans-serif;
	}

	</style>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script src="ValueChart.js"></script>
	<script src="data.js"></script>
	<div id="chart"><div>
	<script>

	var vc = new ValueChart(data,"chart");
	</script>
	var ValueChart = function(data,elementId,width,height,margin) {
	//Set Defaults
	margin = margin \|\| {top:10,left:80,bottom:40,right:30};
	width = width \|\| 960 - margin.left - margin.right;
	height = height \|\| 500 - margin.top - margin.bottom;

	//Object to store selection
	var s = {};
	//Draw Plot Area
	s.svg = d3.select("#" + elementId)
	.append("svg")
	.attr("height", height + margin.top + margin.bottom)
	.attr("width", width + margin.left + margin.right)
	.style("-webkit-user-select","none") // Disable Highlighting
	.style("cursor","default"); // Disable cursor style changes

	s.chart = s.svg.append("g")
	.attr("transform","translate(" + margin.left + "," + margin.top + ")");

	s.chart.append("clipPath")
	.attr("id","regLineClip")
	.append("rect")
	.attr("width", width)
	.attr("height", height);

	// Object to store scales
	var scale = {};

	var ytv = [2.5,3,3.5,4,4.5,5];

	scale.x = d3.scaleLinear()
	.domain(d3.extent(data.map(function(d) { return d.cost;})))
	.range([0,width])
	.nice();

	scale.y = d3.scaleLinear()
	.domain(d3.extent(ytv))
	.range([height,0])

	scale.color = d3.scaleOrdinal()
	.domain(d3.set(data.map(function(d) { return d.name;})).values());

	scale.color.range(scale.color.domain().map(function(d,i) { return d3.interpolateSpectral(i/scale.color.domain().length)}));

	//Object to store axes
	var axis = {};

	axis.x = d3.axisBottom(scale.x).tickFormat(function(d) {
	if(d<=4) {
	return Array(d+1).join('$')
	} else {
	return ('$') + "×" + (d);
	}

	})
	axis.y = d3.axisLeft(scale.y).tickValues(ytv).tickFormat(function(d) {
	return Array(Math.floor(d) + 1).join('★') + Array(Math.ceil(d)-Math.floor(d) + 1).join('½') })

	//Object to store grids
	var grid = {};

	grid.x = d3.axisBottom(scale.x)
	.tickSizeInner(-height)
	.tickFormat("");

	grid.y = d3.axisLeft(scale.y)
	.tickSizeInner(-width)
	.tickFormat("")
	.tickValues(ytv);

	// Calculate reg line and draw line, polygons and labels

	var regCoefs = lsReg(
	data.map(function(d) { return scale.x(d.cost)}),
	data.map(function(d) { return scale.y(d.quality)})
	);

	s.chart.append("polygon")
	.attr("clip-path", "url(#regLineClip)")
	.style("fill","#5cb85c")
	.style("fill-opacity",.25)
	.attr("points", "0,0 0," + regCoefs[1] + " " + width + "," + (width*regCoefs[0] + regCoefs[1]) )

	s.chart.append("polygon")
	.attr("clip-path", "url(#regLineClip)")
	.style("fill","#d9534f")
	.style("fill-opacity",.25)
	.attr("points", "0," + regCoefs[1] + " 0," + height + " " + width + "," + height + " " + width + "," + (width*regCoefs[0] + regCoefs[1]) )

	s.line = s.chart.append("line")
	.attr("clip-path", "url(#regLineClip)")
	.attr("x1", 0)
	.attr("y1", regCoefs[1] )
	.attr("x2", width)
	.attr("y2", width*regCoefs[0] + regCoefs[1])
	.style("stroke","white")
	.attr("stroke-dasharray","5 5")

	// Draw reg line label

	s.chart.append("g")
	.attr("transform","translate(" +scale.x(5) + "," + scale.y(3.75) + ")")
	.append("text")
	.attr("dy", -15)
	.attr("dx",26)
	.text("More ★★ per $")
	.attr("transform","rotate(-19.0)")
	.style("fill","white")
	.style("font-weight","bold")
	.style("font-size","1.5em");

	s.chart.append("g")
	.attr("transform","translate(" +scale.x(10.0) + "," + scale.y(4.2) + ")")
	.append("text")
	.attr("dy",30)
	.attr("dx",-26)
	.text("More $$ per ★")
	.attr("transform","rotate(-19.0)")
	.style("fill","white")
	.style("font-weight","bold")
	.style("font-size","1.5em");

	// Draw Grids
	// Object to store grid selections

	s.grid = {};

	s.grid.x = s.chart.append("g")
	.attr("transform","translate(0," + height + ")")
	.call(grid.x)
	.each(function(d) {
	d3.select(this)
	.style("opacity", .15)
	.select(".domain")
	.style("display","none")
	});

	s.grid.y = s.chart.append("g")
	.call(grid.y)
	.each(function(d) {
	d3.select(this)
	.style("opacity", .15)
	.select(".domain")
	.style("display","none")
	});

	// Draw Axes
	// Object to store axis selection
	s.axis = {};

	s.axis.x = s.chart.append("g")
	.attr("transform","translate(0," + (height + 16) + ")")
	.call(axis.x);

	s.axis.x.append("text")
	.text("Cost")
	.style("fill","black")
	.attr("dx", width)
	.attr("dy", -3)
	.attr("text-anchor","end")

	s.axis.y = s.chart.append("g")
	.attr("transform","translate(-16,0)")
	.call(axis.y)

	s.axis.y.append("text")
	.attr("transform","rotate(90)")
	.text("Quality")
	.style("fill","black")
	.attr("dy", -5)
	.attr("text-anchor","start");

	//Simulate Forces to jitter points
	var force = d3.forceSimulation(data)
	.force("x", d3.forceX(function(d) { return scale.x(d.cost); }).strength(1))
	.force("y", d3.forceY(function(d) { return scale.y(d.quality); }).strength(1))
	.force("collide", d3.forceCollide(6))
	.stop();

	for (var i = 0; i < 120; ++i) force.tick();


	// Draw Points
	s.points = s.chart.selectAll(".point")
	.data(data)
	.enter()
	.append("g")
	.attr("transform",function(d) { return "translate(" + d.x + "," + d.y+ ")"})
	.on("mouseenter", mouseenterPoint)
	.on("mouseleave", mouseleavePoint);

	s.points.append("circle")
	.attr("r",6)
	.style("fill", function(d) { return scale.color(d.name)})
	.style("stroke","gray");

	//Setup the readout
	// Object to store readout components
	s.readout = {};

	s.readout.g = s.chart.append("g")
	.attr("transform","translate(" + (width2/3) + "," + height(4/5) + ")")
	.style("display","none");

	s.readout.underlay = s.readout.g.append("rect")
	s.readout.rect = s.readout.g.append("rect")

	s.readout.name = s.readout.g.append("text")
	.attr("y",6)
	.attr("text-anchor","middle");

	s.readout.scores = s.readout.g.append("text")
	.attr("dy",24)
	.attr("text-anchor","middle")

	// Functions to update the readout
	function mouseenterPoint(d) {
	var rx,ry;
	var rw = 0;

	s.readout.g.style("display",null)

	s.readout.name.text(d.name)
	.style("fill","black")
	.each(function(d) {
	var bb = this.getBBox();
	bb.width > rw ? rw = bb.width : null;
	ry = bb.y;
	});

	// Quality in stars, cost in $, +/- for cost
	var quality, cost, costSign;

	// Calculate how many stars to display
	quality = Array(Math.floor(d.quality) + 1).join('★') + Array(Math.ceil(d.quality)-Math.floor(d.quality) + 1).join('½');


	// Calculate whether to include a +/- sign
	if(d.cost - Math.floor(d.cost) >= .75) {
	costSign = "+";
	} else if(d.cost - Math.floor(d.cost) >= .25) {
	costSign = "-";
	} else {
	costSign = "";
	}

	// Calculate how many $ to display
	if(d.cost<6) {
	cost = Array(Math.floor(d.cost)+1).join('$')
	} else {
	cost = ('$') + "×" + (Math.floor(d.cost));
	}

	s.readout.scores.text("Quality: " + quality + " Cost: " + cost+costSign + " Room: " + d.room)
	.attr("xml:space", "preserve")
	.style("fill","black")
	.each(function(d) {
	var bb = this.getBBox();
	bb.width > rw ? rw = bb.width : null;
	});

	s.readout.underlay.attr("x", -(rw+8)/2)
	.attr("y", ry)
	.attr("width", rw+8)
	.attr("height",38)
	.attr("rx",4)
	.style("fill", "white")
	.style("fill-opacity",.5)
	.style("stroke-width",2);


	s.readout.rect.attr("x", -(rw+8)/2)
	.attr("y", ry)
	.attr("width", rw+8)
	.attr("height",38)
	.attr("rx",4)
	.style("fill", scale.color(d.name))
	.style("fill-opacity",.5)
	.style("stroke", scale.color(d.name))
	.style("stroke-width",2);

	}

	function mouseleavePoint() {
	s.readout.g.style("display","none")
	}

	function lsReg(X,Y) {
	var meanX = d3.mean(X),
	meanY = d3.mean(Y);

	var ssXX = d3.sum(X.map(function(d) { return Math.pow(d - meanX, 2); })),
	ssYY = d3.sum(Y.map(function(d) { return Math.pow(d - meanY, 2); }));

	var ssXY = d3.sum(X.map(function(d, i) { return (d - meanX) * (Y[i] - meanY);}))

	var slope = ssXY / ssXX;
	var intercept = meanY - (meanX * slope);

	return [slope, intercept];
	}

	}