Blank screen with d3js

Question

I am fairly new to computer programming and d3js. I am trying to replicate this bar graph found on the d3js website http://bl.ocks.org/mbostock/b2fee5dae98555cf78c9e4c5074b87c3. I copied the code exactly and created a CSV file with the necessary data to create the bar graph. But whenever I try running the code the axis is the only thing that comes up. I am not sure if the error is within the CSV file or how I try to call the data. I just know the error is somewhere on my part.

Here's a sample of the CSV file (condensed):

    id,case,date
    10097071,HY285524,06/02/2015 09:41:19 PM
    21907,HY291065,06/07/2015 03:50:00 AM
    21908,HY291065,06/07/2015 03:50:00 AM
    10156667,HY345298,07/18/2015 03:17:00 AM

Here's how I have been trying to call it:

    d3.csv("homicides.csv", type, function(error, data) {
    if (error) throw error;

    var bins = histogram(data);

    y.domain([0, d3.max(bins, function(d) { return d.length; })]);

Any help would be appreciated!

Code works well. You have some errors on copy/paste. Here's a working plker: https://plnkr.co/edit/CgaipkEnrIbFO1a8AWbL?p=preview — Klaujesi, Jul 19 '16 at 14:18
Thanks for the advice! Really appreciate it! Using plnkr solved the problem — Mzan, Jul 20 '16 at 17:57

score 0 · Answer 1 · edited May 23 '17 at 11:44

How are you loading up the .html file you have created? Eventually you will want to develop your own .html files.

Using plnkr, or other such sites like jsfiddle is useful for playing around with your code but can be limiting.To also get it working on your browser from the .html file you created you need to run a localhost to load up a .csv file.

this thread is useful if you are running from a Windows environment Set up Python simpleHTTPserver on Windows

Another alternative is literally setting up a variable in your code e.g. var data=[contents of csv file], but then you will have to find a way to parse/map the data which is already done nicely by d3.csv("csvfilename"...)

Blank screen with d3js

1 Answers1