Published
Edited
Apr 11, 2021
md`# Squirrels and different fur colors`
//what colors do the squirrels have
hptooltip = {
var width = 400,
height = 400;
var pokemon = d3.csvParse(`color,num,hex,highlighthex
gray,2473,#808080,#D3D3D3
cinnamon,392,#D2691E,#D2B48C
black,103,#000000,#2F4F4F
none,55,#00FF00,#00FF00`);
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.num)).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.num))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.num))
.attr("fill", d => d.hex)
// ---- 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('${d.num}');
d3.select(this)
.attr("fill", d => d.highlighthex);
})
.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 => d.hex);
});
return svg.node();
}
Array.from({length: 10}, () => Math.floor(Math.random() * 40))
d3.csvParse(`color,type,hp,attack,defense
Pikachu,Electric,35,55,40
Squirtle,Water,44,48,65
Weedle,Bug,40,35,30
Spearow,Normal,40,60,30
Sandshrew,Ground,50,75,85
Vulpix,Fire,38,41,40
Jigglypuff,Normal,115,45,20
Venomoth,Bug,70,65,60
Meowth,Normal,40,45,35
Poliwag,Water,40,50,40
Psyduck,Water,50,52,48
Golem,Rock,80,120,130
Charmander,Fire,39,52,43
Krabby,Water,30,105,90
Bulbasaur,Grass,45,49,49
Psyduck,Water,50,52,48
Golem,Rock,80,120,130
Charmander,Fire,39,52,43
Krabby,Water,30,105,90
Bulbasaur,Grass,45,49,49`);
d3.csvParse(`color,num
gray,2473
cinnamon,392
black,103
none,55`);
dataset = [2473,103,392,55];
d3 = require('d3')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.