md`# Simplest Program that draws an image`
{ // Use a block for compound cells
const size = 200
const svg = d3.select(DOM.svg(size, size))
svg.append("circle")
.attr("cx", 75)
.attr("cy", 75)
.attr("r", 50)
.attr("fill", "red")
return svg.node();
}
{ // Use a block for compound cells
const size = 200
//const svg = d3.select(DOM.svg(size, size)) // Option 1
const svg = d3.create("svg").attr("width", width).attr("height", height) // option 2
//const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // circle is gigantic
svg.append("circle")
.attr("cx", 75)
.attr("cy", 75)
.attr("r", radius)
.attr("fill", "red")
return svg.node();
}
md`## Add several slider bars (width, height, radius)`
{ // Use a block for compound cells
const svg = d3.select(DOM.svg(width, height))
svg.append("circle")
.attr("cx", 75)
.attr("cy", 75)
.attr("r", radius)
.attr("fill", "red")
return svg.node();
}
md`## Add a text highlight when the mouse hovers over the object`
{ // Use a block for compound cells
const svg = d3.select(DOM.svg(width, height))
svg.append("circle")
.attr("cx", 75)
.attr("cy", 75)
.attr("r", radius)
.attr("fill", "red")
return svg.node();
}
scattergram = {
const container = html`<div class="tooltip-demo">
<style>
/*
* Be sure to set the tooltip's DOM element's styles!
*/
div.tooltip-demo > div.tooltip {
position: fixed;
display: none;
padding: 12px 6px;
background: #fff;
border: 1px solid #333;
pointer-events: none;
}
</style>
</div>`;
//const tooltip = new Tooltip();
/* const svg = d3.create("svg")
.attr("viewBox", [0, 0, 500, 500]); */
/* d3.select('svg').selectAll('*').remove();
const svg = d3.select(DOM.svg(width, height)) */ // original
const svg = d3
.select(container)
.append("svg")
.attr("viewBox", `0 0 ${width} ${height}`);
const div = d3
.select(container)
.append("div")
.classed("tooltip", true);
// create a new tooltip,
// passing it a selection for the tooltip's DOM element.
const tooltip = new Tooltip(div);
function tooltipContents(datum) {
const { x, y } = datum;
// return `x: ${x}, y: ${y}`;
return `gordon` // Both `text` and "text" work; html`text` does not work
}
/* svg.append("path")
.attr("fill", "none") // necessary for line
.attr("stroke", "steelblue") // necessary for line
.attr("stroke-width", 1.5)
.attr("stroke-miterlimit", 1)
.attr("d", line(data_synth)); */
/* svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis); */
/* svg.append("g")
.attr("fill", "none")
.attr("pointer-events", "all")
.selectAll("rect")
.data(d3.pairs(data_synth))
.join("rect") // these rectangles are selection regions
.attr("x", ([a, b]) => x(a.date))
.attr("height", height)
.attr("width", ([a, b]) => x(b.date) - x(a.date))
//.attr('fill','red').attr('opacity','.5')
.on("mouseover", (event, a) => tooltip.show(a)) // was (event, [a]
.on("mouseout", () => tooltip.hide());*/
svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`) // No effect
.selectAll("circle")
.data(data3)
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 5)
.attr("fill", "#333")
.on("mouseover", (event, d) => {
tooltip.display(d, tooltipContents);
})
.on("mouseout", () => {
tooltip.hide();
})
.on("mousemove", event => {
tooltip.move(event);
});
//svg.append(() => tooltip.node); // CREATES A PROBLEM. WHY?
return container;
//return svg.node();
}
LinePlot = {
/*const container = html`<div class="tooltip-demo">
<style>
// Be sure to set the tooltip's DOM element's styles!
div.tooltip-demo > div.tooltip {
position: fixed;
display: none;
padding: 12px 6px;
background: #fff;
border: 1px solid #333;
pointer-events: none;
}
</style>
</div>`; */
const container = Container
//const container = Container()
const width = 500
const height = 100
const svg = d3
.select(container)
.append("svg")
.attr("viewBox", `0 0 ${width} ${height}`);
const data = d3.pairs(data_synth) // not sure needed
console.log(data)
const div = d3
.select(container)
.append("div")
.classed("tooltip", true);
// create a new tooltip,
// passing it a selection for the tooltip's DOM element.
const tooltip = new Tooltip(div);
function tooltipContents(datum) { // << PROBABLY SOMETHING WRONG <<<< HOW TO FIX?
// Datum is an [a,b] pair, where a and b are (date, close)
const [ a, b ] = [datum[0], datum[1]];
const text = `(${a.date}, ${a.close})<br>(${b.date}, ${b.close})`;
return text
}
svg.append("path")
.attr("fill", "None") // necessary for line
.attr("stroke", "steelblue") // necessary for line
.attr("stroke-width", 1.5)
.attr("stroke-miterlimit", 1)
.attr("d", line(data_synth));
/* svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis); */
svg.append("g")
.attr("fill", "none") // worked
// Do not think that pointer-events is required
// pointer-events are useful when there are overlapping elements
//.attr("pointer-events", "fill") // "none": no tooltips
.selectAll("rect")
.data(data)
.join("rect") // these rectangles are selection regions
.attr("x", ([a, b]) => x(a.date))
.attr("height", height) // trick to offer a selection region
.attr("width", ([a, b]) => x(b.date) - x(a.date))
.attr('fill','red').attr('opacity','.5')
.on("mouseout", () => tooltip.hide())
.on("mousemove", event => tooltip.move(event))
.on("mouseover", (event, d) => {tooltip.display(d, tooltipContents);
})
return container
}
/*function Container() {
const container = html`<div class="tooltip-demo">
<style>
div.tooltip-demo > div.tooltip {
position: fixed;
display: none;
padding: 12px 6px;
background: #fff;
border: 1px solid #333;
pointer-events: none;
}
</style>
</div>`;
return container
}*/
Container = {
const container = html`<div class="tooltip-demo">
<style>
div.tooltip-demo > div.tooltip {
position: fixed;
display: none;
padding: 12px 6px;
background: #fff;
border: 1px solid #333;
pointer-events: none;
}
</style>
</div>`;
return container
}
data_synth = [{date:50, close:100.}, {date:70, close:110}, {date:90, close:93}, {date:100, close:102}, {date:105, close:74}]
data3 = new Array(20).fill(undefined).map(() => ({
x: Math.floor(Math.random() * (width - margin.left - margin.right)),
y: Math.floor(Math.random() * (height - margin.top - margin.bottom))
}))
margin = ({ top: 10, right: 10, bottom: 10, left: 10 })
line = d3.line().x(d => x(d.date)).y(d => y(d.close))
line(data_synth)
x = d3.scaleUtc()
.domain(d3.extent(data_synth, d => d.date))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(data_synth, d => d.close)])
.range([height - margin.bottom, margin.top])
import {slider} from "@jashkenas/inputs"
import { Tooltip } from "@clhenrick/tooltip-component"
d3 = require("d3")
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.
