Data Scientist at Warwick Investment Group. Passionate about science, predictive modeling, and data visualizations.
viewof selectData = radio({
title: 'Data sets',
description: "Choose a data set to view.",
options: dataSets,
value: dataSets[1]
})
sameStats={
const container = d3.select(DOM.svg(width+margin.left+margin.right, height+margin.top+margin.bottom));
const svg = container.append('g')
.attr('width', width)
.attr('height', height)
.attr('transform', 'translate(' + margin.left + '.' + margin.top + ')');
svg.append("g")
.call(xAx);
svg.append("g")
.call(yAx);
svg.append("g")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.selectAll("circle")
.data(data.filter(a => a.name === selectData)[0].data)
.enter().append("circle").transition()
.duration(900)
.attr("cx", (d,i) => xScale(d.x))
.attr("cy", (d,i) => yScale(d.y))
.attr("fill", (d,i) => col(d.y))
.attr("r", 3.5);
return container.node();
}
data = {
let datat = [];
//DatasaurusDozen.tsv
await d3.tsv("https://gist.githubusercontent.com/cbuie/18e899a1ab1e0582ce512d2928bfcc08/raw/39cf7f6f6bb7a0352dddacfd43318468ca871b6a/DatasaurusDozen.tsv", (dat, i , cl) => {
datat.push({name: dat.dataset, x: +dat.x, y: +dat.y});
});
let ids = Array.from(new Set(datat.map(x=> x.name)));
//console.log('ids',ids)
const data = [];
ids.forEach(c => {
data.push({
name: c,
data: datat.filter(v => v.name === c).map(v => {return {x: v.x, y: v.y}})
});
});
return data;
}
dataSets = Array.from(new Set(data.map(x=> x.name)))
width=800
col = {
const max = d3.max(data.filter(a => a.name === selectData)[0].data, d => Math.abs(d.y));
return d3.scaleSequential(d3.interpolateCool).domain([max, -max]);
}
xAx = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale).ticks(width / 80))
yAx = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale).ticks(6))
.call(g => g.append("text")
.attr("fill", "#000")
.attr("x", 5)
.attr("y", margin.top)
.attr("dy", "0.32em")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(`${selectData} Data`))
ss = require("simple-statistics@6.0.0/dist/simple-statistics.min.js")
math =require("https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.10.3/math.min.js")
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.
