update_demo = {

var width = 400,

height = 250;

// array of 10 random integers

var dataset = Array.from({length: 10}, () => Math.floor(Math.random() * 40));

var xScale = d3.scaleBand()

.domain(d3.range(dataset.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

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

.range([0, height]);

const svg = d3.select(DOM.svg(width, height));

svg.selectAll("rect")

.data(dataset)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d))

.attr("fill", "steelblue");

// This function is called by the cell that waits for the button click event

svg.node().update = () => {

// Update all rects with newly generated random values

svg.selectAll("rect")

.data(dataset.map(x => Math.random()*25))

.transition() // this and next 2 lines: optional animation

.duration(800)

.ease(d3.easeLinear)

.attr("y", d => height - yScale(d))

.attr("height", d => yScale(d));

};

return svg.node();

update_btn; // wait for button clickz

update_demo.update();

var width = 400,

height = 250;

var dataset = Array.from({length: 10}, () => Math.floor(Math.random() * 40));

// create pokemon dataset

var pokemon = d3.csvParse(`name,type,hp,attack,defense

var xScale = d3.scaleBand()

.domain(d3.range(dataset.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

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

.range([0, height]);

// y scale for the pokemon dataset

var yScale_pok = d3.scaleLinear()

.domain([0, d3.max(pokemon.map(d => +d.hp))])

.range([0, height]);

const svg = d3.select(DOM.svg(width, height));

svg.selectAll("rect")

.data(dataset)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d))

.attr("fill", "steelblue");

// two states

svg.node().update = () => {

// Update with constant value

svg.selectAll("rect")

.data(pokemon)

.transition() // animation

.duration(800)

.ease(d3.easeLinear)

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale_pok(d.hp))

.attr("height", d => yScale_pok(d.hp));

console.log(pokemon);

};

svg.node().reset = () => {

// Update with random values

svg.selectAll("rect")

.data(dataset)

.transition() // animation

.duration(800)

.ease(d3.easeLinear)

.attr("y", d => height - yScale(d))

.attr("height", d => yScale(d));

};

return svg.node();

if (showhp_btn)

showhp_bars.update();

else

showhp_bars.reset();

return showhp_btn;

add_demo = {

var width = 400,

height = 250;

// array of 10 random integers

var dataset = Array.from({length: 10}, () => Math.floor(Math.random() * 40));

var xScale = d3.scaleBand()

.domain(d3.range(dataset.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

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

.range([0, height]);

const svg = d3.select(DOM.svg(width, height));

svg.selectAll("rect")

.data(dataset)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d))

.attr("fill", "steelblue");

// This function is called by the cell that waits for the button click event

svg.node().update = () => {

//Add 1 data point, adjust scale

dataset.push(Math.random()*25);

xScale.domain(d3.range(dataset.length));

var bars = svg.selectAll("rect")

.data(dataset); // the existing selection

bars

.enter() // return any data elements longer than the selection

.append("rect")

.attr("x", 0) // draw at left edge

.attr("y", d => height - yScale(d)) // next 3 attr are the same

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d))

.attr("fill", "orange")

// ^ thus far same as existing bars except x & highlight;

// now merge (i.e. select existing + new) and apply changes to all bars

.merge(bars)

.transition().duration(1000)

.attr("x", (d, i) => xScale(i))

.attr("width", xScale.bandwidth())

.attr("fill", "steelblue");

};

return svg.node();

add_btn; // wait for button click

add_demo.update()

var width = 400,

height = 250;

const svg = d3.select(DOM.svg(width, height));

// your original pokemon HP bar chart here, with a function triggered by the `addl_btn` input (it need not be a button, up to you!), to update the chart to include the 5 pokemon in `addl_pokemon`

var pokemon = d3.csvParse(`name,type,hp,attack,defense

var addl_pokemon = d3.csvParse(`name,type,hp,attack,defense

var xScale_pok = d3.scaleBand()

.domain(d3.range(pokemon.length))

.rangeRound([0, width])

.padding(0.05);

var yScale_pok = d3.scaleLinear()

.domain([0, d3.max(pokemon.map(d => +d.hp))])

.range([0, height]);

svg.selectAll("rect")

.data(pokemon)

.enter().append("rect")

.attr("x", (d, i) => xScale_pok(i))

.attr("y", d => height - yScale_pok(d.hp))

.attr("width", xScale_pok.bandwidth())

.attr("height", d => yScale_pok(d.hp))

.attr("fill", "steelblue");

svg.node().update = () => {

pokemon.push(addl_pokemon.pop());

xScale_pok.domain(d3.range(pokemon.length));

var bars = svg.selectAll("rect")

.data(pokemon);

bars

.enter()

.append("rect")

.attr("x", 0)

.attr("y", d => height - yScale_pok(d.hp))

.attr("width", xScale_pok.bandwidth())

.attr("height", d => yScale_pok(d.hp))

.attr("fill", "orange")

.merge(bars)

.transition().duration(1000)

.attr("x", (d, i) => xScale_pok(i))

.attr("width", xScale_pok.bandwidth())

.attr("fill", "steelblue");

console.log(pokemon);

};

return svg.node();

addl_btn; // wait for button click

addlhp_bars.update()

sort_demo = {

var width = 400,

height = 250;

// array of 10 random integers

var dataset = Array.from({length: 10}, () => Math.floor(Math.random() * 40));

var xScale = d3.scaleBand()

.domain(d3.range(dataset.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

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

.range([0, height]);

const svg = d3.select(DOM.svg(width, height));

svg.selectAll("rect")

.data(dataset)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d))

.attr("fill", "steelblue")

// This part below handles the click event and sorting

.on("click", () => {

svg.selectAll("rect")

.sort((a, b) => d3.ascending(a, b))

.transition() // optional animation

.duration(1000) // optional animation

.attr("x", (d, i) => xScale(i));

});

return svg.node();

sorthp_bars = {

var width = 400,

height = 250;

const svg = d3.select(DOM.svg(width, height));

var pokemon = d3.csvParse(`name,type,hp,attack,defense

var xScale = d3.scaleBand()

.domain(d3.range(pokemon.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

.domain([0, d3.max(pokemon.map(d => +d.hp))])

.range([0, height]);

svg.selectAll("rect")

.data(pokemon)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d.hp))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d.hp))

.attr("fill", "steelblue")

.on("click", () => {

svg.selectAll("rect")

.sort((a, b) => d3.ascending(+a.hp, +b.hp))

.transition()

.duration(1000)

.attr("x", (d, i) => xScale(i));

});

return svg.node();

hover_demo = {

var width = 400,

height = 250;

// array of 10 random integers

var dataset = Array.from({length: 10}, () => Math.floor(Math.random() * 40));

var xScale = d3.scaleBand()

.domain(d3.range(dataset.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

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

.range([0, height]);

const svg = d3.select(DOM.svg(width, height));

svg.selectAll("rect")

.data(dataset)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d))

.attr("fill", "steelblue")

// ---- Interactivity starts here

.on("mouseover", function() { // the `function` keyword, instead of arrow function syntax, is required when using the keyword `this` within

d3.select(this)

.attr("fill", "orange");

})

.on("mouseout", function(d) {

d3.select(this) // see note above

.transition().duration(250) // try changing these

.attr("fill", "steelblue");

});

return svg.node();

tooltip_demo = {

var width = 400,

height = 250;

// array of 10 random integers

var dataset = Array.from({length: 10}, () => Math.floor(Math.random() * 40));

var xScale = d3.scaleBand()

.domain(d3.range(dataset.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

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

.range([0, height]);

const svg = d3.select(DOM.svg(width, height));

svg.selectAll("rect")

.data(dataset)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d))

.attr("fill", "steelblue")

// ---- Interactivity starts here

.on("mouseover", function(d) {

// Get this bar's x/y values, then augment for the tooltip

var xpos = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;

var ypos = parseFloat(d3.select(this).attr("y"));

// Create the tooltip label as an SVG group `tgrp` with a text and a rect inside

var tgrp = svg.append("g")

.attr("id", "tooltip")

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

tgrp.append("rect")

.attr("width", "140px")

.attr("height", "22px")

.attr("fill", "burlywood")

tgrp.append("text")

.attr("x", 5)

.attr("y", 14)

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

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

.attr("font-size", "11px")

.attr("font-weight", "bold")

.attr("fill", "black")

.text(`This bar has value ${d}`);

})

.on("mouseout", function(d) {

// Remove the tooltip

d3.select("#tooltip").remove();

});

return svg.node();

hoverhp_bars = {

var width = 400,

height = 250;

var pokemon = d3.csvParse(`name,type,hp,attack,defense

var xScale = d3.scaleBand()

.domain(d3.range(pokemon.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

.domain([0, d3.max(pokemon.map(d => +d.hp))])

.range([0, height]);

const svg = d3.select(DOM.svg(width, height));

svg.selectAll("rect")

.data(pokemon)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d.hp))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d.hp))

.attr("fill", "steelblue")

.on("mouseover", function() {

d3.select(this)

.attr("fill", "orange");

})

.on("mouseover", function(d) {

// Get this bar's x/y values, then augment for the tooltip

var xpos = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;

var ypos = parseFloat(d3.select(this).attr("y"));

// Create the tooltip label as an SVG group `tgrp` with a text and a rect inside

var tgrp = svg.append("g")

.attr("id", "tooltip")

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

tgrp.append("rect")

.attr("width", "140px")

.attr("height", "22px")

.attr("fill", "burlywood")

tgrp.append("text")

.attr("x", 5)

.attr("y", 14)

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

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

.attr("font-size", "11px")

.attr("font-weight", "bold")

.attr("fill", "black")

.text(`This pokemon has hp ${d.hp}`);

d3.select(this)

.attr("fill", "orange");

})

.on("mouseout", function(d) {

// Remove the tooltip

d3.select("#tooltip").remove();

d3.select(this) // see note above

.transition().duration(300) // try changing these

.attr("fill", "steelblue");

});

return svg.node();

const svg = d3.select(DOM.svg(500, 100));

svg.selectAll("circle")

.data(new Array(5)) // 5 instances of 'undefined'

.enter().append("circle")

.attr("fill", (d, i) => (selection.includes(i)) ? "#c51d1d" : `rgb(0,0,${blue}`)

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

.attr("cy", 50)

.attr("r", 15)

.on("mouseover", function() {

d3.select(this).attr("r", 25)

})

.on("mouseout", function() {

d3.select(this).attr("r", 15)

})

.on("click", function(d, i) {

var found = selection.indexOf(i);

if (found > -1) {

mutable selection.splice(found, 1);

mutable num_selected -= 1;

d3.select(this).attr("fill", `rgb(0,0,${blue}`);

} else {

mutable selection.push(i);

mutable num_selected += 1;

d3.select(this).attr("fill", "#c51d1d");

}

});

return svg.node();

num_selected; // wait for this to be updated

const svg = d3.select(DOM.svg(500, 100));

svg.selectAll("text")

.data(selection)

.enter().append("text")

.attr("font-size", "2em")

.attr("font-weight", "bold")

.attr("fill", `rgb(0,0,${blue}`)

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

.attr("y", 50)

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

.text(d => d);

return svg.node();

[0, 255],

{

step: 1,

label: "Blueness"

}

types_entries = Object.entries(types_data)

var width = 400,

height = 250;

var dataset = types_entries; // inspect this output in a cell so you know what the data format is

var xScale = d3.scaleBand()

.domain(d3.range(dataset.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

.domain([0, d3.max(dataset.map(d => d[1].length))])

.range([0, height]);

const svg = d3.select(DOM.svg(width, height));

svg.selectAll("rect")

.data(dataset)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d[1].length))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d[1].length))

.attr("fill", "steelblue")

// ---- tooltip like the hover demo above

.on("mouseover", function (d) {

var xpos = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;

var ypos = parseFloat(d3.select(this).attr("y"));

var tgrp = svg.append("g")

.attr("id", "tooltip")

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

tgrp.append("rect")

.attr("width", "140px")

.attr("height", "22px")

.attr("fill", "rgba(240,240,240,0.8)")

tgrp.append("text")

.attr("x", 5)

.attr("y", 14)

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

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

.attr("font-size", "11px")

.attr("font-weight", "bold")

.attr("fill", "black")

.text(d[0]);

})

.on("mouseout", (d) => {

d3.select("#tooltip").remove();

})

// ---- clickable selection like the mutable demo

.on("click", function(d, i) {

var found = types_selection.indexOf(i);

if (found > -1) {

mutable types_selection.splice(found, 1);

mutable num_types_selected -= 1;

d3.select(this).attr("fill", "steelblue");

} else {

mutable types_selection.push(i);

mutable num_types_selected += 1;

d3.select(this).attr("fill", "#c51d1d");

}

});

return svg.node();

num_types_selected; // wait for this to be updated

const svg = d3.select(DOM.svg(500, 500));

svg.selectAll("text")

.data(types_selection)

.enter().append("text")

.attr("font-size", "2em")

.attr("font-weight", "bold")

.attr("x", 50)

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

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

.text(d => types_entries[d][0]);

return svg.node();

reactive_pokemon_hp = {

num_types_selected;

var width = 400,

height = 250;

var pokemon = d3.csvParse(`name,type,hp,attack,defense

var xScale = d3.scaleBand()

.domain(d3.range(pokemon.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

.domain([0, d3.max(pokemon.map(d => +d.hp))])

.range([0, height]);

const svg = d3.select(DOM.svg(width, height));

svg.selectAll("text")

.data(pokemon)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d.hp))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d.hp))

if (num_types_selected > 0){

for (let i = 0; i < num_types_selected; i++)

svg.selectAll("rect").

filter(function(d){return (types_entries[types_selection[i]][0] == d.type);})

.attr("fill", "red")

}

console.log(types_selection, types_entries);

return svg.node();

const svg = d3.select(DOM.svg(500, 100));

var colorScale = d3.scaleOrdinal(d3.schemeBrBG[5]);

// var colorScale = d3.scaleOrdinal(d3.schemeCategory10); // try me out

svg.selectAll("circle")

.data(new Array(5)) // 5 instances of 'undefined'

.enter().append("circle")

.attr("fill", (d, i) => colorScale(i))

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

.attr("cy", 50)

.attr("r", 15);

return svg.node();

hoverhp_color = {

var width = 400,

height = 250;

var pokemon = d3.csvParse(`name,type,hp,attack,defense

var xScale = d3.scaleBand()

.domain(d3.range(pokemon.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

.domain([0, d3.max(pokemon.map(d => +d.hp))])

.range([0, height]);

var colorScale = d3.scaleOrdinal(d3.schemeBrBG[11]);

const svg = d3.select(DOM.svg(width, height));

svg.selectAll("rect")

.data(pokemon)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d.hp))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d.hp))

.attr("fill", (d, i)=> colorScale(d.hp))

.on("mouseover", function() {

d3.select(this)

.attr("fill", "orange");

})

.on("mouseover", function(d) {

// Get this bar's x/y values, then augment for the tooltip

var xpos = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;

var ypos = parseFloat(d3.select(this).attr("y"));

// Create the tooltip label as an SVG group `tgrp` with a text and a rect inside

var tgrp = svg.append("g")

.attr("id", "tooltip")

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

tgrp.append("rect")

.attr("width", "140px")

.attr("height", "22px")

.attr("fill", "burlywood")

tgrp.append("text")

.attr("x", 5)

.attr("y", 14)

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

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

.attr("font-size", "11px")

.attr("font-weight", "bold")

.attr("fill", "black")

.text(`This pokemon has hp ${d.hp}`);

d3.select(this)

.attr("fill", "orange");

})

.on("mouseout", function(d) {

// Remove the tooltip

d3.select("#tooltip").remove();

d3.select(this) // see note above

.transition().duration(300) // try changing these

.attr("fill", "steelblue");

});

return svg.node();

types_color = {

var width = 400,

height = 250;

var dataset = types_entries; // inspect this output in a cell so you know what the data format is

var xScale = d3.scaleBand()

.domain(d3.range(dataset.length))

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

.domain([0, d3.max(dataset.map(d => d[1].length))])

.range([0, height]);

var colorScale = d3.scaleOrdinal(d3.schemeBrBG[8]);

const svg = d3.select(DOM.svg(width, height));

svg.selectAll("rect")

.data(dataset)

.enter().append("rect")

.attr("x", (d, i) => xScale(i))

.attr("y", d => height - yScale(d[1].length))

.attr("width", xScale.bandwidth())

.attr("height", d => yScale(d[1].length))

.attr("fill", (d, i)=> colorScale(i))

// ---- tooltip like the hover demo above

.on("mouseover", function (d) {

var xpos = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;

var ypos = parseFloat(d3.select(this).attr("y"));

var tgrp = svg.append("g")

.attr("id", "tooltip")

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

tgrp.append("rect")

.attr("width", "140px")

.attr("height", "22px")