DataWide=FileAttachment("datawide@2.csv").csv({typed: true})
DataLong = FileAttachment("datalong-1 (1).csv").csv({typed: true})
DataLongGrouped=d3.groups(PreData, d => d.order)
Plot.plot({
height: 800,
width:800,
y: { axis: null },
x: { type: "band" , grid: true},
fy: { axis: null, label: null },
facet: { data: PreData, y: "index", marginRight: 0 },
marks: [ Plot.areaY(PreData, {x: "order", y1:"value", curve:"natural", fillOpacity: 1}) ,
Plot.areaY(PreData, {x: "order", y2:"valueNeg",curve:"natural", fillOpacity: 0.5, fill:"red"}) ]
})
Plot.plot({
height: 400,
width:800,
x: { axis: null },
fx: { axis: null, label: null },
facet: { data: PreData, x: "name", marginRight: 0 },
marks: [ Plot.areaX(PreData, {y: "order", x1:"value",x2:"valueNeg", fillOpacity: 0.2}) ]
})
Plot.plot({
height: 400,
width:1000,
x: { axis: null, domain: PreData.name },
y: { grid: null, tickFormat: "s" },
color: { domain: PreData.order, scheme: "spectral" },
fx: {
domain: d3.groupSort(PreData, v => d3.sum(v, d => d.value), d => d.order).slice(0, 77),
label: null,
tickSize: 0
},
facet: { data: PreData, x: "order" },
marks: [
Plot.barY(PreData, {x: "name", y: "value", fill: "order"}),
Plot.ruleY([0])
]
})
md` **The dots are where the timeseries get knoted to the thread of line. Two parelel series ("offering help" "asking for help" ) crosed bu the one series ("time") **`
Plot.plot({
height: 1200,
width:1200 ,
y: { axis: null },
x: { type: "band" },
r: { range: [0, 5] },
fy: { axis: true, label: null },
facet: { data: PreData, y: "index", marginRight: 0 },
marks: [ Plot.dot(PreData, {x: "order", y:"name", r: "radius", fill:"black", fillOpacity:1 }),
//Plot.dot(PreData, {x: "order2", y:"name", r:"value2", fill:"red", fillOpacity:0.5 } )
]
})
mesh={
const width=950;
const height=900;
const margin = ({top: 20, right: 20, bottom: 20, left: 20})
const svg = d3.select(DOM.svg(width, height));
const subjectamount=d3.max(OvalData, d => d.cy);
const monthamount=d3.max(OvalData, d => d.cx);
const separation=height/subjectamount;
// ADDING THE THREADS=GRIDS ////////////////////////////////////////////////////////////////////////
var scaleX = d3.scaleLinear().domain([0,monthamount]) .nice().range([margin.left, width-margin.right]);
var scaleY = d3.scaleLinear().domain([0,subjectamount]).nice().range([margin.top, height-margin.bottom]);
function make_x_gridlines() { return d3.axisBottom(scaleX) }
function make_y_gridlines() { return d3.axisLeft(scaleY) }
svg.append("g")
.attr("class", "grid")
.attr("color", "darkgrey")
.attr("opacity", 0.4)
.style("stroke-width", 5)
.attr("transform", "translate( 0, "+ (height-margin.bottom+separation) +") ")
.call(make_x_gridlines().tickSize(-height+margin.top+margin.bottom-(separation*2)) .tickFormat("")
.ticks(monthamount) )
svg.append("g")
.attr("class", "grid")
.attr("color", "#e3428a")
.attr("opacity", 0.4)
.style("stroke-width", 2)
.attr("transform", "translate( "+ (margin.left) +", 0) ")
.call(make_y_gridlines() .tickSize(-width+margin.left+margin.right) .tickFormat("") .ticks(subjectamount) )
svg.append("g")
.attr("class", "grid")
.attr("color", "#0486cc")
.attr("opacity", 0.4)
.style("stroke-width", 2)
.attr("transform", "translate( "+ (margin.left) +", "+ (separation/6) +") ")
.call(make_y_gridlines() .tickSize(-width+margin.left+margin.right) .tickFormat("") .ticks(subjectamount) )
// ADDING THE KNOTS=ELLIPSES ////////////////////////////////////////////////////////////////////////
svg.selectAll("ellipse1")
.data(OvalData)
.enter()
.append("ellipse")
.attr("cx", d => scaleX( d.cx ) )
.attr("cy", d => scaleY( d.cy ) +separation/12 )
.attr("rx", d => d.rminor/(separation/6))
.attr("ry", d => d.rmajor/(separation/6))
.attr('fill-opacity', .8)
.attr('fill', "#e3428a")
.attr("transform", d=>`rotate(45, ${scaleX(d.cx)}, ${scaleY(d.cy)+separation/12})`)
svg.selectAll("ellipse2")
.data(OvalData)
.enter()
.append("ellipse")
.attr("cx", d => scaleX(d.cx ) )
.attr("cy", d => scaleY(d.cy) +separation/12)
.attr("rx", d => d.rminor/(separation/6))
.attr("ry", d => d.rmajor/(separation/6))
.attr('fill-opacity', .8)
.attr('fill', "#0486cc")
.attr("transform", d=>`rotate(-45,${scaleX(d.cx)}, ${scaleY(d.cy)+separation/12})`)
svg.selectAll("circle")
.data(OvalData)
.enter()
.append("circle")
.attr("cx", d => scaleX(d.cx ) )
.attr("cy", d => scaleY(d.cy) +separation/10)
.attr("r", d => (separation/12 ))
.attr('fill-opacity', 0)
.attr('fill', "black")
.attr("transform", d=>`rotate(-0,${scaleX(d.cx)}, ${scaleY(d.cy)+separation/12})`)
return svg.node();
}
valuenumber
viewof valuenumber = html`<input type=range min="0" max="77" value="1" step="1">`
safetynet={
const svg = d3.select(DOM.svg(800, 800));
var scaleX = d3.scaleLinear().domain([0,d3.max(PreData, d => d.value)]).nice().range([0, 800]);
var scaleY = d3.scaleLinear().domain([0,d3.max(PreData, d => d.index)]).nice().range([0, 800]);
var line = d3.line() .x(d => scaleX(d.value)) .y(d => scaleY(d.index));
svg.selectAll('.line')
.data(DataLongGrouped)
.join('path')
.attr("class", "line")
.attr("d", d =>(line(d[1])) )
.attr('stroke', "black")
.attr('fill', "none")
.style('opacity', function(d) { if((d[0]) == valuenumber ) { return 1 } else {return 0} })
return svg.node();
}
import {Plot, d3} from "@observablehq/plot"
shape2path = require("shape2path@3");
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.
