// 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>
`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.