// 1. Create an array containing any 4 strings.
raAnimals = ["cat", "dog", "bird", "horse"]
// 2. Show the 3rd item in the list.
raAnimals [2]
// 3. Show the 1st and 2nd item in the list using the slice method.
raAnimals .slice(0,2)
// 4. Add a new string with text “last” to the end of the array and show the array.
listLast = {
let listLast = raAnimals .concat("last")
return listLast
}
// 4. Add a new string with text “last” to the end of the array and show the array.
raLast = [raAnimals + ",last"]
// 5. Get the array length of the first list and print it.
raAnimals .length
// 5. Get the array length of the second list and print it.
listLast .length
// 6. Replace the last item in the array with the string “new” and show it on a cell
listNew = {
let listNew = listLast;
listNew .splice(4,1, "new") // The first number indicates the position of the word you want to replace. The second number indicates the number of words to replace.
return listNew
}
array1=['I', 'am', 'learning','Javascript','to','munge','large','datasets','and','visualize','them']
// 1. Convert the array into a normal sentence with join(), then show it.
array1 .join( " " ) // I do not know why is the join changing the order
// 2. Reverse the order of this list [“them”,”visualize”,…]
array1 .reverse()
// 3. Now sort the list using the default sort order in javascript
array1 .sort()
// 4. Modify the sort to do a case insensitive alphabetic sort
array2 = array1 .sort(function (x, y) {
return x.toLowerCase() .localeCompare(y.toLowerCase());
}) // x and y are function's placeholders.
// 5. Now show the array in reverse alphabetic sort order.
array2 .reverse()
// 3.
html`
<html lang="en">
<!-- HEAD element containing meta information, style, and links -->
<head>This is a bullet list of my five favorite <i>colours</i>:
</head>
<!-- UL defines an unordered list -->
<ul>
<li><span style="background:yellow;">Yellow</spam></li>
<li><span style="background:lightgreen;">Green</spam></li>
<li><span style="background:blue;">Blue</spam></li>
<li><span style="background:red;">Red</spam></li>
<li><span style="background:pink;">Pink</spam></li>
</ul>
</html>
`
html`
<html lang="en">
<!-- HEAD element containing meta information, style, and links -->
<head>This is an ordered list of my five favorite colors:
</head>
<!-- OL defines an ordered list -->
<ol>
<li><span style="background:lightgreen;">Green</spam></li>
<li><span style="background:blue;">Blue</spam></li>
<li><span style="background:pink;">Pink</spam></li>
<li><span style="background:yellow;">Yellow</spam></li>
<li><span style="background: rgb(255, 0, 0);">Red</spam></li>
</ol>
</html>
`
html`
<html lang="en">
<!-- HEAD element containing meta information, style, and links -->
<head>These are different headers with colored backgrouds:</head>
<!-- BODY element containing all document content elements -->
<body>
<h1 style="background:lightgreen; text-align: right; color: white;">GREEN</h1>
<h2 style="background:blue; text-align: right; color: lightgreen;">BLUE</h2>
<h3 style="background:pink; text-align: right; color: blue;">PINK</h3>
<h4 style="background:yellow; text-align: right; color: pink;">YELLOW</h4>
<h5 style="background:red; text-align: right; color: yellow;">RED</h5>
</body>
</html>
`
// 4.
md`Today is ** *${new Date(now)}* **.
`
// 5.
myFavoritePlaces = [
{location: 'Sao Paulo',
name: 'First Home',
latitude: '-23.555649',
longitude: '-46.694083',
country: 'Brazil',
},
{location: 'Bogota',
name: 'Second Home',
latitude: '4.697711',
longitude: '-74.027996',
country: 'Colombia',
},
{location: 'Cambridge',
name: 'Third Home',
latitude: '42.355279',
longitude: '-71.103171',
country: 'United States',
},
{location: 'Rio de Janeiro',
name: 'Christ',
latitude: '-22.951580',
longitude: '-43.210487',
country: 'Brazil',
},
{location: 'Foz do Iguaçu',
name: 'Cataratas do Iguaçu',
latitude: '-25.653278',
longitude: '-54.445963',
country: 'Brazil',
},
]
myFavoritePlaces[0].name
myFavoritePlaces[3].location.toUpperCase()
// 6.
function firstSecond (array) {
return array[0].name.toUpperCase() + ", " + array[1].name.toUpperCase()
}
firstSecond(myFavoritePlaces)
// 7.
html`<a href="https://www.olds2030.org/2018/03/cartografia-diaspora-venezolana-2017.html"><img src="https://1.bp.blogspot.com/-pFek9KL285Q/WrBu4eTIBUI/AAAAAAAAWOU/IG9106nQvFo6I1-dnUqH5jyIwYelXPnGACLcBGAs/s1600/Migraci%25C3%25B3n%2BVenezolana%2Ben%2BAm%25C3%25A9rica%2BLatina.jpg"> />`
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.