Published
Edited
1 star
Insert cell
md`# ArtsEd Bubble`
Insert cell
bubble_chart = {
const svg = d3.select(DOM.svg(width, height));
svg.append('g').call(xAxis);
svg.append('g').call(yAxis);
svg.append('defs').call(addDefs);
const tip = d3.select('body').selectAll('div.tool-tip')
.data([1]).join('div')
.attr('class', 'tool-tip').style('opacity', 0);
svg.append('g')
.selectAll('circle')
.data(data)
//.data(data.filter(d => /[0-9a-z]{9}16[0-9a-z]{4}/i.test(d.RCDTS)))
.join('circle')
.attr('cx', d => x(d.x))
.attr('cy', d => y(d.y))
.attr('r', d => z(d.z))
.on('mouseover',d => {
tip.style('opacity', 1);
})
.on('mousemove', d => {
var rows = [];
//rows.push(['School', d.School]);
rows.push([data.x, d3.format(" ,.2r")(d.x)]);
rows.push([data.y, d3.format(" ,.2r")(d.y)]);
rows.push([data.z, d3.format(" ,.2f")(d.z)]);
tip.html(rows.map(row => `<span>${row[0]}:<mark>${row[1]}</mark></span>`).join(''))
.transition().duration(200)
.style('opacity', .9)
.style('left', (d3.event.pageX + 28) + 'px')
.style('top', (d3.event.pageY - 28) + 'px');
})
.on('mouseout', d => {
tip.transition().duration(500).style('opacity', 0);
})
.style('fill', '#a4e5fc')
.style('opacity', '0.7')
.attr('stroke', 'd9f5ff');

return svg.node();

}
Insert cell
width
Insert cell
height = 600
Insert cell
margin = ({top: 20, right: 30, bottom: 60, left: 40})
Insert cell
z = d3.scaleLinear()
.domain(d3.extent(data, d => d.z)).nice()
.range([1, 40]);
Insert cell
x = d3.scaleLinear()
.domain(d3.extent(data, d => d.x)).nice()
.range([margin.left-5, width - margin.right]);
Insert cell
y = d3.scaleLinear()
.domain(d3.extent(data, d => d.y)).nice()
.range([height - margin.bottom, margin.top])
Insert cell
xAxis = g => g
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x))
.call(g => g.select('.domain').remove())
.call(g => g.append('text')
.attr('x', width - margin.right)
.attr('y', -4)
.attr('fill', '#ffffff')
.attr('font-weight', 'bold')
.attr('text-anchor', 'end')
.attr('class', 'axis-label')
.text(data.x))
Insert cell
yAxis = g => g
.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
.call(g => g.select('.domain').remove())
.call(g => g.select('.tick:last-of-type text').clone()
.attr('x', 4)
.attr('text-anchor', 'start')
.attr('font-weight', 'bold')
.attr('class', 'axis-label')
.text(data.y))
Insert cell
addDefs = (defs) => {
var filter = defs.append("filter")
.attr("id", "drop-shadow")
.attr("height", "130%");

// SourceAlpha refers to opacity of graphic that this filter will be applied to
// convolve that with a Gaussian with standard deviation 3 and store result
// in blur
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", 5)
.attr("result", "blur");

// translate output of Gaussian blur to the right and downwards with 2px
// store result in offsetBlur
filter.append("feOffset")
.attr("in", "blur")
.attr("dx", 5)
.attr("dy", 5)
.attr("result", "offsetBlur");

// overlay original SourceGraphic over translated blurred opacity by using
// feMerge filter. Order of specifying inputs is important!
var feMerge = filter.append("feMerge");

feMerge.append("feMergeNode")
.attr("in", "offsetBlur")
feMerge.append("feMergeNode")
.attr("in", "SourceGraphic");
}
Insert cell
data = Object.assign(await d3.csv('https://raw.githubusercontent.com/yq605879396/CapVis/master/useful_data/words_number(1).csv', ({label,cap_length,'label': x, 'cap_length': y, 'number': z}) => ({ label, cap_length,x: +x, y: +y, z: +z})), {x: 'Cluster Index', y: 'Length of Caption', z: 'Frequency'})
Insert cell
d3 = require("d3@5")
Insert cell
html`
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body{
font-family: 'Roboto', sans-serif;
}

.tool-tip{
position: absolute;
padding: 8px;
margin-top: -20px;
font-size: 1em;
background: #ddd;
pointer-events: none;
}

.tool-tip span{
display:block;
}

.tool-tip mark{
font-weight:600;
margin-left: 0.2em;
background-color: transparent;
color: inherit !important;
}
.axis-label{
font-size: 1.2em;
}
circle{
&:hover {
-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));

}
}
</style>
`
Insert cell

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.
Learn more