I learn new things everyday. Now focusing on AI and NLP.
Public
Edited
Jan 12, 2023
d3.max([1, 2, 20, 3])
{
const d = [1,2,20,3]
return d3.extent(d)
}
data1 = d3.csv("https://cdn.rawgit.com/vlandham/js_data/master/data/cities.csv")
data1.length
d3.csv("https://cdn.rawgit.com/vlandham/js_data/master/data/cities.csv", d => ({
city : d.city,
state : d.state,
population : +d.population,
land_area : +d["land area"]
}))
// ทำ post-processing อาจจะง่ายกว่า
d3.tsv("https://cdn.rawgit.com/vlandham/js_data/master/data/animals.tsv")
d3.json("https://cdn.rawgit.com/vlandham/js_data/master/data/employees.json")
/*
d3.request(url)
.mimeType("application/xml")
.response(function(xhr) { return xhr.responseXML; });
*/
// Combine data
{
let dataset_1 = [{
'type': 'boat',
'model': 'Ocean Queen 2000'
}, {
'type': 'car',
'model': 'Ferrari'
}]
let dataset_2 = [{
'price': 23202020,
'weight': 5656.9
}, {
'price': 59988,
'weight': 1.9
}]
return _.merge(dataset_1, dataset_2)
}
data = [
{"city":"seattle", "state":"WA", "population":652405, "land_area":83.9},
{"city":"new york", "state":"NY", "population":8405837, "land_area":302.6},
{"city":"boston", "state":"MA", "population":645966, "land_area":48.3},
{"city":"kansas city", "state":"MO", "population":467007, "land_area":315}
]
d3.max(data, d => d.land_area)
d3.mean(data, d=>d.land_area)
// iterate with forEach
{
let count = 0;
data.forEach(function(d) {
count += 1;
});
return count;
}
// cloning, non-deep
{
let dataObject = ({"name":"Carl", "age":"48", "salary":"12300"})
//
let c = _.clone(dataObject);
c.age = +c.age;
c.salary = +c.salary;
return c;
}
// spread to clone
{
let dataArray = [{name:"Saul", age: 55}, {name: "Carl", age: 48}]
//
let a = [...dataArray];
a.push({name: "Mary", age: 34});
return a;
}
// map ก็ใช้แปลงได้
data.map(function(d,i) {
return {
name: d.city.toUpperCase(),
index: i + 1,
rounded_area: Math.round(d.land_area)
};
})
// filter
data.filter(d => d.land_area > 200)
// sort, need to clone first
{
let d = [...data];
d.sort(function(a,b) {
return b.population - a.population;
});
return d;
}
// chaining
data.filter(d => d.population > 500000)
.sort((a,b) => a.population - b.population)
.map(d => d.city)
expenses = [{"name":"jim","amount":34,"date":"11/12/2015"},
{"name":"carl","amount":120.11,"date":"11/12/2015"},
{"name":"jim","amount":45,"date":"12/01/2015"},
{"name":"stacy","amount":12.00,"date":"01/04/2016"},
{"name":"stacy","amount":34.10,"date":"01/04/2016"},
{"name":"stacy","amount":44.80,"date":"01/05/2016"}
]
// group by name
/* nest is depreceated
d3.nest()
.key(d => d.name)
.entries(expenses) */
d3.group(expenses, d=>d.name)
d3.version // 7 is just for node.js compat
// agg-func first
d3.rollup(expenses, v=>v.length, d=>d.name)
// expense average
d3.rollup(expenses,
v => d3.mean(v, d=>d.amount),
d => d.name) // group by name
// return many agg
d3.rollup(expenses,
v => ({
count: v.length,
total: d3.sum(v, d => d.amount),
avg: d3.mean(v, d => d.amount)
}),
d => d.name // group by
)
"Hello There!"[6]
"Hello There!".slice(6,11)
{ // concat with +
let orderNum = 8;
return "You are number " + (orderNum + 1) + " in line.";
}
// strip
_.trim(' a ')
// found
"A man, a plan, a canal".indexOf("man") !== -1
// replace
"A man, a plan, a canal".replace("canal", "")
person = ({ name : "Birdman", occupation: "Imaginary Super Hero" })
// template literal
`<div class="person">
<span class="name">${person.name}</span>
<span class="occupation">${person.occupation}</span>
</div>`
// regex ข้ามไหม. จะใช้ค่อยอ่าน
str = "how much wood would a woodchuck chuck if a woodchuck could chuck wood"
/wood/.test(str)
str.match(/wood/)
str.match(/wood/g) // หาหลายอัน
str.match(/wood.*?\b/g) // คำขึ้นต้นด้วย wood
str.replace(/wood/g, 'nun')
// d3 time parsing, moment.js
parser = d3.timeParse("%m/%d/%Y")
parser("11/12/2015") // วันเลื่อนเพราะ เวลาไทย
// ให้แสดงให้ถูก คือแสดง local แทน UTC
parser("11/12/2015").toLocaleString()
// .toString() ก็สั้นดี
parser("11/12/2015").toString()
parser("11/12/2015").toLocaleDateString()
d3.timeParse("%A, %B %-d, %Y")(
"Wednesday, November 12, 2014")
d3.timeParse("%m/%y")("12/14") // default 1st
d3.timeParse("%m/%d/%Y %H:%M:%S %p")("1/2/2014 8:22:05 AM")
// shorthand
d3.timeParse("%x %X")("1/2/2014 8:22:05 AM")
_.isEqual({tea: 'green'}, {tea: 'green'})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
