Skip to content

Instantly share code, notes, and snippets.

@btipling

btipling/index.html

Forked from enjalot/index.html
Created December 24, 2012 22:06
Show Gist options
  • Save btipling/4370820 to your computer and use it in GitHub Desktop.
Save btipling/4370820 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @enjalot enjalot revised this gist Sep 15, 2011. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,3 @@
    <!-- Annotated javascript available at http://enja.org/code/tuts/d3/bar -->
    <!-- Code walkthrough screencast available at -->
    <!DOCTYPE html>
    <html>
    <head>
  2. @enjalot enjalot revised this gist Sep 15, 2011. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    <!-- Annotated javascript available at http://enja.org/code/tuts/d3/bar -->
    <!-- Code walkthrough screencast available at -->
    <!DOCTYPE html>
    <html>
    <head>
  3. @enjalot enjalot revised this gist Sep 15, 2011. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,9 +3,9 @@
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing Pie Chart</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.1.3"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.1.3"></script>

    <style type="text/css">
    .slice text {
  4. @enjalot enjalot revised this gist Sep 8, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -40,9 +40,9 @@
    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") //
    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() //
    .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)

  5. @enjalot enjalot revised this gist Sep 8, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@

    <style type="text/css">
    .slice text {
    font-size: 20pt;
    font-size: 16pt;
    font-family: Arial;
    }
    </style>
  6. @enjalot enjalot revised this gist Sep 8, 2011. 1 changed file with 29 additions and 27 deletions.
    56 changes: 29 additions & 27 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,55 +8,57 @@
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>

    <style type="text/css">
    text {
    font-size: 12pt;
    .slice text {
    font-size: 20pt;
    font-family: Arial;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">

    var w = 300,
    h = 300,
    r = 100,
    color = d3.scale.category20c();
    var w = 300, //width
    h = 300, //height
    r = 100, //radius
    color = d3.scale.category20c(); //builtin range of colors

    data = [{"label":"one", "value":20}, {"label":"two", "value":50}, {"label":"three", "value":30}]
    data = [{"label":"one", "value":20},
    {"label":"two", "value":50},
    {"label":"three", "value":30}];

    var vis = d3.select("body")
    .append("svg:svg")
    .data([data])
    .attr("width", w)
    .append("svg: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")
    .attr("transform", "translate(" + r + "," + r + ")")
    .append("svg:g") //make a group to hold our pie chart
    .attr("transform", "translate(" + r + "," + r + ")") //move the center of the pie chart from 0, 0 to radius, radius

    var arc = d3.svg.arc()
    var arc = d3.svg.arc() //this will create <path> elements for us using arc data
    .outerRadius(r);

    var pie = d3.layout.pie()
    .value(function(d) { return d.value; });
    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")
    .data(pie)
    .enter()
    .append("svg:g")
    .attr("class", "slice");
    var arcs = vis.selectAll("g.slice") //
    .data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
    .enter() //
    .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); } )
    .attr("d", arc);
    .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("transform", function(d) {
    arcs.append("svg:text") //add a label to each slice
    .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) + ")";
    return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50]
    })
    .attr("text-anchor", "middle")
    .text(function(d, i) { return data[i].label; });
    .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

    </script>
    </body>
  7. @enjalot enjalot revised this gist Sep 8, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -17,8 +17,8 @@
    <body>
    <script type="text/javascript">

    var w = 640,
    h = 480,
    var w = 300,
    h = 300,
    r = 100,
    color = d3.scale.category20c();

  8. @enjalot enjalot revised this gist Sep 8, 2011. 1 changed file with 3 additions and 4 deletions.
    7 changes: 3 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -36,7 +36,7 @@
    .outerRadius(r);

    var pie = d3.layout.pie()
    .value(function(d) { return d.value; })
    .value(function(d) { return d.value; });

    var arcs = vis.selectAll("g.slice")
    .data(pie)
    @@ -49,12 +49,11 @@
    .attr("d", arc);

    arcs.append("svg:text")
    .attr("transform", function(d, i) {
    console.log(d);
    .attr("transform", function(d) {
    //we have to make sure to set these before calling arc.centroid
    d.innerRadius = 0;
    d.outerRadius = r;
    return "translate(" + arc.centroid(d) + ")"; })
    return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text(function(d, i) { return data[i].label; });
  9. @enjalot enjalot created this gist Sep 8, 2011.
    64 changes: 64 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing Pie Chart</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>

    <style type="text/css">
    text {
    font-size: 12pt;
    font-family: Arial;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">

    var w = 640,
    h = 480,
    r = 100,
    color = d3.scale.category20c();

    data = [{"label":"one", "value":20}, {"label":"two", "value":50}, {"label":"three", "value":30}]

    var vis = d3.select("body")
    .append("svg:svg")
    .data([data])
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + r + "," + r + ")")

    var arc = d3.svg.arc()
    .outerRadius(r);

    var pie = d3.layout.pie()
    .value(function(d) { return d.value; })

    var arcs = vis.selectAll("g.slice")
    .data(pie)
    .enter()
    .append("svg:g")
    .attr("class", "slice");

    arcs.append("svg:path")
    .attr("fill", function(d, i) { return color(i); } )
    .attr("d", arc);

    arcs.append("svg:text")
    .attr("transform", function(d, i) {
    console.log(d);
    //we have to make sure to set these before calling arc.centroid
    d.innerRadius = 0;
    d.outerRadius = r;
    return "translate(" + arc.centroid(d) + ")"; })
    })
    .attr("text-anchor", "middle")
    .text(function(d, i) { return data[i].label; });

    </script>
    </body>
    </html>