如何同时使用Express和Ampersand？

Question

I'm creating a D3 app that's going to display some simple data using an Express server, and Ampersand on the client side. Eventually, I'll want to send the data to the browser dynamically, as the entire dataset could get very large. For now, though, I'm having trouble getting even the simplest of things working.

I've set up a simple Express server, and it's rather simple:

// Boilerplate express code 
var express = require('express'); 
var app = express(); 
var path = require('path'); 

// Make the Public directory available to the browser 
app.use(express.static(__dirname + '/public')); 

app.get('/', function(req, res) { 
  res.sendFile('d3.html', {'root': path.join(__dirname, '/views') }); 
}); 

// Listen on port 3000 
app.listen(3000); 

That works rather well. When I visit the page, it loads a blank D3 bar graph (just the axis), but shows no data. This is because I've not sent the data to the browser, and, as I understand it, this needs to be done using either AJAX, jQuery, or something else. I'm not sure how to proceed with this.

This is in my d3.html; it reads its data from data.tsv, which I've placed in the public folder of my Express server:

d3.tsv("data.tsv", type, function(error, data) {
  x.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

This is data.tsv :

letter  frequency
A .08167
B .01492
C .02782
D .04253
E .12702
F .02288
G .02015
H .06094
I .06966
J .00153
K .00772
L .04025
M .02406
N .06749
O .07507
P .01929
Q .00095
R .05987
S .06327
T .09056
U .02758
V .00978
W .02360
X .00150
Y .01974
Z .00074

How do I pass the data to the browser so that d3.html can read in the data? I don't care if the data is in data.tsv or not; I just need to send the equivalent data somehow. I'm not familiar with it, but I have a hunch that Ampersand can handle the requesting/receiving of this data, but I'm not sure how.

Answer 1

You shouldn't need to use ampersand for this specific example, in fact, I wouldn't use it at all for this specific problem (and I'm an ampersand author).

What you're trying to do is load the data.tsv file off the server, and get the data in to d3. Normally you'll grab data from a server from the browser with an ajax request (as you identified). And in fact, d3 is already doing that for you. That d3.tsv function you're calling is trying to load the data.tsv file from the server and parse it for you.

Now, this is obviously not working for you for some reason, so things to look at:

1. If you visit http://localhost:3000/data.tsv , can you see the data in your browser? This checks that you have express + express static setup to properly serve the data.

2. If you open up the d3.html page and open your browser developer tools, do you see any errors?

3. This code is where you are grabbing the data from the server and parsing it. Try logging the error to the console and check the developer tools logs to see if there's an error. Maybe d3 is struggling to grab or parse the data? You could log the data too and see if it looks correct at that point:

    d3.tsv("data.tsv", type, function(error, data) { console.log("The error is:", error); //add these console.log("The data is:", error); //two lines x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

4. Beyond that, you'll need to post more of your d3 code to help people figure out what's going on, and why you aren't getting data. You may even wish to tag this as a d3 question, and remove ampersand from the title as it's probably not relevant to your issue here.

Side note: apologies that the ampersand website wasn't helpful. These things can always be better huh? :)