n = 40
l=250
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
const dataFixed = a_new_data.map(d => (
{
px:d.x,
fx:x(d.x),
py:d.y,
title:d.title,
values:d.values,
length:d.length
}));
//console.log(dataFixed)
let g = svg.append("g").attr('transform',`translate(${width/2},${height/2})`)
.attr("stroke-width", 1.5)
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.selectAll("g")
.data(dataFixed);
g = g.enter().append('g')
.attr("transform", (d,i) => `rotate(${-90+360/dataFixed.length * i}) translate(${100},${0})`);
g.selectAll('circle').data(d=>{
if (d['Occorrenza']==='no ambientazione') {
return Array.from( Array(n), (x,index)=>({ x: d.length/n*(index+1), category: 'empty' }));
}
return Array.from( Array(n), (x,index)=> {
// console.log(d.title)
const val_x = d.length/n*(index+1);
const row = d.values.find(v=>val_x >=v['Start'] && val_x <= v['End']);
let category = 'empty';
let movement = 'no';
let direction = 'none'
if (row) {
category = row['INT EST'];
movement = row['Movimento'];
direction = row['Direzione'];
}
const obj = {
x: val_x,
category: category,
movement: movement,
direction: direction
}
console.log(obj)
return obj;
})
})
.enter().append("circle")
.classed('movement',d=>d.movement!=='-'&&d.movement!=='no')
.attr("fill", d=>color(d.category))
.attr("stroke", d=>d.category!=='empty'?'transparent':'#ccc')
.attr('stroke-alignment','inner')
.attr("r",(d,i)=>r+radiusCorrection(i))
.attr("cx",(d,i)=>l/n*i);
g.selectAll('circle')
.filter(d=>d=>d.movement!=='-'&&d.movement!=='no')
.style('animation-delay', (d,i)=>(d.direction==='IND'?-1:1)*i*150+'ms');
g.append("text")
//.attr("dy", "1.5em")
.attr("x", l)
.text(function (d) { return d.title.slice(0,10);})
.on('mouseenter',function(d){d3.select(this).text(d=>d.title)})
.on('mouseleave',function(d){d3.select(this).text(d=>d.title.slice(0,10))});
return svg.node();
}
y = d3.scaleSqrt()
.domain([-1,30000]).nice()
.range([height - margin.bottom, margin.top])
color = d3.scaleOrdinal()
.range(['#ffc33e','#00c97c','#4a4aff','#fff'])
.domain(['INT','EST','mezzo','empty'])
.unknown(['#ccc'])
radiusCorrection = d3.scaleLinear()
.domain([0,n])
.range([-0.75,0.75])
d3 = require("d3@5")
html`<style>${css}</style>`
import {slider} from "@jashkenas/inputs"
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.
