chart = {
const svg = d3.select(DOM.svg(size.width + margin.left + margin.right, size.height + margin.bottom + margin.top))
let max = 0
group_data.forEach( d => {
d.forEach( dd => {
if( max < dd.data.length )
max = dd.data.length
})
})
// let opacityScale = d3.scaleLinear()
// .range([0.2, 1])
// .domain([0, max])
// const color = d3.scaleSequential().interpolator(d3.interpolateTurbo).domain([0, max])
const color = d3.scaleSequential(d3[interpolator]).domain([0, max])
// let y = d3.scaleLinear()
// .domain([0, group_data[0].length-1])
// .range([size.height, 0])
let chart = svg.append('g')
.attr("transform", `translate(${margin.left}, ${margin.top})`);
chart.selectAll('g')
.data(group_data)
.enter().append('g')
.selectAll('rect')
.data( (g,i)=>{
return g
})
.enter().append('rect')
.attr('class', 'grid-rect')
.attr('y', d => {
return scaleY(d.date)
})
.attr('x', d => {
return scaleX(d.data.x0)
})
.attr('width', d => {
return scaleX(d.data.x1) - scaleX(d.data.x0) - 1
})
.attr('height', size.rect_height)
.attr('fill', d => {
if(d.data.length == 0)
return "#fff"
// if(d.data.length == 1)
// return "#bdbdbd"
if(d.data.length >= 1)
return color(d.data.length)
})
// .attr('opacity', d => {
// return d.length == 0 ? 0 : opacityScale( d.data.length )
// })
.append("svg:title")
.text( d=> {
let dt = new Date(d.date)
return `Date:${dt.toISOString().split('T')[0]}, Range:${d.data.x0} - ${d.data.x1}, Count: ${d.data.length}`
});
svg.append("g")
.call(xAxis)
svg.append("g")
.call(yAxis)
// svg.selectAll('.ticks-yAxis')
// .data(yScale.ticks(10))
// .enter().append('text')
// .attr('class', '.ticks-yAxis')
// .attr('y', d => {
// return yScale(d)
// })
// .attr('x', width)
// .attr('dy', 15)
// .attr('font-size', 12)
// .text( (d,i) => {
// return i % 2 == 0 ? d : ""
// })
return svg.node()
}
selected_data = qsp_data.filter(d => d.gate_type === selected_gate_type && d.metric === selected_metric)
group_data = {
var arr = new Array()
for (var [key, value] of dataByDate.entries()) {
let hist = histY(value)
let i = arr.length
arr.push(new Array())
hist.forEach(d=>{
arr[i].push({date: key, data: d})
})
}
return arr
}
dataByDate = d3.group(selected_data, d => d.query_date)
xAxis = g => g
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.attr("class", 'y axis')
.call(d3.axisTop(scaleX));
yAxis = g => g
.attr("transform", `translate(${margin.left-5}, ${margin.top})`)
.call(g => g.append("text")
.attr("text-anchor", "end")
.attr("font-weight", "bold")
.text("Year") )
.call(d3.axisLeft(scaleY).tickFormat(d3.timeFormat("%m/%d")).ticks(100).tickSizeOuter(0))
histY = d3.histogram()
.value(d => d.value)
.domain(d3.extent(selected_data, d => d.value))
.thresholds(scaleX.ticks(bin_count));
scaleY = d3.scaleTime()
.domain(d3.extent(selected_data, d => d.query_date))
.range([0, size.height])
scaleX = d3.scaleLinear()
.domain(d3.extent(selected_data, d => d.value))
.range([0, size.width])
size = ({width: 500, height: 2700, rect_width: 20, rect_height: 6, gap: 1})
margin = ({left: 45, right: 5, bottom: 25, top: 25})
import { fullscreen } from "@fil/fullscreen"
import {qsp_data} from "5399596bd18daada"
d3 = require("d3@7")
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.
