D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
rubin2ma
Full window
Github gist
midterm practice 1
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) svg.append("text") .text("Edit the code below to change me!") .attr("y", 200) .attr("x", 120) .attr("font-size", 36) .attr("font-family", "monospace") //Array.indexOf() example from class console.log('Array.indexOf() Example:') isWithin = function(a, b) { x= a.indexOf(b) if (x == -1) return false else return true } myArray = [4,6,20]; console.log(isWithin(myArray,6)); console.log('') // Problem 1: modify array1 so that each object it contains includes the 2 letter state "id" console.log("Problem 1: Modifying an Array to include data from another Array") array1 = [ {name: "Arizona", location: "Southwest"}, {name: "Virginia", location: "East"}, {name: "Florida", location: "Southeast"} ]; array2 = [ {name: "Virginia", id: "VA"}, {name: "Arizona", id: "AZ"}, {name: "Florida", id: "FL"} ]; array1.forEach(function(a) { array2.forEach(function(b) { if (a.name == b.name) { a.id = b.id; } }) }) console.log(array1) console.log('' ) // Problem 2: print all items that are in both array3 // and array4 to the console. console.log("Problem 2: Print items that are in both arrays") array3 = ['a','b','c','d']; array4 = ['a','c','e','f','g']; // console.log("first solution:") array3.forEach(function (a3) { array4.forEach(function (a4) { if (a3 == a4){ console.log(a3) } }) }) console.log('') // console.log("second solution:") console.log("Problem 2 Second Solution:") array3.forEach(function (x) { if (array4.includes(x)) { console.log(x); } }) console.log('') // Problem 3: 'states' is an array of objects. Sort the array in ascending order by population console.log("Problem 3: Sorting an Array in Ascending Order") states = [{name: "Alaska", id: "AK", population: 741894}, {name: "Virginia", id: "VA", population: 8411808}, {name: "Arizona", id: "AZ", population: 6931071}, {name: "Florida", id: "FL", population: 20984400}] states.sort(function(a,b){return(a.population-b.population)}); console.log(states) console.log('') // Problem 4: using console.log() and the appropriate index on the sorted 'states' array, print the state with the smallest population. console.log("Problem 4:") console.log(states[0].name) console.log('') console.log("Problem 4 Second Solution:") //Does the exact same thing when printed to the console. console.log(d3.min(states, function (d) {return d.name})) console.log('') console.log("Problem 5: Loop, Modulus, and Console.log") // someNumbers is an array containing all integers from 1-10 inclusively someNumbers = d3.range(1,11) // Problem 5: using console.log(), a loop,and the modulus operator, print those members of someNumbers that are NOT multiples of 3. someNumbers.forEach(function (i) { if ( i % 3 === 0 ){ }else{ console.log(i) } }) console.log('') </script> </body>
https://d3js.org/d3.v4.min.js