0

I'm trying to learn this piece of code for introduction to d3 javascript. This is what I'm trying to replicate http://curran.github.io/screencasts/introToD3/examples/viewer/#/97.

The errors I get are as follow:

simplify.js:2 Uncaught ReferenceError: require is not defined(anonymous function) @ simplify.js:2 d3.min.js:3 Uncaught TypeError: Cannot read property 'length' of nullta.extent @

I don't really know how to include an external js file to an html file. I don't know where I'm going wrong.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>D3 temp</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="simplify.js"></script>
    </head>
  <body>
    <script>

    var outerWidth   = 500;
    var outerHeight  = 250;
    var circleRadius = 3;
    var margin = {left: 30, top: 30, right: 30, bottom: 30};

    var xColumn = "timestamp";
    var yColumn = "temperature";

    var svg = d3.select("body").append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight);
    var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top +")");

    var innerWidth = outerWidth   - margin.left  - margin.right;
    var innerHeight = outerHeight - margin.top - margin.bottom;

    var xScale = d3.time.scale().range([0, innerWidth]);
    var yScale = d3.scale.linear().range([innerHeight, 0]);

    function render(data)
    {
        xScale.domain(d3.extent(data, function(d){ return d[xColumn]; }));
        yScale.domain(d3.extent(data, function(d){ return d[yColumn]; }));

        var circles = g.selectAll("circle").data(data);
        circles.enter().append("circle")
            .attr("r", circleRadius);
        circles
            .attr("cx", function(d){ return xScale (d[xColumn]); })
            .attr("cy", function(d){ return yScale (d[yColumn]); });

        circles.exit().remove();
    }

    function type(d){
      d.timestamp   = new Data(d.timestamp);
      d.temperature = +d.temperature;
      return d;
    }



    d3.csv("SFweek.csv", type, render);
   </script>
  </body>
</html>

Since the file is already a csv file I only use simplify.js

    // A Node.js script that filters data.
    var fs = require('fs');
    var d3 = require('d3');
    var csv = fs.readFileSync('SFWeek.csv', 'utf-8');
    var data = d3.csv.parse(csv);

    // Filter by city.
    data = data.filter(function (d) {
      return d.city === "San Francisco";
    });

    // Only include 2 rows.
    data = data.map(function (d) {
      return {
        timestamp: d.timestamp,
        temperature: d.temperature
      };
    });

    fs.writeFileSync('SFweek.csv');
  • Possible duplicate of [require is not defined](http://stackoverflow.com/questions/36698354/require-is-not-defined) – Frank Tan Jul 18 '16 at 18:42
  • See the possible duplicate. `require` is not defined because you are not in a Node.js environment. Since you say that you "don't really know how to include an external js file to an html file", I'd recommend starting with some simpler examples. For example: http://stackoverflow.com/questions/13739568/how-do-i-link-a-javascript-file-to-a-html-file – Frank Tan Jul 18 '16 at 18:45
  • Ah, that makes sense. I assumed HTML or d3 could just summon the file. I'll take a look into Node.js. –  Jul 18 '16 at 23:41

0 Answers0