Last active
December 28, 2016 17:34
-
-
Save nanu146/fa0f064f983dbed5e34ff4d0963e3737 to your computer and use it in GitHub Desktop.
Scatter Plot with Trade-Off Line
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 | |
height: 900 | |
border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Cereal Name | Manufacturer | Type | Calories | Protein | Fat | Sodium | Dietary Fiber | Carbs | Sugars | Display Shelf | Potassium | Vitamins and Minerals | Serving Size Weight | Cups per Serving | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
100%_Bran | Nabisco | C | 70 | 4 | 1 | 130 | 10 | 5 | 6 | 3 | 280 | 25 | 1 | 0.33 | |
100%_Natural_Bran | Quaker Oats | C | 120 | 3 | 5 | 15 | 2 | 8 | 8 | 3 | 135 | 0 | 1 | -1 | |
All-Bran | Kelloggs | C | 70 | 4 | 1 | 260 | 9 | 7 | 5 | 3 | 320 | 25 | 1 | 0.33 | |
All-Bran_with_Extra_Fiber | Kelloggs | C | 50 | 4 | 0 | 140 | 14 | 8 | 0 | 3 | 330 | 25 | 1 | 0.5 | |
Almond_Delight | Ralston Purina | C | 110 | 2 | 2 | 200 | 1 | 14 | 8 | 3 | -1 | 25 | 1 | 0.75 | |
Apple_Cinnamon_Cheerios | General Mills | C | 110 | 2 | 2 | 180 | 1.5 | 10.5 | 10 | 1 | 70 | 25 | 1 | 0.75 | |
Apple_Jacks | Kelloggs | C | 110 | 2 | 0 | 125 | 1 | 11 | 14 | 2 | 30 | 25 | 1 | 1 | |
Basic_4 | General Mills | C | 130 | 3 | 2 | 210 | 2 | 18 | 8 | 3 | 100 | 25 | 1.33 | 0.75 | |
Bran_Chex | Ralston Purina | C | 90 | 2 | 1 | 200 | 4 | 15 | 6 | 1 | 125 | 25 | 1 | 0.67 | |
Bran_Flakes | Post | C | 90 | 3 | 0 | 210 | 5 | 13 | 5 | 3 | 190 | 25 | 1 | 0.67 | |
Cap'n'Crunch | Quaker Oats | C | 120 | 1 | 2 | 220 | 0 | 12 | 12 | 2 | 35 | 25 | 1 | 0.75 | |
Cheerios | General Mills | C | 110 | 6 | 2 | 290 | 2 | 17 | 1 | 1 | 105 | 25 | 1 | 1.25 | |
Cinnamon_Toast_Crunch | General Mills | C | 120 | 1 | 3 | 210 | 0 | 13 | 9 | 2 | 45 | 25 | 1 | 0.75 | |
Clusters | General Mills | C | 110 | 3 | 2 | 140 | 2 | 13 | 7 | 3 | 105 | 25 | 1 | 0.5 | |
Cocoa_Puffs | General Mills | C | 110 | 1 | 1 | 180 | 0 | 12 | 13 | 2 | 55 | 25 | 1 | 1 | |
Corn_Chex | Ralston Purina | C | 110 | 2 | 0 | 280 | 0 | 22 | 3 | 1 | 25 | 25 | 1 | 1 | |
Corn_Flakes | Kelloggs | C | 100 | 2 | 0 | 290 | 1 | 21 | 2 | 1 | 35 | 25 | 1 | 1 | |
Corn_Pops | Kelloggs | C | 110 | 1 | 0 | 90 | 1 | 13 | 12 | 2 | 20 | 25 | 1 | 1 | |
Count_Chocula | General Mills | C | 110 | 1 | 1 | 180 | 0 | 12 | 13 | 2 | 65 | 25 | 1 | 1 | |
Cracklin'_Oat_Bran | Kelloggs | C | 110 | 3 | 3 | 140 | 4 | 10 | 7 | 3 | 160 | 25 | 1 | 0.5 | |
Cream_of_Wheat_(Quick) | Nabisco | H | 100 | 3 | 0 | 80 | 1 | 21 | 0 | 2 | -1 | 0 | 1 | 1 | |
Crispix | Kelloggs | C | 110 | 2 | 0 | 220 | 1 | 21 | 3 | 3 | 30 | 25 | 1 | 1 | |
Crispy_Wheat_&_Raisins | General Mills | C | 100 | 2 | 1 | 140 | 2 | 11 | 10 | 3 | 120 | 25 | 1 | 0.75 | |
Double_Chex | Ralston Purina | C | 100 | 2 | 0 | 190 | 1 | 18 | 5 | 3 | 80 | 25 | 1 | 0.75 | |
Froot_Loops | Kelloggs | C | 110 | 2 | 1 | 125 | 1 | 11 | 13 | 2 | 30 | 25 | 1 | 1 | |
Frosted_Flakes | Kelloggs | C | 110 | 1 | 0 | 200 | 1 | 14 | 11 | 1 | 25 | 25 | 1 | 0.75 | |
Frosted_Mini-Wheats | Kelloggs | C | 100 | 3 | 0 | 0 | 3 | 14 | 7 | 2 | 100 | 25 | 1 | 0.8 | |
Fruitful_Bran | Kelloggs | C | 120 | 3 | 0 | 240 | 5 | 14 | 12 | 3 | 190 | 25 | 1.33 | 0.67 | |
Fruity_Pebbles | Post | C | 110 | 1 | 1 | 135 | 0 | 13 | 12 | 2 | 25 | 25 | 1 | 0.75 | |
Golden_Crisp | Post | C | 100 | 2 | 0 | 45 | 0 | 11 | 15 | 1 | 40 | 25 | 1 | 0.88 | |
Golden_Grahams | General Mills | C | 110 | 1 | 1 | 280 | 0 | 15 | 9 | 2 | 45 | 25 | 1 | 0.75 | |
Grape_Nuts_Flakes | Post | C | 100 | 3 | 1 | 140 | 3 | 15 | 5 | 3 | 85 | 25 | 1 | 0.88 | |
Grape-Nuts | Post | C | 110 | 3 | 0 | 170 | 3 | 17 | 3 | 3 | 90 | 25 | 1 | 0.25 | |
Great_Grains_Pecan | Post | C | 120 | 3 | 3 | 75 | 3 | 13 | 4 | 3 | 100 | 25 | 1 | 0.33 | |
Honey_Graham_Ohs | Quaker Oats | C | 120 | 1 | 2 | 220 | 1 | 12 | 11 | 2 | 45 | 25 | 1 | 1 | |
Honey_Nut_Cheerios | General Mills | C | 110 | 3 | 1 | 250 | 1.5 | 11.5 | 10 | 1 | 90 | 25 | 1 | 0.75 | |
Honey-comb | Post | C | 110 | 1 | 0 | 180 | 0 | 14 | 11 | 1 | 35 | 25 | 1 | 1.33 | |
Just_Right_Crunchy__Nuggets | Kelloggs | C | 110 | 2 | 1 | 170 | 1 | 17 | 6 | 3 | 60 | 100 | 1 | -1 | |
Just_Right_Fruit_&_Nut | Kelloggs | C | 140 | 3 | 1 | 170 | 2 | 20 | 9 | 3 | 95 | 100 | 1.3 | 0.75 | |
Kix | General Mills | C | 110 | 2 | 1 | 260 | 0 | 21 | 3 | 2 | 40 | 25 | 1 | 1.5 | |
Life | Quaker Oats | C | 100 | 4 | 2 | 150 | 2 | 12 | 6 | 2 | 95 | 25 | 1 | 0.67 | |
Lucky_Charms | General Mills | C | 110 | 2 | 1 | 180 | 0 | 12 | 12 | 2 | 55 | 25 | 1 | 1 | |
Maypo | American Home Food Products | H | 100 | 4 | 1 | 0 | 0 | 16 | 3 | 2 | 95 | 25 | 1 | -1 | |
Mueslix_Crispy_Blend | Kelloggs | C | 160 | 3 | 2 | 150 | 3 | 17 | 13 | 3 | 160 | 25 | 1.5 | 0.67 | |
Multi-Grain_Cheerios | General Mills | C | 100 | 2 | 1 | 220 | 2 | 15 | 6 | 1 | 90 | 25 | 1 | 1 | |
Nut&Honey_Crunch | Kelloggs | C | 120 | 2 | 1 | 190 | 0 | 15 | 9 | 2 | 40 | 25 | 1 | 0.67 | |
Nutri-Grain_Almond-Raisin | Kelloggs | C | 140 | 3 | 2 | 220 | 3 | 21 | 7 | 3 | 130 | 25 | 1.33 | 0.67 | |
Nutri-grain_Wheat | Kelloggs | C | 90 | 3 | 0 | 170 | 3 | 18 | 2 | 3 | 90 | 25 | 1 | -1 | |
Oatmeal_Raisin_Crisp | General Mills | C | 130 | 3 | 2 | 170 | 1.5 | 13.5 | 10 | 3 | 120 | 25 | 1.25 | 0.5 | |
Post_Nat._Raisin_Bran | Post | C | 120 | 3 | 1 | 200 | 6 | 11 | 14 | 3 | 260 | 25 | 1.33 | 0.67 | |
Product_19 | Kelloggs | C | 100 | 3 | 0 | 320 | 1 | 20 | 3 | 3 | 45 | 100 | 1 | 1 | |
Puffed_Rice | Quaker Oats | C | 50 | 1 | 0 | 0 | 0 | 13 | 0 | 3 | 15 | 0 | 0.5 | 1 | |
Puffed_Wheat | Quaker Oats | C | 50 | 2 | 0 | 0 | 1 | 10 | 0 | 3 | 50 | 0 | 0.5 | -1 | |
Quaker_Oat_Squares | Quaker Oats | C | 100 | 4 | 1 | 135 | 2 | 14 | 6 | 3 | 110 | 25 | 1 | 0.5 | |
Quaker_Oatmeal | Quaker Oats | H | 100 | 5 | 2 | 0 | 2.7 | -1 | -1 | 1 | 110 | 0 | 1 | 0.67 | |
Raisin_Bran | Kelloggs | C | 120 | 3 | 1 | 210 | 5 | 14 | 12 | 2 | 240 | 25 | 1.33 | 0.75 | |
Raisin_Nut_Bran | General Mills | C | 100 | 3 | 2 | 140 | 2.5 | 10.5 | 8 | 3 | 140 | 25 | 1 | 0.5 | |
Raisin_Squares | Kelloggs | C | 90 | 2 | 0 | 0 | 2 | 15 | 6 | 3 | 110 | 25 | 1 | 0.5 | |
Rice_Chex | Ralston Purina | C | 110 | 1 | 0 | 240 | 0 | 23 | 2 | 1 | 30 | 25 | 1 | 1.13 | |
Rice_Krispies | Kelloggs | C | 110 | 2 | 0 | 290 | 0 | 22 | 3 | 1 | 35 | 25 | 1 | 1 | |
Shredded_Wheat | Nabisco | C | 80 | 2 | 0 | 0 | 3 | 16 | 0 | 1 | 95 | 0 | 0.83 | -1 | |
Shredded_Wheat_'n'Bran | Nabisco | C | 90 | 3 | 0 | 0 | 4 | 19 | 0 | 1 | 140 | 0 | 1 | 0.67 | |
Shredded_Wheat_spoon_size | Nabisco | C | 90 | 3 | 0 | 0 | 3 | 20 | 0 | 1 | 120 | 0 | 1 | 0.67 | |
Smacks | Kelloggs | C | 110 | 2 | 1 | 70 | 1 | 9 | 15 | 2 | 40 | 25 | 1 | 0.75 | |
Special_K | Kelloggs | C | 110 | 6 | 0 | 230 | 1 | 16 | 3 | 1 | 55 | 25 | 1 | 1 | |
Strawberry_Fruit_Wheats | Nabisco | C | 90 | 2 | 0 | 15 | 3 | 15 | 5 | 2 | 90 | 25 | 1 | -1 | |
Total_Corn_Flakes | General Mills | C | 110 | 2 | 1 | 200 | 0 | 21 | 3 | 3 | 35 | 100 | 1 | 1 | |
Total_Raisin_Bran | General Mills | C | 140 | 3 | 1 | 190 | 4 | 15 | 14 | 3 | 230 | 100 | 1.5 | 1 | |
Total_Whole_Grain | General Mills | C | 100 | 3 | 1 | 200 | 3 | 16 | 3 | 3 | 110 | 100 | 1 | 1 | |
Triples | General Mills | C | 110 | 2 | 1 | 250 | 0 | 21 | 3 | 3 | 60 | 25 | 1 | 0.75 | |
Trix | General Mills | C | 110 | 1 | 1 | 140 | 0 | 13 | 12 | 2 | 25 | 25 | 1 | 1 | |
Wheat_Chex | Ralston Purina | C | 100 | 3 | 1 | 230 | 3 | 17 | 3 | 1 | 115 | 25 | 1 | 0.67 | |
Wheaties | General Mills | C | 100 | 3 | 1 | 200 | 3 | 17 | 3 | 1 | 110 | 25 | 1 | 1 | |
Wheaties_Honey_Gold | General Mills | C | 110 | 2 | 1 | 200 | 1 | 16 | 8 | 1 | 60 | 25 | 1 | 0.75 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.dot { | |
stroke: #000; | |
} | |
.line{ | |
stroke:dimgrey; | |
stroke-width:2px; | |
} | |
.tooltip{ | |
position:absolute; | |
width:auto; | |
border-radius:10px; | |
height:auto; | |
font-family: calibri; | |
font-weight:bold; | |
font-size: 14px; | |
background-color: lightgrey; | |
border:1px solid grey; | |
text-align: center; | |
padding:10px; | |
} | |
</style> | |
<body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> | |
<script> | |
var radius=620; | |
var margin = {top: 90, right:140 , bottom: 20, left: 60}, | |
width = (radius/Math.sqrt(2)), | |
height = (radius/Math.sqrt(2)) ; | |
var result; | |
var pie; | |
var piedata=[{value:1,name:"uh",text:"High protein cereals"},{value:1,name:"lh",text:"High fat cereals"}] | |
var x = d3.scale.linear() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var color = d3.scale.category10(); | |
var arccolor=d3.scale.ordinal().domain(piedata.map(function(d){return d.name;})).range(["#ffdaad","#fcffad"]) | |
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", radius + margin.left + margin.right) | |
.attr("height", radius + margin.top + margin.bottom); | |
var chart=svg.append("g") | |
.attr("transform", "translate(" + (margin.left) + "," + ((radius-height)+margin.top) + ")"); | |
d3.csv("cereal.csv", function(error, data) { | |
if (error) throw error; | |
result=data; | |
data.forEach(function(d) { | |
d.Protein = +d.Protein; | |
//d.Calories = +d.Calories; | |
d.Fat = +d.Fat; | |
d.Potassium=+d.Potassium; | |
}); | |
//for tool tip | |
d3.select("body").append("div").attr("class","tooltip").style("visibility","hidden"); | |
x.domain([0,d3.max(data, function(d) { return d.Protein; })]).nice(); | |
y.domain([0,d3.max(data, function(d) { return d.Protein; })]).nice(); | |
var XaxisData = data.map(function(d) { return d.Fat; }); | |
var YaxisData = data.map(function(d) { return d.Protein; }); | |
var arc = d3.svg.arc() | |
.outerRadius(radius) | |
.innerRadius(0); | |
pie = d3.layout.pie() | |
.sort(null) | |
.startAngle(0* Math.PI) | |
.endAngle(.5*Math.PI) | |
.value(function(d) { return d.value; }); | |
// Reversing the piedata array to adjust the elements to work in 4th quadrant | |
piedata.reverse(); | |
// code for text arc angle calc | |
piedata.forEach(function(d,i){ | |
d.textspecs={} | |
slotangle=(pie.endAngle()-pie.startAngle())/piedata.length; | |
d.textspecs.startangle= pie.startAngle()+(i+.9)*slotangle; | |
d.textspecs.endangle=pie.startAngle()+(i+.1)*slotangle; | |
}); | |
piedata.reverse(); | |
// end of code for text arc angle calc | |
// Code for semi-circle | |
var semicircle = chart.append("g").attr("class","semicircle").attr("transform","translate(" + 0 + "," + height + ")").selectAll(".arc") | |
.data(pie(piedata)) | |
.enter().append("g") | |
.attr("class", "arc"); | |
semicircle.append("path") | |
.style("fill", function(d) { console.log(arccolor(d.data.name),d.data.name);return arccolor(d.data.name); }) | |
.attr("d",function(d){return arc(d)}) | |
.on("mousemove",function(d){ | |
d3.select(".tooltip").style("left",function(d){return (d3.event.pageX+10)+"px"}).style("top",function(d){ return (d3.event.pageY-50)+"px"}); | |
d3.select(".tooltip").style("visibility","visible"); | |
d3.select(".tooltip").text(d.data.name=="uh"?"High protien cereals":"High fat cereals"); | |
}).on("mouseout",function(d){ | |
d3.select(".tooltip").style("visibility","hidden") | |
}); | |
// end of code for semi-circle | |
var line = d3.svg.line() | |
.x(function(d) { return d.x; }) | |
.y(function(d) { return d.y; }); | |
chart.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
.append("text") | |
.attr("class", "label") | |
.attr("x", width) | |
.attr("y", -6) | |
.style("text-anchor", "end") | |
.text("Fat"); | |
chart.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("class", "label") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("Protein(g)") | |
chart.selectAll(".dot") | |
.data(data) | |
.enter().append("circle") | |
.attr("class", "dot") | |
.attr("opacity",0.8) | |
.attr("r", function(d){return Math.pow(d.Potassium,1/3)}) | |
.attr("cx", function(d) { return x(d.Fat); }) | |
.attr("cy", function(d) { return y(d.Protein); }) | |
.style("fill", function(d) { return color(d.Manufacturer)}). | |
style("stroke"," lightgrey" ).style("stroke-width","1px"); | |
//Experimental curved text code | |
svg.append("g").attr("transform","translate("+margin.left+","+margin.top+")").selectAll("expcircles").data(piedata).enter().append("g").attr("class","division").each(function(d){ | |
/* d3.select(this).append("circle").attr("r",4).attr("cx",function(c){return (radius+40)*Math.cos(c.textspecs.startangle)}) | |
.attr("cy",function(c){return radius- ((radius+40)*Math.sin(c.textspecs.startangle))}).style("fill","black") | |
d3.select(this).append("circle").attr("r",4).attr("cx",function(c){return (radius+40)*Math.cos(c.textspecs.endangle)}) | |
.attr("cy",function(c){return radius- ((radius+40)*Math.sin(c.textspecs.endangle))}).style("fill","black") | |
*/ | |
var p1={} | |
var p2={} | |
p1.x=(radius+40)*Math.cos(d.textspecs.startangle) | |
p1.y=radius- ((radius+40)*Math.sin(d.textspecs.startangle)) | |
p2.x=(radius+40)*Math.cos(d.textspecs.endangle) | |
p2.y=radius- ((radius+40)*Math.sin(d.textspecs.endangle)) | |
d3.select(this).append("path").style({"stroke":"blue","stroke-width":"1px","fill":"none","visibility":"hidden"}).attr("id","textpath"+d.name).attr("d","M "+p1.x+" "+p1.y+" A "+(radius+40)+","+(radius+40)+" 0 0,1 "+p2.x+" "+p2.y+""); | |
d3.select(this).append("text").style("font","27px cambria").append("textPath").attr("xlink:href","#textpath"+d.name).attr({"startOffset":"50%","text-anchor":"middle"}).text(d.text) | |
}) | |
// end of experimental curved text code | |
var legend = svg.selectAll(".legend") | |
.data(color.domain()) | |
.enter().append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d, i) { return "translate("+(margin.left+radius)+"," + i * 20 + ")"; }); | |
legend.append("rect") | |
.attr("x", 18) | |
.attr("width", 18) | |
.attr("height", 18) | |
.style("fill", color); | |
legend.append("text") | |
.attr("x", 24+18) | |
.attr("y", 9) | |
.attr("dy", ".35em") | |
.style("text-anchor", "start") | |
.text(function(d) { return d; }); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment