md`# Bubble Chart2
# BRAF`
md` This code is adopted from https://observablehq.com/@d3/zoomable-circle-packing`
<iframe width="100%" height="635" frameborder="0"
src="https://observablehq.com/embed/@d3/sortable-bar-chart?cell=viewof+order&cell=chart"></iframe>
import {embed} from "@observablehq/auto-resizing-embed"
// iframe = function(str, ...keys) {
// const d = str.reduce(
// (r, c, i) => `${r}${c}${keys[i] ? JSON.stringify(keys[i]) : ''}`,
// ''
// );
// const iframe = DOM.element("iframe");
// iframe.style.width = "100%";
// iframe.style.border = "0";
// iframe.src = `data:text/html;base64,${btoa(
// encodeURIComponent(d).replace(/%([0-9A-F]{2})/g, (match, p1) =>
// String.fromCharCode('0x' + p1)
// )
// )}`;
// return iframe;
// }
function wrap(text, wrapWidth, yAxisAdjustment = 0) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")) - yAxisAdjustment,
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", `${dy}em`);
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > wrapWidth) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
return 0;
}
//https://observablehq.com/@jtrim-ons/svg-text-wrapping
function wrap2(
text,
width,
dyAdjust,
lineHeightEms,
lineHeightSquishFactor,
splitOnHyphen,
centreVertically
) {
// Use default values for the last three parameters if values are not provided.
if (!lineHeightEms) lineHeightEms = 1.05;
if (!lineHeightSquishFactor) lineHeightSquishFactor = 1;
if (splitOnHyphen == null) splitOnHyphen = true;
if (centreVertically == null) centreVertically = true;
text.each(function () {
var text = d3.select(this),
x = text.attr("x"),
y = text.attr("y");
var words = [];
text
.text()
.split(/\s+/)
.forEach(function (w) {
if (splitOnHyphen) {
var subWords = w.split("-");
for (var i = 0; i < subWords.length - 1; i++)
words.push(subWords[i] + "-");
words.push(subWords[subWords.length - 1] + " ");
} else {
words.push(w + " ");
}
});
text.text(null); // Empty the text element
// `tspan` is the tspan element that is currently being added to
var tspan = text.append("tspan");
var line = ""; // The current value of the line
var prevLine = ""; // The value of the line before the last word (or sub-word) was added
var nWordsInLine = 0; // Number of words in the line
for (var i = 0; i < words.length; i++) {
var word = words[i];
prevLine = line;
line = line + word;
++nWordsInLine;
tspan.text(line.trim());
if (tspan.node().getComputedTextLength() > width && nWordsInLine > 1) {
// The tspan is too long, and it contains more than one word.
// Remove the last word and add it to a new tspan.
tspan.text(prevLine.trim());
prevLine = "";
line = word;
nWordsInLine = 1;
tspan = text.append("tspan").text(word.trim());
}
}
var tspans = text.selectAll("tspan");
var h = lineHeightEms;
// Reduce the line height a bit if there are more than 2 lines.
if (tspans.size() > 2)
for (var i = 0; i < tspans.size(); i++) h *= lineHeightSquishFactor;
tspans.each(function (d, i) {
// Calculate the y offset (dy) for each tspan so that the vertical centre
// of the tspans roughly aligns with the text element's y position.
var dy = i * h + dyAdjust;
if (centreVertically) dy -= ((tspans.size() - 1) * h) / 2;
d3.select(this)
.attr("y", y)
.attr("x", x)
.attr("dy", dy + "em");
});
});
}
//import {request} from "@pandawhisperer/http-requests"
import {request} from "https://api.observablehq.com/@pandawhisperer/http-requests.js?v=3"
// data = FileAttachment("4k_braf.json").json()
// data = FileAttachment("4k_IL15.json").json()
// data = FileAttachment("4k_HDAC9@2.json").json()
// data = FileAttachment("4k_PDGFRA.json").json()
data = FileAttachment("4k_FLT3.json").json()
// data = FileAttachment("4k_FGFR1.json").json()
// data = FileAttachment("4k_APP.json").json()
// data = FileAttachment("4k_PSEN1.json").json()
// data = FileAttachment("4k_PSEN1.json").json()
// data = JSON.parse(http"http://192.168.102.18:19847/buble.json")
// data = d3.json("http://192.168.102.18:19847/buble.json", function(data) {
// console.log(data);
// });
// data = request('http://192.168.104.123:19843/buble/IL-15').json()
// request.get('https://api.coingecko.com/api/v3').path('/exchanges').json()
// request.get('https://api.coingecko.com/api/v3').perform()
// http://192.168.104.123:5090/
pack = data => d3.pack()
.size([width, height])
.padding(3)
(d3.hierarchy(data)
.sum(d => 1.6**d.value)
.sort((a, b) => b.value - a.value))
width = 332
height = width
format = d3.format(",d")
color = d3.scaleLinear()
.domain([0, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl)
d3 = require("d3@5")
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.
