Skip to content

Instantly share code, notes, and snippets.

@erikhazzard

erikhazzard/_.md

Forked from roundrobin/_.md
Created January 15, 2013 19:00
Show Gist options
  • Save erikhazzard/4541045 to your computer and use it in GitHub Desktop.
Save erikhazzard/4541045 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Pie Chart
Raw
_.md
Raw
config.json
{"description":"Simple Pie Chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.5100078186082878,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":true}
Raw
inlet.js
var svg = d3.select("svg");
var w = 300, //width
h = 300, //height
r = 155,
x = 155,
y = 151,
color = d3.scale.category20c(); //builtin range of colors
data = [{"label":"onjkljjlke", "value":20},
{"label":"two", "value":19},
{"label":"three", "value":46}];
var vis = svg //create the SVG element inside the <body>
.data([data]) //associate our data with the document
.attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag
.attr("height", h)
.append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + (r + x) + "," + (r + y) + ")") //move the center of the pie chart from 0, 0 to radius, radius
var arc = d3.svg.arc() //this will create <path> elements for us using arc data
.outerRadius(r);
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array
var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
.attr("class", "slice"); //allow us to style things in the slices (like text)
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function
arcs.append("svg:text")
.attr("font-family", "Futura")
.attr("transform", function(d) { //set the label's origin to the center of the arc
//we have to make sure to set these before calling arc.centroid
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50]
})
.attr("text-anchor", "middle") //center the text on it's origin
.text(function(d, i) { return data[i].label; }); //get the label from our original data array
var g1 = svg.append("svg:g")
.attr("transform","translate("+[200,50]+")")
.attr("class","group");
g1.append("svg:circle")
.attr("r",26)
.attr("cx",26)
.attr("cy",26)
.attr("fill",color(0));
g1.append('svg:text')
.text('2%')
.attr("fill", "#FFFFFF")
.attr("x", 12)
.attr("y", 35)
.attr("font-size", 20)
.attr("font-family", "Futura")
.attr("text-anchor", "start");
g1.append('svg:text')
.text('one')
.attr("fill", "#0E0E0E")
.attr("x", 9)
.attr("y", 70)
.attr("font-size", 20)
.attr("font-family", "Futura")
.attr("text-anchor", "start");
var g1 = svg.append("svg:g")
.attr("transform","translate("+[263,50]+")")
.attr("class","group");
g1.append("svg:circle")
.attr("r",26)
.attr("cx",26)
.attr("cy",26)
.attr("fill",color(1));
g1.append('svg:text')
.text('2%')
.attr("fill", "#FFFFFF")
.attr("x", 12)
.attr("y", 35)
.attr("font-size", 20)
.attr("font-family", "Futura")
.attr("text-anchor", "start");
g1.append('svg:text')
.text('two')
.attr("fill", "#0E0E0E")
.attr("x", 9)
.attr("y", 70)
.attr("font-size", 20)
.attr("font-family", "Futura")
.attr("text-anchor", "start");
var moveX = 148;
var g1 = svg.append("svg:g")
.attr("transform","translate("+[0,0]+")")
.attr("class","group")
.attr('id','menu')
g1.append("svg:rect")
.attr("width",148)
.attr("height",557)
.attr('x',0)
.attr('id','menu')
.attr("fill","#444444")
g1.append("svg:rect")
.attr("width",140)
.attr("height",44)
.attr('x',4)
.attr('class','button')
.attr("fill","#8D8D8D")
g1.append("svg:rect")
.attr("width",140)
.attr("height",12)
.attr('x',4)
.attr('y',48)
.attr('class','button')
.attr("fill","#8D8D8D")
g1.append("svg:rect")
.attr("width",40)
.attr("height",12)
.attr('x',4)
.attr('y',48)
.attr('class','button')
.attr("fill","#2F7BA7")
g1.append("svg:rect")
.attr("width",15)
.attr("height",12)
.attr('x',4)
.attr('y',64)
.attr('class','button')
.attr("fill","#8D8D8D")
g1.append("svg:rect")
.attr("width",15)
.attr("height",12)
.attr('x',21)
.attr('y',64)
.attr('class','button')
.attr("fill","#8D8D8D")
g1.append('svg:text')
.text('two')
.attr("fill", "#0E0E0E")
.attr("x", 72)
.attr("y", 26)
.attr("font-size", 20)
.attr("font-family", "Futura")
.attr("text-anchor", "middle")
.style('text-shadow','1px 1px 3px #FFFFFF');
svg.append("svg:rect")
.attr("width",195)
.attr("height",35)
.attr('x',441)
.attr('y',16)
.attr('rx',10)
.attr('ry',10)
.attr('class','button')
.attr("fill","#CECECE")
g1.append('svg:text')
.text('SEARCH')
.attr("fill", "#0E0E0E")
.attr("x", 399)
.attr("y", 41)
.attr("font-size", 20)
.attr("font-family", "Futura")
.attr("text-anchor", "middle");
Raw
styles.css
.button:hover{
fill: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment