Javascript Notebook
  • Introduction
  • Intro to JavaScript
    • Section 1 - Getting Started
    • Section 2 - Execution Contexts and Lexical Environements
    • Section 3 - Types and Operators
    • Section 3 Part 2 - Closures and Callbacks
    • Section 4 - Objects and Functions
    • Section 5 - Object Oriented Javascript and Prototypal Inheritance
    • Section 6 - Building Objects
    • Section 7 - Odds and Ends
    • Section 8 - Examining Famous Frameworks and Libraries
    • Section 9 - Let's Build a Framework or Library!
  • Midterm Review
  • Final Review
  • jQuery
    • Section 1 - Selectors
    • Section 2 - Events
    • Section 3 - Effects
  • Node.js
    • The Node Core
    • Modules, Exports, and Require
    • Events and the Event Emitter
    • Databases and SQl
  • D3.js
    • Diving In
    • Bar Chart
    • Creating A Complex Bar Chart
Powered by GitBook
On this page

Was this helpful?

  1. D3.js

Diving In

var data = [132,71,337,93,78,43,20,16,30,8,17,21];

var dataG50 = data.filter(function(i){
    return i > 50;
})

console.log(dataG50);

var donuts = [
    {key: "Glazed",        value: 132},
    {key: "Jelly",        value: 71},
    {key: "Holes",        value: 337},
    {key: "Sprinkles",    value: 93},
    {key: "Crumb",        value: 78},
    {key: "Chocolate",    value: 43},
    {key: "Coconut",     value: 20},
    {key: "Cream",        value: 16},
    {key: "Cruller",     value: 30},
    {key: "Éclair",     value: 8},
    {key: "Fritter",     value: 17},
    {key: "Bearclaw",     value: 21}
];

var dataG50 = donuts.filter(function(i){
    return i.value > 50
})

dataG50.forEach(function(i){
    console.log(i.key);
})

console.log(dataG50);
[132, 71, 337, 93, 78]

Glazed
Jelly
Holes
Sprinkles
Crumb

[Object, Object, Object, Object, Object]

Special D3 Functions: Min, Max, and Extent

var data = [132,71,337,93,78,43,20,16,30,8,17,21];

var min = d3.min(data);
var max = d3.max(data);
var minMax = d3.extent(data);
console.log(min, max, minMax);

var donuts = [
    {key: "Glazed",        value: 132},
    {key: "Jelly",        value: 71},
    {key: "Holes",        value: 337},
    {key: "Sprinkles",    value: 93},
    {key: "Crumb",        value: 78},
    {key: "Chocolate",    value: 43},
    {key: "Coconut",     value: 20},
    {key: "Cream",        value: 16},
    {key: "Cruller",     value: 30},
    {key: "Éclair",     value: 8},
    {key: "Fritter",     value: 17},
    {key: "Bearclaw",     value: 21}
];

var min = d3.min(donuts, function(d){
    return d.value;
})
var max = d3.max(donuts, function(d){
    return d.value;
})
var minMax = d3.extent(donuts, function(d){
    return d.value;
})
console.log(min, max, minMax);
8 337 [8, 337]
8 337 [8, 337]
PreviousD3.jsNextBar Chart

Last updated 5 years ago

Was this helpful?