Published
Edited
May 14, 2021
3 stars
Plot.plot({
marks: [
Plot.line(dataB_long, {x: 'month', y: 'value'})
],
facet: {
data: dataB_long,
y: 'term',
marginRight: 100
},
width: 900,
height: 2000
})
Plot.plot({
width: 900,
height: 400,
marks: [
Plot.line(dataB_long_forLines.filter(d => d.term == 'Mental illness'),
{x: 'month', y: 'value', z: 'year', curve: 'catmull-rom-open'})
],
})
beeswarm = {
const height = 300;
const width = 1000;
const data = dataA_long
const svg = d3.create("svg")
.attr("height", height)
.attr("width", width)
const max_val = d3.max(data, d => d.value)
const xScale = d3.scaleTime().domain(d3.extent(data, d => d.month)).range([0, width]).clamp(true)
const rScale = d3.scaleSqrt().domain([0, max_val]).range([0, 12])
const force = d3.forceSimulation(data)
.force('forceX', d3.forceX(d => xScale(d.month)).strength(1))
.force('forceY', d3.forceY(height/2).strength(0.1))
.force('collide', d3.forceCollide(d => rScale(d.value) + 0.75))
.stop();
const iterations = 100;
for (let i = 0; i < iterations; ++i) {
force.tick();
};
force.stop();
svg.selectAll("circle")
.data(data)
.join('circle')
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => rScale(d.value))
.style("fill", d => colorScale(d.category));
svg.selectAll('circle')
.on("mouseover", function(e,d) {
tooltip
.html(`<b>Term</b>: ${d.term}`);
let tooltipWidth = tooltip.node().offsetWidth;
let tooltipHeight = tooltip.node().offsetHeight;
tooltip
.style("left", e.pageX - tooltipWidth/2 +'px')
.style("top", e.pageY-tooltipHeight - 10+'px')
.style('visibility', 'visible');
})
.on("mousemove", function(e,d) {
let tooltipWidth = tooltip.node().offsetWidth;
let tooltipHeight = tooltip.node().offsetHeight;
tooltip
.style("left", e.pageX - tooltipWidth/2 +'px')
.style("top", e.pageY-tooltipHeight - 10+'px')
.style('visibility', 'visible');
})
.on("mouseout", function(e,d) {
tooltip
.style('visibility', 'hidden');
});
svg.append("g")
.call(d3.axisTop(xScale))
.style("transform", `translateY(${height*0.75}px`)
return svg.node();
}
radial = {
const svg = d3.create('svg')
.attr('viewBox', [-width/2, -height/2, width, height])
const filteredData = dataB_long_forLines.filter(d => d.term == 'Addiction').sort((a, b) => a.date - b.date)
console.log(filteredData)
const data = d3.groups(filteredData, d => d.term)
svg.append('path')
.attr('fill', 'none')
.attr('stroke', 'steelblue')
.attr('stroke-width', 1.5)
.attr('d', radialLine(filteredData));
// console.log(radialLine(filteredData));
svg.append("g")
.call(xAxis);
svg.append('g')
.call(yAxis);
return svg.node();
}
xAxis = g => g
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.call(g => g.selectAll("g")
.data(xScale.ticks())
.join("g")
// .each((d, i) => { console.log(d); return d.id = new Date(d.month);} )
.call(g => g.append("path")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.attr("d", d => `
M${d3.pointRadial(xScale(d), innerRadius)}
L${d3.pointRadial(xScale(d), outerRadius)}
`))
.call(g => g.append("path")
// .attr("id", d => d.id.id)
.datum(d => [d, d3.utcMonth.offset(d, 1)])
.attr("fill", "none")
.attr("d", ([a, b]) => `
M${d3.pointRadial(xScale(a), innerRadius)}
A${innerRadius},${innerRadius} 0,0,1 ${d3.pointRadial(xScale(b), innerRadius)}
`))
.call(g => g.append("text")
.append("textPath")
.attr("startOffset", 6)
// .attr("xlink:href", d => d.id.href)
.text(d3.utcFormat("%B"))))
yAxis = g => g
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.call(g => g.selectAll("g")
.data(yScale.ticks().reverse())
.join("g")
.attr("fill", "none")
.call(g => g.append("circle")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.attr("r", yScale))
.call(g => g.append("text")
.attr("y", d => -yScale(d))
.attr("dy", "0.35em")
.attr("stroke", "#fff")
.attr("stroke-width", 5)
.text(x => `${x.toFixed(0)}`)
.clone(true)
.attr("y", d => yScale(d))
.selectAll(function() { return [this, this.previousSibling]; })
.clone(true)
.attr("fill", "currentColor")
.attr("stroke", "none")))
width = 900
height = 900
innerRadius = width / 5
outerRadius = width / 2 - margin
margin = 10
radialLine = d3.lineRadial()
// .defined(d => !isNaN(d))
.radius(d => radiusScale(d.value))
.angle(d => xScale(d.month))
.curve(d3.curveCatmullRom)
radiusScale = d3.scaleLinear()
.domain([0, d3.max(dataB_long_forLines, d => d.value)])
.range([innerRadius, outerRadius])
xScale = d3.scaleLinear()
.domain([0, d3.max(dataB_long_forLines, d => d.month + 1)])
.range([0, 2 * Math.PI])
xScale(dataB_long_forLines[0])
yScale = d3.scaleLinear()
.domain(d3.extent(dataB_long_forLines, d => d.value))
.range([innerRadius, outerRadius])
tooltip = d3.select('body')
.append('div')
.attr('id', 'barchart-tooltip')
.style('position', 'absolute')
.style('z-index', '1')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background', 'rgba(0,0,0,0.6)')
.style('border-radius', '4px')
.style('color', '#fff');
colorScale = d3.scaleOrdinal().domain(unique_cats).range(colors)
colors = ['#ec4977', '#ff9063', '#ffd577', '#baf29d', '#00dcd5', '#0cb4f5']
cats = terms.map(d => d.category)
unique_cats = [...new Set(cats)]
terms = FileAttachment("terms_categorization.csv").csv()
function catFinder(term) {
var category
terms.filter(d => {
if (term == d.term) {
category = d.category
}
})
return category
}
dataB_long_forLines = dataB_long.map(d => {
return {
month: d.month.getMonth(),
year: d.month.getFullYear(),
date: d.month,
term: d.term,
category: d.category,
value: d.value
}
})
dataA_long = {
dataA_long_raw.forEach(date => date.month = new Date(date.month))
dataA_long_raw.forEach(date => date.monthNum = Number(date.month))
dataA_long_raw.forEach(value => value.value = +value.value)
dataA_long_raw.forEach(item => item.category = catFinder(item.term))
return dataA_long_raw
}
dataB_long = {
dataB_long_raw.forEach(date => date.month = new Date(date.month))
dataB_long_raw.forEach(date => date.monthNum = Number(date.month))
dataB_long_raw.forEach(value => value.value = +value.value)
dataB_long_raw.forEach(item => item.category = catFinder(item.term))
return dataB_long_raw
}
dataA_long_raw = FileAttachment("indexA_long.csv").csv()
dataB_long_raw = FileAttachment("indexB_long.csv").csv()
dataA = {
indexA.forEach( date => date.month = new Date(date.month) )
return indexA
}
dataB = {
indexB.forEach( date => date.month = new Date(date.month) )
return indexB
}
indexA = FileAttachment("help_trends_indexA.csv").csv({typed:true})
indexB = FileAttachment("help_trends_indexB@2.csv").csv({typed:true})
Plot = require("@observablehq/plot@0.1")
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.
