Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
circleLegend(d3.select(chart), [0, 100], [2, 35])
.x(width/4)
.y(2 * height/3)
.values([10, 50, 100])
.circleColor('#333333')
.textColor('#333333')
.suffix(' dBm')
.fontSize(10)
.fontFamily('Arial')
.textPadding(47)
.render()
circleLegend(d3.select(chart), [-10000, 0], [50, 2])
.x(width/2)
.y(2 * height/3)
.values([-500, -5000, -10000])
.circleColor('skyblue')
.textColor('silver')
.suffix(' dBm')
.fontFamily('Times')
.format(d3.format(".3~s"))
.textPadding(65)
.title('Center Frequency Magnitude')
.render()
function circleLegend(selection, domain, range) {
let instance = {}
// set some defaults
const api = {
domain: domain, // the values min and max
range: range, // the circle area/size mapping
values: [8, 34, 89], // values for circles
x: 500,
y: 500,
suffix:'', // ability to pass in a suffix
circleColor: '#888',
textPadding: 80,
textColor: '#454545',
fontSize: 14,
fontFamily: 'Arial',
format: d3.format("~g"),
title: 'Default title'
}
const sqrtScale = d3.scaleSqrt()
.domain(api.domain)
.range(api.range)
instance.render = function () {
const s = selection.append('g')
.attr('class', 'legend-wrap')
// push down to radius of largest circle
.attr('transform', 'translate(0,' + sqrtScale(d3.max(Math.abs(api.values))) + ')')
// append the values for circles
s.append('g')
.attr('class', 'values-wrap')
.selectAll('circle')
.data(api.values)
.enter().append('circle')
.attr('class', d => 'values values-' + d)
.attr('r', d => Math.abs(sqrtScale(d)))
.attr('cx', api.x)
.attr('cy', d => api.y - Math.abs(sqrtScale(d)))
.style('fill', 'none')
.style('stroke', api.circleColor)
.style('opacity', 0.9)
// append some lines based on values
s.append('g')
.attr('class', 'values-line-wrap')
.selectAll('.values-labels')
.data(api.values)
.enter().append('line')
.attr('x1', d => api.x + sqrtScale(d))
.attr('x2', api.x + Math.abs(sqrtScale(Math.max(Math.abs(api.domain[0]),Math.abs(api.domain[1])))) + 14)
.attr('y1', d => api.y - Math.abs(sqrtScale(d)))
.attr('y2', d => api.y - Math.abs(sqrtScale(d)))
.style('stroke', api.textColor)
.style('stroke-dasharray', ('2,2'))
// append some labels from values
s.append('g')
.attr('class', 'values-labels-wrap')
.selectAll('.values-labels')
.data(api.values)
.enter().append('text')
.attr('x', api.x + Math.abs(sqrtScale(Math.max(Math.abs(api.domain[0]),Math.abs(api.domain[1])))) + 14 + api.textPadding)
.attr('y', d => (api.y - Math.abs(sqrtScale(d))) + 4)
.attr('shape-rendering', 'crispEdges')
.style('text-anchor', 'end')
.style('fill', api.textColor)
.attr('font-family', api.fontFamily)
.attr('font-size', api.fontSize)
.text(d => api.format(d) + api.suffix)
s.append('g')
.selectAll('text')
.data(api.values)
.enter().append('text')
//.attr('text', api.title)
.attr('x', api.x )
.attr('y', api.y + 20)
.attr('font-family', api.fontFamily)
.attr('font-size', api.fontSize + 4)
.style('text-anchor', 'middle')
.text(d => api.title)
return instance
}
// convert api fields to setter functions
for (let key in api) {
instance[key] = getSet(key, instance).bind(api)
}
return instance
// https://gist.github.com/gneatgeek/5892586
function getSet(option, component) {
return function (_) {
if (! arguments.length) {
return this[option];
}
this[option] = _;
return component;
}
}
}
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.