Public
Edited
Feb 16
url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vR_a8mD7I3cNHg0oVtckTZ9H1S-Hcn9q3msHOELP1sj-hoHXSveFF1v2cyegk5Bi49wYtIRIgXmh11B/pub?gid=0&single=true&output=tsv"
dataset = d3.tsv(url, d3.autoType)
Inputs.table(dataset)
a = {
const a = new d3.Adder()
for(let i = 0; i <3; i++) {
a.add(0.1)
}
return a
}
a.valueOf()
d3.fsum([0.1,0.1])
d3.fsum(dataset,(d) => d.Views)
d3.cumsum([0.1,0.1,0.1])
values = d3.fcumsum(dataset,(d) => d.Views)
bin = d3.bin().thresholds((values) => [d3.median(values)]);
ex_bin = bin(values)
binThresholdFreedmanDiaconis = d3.bin().thresholds(d3.thresholdFreedmanDiaconis);
binThresholdFreedmanDiaconis(values)
binThresholdScott = d3.bin().thresholds(d3.thresholdScott);
binThresholdScott(values)
binThresholdSturges = d3.bin().thresholds(d3.thresholdSturges);
binThresholdSturges(values)
cents = d3.ticks(0, 100, 1000)
index = d3.bisect(cents, Math.PI)
sorted = {
const sorted = []
do {
const x = Math.random()
const y = Math.random() - 1
const i = d3.bisect(sorted, x)
sorted.splice(i, 0, x,y)//splice(start, deleteCount, item1,)start:インデックス、deleteCount: 減らす要素の数、挿入するアイテム
yield sorted
} while (sorted.length < 255)
}
items = [0, 1, 1, 2, 3]
d3.bisect(items,1)//6が挿入される位置
d3.bisectLeft(items,1)//第2引数が挿入される位置(同じ数がある場合、左側に挿入する)
d3.bisectRight(items,1)//第2引数が挿入される位置(同じ数がある場合、右側に挿入する)
d3.bisectCenter(items,1)
pos = [d3.bisectLeft(items,1),d3.bisectRight(items, 1)]
data = Array.from(
(function*(){
let date = new Date("2025-02-10"),close = 98.84
for(let i = 0; i < 100; i++){
//if (i % 7 > 5) continue;
date = new Date(date.setDate(date.getDate() + 1))
close = +(close + Math.random() - 0.485).toFixed(3)
yield{date, close}
}
})()
)
//
bisect = d3.bisector(d => d.date)
bisect.right(data, new Date(2025, 4, 9))
d3.bisect(items,1,2,3)//配列内の2~3の間にソートされた状態で1が挿入される位置。
{
const numbers = d3.cumsum({length:100}, () => Math.random() -0.5)
const bluredNum = d3.blur(numbers.slice() ,0.5)//値に対してガウスぼかしで近似する
return {numbers,bluredNum}
}
{
const matrix = {
width: 4,
height: 3,
data: [
1, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 1,
],
}
const blured = d3.blur2(matrix, 2
)
return blured
}
viewof r = Inputs.range([0, 10], {label: "Radius", step: 0.01, value: 1})
radius = {
const sorted = []
do {
const x = Math.random()
const y = Math.random() + 1
const i = d3.bisect(sorted, x)
sorted.splice(i, 0, x,y)//splice(start, deleteCount, item1,)start:インデックス、deleteCount: 減らす要素の数、挿入するアイテム
yield sorted[1] * 50
} while (sorted.length < 255)
}
pixels = ({
width: 40,
data: Array.from({length: 40 * 20},(_, i) => (i % 40) * Math.random())
})
blurred = d3.blur2({
data:pixels.data.slice(),
width: pixels.width
},
0.5)
Plot.plot({
caption: "blurred",
marks:[Plot.cell(blurred.data,{
x:(d,i) => i % pixels.width,
y:(d,i) => Math.floor( i / pixels.width),
fill:(d) => d
}),Plot.frame()
],
padding: 0,
round: false,
color: {scheme: "greys", domain: [0, 20]},
height: 200,
width: 300,
axis: null
})
country = d3.group(dataset,(d) => d.country)
flatCountry = d3.flatGroup(dataset,(d) => d.country)
country.get("アイスランド")
countryAndRelease = d3.group(dataset, (d) => d.country, (d) =>d.year2)
countryAndRelease.get("イギリス").get(1997)
country2 = d3.groups(dataset, (d) => d.country);
countryCount
= d3.rollup(dataset, (D) => D.length, (d) => d.country);
countryCount.get("イギリス")
countryCounts = d3.rollups(dataset, (D) => D.length, (d) => d.country);
index その配列特有の値をインデックスにできる
Artist = d3.index(dataset, (d) => d.Artist);
Artist.get("PSY").Video_title
Artists = d3.indexes(dataset, (d) => d.Artist);
d3.groupSort(dataset, (D) => d3.median(D, (d) => d.Views), (d) => d.country)
{
const map = new Map();
map.set(new Date("2021-01-01"), 42);
return map.get(new Date("2021-01-01"));
}
valueByDate = {const valueByDate = new d3.InternMap([
[new Date("2021-01-01"), 42],
[new Date("2021-01-01"), 43],
[new Date("2022-01-01"), 12]
]);
valueByDate.set(new Date("2021-01-02"), 43)
return valueByDate
}
d3.difference([0, 1, 2, 0], [2])
d3.union([0, 2, 1, 0],[1,4])
d3.superset([0, 2, 1, 3, 0], [1, 3]) // true
d3.disjoint([1,3],[2,4])
array = [39,1,1000,15,39]
array.sort(d3.ascending)
array.sort(d3.descending)
d3.permute(["a","b","c"],[1,2,0])
numbers =
dataset.map(data => data.Views);
dataset.map(data=>d3.permute(data,["Video_title"]))
d3.quickselect(numbers, 0)
d3.reverse(numbers)
d3.shuffle(numbers)
d3.sort(numbers)
d3.count(numbers)
d3.least(dataset,(a,b) => a.Views - b.Views)
d3.extent(numbers)
result = [d3.sum(numbers), d3.mean(numbers),d3.median(numbers)];
d3.quantile(numbers,0.75)
d3.rank(numbers)
variance配列内の平均値の周りにどれだけデータが散らばっているかを示す。
d3.variance(array)
d3.deviation(numbers)
d3.every(numbers,x => x & 700520)
d3.some(numbers,x => x & 1)
d3.ticks(1,9,7)
d3.nice(1, 9, 5)
d3.range(49).map((d) => d / 49)
d3.cross([1,2],["x","y"])
d3.merge([array,numbers])
artists =
dataset.map(data => data.Artist);
d3.transpose([numbers,artists])
d3.zip(numbers,artists)
d3.filter(dataset,(d) => d.Artist)
d3.filter(new Set([0, 2, 3, 4]), (d) => d & 2)
d3.map(new Set([0, 2, 3, 4]), (d) => d & 1)
d3.reduce(new Set([0, 2, 3, 4]), (p, v) => p + v, 0)
csvExample = d3.csvParse("foo,bar\n1,2") // [{foo: "1", bar: "2"}, columns: ["foo", "bar"]]
tsvExmaple = d3.tsvParse("foo\tbar\n1\t2")
d3.csvFormat(csvExample)
d3.tsvFormat(tsvExmaple)
d3.dsvFormat("|").parse("foo|bar\n1|2")
csv = d3.dsvFormat(",")
{
const f = d3.format(".1f");
const number = []
for (let i = 0; i < 10; ++i) {
number.push(f(i * 0.1))
}
return number
}
Array.from({length:10},Math.random)
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.
