The avatar for @sandraviz
Sandraviz
Olá! My name is Sandra and I work with Dataviz in beautiful Lisbon 🙋🏼‍♀️ I'm a visual analyst and researcher with a passion for data storytelling and statistics to uncover patterns in human behaviour and societies 💞
Public
Edited
May 30, 2024
Fork of A Minimal Introduction to JavaScript and Observable
•
4 forks
3 stars
D3.JS COURSE | 30 DAYS
30 Days of D3 DatavizINTRO TO D3.JSINTRO TO OBSERVABLEINTRO TO HTML, SVG & CSS
INTRO TO JAVASCRIPT
d3.select.append( )VENN DIAGRAMd3.select.data( )d3.csv( )SPOTIFY | ARTIST | SIMPLE CHARTHISTOGRAMAIRBNB BERLIN | DATADATA SOURCESd3.scale( )SIMEPLE SCALINGSCALED CIRCLES70s CAR BUBBLE CHARTTHE POWER OF SCALEd3.axis( )BARCODE PLOTSCATTER PLOT WITH AXESSPOTIFY | ARTISTS | D3.JS | Step 11. ASSIGNMENTTHREATENED SPECIES | BIRDS 2020d3.transition( )SIMPLE TRANSITIONHTML BUTTONSVISUAL ENCODING BUTTON | HTMLTHREATENED SPECIES - BIRDS 2020 ANIMATEDANIMATED COLORSPOTIFY | ARTISTS | D3.JS | Step 2ANIMATED SCATTER PLOTd3.tip( )SPOTIFY | ARTISTS | D3.js | Step 3d3.hexbinFROM SCATTER TO HEXBINSPOTIFY | GENRESSPOTIFY | YEARS ARQUERO.JSTHE UNWELCOMED ARQUERO.JSINTRO TO ARQUERO.JSGLOBAL TEMPERATURE TRENDS, 1880-2022 ARQUERO.JSGLOBAL TEMPERATURE MONTHLY, 1880-2022 D3.JSUSA GAS PRICE 2000-22SPOTIFY | ARTISTS ARQUERO.JSd3.line( )d3.area( )INTERACTIVE TIMEFRAMEGLOBAL TEMPERATURES ANOMALIESANIMATED LINE CHARTCSS PATH ANIMATIONANIMATED LINECOVID | MOBILITY DATA ON CITIESGLOBAL TEMPERATURES DAILY 1979 - 2024 | D3.JSCONSUMPTION EMISSION2. ASSIGNMENT
Also listed in…
NOVA - Dataviz ferramentas
Visualización dinamica 2023
Insert cell
Insert cell
Insert cell
42
Insert cell
Insert cell
+"1.23"
Insert cell
Insert cell
+"Am I a number?"
Insert cell
Insert cell
Insert cell
(1 + Math.sqrt(25)) / 2
Insert cell
Math.random()
Insert cell
Insert cell
true
Insert cell
!false
Insert cell
!0
Insert cell
Insert cell
false
Insert cell
!true
Insert cell
!1
Insert cell
Insert cell
true || false
Insert cell
Insert cell
true && false
Insert cell
Insert cell
2 + 2 === 3
Insert cell
2 + 2 !== 4
Insert cell
Insert cell
2 < 1
Insert cell
4 >= 3 + 1
Insert cell
"I" < "you" // whoa
Insert cell
Insert cell
1 == "1"
Insert cell
"1" + 1 == 11
Insert cell
Insert cell
"1" + 1 === 11
Insert cell
Insert cell
"I am a string."
Insert cell
Insert cell
'I am also a string.'
Insert cell
Insert cell
"Hola".length
Insert cell
Insert cell
'better' + ' together'
Insert cell
Insert cell
`A backtick-quoted (\`) string with ${'javascript'.toUpperCase() + ' code'} inside it.`
Insert cell
Insert cell
"STOP SHOUTING!".toLowerCase()
Insert cell
' white space surrounds me '.trim()
Insert cell
Insert cell
"slice".slice(2) // slice from the left
Insert cell
"dice".slice(-2) // now slice from the right
Insert cell
"baby".slice() // now turn it out
Insert cell
Insert cell
"comma,separated,values".split(',')
Insert cell
Insert cell
Insert cell
Insert cell
Date.now()
Insert cell
// Make "ticks" human readable

new Date(Date.now())
Insert cell
{
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()}`;
}
Insert cell
// Create a date object with a specific date. Be reminded, month counts from 0

new Date(2019, 4, 3)
Insert cell
// 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;
}
Insert cell
Insert cell
array = [4, 6, 5, 9]
Insert cell
array.length
Insert cell
array[0]
Insert cell
array[1]
Insert cell
array[2]
Insert cell
array.indexOf(9)
Insert cell
array.slice(2)
Insert cell
array.slice(-2) // now slice from the right
Insert cell
array.slice(1, -2) // now slice from both sides
Insert cell
array.concat('d') // combine values into a new array
Insert cell
Insert cell
object = ({ key: "value", anotherKey: "anotherValue" })
Insert cell
Insert cell
object.key
Insert cell
object.anotherKey
Insert cell
Insert cell
Object.assign(
{ target: "me", value: 0 },
{ source: "thing1", value: 1 },
{ source: "thing2", value: 2 }
)
Insert cell
Insert cell
data = [
{city: "Seattle", annual_hours_sunshine: 2163, annual_precipitation: 37.13},
{city: "New York", annual_hours_sunshine: 2677, annual_precipitation: 46.23},
{city: "Chicago", annual_hours_sunshine: 2504, annual_precipitation: 39.04}
]
Insert cell
data[0]
Insert cell
Insert cell
function addMe(a, b) {
return a + b;
}
Insert cell
Insert cell
addMe(4, 4)
Insert cell
addMe('better', ' together')
Insert cell
addMe(1, '1')
Insert cell
Insert cell
addMe2 = (t, b) => t - b
Insert cell
addMe2(8, 7)
Insert cell
Insert cell
precip = (y) => y.annual_hours_sunshine
Insert cell
precip(data[0])
Insert cell
Insert cell
Insert cell
function int2hex(n) {
return n >= 16 ? n.toString(16) : "0" + n.toString(16);
}
Insert cell
// Alternatively, we can declare a function using arrow

rgb2hex = (r = 0, g = 0, b = 0) => {
return "#" + int2hex(r) + int2hex(g) + int2hex(b);
}
Insert cell
Insert cell
{
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;
}
Insert cell
Insert cell
{
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;
}
Insert cell
Insert cell
["red", "green", "blue"].map(rgb2hex)
Insert cell
Insert cell
data
Insert cell
Insert cell
hoursPerYear = 365 * 24
Insert cell
Insert cell
data.map((d) => d.annual_hours_sunshine / hoursPerYear) // d is for datum
Insert cell
Insert cell
Insert cell
data.filter((d) => d.annual_precipitation < 40).map((d) => d.city)
Insert cell
Insert cell

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.
Learn more