week 5_tutorial_D3_Data_binding
viewof maxN= slider({ min: 0, max: data.length, value: 10, step: 10, title: "Max Records"})
viewof x_attr= select({ options: quant, title: "X- Attributes", value: quant[0]})
chart= {
const target= html`<svg viewBox="0 0 ${width} ${height}">`;
const svg= d3.select(target);
const margin= { left: 40, top: 30, right: 30, bottom: 40}
const g= svg
.append("g")
.attr("class", "gDrawing")
.attr("transform", `translate( ${margin.left}, ${margin.top})`);
//append axxis
//append axis LABELS, require transform on axisLABEL again
// update on grouping
g.append("g")
.attr("class", "xAxis")
.attr("transform", `translate(0, ${height - margin.top - margin.bottom })`)
.append("text")
.attr("class", "axisLabel")
.style("fill", "black")
.attr("transform", `translate( ${width - margin.left - margin.right}, 30)`)
.style("text-anchor", "end");
g.append("g")
.attr("class", "yAxis")
.append("text")
.attr("transform", `translate(10, -20)`)
.attr("class", "axisLabel")
.style("fill", "black")
.style("text-anchor", "middle");
// g.selectAll("circle")
// .data(data.slice(0, maxN))
// .join("circle")
// .attr("cx", d=> x(d[x_attr]))
// .attr("cy", d=> y(d[y_attr]))
// .attr("fill", "blue")
// .attr("r", 5);
return target;
}
update={
// select the class from THE TARGET ID
const g= d3.select(chart).select(".gDrawing");
// NOTE: transitioning to OTHER attributes requires change in LABELS
g.select(".xAxis")
.call( d3.axisBottom(x))
.select(".axisLabel")
.text(x_attr);
g.select(".yAxis")
.call(d3.axisLeft(y))
.select(".axisLabel")
.text(y_attr);
// Selects the attributes for x and y for all together
const move= sel =>
sel
.attr("cx", d => x(d[x_attr]))
.attr("cy", d => y(d[y_attr]));
//timing transition for all the tasks
//
const t= g.transition().duration(1000);
// Three stages: ENTER, UPDATE, and EXIT
// Return the ENTER function
// JOIN circle by rows
const rows= g.selectAll(".rows")
.data(data.slice(0, maxN))
.join(
enter =>
enter
.append("circle")
.attr("class", "rows")
.style("fill", "red")
.call( enter =>
enter.transition(t)
.style("fill", "steelblue"))
.call( update => update.transition(t).call(move)),
update =>
update.style("opacity", 1)
.style("fill", "steelblue")
.call((move)),
exit =>
exit.style("fill", "grey").call( exit =>
exit
.transition(t)
.style("opacity", 0)
.remove()
)
)
.attr("cx", d => x(d[x_attr]))
.attr("cy", d => y(d[y_attr]))
.style("fill", "steelblue")
.attr("r", 5);
// const rows= g.selectAll(".rows")
// // Slice upto MAx records
// .data( data.slice(0, maxN))
// .join(
// enter =>
// enter
// .append("circle")
// .style("fill", "red")
// .call(move)
// .call( enter =>
// enter.transition(t)
// .duration(1000)
// .style("fill", "streetblue")
// ),
// update =>
// update
// .style("fill", "streetblue")
// .style("opacity", 1)
// .call(
// update =>
// update.transition(t)
// .call(move)),
// // transition to opacity 0 and removes the data points
// exit =>
// exit.style("fill", "grey")
// .call( exit =>
// exit
// .transition(t)
// .style("opacity", 0)
// .remove()
// )
// )
// .attr("class", "row")
// .attr("r", "5");
// CLEAN UP: in observation for every celll requires clean up after execution
invalidation.then(
() => rows.interrupt(t)
);
}
x.domain()
// x scale from x-attribute
x= d3.scaleLinear()
//.domain([0, d3.max(data, d => d[x_attr])])
.domain( d3.extent(data, d => d[x_attr] ))
.range([0, width - margin.left -margin.right])
.nice()
y.domain()
y= d3.scaleLinear()
.domain(d3.extent(data, d=> d[y_attr]))
.range([ 0, height -margin.top -margin.bottom])
.nice()
attrs= Object.keys(data [0])
quant= attrs.filter( a => typeof data[0][a] === "number")
categorical= attrs.filter( y => data[0][y] !== "number")
// x_attr= "Beak Length (mm)"
// y_attr= "Beak Depth (mm)"
margin= ({ left: 40, top: 20, bottom: 50, right: 20})
data= vegaData["penguins.json"]()
vegaData= require("vega-datasets@2")
height= 400
d3= require("d3@6")
import { slider, select } from "@jashkenas/inputs"
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.
