Full Stack Software Engineer at Alteryx in Boston, MA
Published
Edited
Jul 27, 2019
5 stars
genChart("dave.reed@tr.com")
genChart = (email) => {
const hash = hashFcn(email)
const h1 = hash
const chord1 = _.toPairs(bitDef).map(([a,b]) => ({label: a, value: getBits(h1, ...b)}))
const h2 = getBits(hash, 16, 31)
const chord2 = _.toPairs(bitDef).map(([a,b]) => ({label: a, value: getBits(h2, ...b)}))
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
const g = svg
.append("g")
.attr("transform", `translate(${width/2}, ${height/2})`)
const c1 = f1(...chord1.map(d => d.value))
g.append("path")
.attr("d", ribbon({
source: {startAngle: c1.s1, endAngle: c1.s2, radius: innerRadius},
target: {startAngle: c1.s3, endAngle: c1.s4, radius: innerRadius}
}))
.attr("fill", d => c1.c)
.attr("stroke", d => d3.rgb(c1.c).darker());
const c2 = f1(...chord2.map(d => d.value))
g.append("path")
.attr("d", ribbon({
source: {startAngle: c2.s1, endAngle: c2.s2, radius: innerRadius},
target: {startAngle: c2.s3, endAngle: c2.s4, radius: innerRadius}
}))
.attr("fill", d => c2.c)
.attr("stroke", d => d3.rgb(c2.c).darker());
return svg.node();
}
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
ribbon = d3.ribbon()
.radius(innerRadius)
// color = d3.scaleOrdinal()
// .domain(d3.range(4))
// .range(["#000000", "#FFDD89", "#957244", "#F26223"])
outerRadius = Math.min(width, height) * 0.5 - 5
innerRadius = outerRadius - 5
height = 100
width = 100
d3 = require("d3@5")
_ = require("lodash")
import {table} from "@tmcw/tables"
faker = require("https://bundle.run/faker@4.1.0")
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.
