Skip to content

Instantly share code, notes, and snippets.

@nanu146

nanu146/.block

Last active December 28, 2016 17:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nanu146/fa0f064f983dbed5e34ff4d0963e3737 to your computer and use it in GitHub Desktop.
Save nanu146/fa0f064f983dbed5e34ff4d0963e3737 to your computer and use it in GitHub Desktop.
Download ZIP
Scatter Plot with Trade-Off Line
Raw
.block
license: gpl-3.0
height: 900
border: no
Raw
cereal.csv
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
Raw
index.html
<!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