//viewof xLengthSlider = slider({title:"Chart Width",min:10, max:widthCustom
//, value:widthCustom*0.6+(widthCustom*0.05*(10-xAngleSlider)/10)})
xLengthSlider = widthCustom*0.6+(widthCustom*0.05*(10-xAngleSlider)/10)
//viewof xAngleSlider = slider({title:"xAngle",min:0, max:35, value:})
xAngleSlider =((widthCustom-minWidth)/(maxWidth-minWidth))*6
areaOffsetX=(i)=> widthCustom/10 +i * (zWidth / (noOfCharts - 1));
requestQuery = (q)=>fetch("https://api.val.town/v1/run/bernat.requestGoogleNgram", {
method: "POST",
body: JSON.stringify({query: q}) // DO NOT PUBLISH THIS AUTHENTICATION KEY
});
requestTech = (q)=>requestQuery(`(${q} technology) / technology`)
exampleNewData = (s)=>(new Array(289)).fill(1).map((d,i)=>{
let date = new Date('2017-01-01T02:00Z');
date.setMinutes(date.getMinutes()+5*i)
return {activity: s, time:date, value: 0.25, type: "user"}
})
newData = requestTech(`crypto`).then(a=>a.json())
widthCustom = Math.min(Math.max(width, minWidth ),maxWidth)
maxWidth = 950
minWidth = 800
//viewof zDiagonalSlider = slider({title:"zDiagonal",min:700, max:1500, value:1100})ç
zDiagonalSlider = 1100
height = zDiagonalSlider+yHeightSlider*2;
//viewof yHeightSlider = slider({min:10, max:1000, value:100})
yHeightSlider=100
function drawXAxis(sel) {
let xAxis = sel.append("g")
.attr("id", "x-axis")
.attr("transform", "translate(" + areaOffsetX(0) + "," + areaOffsetY(0) + ")");
let xTicks = xAxis.selectAll(".ticks")
.data(xTickValues)
.enter()
.append("g")
.attr("class", "tick")
.attr("transform", function (d) {
let x = xWidth * (d);
let y = yArea(0, (dataLength * (d)));
return "translate(" + x + "," + y + ")"
});
let tickLength = zDiagonalSlider + 25;
let tickText = tickLength + 5;
xTicks.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", adjacentCos(zAngle, tickLength))
.attr("y2", oppositeSin(zAngle, tickLength));
xTicks.append("text")
.attr("class", "axis-label")
.text(function (d) { return parseInt(xScale.invert(xWidth * (d))) })
.attr("x", adjacentCos(zAngle, tickText))
.attr("y", oppositeSin(zAngle, tickText));
};
xScale = d3.scaleLinear()
.domain(d3.extent(dataFlat,d=> d.time.getFullYear()))
.range([0, xWidth])
xTickValues = (new Array(16)).fill(1).reduce((acc,r,i,l)=>([...acc, i*(1/(l.length-1))]),[])
//mutable dataFlat =(await d3.tsv(`https://gist.githubusercontent.com/tomshanley/42d09e832ade97b354ef268c534f5a92/raw/f83b5172e17bb36661cf3f4b7f7f3c9bf388d23f/data.tsv`)).map(row).sort(function (a, b) { return a.time - b.time; });
function peakTime(d) {
let max = 0
let maxIndex = -1
console.log(d.values)
d.values.forEach(({value},i)=>{
if (value>=max){
maxIndex=i
max=value
}
})
return maxIndex
};
data = datasorted.slice(3,Math.floor(datasorted.length*0.8))
datasorted = data_raw.sort(function (a, b) { return peakTime(a)- peakTime(b) })
data_raw = d3.nest()
.key(function (d) { return d.activity; })
.entries(dataFlat).map(r=>({...r,peakTime:peakTime(r)}))
mutable dataFlat = timeseries_data.map(({word,...data})=>(Object.entries(data).map(([year_str,v_str])=>({activity: word, value:parseFloat(v_str), time:new Date(year_str)})))).flat().sort(function (a, b) { return a.time - b.time; }); // {activity: "Running", time: 2017-01-01T02:00Z, value: 0.007932890871290087}
timeseries_data = FileAttachment('timeseries_data@3.csv').csv()
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.
