html file + d3.js script file + input data manually in html file

Question

I am new in d3.js language. I am trying to built a simple application but I stuck some where. I have a separate .js file jack.js which makes pie chart when you link it with html page.

Problem I want to use that file in every html page with different data. But i cant find the perfect solution of this. whenever page loaded in browser, file load its pie chart visualization. So can you suggest me what should i need to do?

HTML page

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3: Pie layout</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="lib/pie.js"></script>
    <script>
      dataset = [1,2,3,4,5];
    </script>
  </head>
  <body>
  </body>
</html>                                          `

jack.js

//Width and height
var w = 300;
var h = 300;
var dataset = [ 5, 10, 20, 45, 6, 25 ];

var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var pie = d3.layout.pie();

//Easy colors accessible via a 10-step ordinal scale
var color = d3.scale.category10();

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

//Set up groups
var arcs = svg.selectAll("g.arc")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

//Draw arc paths
arcs.append("path")
    .attr("fill", function(d, i) {
        return color(i);
    })
    .attr("d", arc);

//Labels
arcs.append("text")
    .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text(function(d) {
        return d.value;
    });

Wrap the code in Jack.js into a function accepting a parameter named dataset. Source it, and call it with different data from where ever you want passing in the data. — Mark
– Mark, Commented Nov 26, 2014 at 1:05

rohit narang · Accepted Answer · 2014-12-26 23:56:24Z

2

<body>
<script type="text/javascript" src="lib/pie.js"></script>
<script>dataset = [1, 2, 3, 4, 5];</script>
</body>

This way you can do this.

answered Dec 26, 2014 at 23:56

rohit narang

13510 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

biobirdman · Accepted Answer · 2014-11-26 00:21:28Z

Hi Remove var dataset = [ 5, 10, 20, 45, 6, 25 ]; from jack.js and put them either in your html file like you did in the head of your html file. Call jack.js in the body.

This will ensure that the data is loaded first before jack.js.

Hence your code will look like this

Html

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3: Pie layout</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script>dataset = [1, 2, 3, 4, 5];</script>
</head>
<body>
<script type="text/javascript" src="lib/pie.js"></script>
</body>
</html>

pie.js

        var w = 300;
        var h = 300;


        var outerRadius = w / 2;
        var innerRadius = 0;
        var arc = d3.svg.arc()
                        .innerRadius(innerRadius)
                        .outerRadius(outerRadius);

        var pie = d3.layout.pie();

        //Easy colors accessible via a 10-step ordinal scale
        var color = d3.scale.category10();

        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        //Set up groups
        var arcs = svg.selectAll("g.arc")
                      .data(pie(dataset))
                      .enter()
                      .append("g")
                      .attr("class", "arc")
                      .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

        //Draw arc paths
        arcs.append("path")
            .attr("fill", function(d, i) {
                return color(i);
            })
            .attr("d", arc);

        //Labels
        arcs.append("text")
            .attr("transform", function(d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function(d) {
                return d.value;
            });

Alternatively, you place wrap you d3 code in a $( document ).ready( //your d3 code here ) http://learn.jquery.com/using-jquery-core/document-ready/

Alternatively

pie.js

$( document ).ready(
        // d3 code here
        var pie = d3.layout.pie();

        //Easy colors accessible via a 10-step ordinal scale
        var color = d3.scale.category10();
        ....
)

Collectives™ on Stack Overflow

html file + d3.js script file + input data manually in html file

2 Answers 2

Comments

Html

pie.js

Alternatively

pie.js

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Html

pie.js

Alternatively

pie.js

Comments

Your Answer

Sign up or log in

Post as a guest

Related