// 1.1 Create an array containing any 4 strings
a1 = ["snow","ice","ammil","smoored"]
//1.2 Show array's 3rd element, noting that indexing begins at zero
a1[2]
//1.3 Show 1st, 2nd element in array using slice, which excludes last element numbered
a1.slice(0,2)
//1.4 Add new string saying "last" to end of array, show new array
a2 = a1.concat(["last"]);
//...then show above array
a2.slice(0,a2.length)
//1.5 print length of array from 1.4 above
md`Array length is ${a2.length}`
//1.6 Replace last item in the array with the string "new" ...
a3 = a2.slice(0,a2.length-1).concat("new")
//Can't directly change a2 without affecting answer to part 1.4 above, since these arrays are global.
//and display entirety of updated array...
a3.slice(0,a3.length)
//...or updating and printing just the last cell from latest array.
a3[a3.length-1]
array1=['I', 'am', 'learning','Javascript','to','munge','large','datasets','and','visualize','them']
// 2.1 convert the array given at top of question 2 into normal sentence with join(). Sentence is local because otherwise, the later blocks would feed back and change order of preceding blocks
{
let arrayJoin = array1.slice();
return arrayJoin.join(" ")
}
// 2.2 Reverse order of the array
{
let arrayReverse = array1.slice();
return arrayReverse.reverse();
}
// 2.3 Sort array using default sort order in JS. Uppercase letters come before lower case as a result
{
let arraySort = array1.slice();
return arraySort.sort();
}
// 2.4 Case insensitive sort, implemented by comparing all words as lowercase words
{
let arraySortNoCase = array1.slice();
return arraySortNoCase.sort(function (a, b){return a.toLowerCase().localeCompare(b.toLowerCase());});
}
// 2.5 Show array in reverse alphabet order, case insensitive
{
let arrayReverseNoCase = array1.slice();
return arrayReverseNoCase.sort(function (a, b){return b.toLowerCase().localeCompare(a.toLowerCase());});
}
// 3. HTML element listing my five favorite colors and styles background of color name with that color
html`
My five favorite colors are
<span style="background:seagreen;">seagreen</span>,
<span style="background:turquoise;">turquoise</span>,
<span style="background:cornflowerblue;">corn flower blue</span>,
<span style="background:mediumslateblue;">blue-violet</span>, and
<span style="background:yellowgreen;">yellow-green</span>.
`
// 4. Current date and time in markdown, with date+time in italics and bold
md`The current date and time is <b><i>${new Date()}</b></i>`
// 5. Object containing array with my five favorite places. Each place in the array has location, name, lat, long, & country
places_directory =
(
{"places":[
{"name":"Tsingy De Bemaraha", "location":"Bevero", "country":"Madagascar", "latitude": -18.8976649, "longitude": 44.8276213},
{"name":"First Beach", "location":"La Push, Washington", "country":"United States", "latitude":
47.9039595, "longitude": -124.6507798},
{"name":"Calanais Standing Stones", "location":"Stornoway, Isle of Lewis", "country":"United Kingdom", "latitude":58.198163, "longitude":-6.7474227},
{"name":"Middle Temple", "location":"London", "country":"United Kingdom", "latitude":51.512283,
"longitude":-0.1133275},
{"name":"Kuirau Park", "location":"Rotorua", "country":"New Zealand", "latitude":-38.1576567,
"longitude":176.1644097}
]
}
)
// Clone/deep copy the places directory inputted before attempting manipulations; otherwisie the original copy will not survive this function intact. After deep copy is made, manipulate that copy to capitalize first, second listed places and return the copy.
function topCap(placesObj){
let upperObj = JSON.parse(JSON.stringify(placesObj));
upperObj.places[0].name = upperObj.places[0].name.toUpperCase();
upperObj.places[1].name = upperObj.places[1].name.toUpperCase();
return upperObj;
}
topCap(places_directory)
//Migration-related image that links directly to information page on the image
html`
<h1>World refugee migration map: 2012</h1>
<a href = "https://mashable.com/2017/06/06/refugee-crisis-map-explorables/#EahwzUJxvmqi">
<img src = "https://mondrian.mashable.com/uploads%252Fcard%252Fimage%252F499927%252F2c00dfa3-4d10-47f9-b939-94e2bef1bc38.jpg%252F950x534__filters%253Aquality%252890%2529.jpg?signature=ZXVoYE9JCllFAiTPY7n_qvQkbjg=&source=https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com">
</a>
<p>Source: Mashable, discussing project by Carnegie Mellon's CREATE Lab</p>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
