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 = 2
// 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 colorList1 = ['red', 'green', 'blue']
var colorList2 = ['cyan', 'magenta', 'yellow', 'black']
var colorList = colorList1.concat(colorList2)
return colorList.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 *
******************************************************************************/
// 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! *
******************************************************************************/
{
var colorList = ['cyan', 'magenta', 'yellow', 'black']
let hex = []
for (let i = 0; i< colorList.length; i++) {
let color = colorList[i]
if (color === 'cyan') {
hex.push(rgb2hex(0, 255, 255))
} else if (color === 'magenta') {
hex.push(rgb2hex(255, 0, 255))
} else if (color === 'yellow') {
hex.push(rgb2hex(255, 255, 0))
} else {
hex.push(rgb2hex(255, 255, 255))
}
}
return hex
}
/******************************************************************************
* 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! *
******************************************************************************/
takesColor = (name) => {
if (name === 'cyan') {
return (rgb2hex(0, 255, 255))
} else if (name === 'magenta') {
return (rgb2hex(255, 0, 255))
} else if (name === 'yellow') {
return (rgb2hex(255, 255, 0))
} else {
return (rgb2hex(255, 255, 255))
}
}
/******************************************************************************
* 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(takesColor)
/******************************************************************************
* 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 attack')
.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 attack',
mark: 'point',
encoding: {
x: { field: 'x' },
y: { field: 'y' },
color: { field: 'attack', type: 'q' }
}
})
/******************************************************************************
* END OF YOUR CODE *
******************************************************************************/
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.