D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
swaggernation77
Full window
Github gist
homework set 1
Built with
blockbuilder.org
homework set 1! <!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("homework set 1!") .attr("y", 200) .attr("x", 120) .attr("font-size", 36) .attr("font-family", "monospace") // Problem 1: modify array1 so that each object it contains includes the 2 letter state "id" console.log("question 1") 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(a1) { array2.forEach(function(a2) { if (a1.name == a2.name) { a1.id = a2.id; } }) }) //check if successfully combined arrays. console.log(array1) // Problem 2: print all items that are in both array3 // and array4 to the console. console.log("problem 2") 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("second solution:") array3.forEach(function (a3) { if (array4.includes(a3)) { } }) // Problem 3: 'states' is an array of objects. Sort the array in ascending order by population 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}] console.log("question 3") //loop through (sort) through states. states.sort (function(a,b){ //order the population element into ascending order if (a.population < b.population) {return -1} else if (a.population == b.population) {return 0} else {return 1} }) //check if you sorted it correctly console.log(states) // 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") //print the state name with the lowest population value console.log(states[0].name) // someNumbers is an array containing all integers from 1-10 inclusively // Problem 5: using console.log(), a loop,and the modulus operator, print those members of someNumbers that are NOT multiples of 3. someNumbers = d3.range(1,11) console.log("question 5") //loop through someNumbers someNumbers.forEach(function(n){ //est. a condition for non multiples of 3 if (n % 3 !== 0) {console.log(n);} }) </script> </body>
https://d3js.org/d3.v4.min.js