d3.group(data,d=>d['serise'])
viewof alpha = Inputs.range([0, 1], {label: "alpha", step: 0.01, value: 0.5})
rawData = d3.csv(getCsvUrl(url), d3.autoType)
viewof stroke_width = Inputs.range([0, 10], {label: "Stroke Width", step: 0.1, value:2})
viewof height = Inputs.range([0, 2000], {label: "height", step: 1, value: 600})
viewof line_type = Inputs.select(["Stright", "Curve", "Step", "StepBefore", "StepAfter"], {label: "Line Type"})
viewof yDomainMax = Inputs.range([0, 2800], {label: "yDomainMax", step: .1, value: 700})
viewof showAxes = Inputs.toggle({label: "showAxes", value: true})
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));
// .curve(d3.curveStepAfter);
switch(line_type){
case "Curve":
line.curve(d3.curveCardinal.tension(alpha));
break;
case "Step":
line.curve(d3.curveStep);
break;
case "StepBefore":
line.curve(d3.curveStepBefore);
break;
case "StepAfter":
line.curve(d3.curveStepAfter);
break;
case "Stright":
}
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]))
.style('stroke-linecap', 'round')
.style('stroke-linejoin', 'round')
// .style('stroke-dasharray', '4 6')
// stroke-linejoin: round;
// stroke-dasharray: 4 6;
// }
if(showAxes){
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: height,
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, yDomainMax])
.range([layout.innerHeight, 0])
.nice()
scaleColor = d3.scaleOrdinal()
.domain(d3.map(data,d => d['serise']))
.range(['#4E83FD', '#50CEFB', '#935AF6', '#FAD355'])
colorDomainArray = [...new Set(d3.map(data,d => d['serise']))];
xAxis = d3.axisBottom().scale(scaleDateX)
yAxis = d3.axisLeft().scale(scaleValueY)
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.
