Public
Edited
Feb 17, 2023
1 fork
d3.group(data,d=>d['serise'])
viewof alpha = Inputs.range([0, 1], {label: "alpha", step: 0.01, value: 1})
rawData = d3.csv(getCsvUrl(url), d3.autoType)
viewof stroke_width = Inputs.range([0, 10], {label: "Stroke Width", step: 0.1, value:3})
linChart = {
const svg = d3.create('svg').attr('viewBox',[0, 0, layout.width, layout.height])
const g = svg.append('g')
.attr('transform',`translate(${layout.margin.left},${layout.margin.top})`)
let lineg = g.append('g')
.attr('id', 'chart-lines')
let line = d3.line()
.x(d=>scaleDateX(d['date']))
.y(d=>scaleValueY(d['value']))
.curve(d3.curveCardinal.tension(alpha));
lineg.selectAll('g')
.data(d3.group(data,d=>d['serise']))
.join('g')
.append('path')
.attr("fill", "none")
.attr('stroke-width', stroke_width)
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round')
.attr("stroke", d => scaleColor(d[0]))
.attr('d',d=>line.defined(d => d.value !== null)(d[1]))
g.append('g')
.attr('id','x-axis-g')
.attr('transform',`translate(0,${layout.innerHeight})`)
.call(xAxis)
g.append('g')
.attr('id','y-axis-g')
.call(yAxis)
.call(g=>{
g.selectAll('.domain').remove()
g.selectAll(".tick:not(:first-of-type) line")
.clone()
.attr('x2', layout.innerWidth)
.attr('stroke','#f0f0f0')
})
lineg.raise()
// console.log(d3.group(data,d=>d['serise']))
return svg.node()
}
viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})
layout = ({
width: width,
height: 400,
margin: {
top: 30,
bottom: 30,
left: 30,
right: 30
},
get innerWidth(){
return this.width - this.margin.left - this.margin.right
},
get innerHeight(){
return this.height - this.margin.top - this.margin.bottom
},
})
scaleDateX = d3.scaleTime()
.domain(d3.extent(data,d => d['date']))
.range([0,layout.innerWidth])
.nice()
scaleValueY = d3.scaleLinear()
.domain([0,d3.extent(data,d => d['value'])[1]])
.range([layout.innerHeight, 0])
.nice()
scaleColor = d3.scaleOrdinal()
.domain(d3.map(data,d => d['serise']))
.range(d3.schemeCategory10)
colorDomainArray = [...new Set(d3.map(data,d => d['serise']))];
xAxis = d3.axisBottom().scale(scaleDateX)
yAxis = d3.axisLeft().scale(scaleValueY)
getCsvUrl = url => {
url = new URL(url);
const id = url.pathname.split("/")[3]
const gid = new URLSearchParams(url.hash.slice(1)).get("gid") || 0;
return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`
}
data = {
let data = [];
rawData.forEach(obj=>{
Object.keys(obj).filter(d=>d!='Date').forEach(k=>{
data.push({
date: new Date(obj['Date']),
value: obj[k],
serise: k
})
})
})
return data
}
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.
