東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
div = html`<div style="background-color:#ff8;">これはdiv要素のテキストです。<br />
<small style="color:orange;">子要素のテキストです。</small></div>`
div.innerHTML
html`${div.children[1].outerHTML}`
d3Div = d3.select(div)
d3Div.innerHTML
d3Div.node().innerHTML
d3Div.select('small').style('color')
bar_chart = {
const width = 400;
const height = 100;
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height);
const rects = svg
.selectAll('rect')
.data(dataset)
.join('rect');
rects
.attr('x', (d, i) => i * 50)
.attr('y', d => height - d)
.attr('width', 40)
.attr('height', d => d);
return svg.node();
}
{
const width = 400;
const height = 100;
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height);
// 背景
svg
.append('rect')
.attr('width', width)
.attr('height', height)
.attr('fill', '#004');
const rects = svg
.selectAll('rect.bar')
.data(dataset)
.join('rect')
.attr('class', 'bar');
rects
.attr('x', (d, i) => i * 50)
.attr('y', d => height - d)
.attr('width', 40)
.attr('height', d => d)
.attr('fill', '#8cc');
return svg.node();
}
{
const width = 400;
const height = 100;
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height);
// 背景
svg
.append('rect')
.attr('width', width)
.attr('height', height)
.attr('fill', '#004');
const rects = svg
.append('g')
.selectAll('rect')
.data(dataset)
.join('rect');
rects
.attr('x', (d, i) => i * 50)
.attr('y', d => height - d)
.attr('width', 40)
.attr('height', d => d)
.attr('fill', '#8cc');
return svg.node();
}
{
const dataset = d3.shuffle(d3.range(40, 200, 10)); // [40, 50, .... 190]のシャッフル
const width = 400;
const height = 100;
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height);
const barPadding = 1; // barの間隔を指定
const rects = svg
.selectAll('rect')
.data(dataset)
.join('rect');
rects
.attr('x', (d, i) => i * (width / dataset.length))
.attr('y', d => height - (d / d3.max(dataset)) * height)
.attr('width', width / dataset.length - barPadding)
.attr('height', d => (d / d3.max(dataset)) * height)
.attr('fill', '#800');
return svg.node();
}
{
const dataset = d3.shuffle(d3.range(40, 200, 10)); // [40, 50, .... 190]のシャッフル
const width = 400;
const height = 100;
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height);
const barPadding = 1; // barの間隔を指定
const rects = svg
.selectAll('rect')
.data(dataset)
.join('rect');
rects
.attr('x', (d, i) => i * (width / dataset.length))
.attr('y', d => height - (d / d3.max(dataset)) * height)
.attr('width', width / dataset.length - barPadding)
.attr('height', d => (d / d3.max(dataset)) * height)
.attr('fill', d => `hsl(220, 50%, ${60 - (d / d3.max(dataset)) * 40}%)`);
return svg.node();
}
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.
