d3 update

I just spent the last 3 hours trying to figure out what was wrong with my code only to find out that the tutorial that I was doing talks about it later in the video. One of my problems was that I kept trying to pass my data locally. I got through that by creating a local server in my computer through using node.js and express.js. You do need npm install and I typically use node anyways in my projects just because it’s a great middleware and backend design typically is used there. So in just a few lines of codes, you can set up your local server as follows:

 

var express = require(‘express’);

var app = express();

app.use(express.static(__dirname));

app.listen(3000, function(){
console.log(“Console is running on port 3000”);
});

It’s not complicated at all. You make sure you run node and you just go run localhost:3000 on a browser. I would have an index.html file with like an h1 tag to make sure that the visual is coming up, but the console.log is enough to show that it is running locally.

But for my problem that took two hours, I had this code:

d3.csv(“MonthlySales.csv”, function(error, data) {
if (error) {
console.log(error)
} else {
console.log(data);
ds = data;
}
})

and  this one used to create the lines

var lne = d3.svg.line()
.x(function(d) { return ((d.month – 20130001)/3.25);})
.y(function(d) { return h – d.sales;})
.interpolate(“linear”)

var svg = d3.select(“body”).append(“svg”).attr({ width: w, height: h});

svg.append(“path”)
.attr({
d: lne(ds),
“stroke”: “purple”,
“stroke-width”: 2,
“fill”: “none”
})
}

without having them together since I thought that it automatically does it for me. I learned that the data won’t be available before the callback is provided so you either need a button linked with a callback or you manually put it in. I chose the latter just because I’m just learning simple d3 functionalities and learning how to use it is more useful at the moment than creating fancy apps to do so. So lesson of the story, if you get lost in something unless it’s a 6 hour video, try to rewind the videos or go through the end before spending 3 hours trying to figure out something that I could have gotten an answer from in 3 mins after I got lost.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s