Lab 2: Data Binding, Scales, and Axes / Columbia Dataviz

Columbia Dataviz

Workspace

Public

Edited

Feb 12

Fork of Lab 2: Data Binding, Scales, and Axes

{

const div = document.createElement("div");

div.innerHTML = "Hello, world!";

return div;

}

{

const p = d3.selectAll("p");

// p.style("color", "red"); // Uncomment this line and run the code!

// p.style("color", null); // Uncomment this line to clear the color.

return p;

}

// Now you try it: change all <h2> elements on this page to a green color

{

const h2 = d3.selectAll("h2");

h2.style("color", "green");

h2.style("color", null);

return h2;

}

{

const div = d3.create("div");

div.html("Hello, world!");

// make this div's hello world text white and background color black

div.style("color", "white")

div.style("background-color", "black")

return div.node();

}

d3.create("span")

.style("color", "red")

.html("Hello, world!")

.node()

// create another div with words of your choice, white text, and black background color, all one command (chained syntax)

d3.create("div").style("color", "white").style("background-color", "black").html("This is a div!").node()

data = [4, 8, 23, 15, 32, 19]

html`<svg viewBox="0,0,1000,100" width="1000" height="100">

</svg>`

html`<svg id="basiccircles" viewBox="0,0,1000,100" width="1000" height="100">

</svg>`

// run this

d3.select('#basiccircles')

.selectAll('circle') // we can select the circles...

.data(data) // and then join the array to it...

.attr('r', d => d); // and then set each circle's `r` to the corresponding data element's value

html`<svg id="walletcircles" viewBox="0,0,1000,100" width="1000" height="100">

</svg>`

// your d3 code to bind and modify wallet circles

d3.select('#walletcircles')

.selectAll("circle")

.data(wallets)

.attr('r', d => d.size)

{

const svg = d3.create("svg")

.attr("width", 1000)

.attr("height", 100);

// create 1 circle

svg.append("circle")

.attr("fill", "purple")

.attr("cx", 50)

.attr("cy", 50)

.attr("r", 25);

return svg.node();

}

{

const svg = d3.create("svg")

.attr("width", 1000)

.attr("height", 100);

// --- bind circle to data

svg.selectAll("circle")

.data(data)

.enter().append("circle")

.attr("cx", (d, i) => (i+1)*50 )

.attr("cy", 50)

.attr("r", d => d);

// --- alternatively, using ".join"

// svg.selectAll("circle")

// .data(data)

// .join("circle") // the "join" selection is a convenience to merge the "enter" and "update" states, which is totally sufficient for our static chart

// .attr("cx", (d, i) => (i+1)*50 )

// .attr("cy", 50)

// .attr("r", d => d);

return svg.node();

}

// your wallet viz created entirely with D3

{

const svg = d3.create("svg")

.attr("width", 1000)

.attr("height", 100);

// --- bind circle to data

svg.selectAll("circle")

.data(wallets)

.enter().append("circle")

.attr("cx", (d, i) => (i * 100) + 50)

.attr("cy", 50)

.attr("fill", "blue")

.attr('r', d => d.size);

// --- alternatively, using ".join"

// svg.selectAll("circle")

// .data(data)

// .join("circle") // the "join" selection is a convenience to merge the "enter" and "update" states, which is totally sufficient for our static chart

// .attr("cx", (d, i) => (i+1)*50 )

// .attr("cy", 50)

// .attr("r", d => d);

return svg.node();

}

data // showing it again here for convenience

html`<svg width="420" height="120" font-family="sans-serif" font-size="10" text-anchor="end">

</g>

</g>

</g>

</g>

</svg>`

scale = d3.scaleLinear().domain([100, 500]).range([10, 350])

// re-run this cell after updating the scale above

scale(2.5)

ordinalScale = d3.scaleOrdinal()

.domain(['cat', 'dog', 'parrot', 'hamster'])

.range(d3.schemePaired); // https://github.com/d3/d3-scale-chromatic#schemePaired

c = ordinalScale('ca')

width = 420

height = 20 * data.length

x = d3.scaleLinear()

.domain([0, d3.max(data)])

.range([0, width])

y = d3.scaleBand()

.domain(d3.range(data.length))

.range([0, height])

autobar = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", y.range()[1])

.attr("font-family", "sans-serif")

.attr("font-size", "10")

.attr("text-anchor", "end")

.style('border', '1px dotted #999'); // to help see the edges of our canvas

const bar = svg.selectAll("g")

.data(data)

.join("g")

.attr("transform", (d, i) => `translate(0,${y(i)})`);

bar.append("rect")

.attr("fill", "steelblue")

.attr("x", 0)

.attr("width", x)

.attr("height", y.bandwidth() - 1);

bar.append("text")

.attr("fill", "white")

.attr("x", d => x(d) - 4)

.attr("y", y.bandwidth() / 2)

.attr("dy", "0.35em")

.text(d => d);

return svg.node();

}

margin = ({top: 10, right: 10, bottom: 20, left: 20})

xMargin = x.copy().range([margin.left, width - margin.right])

yMargin = y.copy().range([margin.top, height - margin.bottom])

// Your `autobar` chart with value labels right aligned, with margins

autobarWithMargin = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", yMargin.range()[1])

.attr("font-family", "sans-serif")

.attr("font-size", "10")

.attr("text-anchor", "end")

.style('border', '1px dotted #999'); // to help see the edges of our canvas

const bar = svg.selectAll("g")

.data(data)

.join("g")

.attr("transform", (d, i) => `translate(0,${yMargin(i)})`);

bar.append("rect")

.attr("fill", "steelblue")

.attr("x", 0)

.attr("width", xMargin)

.attr("height", yMargin.bandwidth() - 1);

bar.append("text")

.attr("fill", "white")

.attr("x", d => xMargin(d) - 4)

.attr("y", yMargin.bandwidth() / 2)

.attr("dy", "0.35em")

.text(d => d);

return svg.node();

}

{

const svg = d3.create("svg")

.attr("width", width)

.attr("height", y.range()[1])

.attr("font-family", "sans-serif")

.attr("font-size", "10")

.attr("text-anchor", "end")

.style('border', '1px dotted #999'); // to help see the edges of our canvas

svg.append('g')

.attr('transform', `translate(0, ${height - margin.bottom})`)

.call(d3.axisBottom(xMargin));

svg.append('g')

.attr('transform', `translate(${margin.left}, 0)`)

.call(d3.axisLeft(yMargin));

return svg.node();

}

// Your `autobar` chart with value labels right aligned, with margins and axes

autobarWithMarginAndAxes = {

const svg = d3.create("svg")

.attr("width", width + margin.left)

.attr("height", y.range()[1])

.attr("font-family", "sans-serif")

.attr("font-size", "10")

.attr("text-anchor", "end")

.style('border', '1px dotted #999'); // to help see the edges of our canvas

const bar = svg.selectAll("g")

.data(data)

.join("g")

.attr("transform", (d, i) => `translate(0,${yMargin(i)})`);

bar.append("rect")

.attr("fill", "steelblue")

.attr("x", xMargin(0))

.attr("width", (d) => (xMargin(d) - margin.left))

.attr("height", yMargin.bandwidth() - 1);

bar.append("text")

.attr("fill", "white")

.attr("x", d => xMargin(d) - 4)

.attr("y", yMargin.bandwidth() / 2)

.attr("dy", "0.35em")

.text(d => d);

svg.append('g')

.attr('transform', `translate(0, ${height - margin.bottom})`)

.call(d3.axisBottom(xMargin));

svg.append('g')

.attr('transform', `translate(${margin.left}, 0)`)

.call(d3.axisLeft(yMargin));

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.

Learn more