Published
Edited
Oct 20, 2018
/* radialLineChart = {
const svg = d3.select(DOM.svg(960, 400));
const hour = d => d.Hora
const yValue = d => d.dia1;
const yLabel = 'Users';
const colorValue = "red";
const curveFunction = d3.curveCatmullRom;
const margin = { left:50, right: 50, top: 50, bottom: 75 };
const svg = d3.select('svg');
const width = svg.attr('width');
const height = svg.attr('height');
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
var g = svg.selectAll('g').data([null]);
g = g.enter().append('g')
.merge(g)
.attr('transform',
`translate(${innerWidth/2+margin.left},
${innerHeight/2+margin.top})`);
//draw ticklines
const rMax = 1000;
const rScaleMax = innerHeight/2;
const xTickLength = rScaleMax *1.05;
const numTicks =24;
const xTickAngle = 360/numTicks;
const rScale = d3.scaleLinear()
const aScale = d3.scaleLinear()
rScale
.domain([0,rMax])
.range([0,rScaleMax]);
const rScaleTicks = rScale.ticks(5).slice(1);
var rAxisG = g
.attr('class', 'r axis')
.selectAll('g')
.data(rScaleTicks)
.enter().append('g');
rAxisG
.append('circle')
.attr("r",rScale);
rAxisG
.append('text')
.attr("y", function(d) { return -rScale(d) + 10; })
.attr("transform", "rotate(90)")
.style("text-anchor", "middle")
.text(function(d) { return d; });
var aAxisG = svg.append('g')
.attr('transform',
`translate(${innerWidth/2+margin.left},
${innerHeight/2+margin.top})`)
.attr("class", "r axis")
.selectAll("g")
.data(d3.range(0, 360, xTickAngle))
.enter().append("g")
.attr("transform", function(d) { return "rotate(" + d + ")"; });
aAxisG.append("line")
.attr("x2", rScaleMax);
aAxisG.append("text")
.attr("x", rScaleMax + 6)
.attr("dy", ".35em")
.style("text-anchor", "middle" )
.attr("transform", "rotate(90 " + (rScaleMax + 6) + ",0)")
.text(function(d,i) { return i*100 + "h"; });
const radialPath = d3.lineRadial()
.angle(d => aScale(hour(d)))
.radius(d => rScale(yValue(d)))
.curve(curveFunction);
const row = d => {
d.hr = +d.Hora;
d.dia1 = d["2018-10-18"];
d.dia2 = d["2018-10-19"];
d.dia3 = d["2018-10-20"];
d.dia4 = d["2018-10-21"];
d.dia5 = d["2018-10-22"];
d.dia6 = d["2018-10-23"];
return d;
};
aScale
.domain(d3.extent(dataTemp,hour))
.range([.5*Math.PI,Math.PI*2.5]);
g.append('path')
.data(dataTemp)
.attr('fill', 'none')
.attr('stroke', 'green')
.attr('stroke-opacity', 0.4)
.attr('stroke-width', .25)
.attr('d', radialPath(dataTemp));
}
return svg.node();*/
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.
