dataviz, R obsessed, learning D3 with #100daysofD3
Twitter: @W_R_Chase
Published
Edited
Aug 7, 2019
2 stars
sketch = {
const svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`);
let g = svg.append("g")
.attr("transform", `translate(${width/2} ${height/2})`)
//w, h, thick, repeat, arrows, offset
const dat0 = starburst2(100, 50, 40, 20, 40, 400, 0, "#E0D5B1", "#FFCF40");
const dat1 = starburst(90, 50, 40, 20, 35, 300, 0.1);
const dat2 = starburst(80, 50, 40, 20, 30, 200, 0.3);
const dat3 = starburst(60, 40, 30, 15, 25, 150, 0.5);
const dat4 = starburst(55, 40, 30, 15, 20, 125, 0.7);
const dat5 = starburst(50, 40, 30, 15, 15, 100, 0.9);
const dat6 = starburst(45, 30, 28, 12, 25, 75, 0);
const dat7 = starburst(40, 30, 28, 12, 20, 50, 0.2);
const dat8 = starburst(35, 30, 28, 12, 15, 25, 0.4);
const dat9 = starburst(30, 20, 20, 10, 30, 25, 0.1);
const dat10 = starburst(25, 20, 20, 10, 25, 10, 0.3);
const dat11 = starburst(20, 20, 20, 10, 20, 5, 0.6);
const dat12 = starburst(30, 20, 15, 6, 20, 10, 0.1);
const dat13 = starburst(25, 20, 15, 6, 20, 5, 0.3);
const dat14 = starburst(20, 20, 15, 6, 20, -5, 0.6);
drawArrow(dat0, g, "#10628E", "white");
drawArrow(dat1, g, "#10628E", "white");
drawArrow(dat2, g, "#10628E", "white");
drawArrow(dat3, g, "#10628E", "white");
drawArrow(dat4, g, "#10628E", "white");
drawArrow(dat5, g, "#10628E", "white");
drawArrow(dat6, g, "#10628E", "white");
drawArrow(dat7, g, "#10628E", "white");
drawArrow(dat8, g, "#10628E", "white");
drawArrow(dat9, g, "#10628E", "white");
drawArrow(dat10, g, "#10628E", "white");
drawArrow(dat11, g, "#10628E", "white");
drawArrow(dat12, g, "#10628E", "white");
drawArrow(dat13, g, "#10628E", "white");
drawArrow(dat14, g, "#10628E", "white");
g.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 20)
.attr("fill", "black");
return svg.node()
}
dat0 = starburst(100, 50, 40, 20, 40, 400, 0);
{
for(let i = 0; i < dat0.length; i++) {
dat0[i].color = test_samp[i]
}
}
test_samp = randColors.sample(2000)
{
const test = dat0.map(d => d.map(d => d.color));
return test
}
line = d3.line()
.x(d => d.x)
.y(d => d.y);
function drawArrow(data, el, fill, stroke) {
el.selectAll("path.data")
.data(data)
.enter()
.append("path")
.attr("fill", d => d.color) //d => d.map(col => col.color)[1]
.attr("stroke", stroke)
.attr("d", function(d){ return line(d) + "Z"});
}
Array.prototype.sample = function(n){
const samples = [];
for(let i = 0; i < n; i++) {
const sample = this[Math.floor(Math.random()*this.length)];
samples.push(sample);
}
return samples
}
function starburst(w, h, thick, rep, arrows, bump, offset) {
let finalArray = [];
for(let i = 0; i < arrows; i++) {
let chev1array = [];
let yOffset = 0;
let iY = 0;
const angle = ((i / (arrows / 2)) * Math.PI) + offset;
for(iY = 0; iY < rep; iY++){
yOffset = (thick * iY) + bump;
chev1array.push([{"x": w / 2, "y": 0 - yOffset - thick},
{"x": w, "y": h - thick - yOffset},
{"x": w, "y": h - yOffset},
{"x": w / 2, "y": 0 - yOffset},
{"x": 0, "y": h - yOffset},
{"x": 0, "y": h - thick - yOffset}
]);
};
const rotato = chev1array.map(d => d.map(function(pt){
const newx = (pt.x - w / 2) * Math.cos(angle) - (pt.y - w / 2) * Math.sin(angle);
const newy = (pt.y - w / 2) * Math.cos(angle) + (pt.x - w / 2) * Math.sin(angle);
//const col = randColors.sample(1);
return {"x": newx, "y": newy};
}));
finalArray.push(rotato);
};
const lines = finalArray.flat(1);
//return finalArray.flat(1);
for(let i = 0; i < lines.length; i++) {
lines[i].color = test_samp[i];
}
return lines;
}
test2 = starburst2(100, 50, 40, 20, 40, 400, 0, "#E0D5B1", "#FFCF40");
function starburst2(w, h, thick, rep, arrows, bump, offset, col1, col2) {
let finalArray = [];
for(let i = 0; i < arrows; i++) {
let chev1array = [];
let yOffset = 0;
let iY = 0;
const angle = ((i / (arrows / 2)) * Math.PI) + offset;
for(iY = 0; iY < rep; iY++){
yOffset = (thick * iY) + bump;
chev1array.push([{"x": w / 2, "y": 0 - yOffset - thick},
{"x": w, "y": h - thick - yOffset},
{"x": w, "y": h - yOffset},
{"x": w / 2, "y": 0 - yOffset},
{"x": 0, "y": h - yOffset},
{"x": 0, "y": h - thick - yOffset}
]);
};
const rotato = chev1array.map(d => d.map(function(pt){
const newx = (pt.x - w / 2) * Math.cos(angle) - (pt.y - w / 2) * Math.sin(angle);
const newy = (pt.y - w / 2) * Math.cos(angle) + (pt.x - w / 2) * Math.sin(angle);
return {"x": newx, "y": newy};
}));
finalArray.push(rotato);
};
const lines = finalArray.flat(1);
for(let i = 0; i < lines.length; i++) {
if(i % 2 == 0) {
lines[i].color = col1;
} else {
lines[i].color = col2;
}
//lines[i].color = test_samp[i];
}
return lines;
}
randColors = ["#FFCF40", "#E899C8", "#47C2C9", "#2B3B77", "#D80C59", "#FFFFF0", "#ffeadb", ]
neutrals = ["#FFFFF0", "#ffeadb", "#E0D5B1"]
vibrants = ["#FFCF40", "#E899C8", "#47C2C9", "#2B3B77", "#D80C59"]
d3 = require("d3")
import { slider} from '@jashkenas/inputs'
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.
