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 click

update_demo.update();

showhp_bars = {

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

console.log(pokemon)

var width = 400,

height = 250;

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");

var xScale_pokemon = d3.scaleBand()

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

.rangeRound([0, width])

.padding(0.05);

var yScale_pokemon = d3.scaleLinear()

.domain([0, d3.max((pokemon.map(d => d.hp)).map(function(d) { return +d; }))])

.range([0, height]);

// two states //ASK TA: how can you make 115 show up

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

// Update with constant value

svg.selectAll("rect")

.data(pokemon)

.transition() // animation

.duration(800)

.ease(d3.easeLinear)

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

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

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

// console.log(dataset);

};

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()

addl_btn; // wait for button click

addlhp_bars.update()

addlhp_bars = {

var width = 400,

height = 250;

console.log(pokemon)

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

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

var xScale_pokemon = d3.scaleBand()

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

.rangeRound([0, width])

.padding(0.05);

var yScale_pokemon = d3.scaleLinear()

.domain([0, d3.max((pokemon.map(d => d.hp)).map(function(d) { return +d; }))])

.range([0, height]);

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

svg.selectAll("rect")

.data(pokemon)

.enter().append("rect")

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

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

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

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

.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

pokemon.push(addl_pokemon.pop());

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

var bars = svg.selectAll("rect")

.data(pokemon); // 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_pokemon(d.hp)) // next 3 attr are the same

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

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

.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_pokemon(i))

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

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

};

return svg.node();

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();

var width = 400,

height = 250;

// array of 10 random integers

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

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)).map(function(d) { return +d; }))])

.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")

//This part below handles the click event and sorting

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

svg.selectAll("rect")

.sort((a, b) => d3.ascending(+a.hp,+b.hp)) //what to do --> Ask a TA?

.transition() // optional animation

.duration(1000) // optional animation

.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();

hptooltip = {

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)).map(function(d) { return +d; }))])

.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")

// ---- 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.hp}`);

d3.select(this)

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

})

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

// Remove the tooltip

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

d3.select(this) // see note above

.transition().duration(250) // 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"

}

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; // wait for this to be updated

var width = 400,

height = 250;

// array of 10 random integers

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

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)).map(function(d) { return +d; }))])

.range([0, height]);

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

//if the element selected, e.g. water is in the column, color that much of the column in a different color

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))

if (num_types_selected==1){

svg.selectAll("rect").filter(function(d){return (types_entries[types_entries][0] == d.type);})

.attr("fill", "red")

}

else if(num_types_selected==2){

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[0]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[1]][0] == d.type);})

.attr("fill", "red")

}

else if(num_types_selected==3){

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[0]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[1]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[2]][0] == d.type);})

.attr("fill", "red")

}

else if(num_types_selected==4){

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[0]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[1]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[2]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[3]][0] == d.type);})

.attr("fill", "red")

}

else if(num_types_selected==5){

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[0]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[1]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[2]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[3]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[4]][0] == d.type);})

.attr("fill", "red")

}

else if(num_types_selected==6){

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[0]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[1]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[2]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[3]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[4]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[5]][0] == d.type);})

.attr("fill", "red")

}

else if(num_types_selected==7){

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[0]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[1]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[2]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[3]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[4]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[5]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[6]][0] == d.type);})

.attr("fill", "red")

}

else if(num_types_selected==8){

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[0]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[1]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[2]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[3]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[4]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[5]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[6]][0] == d.type);})

.attr("fill", "red")

svg.selectAll("rect").filter(function(d){return (types_entries[types_selection[7]][0] == d.type);})

.attr("fill", "red")

}

console.log(types_entries, types_entries)

// .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();

pokemon_hp_color = {

var width = 400,

height = 250;

var colorScale = d3.scaleOrdinal(d3.schemeRdBu[10]);

// array of 10 random integers

var pokemon = [35, 44, 40, 40, 50, 38, 115, 70, 40, 40] //is there any other way?

var xScale = d3.scaleBand()

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

.rangeRound([0, width])

.padding(0.05);

var yScale = d3.scaleLinear()

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

.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))

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

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

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

// ---- 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}`);

d3.select(this)

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

})

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

// Remove the tooltip

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

d3.select(this) // see note above

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

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

});

return svg.node();

types_bar_color = {

var width = 400,

height = 250;

var colorScale = d3.scaleOrdinal(d3.schemeSpectral[10]);

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", (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")

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

tgrp.append("text")

.attr("x", 5)

.attr("y", 14)

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