Published
Edited
Mar 19, 2019
// 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 = 6
return length * length
}
// Declare an array with square brackets "[]"
visualChannels = ['position', 'length', 'angle', 'area', 'color', 'curvature', 'shape']
// Get the length of an array
visualChannels.length
// Access an item in an array
'Most effective channel: ' + visualChannels[2]
// 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 *
******************************************************************************/
list1 = ['red', 'green', 'blue']
list2 = list1.concat(['cyan', 'magenta', 'yellow', 'black'])
list2.sort()
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
// Declare an object
typesOfData = ({
ordered: [1, 2, 3, 4, 5],
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! *
******************************************************************************/
typesOfData.ordered = [1, 10, 100, 1000]
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
typesOfData.ordered
// 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 cmyk = ['cyan', 'magenta', 'yellow', 'black']
let cmykValues = [[0, 255, 255], [255, 0, 255], [255, 255, 0], [255, 255, 255]]
let cmykHex = []
for (let i = 0; i < cmyk.length; i++) {
let [c, m, y, k] = cmykValues[i]
cmykHex.push(rgb2hex(c, m, y, k))
}
return cmykHex
}
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
// Declare a function with keyword "function"
function int2hex (n) {
return n >= 16 ? n.toString(16) : '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! *
******************************************************************************/
cmykColor2hex = (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(255, 255, 255)
} else {
return "Invalid color!"
}
}
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
cmykColor2hex('magenta')
// 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(cmykColor2hex)
/******************************************************************************
* 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!`
})
// Get the current date and time, in "ticks"
Date.now()
// Make "ticks" human readable
new Date(Date.now())
// Access a specific part of a "date", there are also hour, minute, second and
// millisecond accessible. Be awared that we need to add 1 to the value returned
// from getMonth because it counts from 0, which means January.
{
let now = new Date(Date.now())
// A string encapsulated with backtick "`" is a template string, it will
// evaluate the expression inside the placeholder "${}"
return `Year: ${now.getFullYear()} Month: ${now.getMonth() + 1} Day: ${now.getDate()}`
}
// Create a date object with a specific date. Be reminded, month counts from 0
new Date(2019, 4, 3)
// Javascript does not provide arithematic manipulation for datetime, we need to
// get the value, add/subtract then set the value
{
let oldDate = new Date(2019, 4, 3)
oldDate.setDate(oldDate.getDate() + 2)
return oldDate
}
// Import d3
d3 = require('d3')
// Import vega-embed, "@3" specifies the version we want
vegaEmbed = require("vega-embed@3")
// Import a variable from another Observable notebook
import { vz } from '@gjmcn/vizsla-and-vega-lite'
// Alternatively, it can be imported through the recommended way from the author of vizsla
// vz = {
// const vz = await require('@gjmcn/vizsla');
// vz.Vizsla.prototype.plot = function(opt) {
// return vegaEmbed(this.prep(), opt);
// };
// return vz;
// }
// Load pokemon_tsne.csv from the tutorial repository on GitHub
pokemonBaseStats = d3.csv('https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial06/lab5/pokemon_tsne.csv')
/*
* vizsla makes it intiutive to plot with vega-lite
*
* The following is actually a single Javascript statement, it uses a
* common pattern in Javascript called "method chaining".
*
* "vz(pokemonBaseStats)" returns an object that with many methods,
* including what we are about to use, "width", "height", "title", etc.
*
* Each of these methods returns an object that also has these methods,
* but with a different internal state.
* For example, before calling "height", the internal state is:
* { width: 500 }
* After calling ".height(400)", the method returns an object with state
* { width: 500, height: 400}
*
* And after we called it with all the methods we want, "title", "x",
* "y" and "color", we call the "plot" method, which returns a plot for
* Observable notebook to render.
*/
vz(pokemonBaseStats)
.width(500)
.height(400)
.title('Pokemon base stats t-sne')
.x('x')
.y('y')
.color('is_legendary', 'n')
.plot()
/******************************************************************************
* TODO: *
* Try to plot other attributes of Pokemons with vizsla, and find the trend! *
* For example, change the color channel to "attack"! Don't forget to change *
* the data type as well! It is "q" for quantitative, "o" for ordinal, *
* "n" for nominal and "T" for temporal. *
******************************************************************************/
vz(pokemonBaseStats)
.width(500)
.height(400)
.title('Pokemon base stats t-sne')
.x('x')
.y('y')
.color('attack', 'q')
.plot()
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
// This is the Vega-Lite equivalent to the plot we made with vizsla
// It takes a Javascript object, with all the specification of a plot,
// and returns the exact same visualization.
vegaEmbed({
data: { values: pokemonBaseStats },
width: 500,
height: 400,
title: 'Pokemon base stats t-sne',
mark: 'point',
encoding: {
x: { field: 'x' },
y: { field: 'y' },
color: { field: 'is_legendary' }
}
})
/******************************************************************************
* TODO: *
* Try to plot other attributes of Pokemons with vega-lite! *
* Most of the time, the data type will be inferred automatically, if it does *
* not, you may specify it alongside the field, for example: *
* color: { field: 'attack', type: 'q' } *
******************************************************************************/
vegaEmbed({
data: { values: pokemonBaseStats },
width: 500,
height: 400,
title: 'Pokemon base stats t-sne',
mark: 'point',
encoding: {
x: { field: 'x' },
y: { field: 'y' },
color: { field: 'attack', type: 'q' }
}
})
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
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.
