main = html`<h1>Examples</h1>`
Published
Edited
May 26, 2021
1 fork
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const bar = svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(data)
.join("rect")
.style("mix-blend-mode", "multiply")
.attr("x", d => x(d.name))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
const gx = svg.append("g")
.call(xAxis);
const gy = svg.append("g")
.call(yAxis);
return Object.assign(svg.node(), {
update(order) {
x.domain(data.sort(order).map(d => d.name));
const t = svg.transition()
.duration(750);
bar.data(data, d => d.name)
.order()
.transition(t)
.delay((d, i) => i * 20)
.attr("x", d => x(d.name));
gx.transition(t)
.call(xAxis)
.selectAll(".tick")
.delay((d, i) => i * 20);
}
});
}
update = chart.update(order)
data = d3.csvParse(await FileAttachment("Example Data - alphabet (3).csv").text(), ({Name, Score, Gender,LikesApples,LikesTennis ,Statement}) => ({name: Name, value: +Score, gender: Gender, likesApples:LikesApples,likesTennis:LikesTennis , statement:Statement}))
x = d3.scaleBand()
.domain(data.map(d => d.name))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
height = 500
margin = ({top: 20, right: 0, bottom: 30, left: 40})
chart2 = {
const root = treemap(data);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif");
const node = svg.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
const column = node.filter(d => d.depth === 1);
column.append("Name")
.attr("x", 3)
.attr("y", "-1.7em")
.style("font-weight", "bold")
.text(d => d.data[0]);
column.append("text")
.attr("x", 3)
.attr("y", "-0.5em")
.attr("fill-opacity", 0.7)
.text(d => format(d.value));
column.append("line")
.attr("x1", -0.5)
.attr("x2", -0.5)
.attr("y1", -30)
.attr("y2", d => d.y1 - d.y0)
.attr("stroke", "#000")
const cell = node.filter(d => d.depth === 2);
cell.append("rect")
.attr("fill", d => color(d.data[0]))
.attr("fill-opacity", (d, i) => d.value / d.parent.value)
.attr("width", d => d.x1 - d.x0 - 1)
.attr("height", d => d.y1 - d.y0 - 1);
cell.append("text")
.attr("x", 3)
.attr("y", "1.1em")
.text(d => d.data[0]);
cell.append("text")
.attr("x", 3)
.attr("y", "2.3em")
.attr("fill-opacity", 0.7)
.text(d => format(d.value));
return svg.node();
}
treemap = data => d3.treemap()
.round(true)
.tile(d3.treemapSliceDice)
.size([
width - margin.left - margin.right,
height - margin.top - margin.bottom
])
(d3.hierarchy(d3.group(data, d => d.x, d => d.y)).sum(d => d.value))
.each(d => {
d.x0 += margin.left;
d.x1 += margin.left;
d.y0 += margin.top;
d.y1 += margin.top;
})
format = d => d.toLocaleString()
color = d3.scaleOrdinal(d3.schemeCategory10).domain(data.map(d => d.y))
table = {
const svg = d3.create("svg")
.attr("font-size", "11pt")
.attr("viewBox", [0, 0, width, 260]);
yield svg.node();
new SVGTable(svg)
.size([width, 250])
.fixedRows(0)
.fixedColumns(2)
.rowsPerPage(10)
.defaultNumberFormat(",.0d")
.style({ border: false })
.data(data)
.render();
}
import {SVGTable} from "@analyzer2004/svgtable"
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.
