Public
Edited
Sep 26, 2023
md`# Student Submission Info
# Student Name: TANG XIN YI
# Student Email:xinyi.tang.2020@scis.smu.edu.sg
`
// Try to change the value of "radius" and hit "shitf+enter". You will see the "area" cell changes automatically
radius = 4
// The variable "area" depends on "radius", its value will be updated whenever "radius" changes
area = Math.PI * Math.pow(radius, 2)
{
let length = 3
return length * length
}
// Declare an array with square brackets "[]"
visualChannels = ['position', 'length', 'angle', 'area', 'color', 'curvature']
// Get the length of an array
visualChannels.length
// Access an item in an array
'Most effective channel: ' + visualChannels[0]
// Concatenate two arrays
moreVisualChannels = visualChannels.concat(['color hue', 'color saturation', 'color luminance'])
// To sort an array, we use "sort"
moreVisualChannels.sort()
/******************************************************************************
* TODO: *
* Try to create two lists of colors, then concatenate them, and sort in *
* alphabetical order! *
* The two lists are: *
* red, green, blue *
* cyan, magenta, yellow, black *
******************************************************************************/
{
var color1 = ["red","green","blue"]
var color2 = ["cyan","magenta","yellow","black"]
var newColor = color1.concat(color2)
return newColor.sort()
}
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
// Declare an object
typesOfData = ({
ordered: [1, 2, 3, 4, 5, 6],
categorical: ['strawberry', 'apple', 'orange']
})
// To access an attribute of an object, we simply use "."
typesOfData.categorical
// To modify an attribute of an object, we simply assign a value to it
{
let typesOfData = {
ordered: [1, 2, 3, 4, 5],
categorical: ['strawberry', 'apple', 'orange']
}
typesOfData.categorical = ['strawberry', 'apple', 'orange', 'banana']
return typesOfData.categorical
}
/******************************************************************************
* TODO: *
* Try to modify the values of the "ordered" attribute to 1, 10, 100, 1000! *
******************************************************************************/
{
let typesOfData = {
ordered:[1,2,3,4,5],
categorical:["strawberry","apple","orange"]
}
typesOfData.ordered = [1,10,100,1000]
return typesOfData.ordered
}
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
// If statement
{
let color = 'cyan'
let hex = ''
if (color === 'cyan') {
hex = rgb2hex(0, 255, 255)
} else if (color === 'magenta') {
hex = rgb2hex(255, 0, 255)
} else if (color === 'yellow') {
hex = rgb2hex(255, 255, 0)
} else {
hex = rgb2hex(255, 255, 255)
}
return hex
}
// Loop through items in an array
{
let rgb = ['red', 'green', 'blue']
let rgbValues = [[255, 0, 0], [0, 255, 0], [0, 0, 255]]
let rgbHex = []
for (let i = 0; i < rgb.length; i++) {
let [r, g, b] = rgbValues[i]
// append an item to the array
rgbHex.push(rgb2hex(r, g, b))
}
return rgbHex
}
/******************************************************************************
* TODO: *
* Try to find the hex codes of cyan, magenta, yellow and black! *
******************************************************************************/
{
let rgb = ["cyan","magenta","yellow","black"]
let rgbValues = [[0,255,255],[255,0,255],[255,255,0],[255,255,255]]
var rgbHex = []
for(let i = 0; i < rgb.length;i++ ){
let [r,g,b] = rgbValues[i]
rgbHex.push(rgb2hex(r,g,b))
}
return rgbHex
}
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
// Declare a function with keyword "function"
function int2hex (n) {
if (n >= 16) {
return n.toString(16);
}
else{
return '0' + n.toString(16);
}
}
// Calling the "int2hex" function
int2hex(255)
// Alternatively, we can declare a function using arrow
rgb2hex = (r = 0, g = 0, b = 0) => {
return '#' + int2hex(r) + int2hex(g) + int2hex(b)
}
rgb2hex(64, 224, 208)
// Converting color name to hex code
function rgbColor2hex (color) {
if (color === 'red') {
return rgb2hex(255, 0, 0)
} else if (color === 'green') {
return rgb2hex(0, 255, 0)
} else {
return rgb2hex(0, 0, 255)
}
}
rgbColor2hex('red')
/******************************************************************************
* TODO: *
* Try to use arrow function expression to create a function that takes color *
* name as input and return hex code for cyan, magenta, yellow and black! *
* cyan: (0, 255, 255), magenta: (255, 0, 255) *
* yellow: (255, 255, 0), black: (0, 0, 0) *
******************************************************************************/
function rgbColorToHex (color){
if(color === 'cyan'){
return rgb2hex(0,255,255)
} else if (color === 'magenta'){
return rgb2hex(255,0,255)
} else if (color === 'yellow'){
return rgb2hex(255,255,0)
}else if (color === 'black'){
return rgb2hex(0,0,0)
}
}
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
// Built-in array function "map"
// It calls the "rgbColor2hex" function for each item in the array
['red', 'green', 'blue'].map(rgbColor2hex)
/******************************************************************************
* TODO: *
* Try to map the "cyan", "magenta", "yellow", "black" over the function you *
* have created above to get their hex codes! *
******************************************************************************/
["cyan", "magenta", "yellow", "black"].map(rgbColorToHex)
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
function getDataFromServer (color, callback) {
setTimeout(function () {
callback(rgbColor2hex(color))
}, 5000)
}
// Run this cell, the value of "colorInHex" will be updated in 5 seconds
mutable colorInHex = 'Waiting for server...'
getDataFromServer('red', function (hex) {
mutable colorInHex = `The hex code of "Red" is ${hex}. Run the cell below to try again!`
})
// Import d3, "@5" specifies the version we want
d3 = require('d3@5')
// Import vega-embed
vegaEmbed = require("vega-embed@6")
// Import vega-lite-api from another Observable notebook (https://observablehq.com/@vega/vega-lite-api)
import { vl } from '@vega/vega-lite-api'
// Load pokemon_tsne.csv from the tutorial repository on GitHub
pokemonBaseStats = d3.csv('https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial06/lab6/pokemon_tsne.csv')
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.
