D3-js[Data handling]

Local server hosting

Open a new terminal in Mac
cd ~/Desktop/project-folder
python -m SimpleHTTPServer 8888 &.filename

Chaining

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset = "utf-8">
        <title> D3 Page Template</title>
        <script type="text/javascript" src="d3.js"></script>
    </head>
    <body>
        <script type="text/javascript">
        d3.select("body").append("p").text("New paragraph!");
        </script>
    </body>
</html>

d3: Refer the D3 object.
.select("body"): Give the select() method a CSS selector as input
append("p"): empty p paragraph is appended to the body.
.text("New paragraph!")

Handoff: D3 methods return a selection (So it uses chaining)

Without chaining we can also re-paragraph above code.

var body = d3.select("body");
var p = body.append("p");
p.text("New paragraph!");

Binding data

d3.csv("food.csv", function(data) {
    console.log(data);
});

csv(): the path, call back function

When the call back function is called, the csv file is already imported. Every value in csv is stored as a string, even the number. So converting is needed. While the csv fild is loaded, the rest of a code is executed so assigning global variable would be helpful.

var rowConverter = function(d) {
    return {
        Food: d.Food, //No conversion
        Deliciousness: parseFloat(d.Deliciousness)
    };
}

d3.csv("food.csv", rowConverter, function(data) {
    console.log(data);
});

var dataset;

d3.csv("food.csv", function(data) {
    dataset = data; // Once loaded, copy to dataset.
    generateVis(); // Then call other functions that
    hideLoadingMsg(); // depend on data being present.
});

var useTheDataLater = function() {
    //Assuming useTheDataLater() is called sometime after
    //d3.csv() has successfully loaded in the data,
    //then the global dataset would be accessible here.
};

var dataset; //Declare global var

d3.csv("food.csv", function(data){
    // Hand CSV data off to global var,
    // so it's accessbile later.
    
    dataset = data;
    
    //Call some other functions that
    //generate your visualization, e.g.:
    generateVisualization();
    makeAwesomeCharts();
    makeEvenAwesomerCharts();
    thankAwardsCommittee();
});

var dataset;

d3.csv("food.csv", function(error,data){
    if (error){ //If error is not null, st went wrong.
        console.log(error); //Log the error.
    } else { //If no error, the file loaded correctly.
        console.log(data); // Log the data.
        //Include other code to execute after successful file load here
        dataset = data;
        generateVis();
        hideLoadingMsg();
    }
});

Selection

var dataset = [5,10,15,20,25];

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!")
    //.text(function(d) { return d; });

We have to select elements that don't yet exist. The magical method is "enter"

d3.select("body"): Finds the body in the DOM
.selectAll("p"): Selects all paragraphs in the DOM. This returns an empty selection because none exist yet.
.data(dataset): Counts and parses our data values.
enter(): Creates a new placeholder element
.append("p"): appends a p element
.text("New paragraph!"): inserts a text value into p

If we use .text(function(d) { return d; }); it populates the contents of each paragraph from our data.

Functioning

function(input_value) {
    //Calculate something here
    return output_value;
}

var doSomething = function() {
    //Code to do something here
};

.text(function(d) { // <- Note tender embrace at left
    return "I can cout up to " + d;
});

// Our anonymous function is executed first.

.style("color", function(d) {
    if (d > 15) { //Threshold of 15
        return "red";
    } else {
        return "black" ;
    }
});

Div and Attr

var dataset = [5,10,15,20,25];
<div style = "display: inline-block;
                width: 20px;
                height: 75px;
                background-color: teal;"></div>

div.bar{
    display: inline-block;
    width: 20px;
    height: 75px; /* We'll override height later */
    background-color: teal;
}

<div class="bar"></div>

<p class="caption">
<select id="country">
<img src="logo.png" width="100px" alt="Logo" />

div needs to be assigned the bar class. To add a class to an element, we use the attr() method. (not style()) style() applies CSS styles directly to an element.

Attribute

Value

class

caption

country

src

logo.png

width

100px

alt

Logo

To assign a class of bar we can use: .attr("class","bar")

Classes

Element's class is stored as an HTML attribute.

.classed("bar", true)
// If true->false, it removesthe class of bar.

var dataset = [5,10,15,20,25];

d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class","bar");

PreviousEnsemble-Based NextCh6(editing)

Last updated 3 years ago