margin = ({top: 30, right: 30, bottom: 30, left: 50});
height = 300
viewof n = {
const form = html`<form style="font: 12px var(--sans-serif); display: flex; align-items: center; min-height: 33px;">
<label style="display: block;">
<input name="input" type="range" min="1" max="50" value="12" step="1" style="width: 180px;">
n = <output name="output"></output>
</label>
</form>`;
form.oninput = () => form.output.value = form.value = form.input.valueAsNumber;
form.oninput();
return form;
}
data = d3.tsvParse(await FileAttachment("data_test@2.tsv").text())
shapes = d3.scaleOrdinal(data.map(d => d.Condition), d3.symbols.map(s => d3.symbol().type(s).size(64)()))
//xScale = d3.scaleLinear().range([0, width]);
xScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.posx)).nice()
.range([margin.left, width - margin.right])
//yScale = d3.scaleLinear().range([height, 0]);
yScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.posy)).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale).ticks(width / 80))
//.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", width)
.attr("y", margin.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(data.posx))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale))
//.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.posy))
//keys = [];
variable2 = [];
data.forEach(function(d){
d.posx = +d.posx;
d.posy = +d.posy;
if(keys.indexOf(d.TimePoint) == -1){
keys.push(d.TimePoint);
console.log(d.TimePoint);
}
if(variable2.indexOf(d.Condition) == -1){
variable2.push(d.Condition);
}
d.highlight = false;
});
keys = ["v3", "v2"]
fillColors = [
"#0000CD", "#00FF00", "#00FF00", "#FF0000", "#808080", "#000000", "#B22222", "#DAA520",
"#DDA0DD", "#FF00FF", "#00FFFF", "#4682B4", "#E6E6FA", "#FF8C00", "#80008B", "#8FBC8F",
"#00BFFF", "#FFFF00", "#808000", "#FFCCCC", "#FFE5CC", "#FFFFCC", "#E5FFCC", "#CCFFCC"]
// set the colors
zScale = d3.scaleOrdinal()
.range(fillColors).domain(keys);
//zScale = d3.scaleOrdinal(data.map(d => d.TimePoint), d3.schemeCategory10)
zScale.domain()
data.map(d => d.TimePoint)
d3 = require("d3@6")
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.
