Public
Edited
May 11, 2023
1 fork
viewof slider = rangeSlider({
min: 0,
max: d3.timeDay.count(start, end),
step: 1,
format: d => formatDate(d3.timeDay.offset(start, d)),
title: 'Pick a date range',
})
import { swatches } from "@d3/color-legend"
import {checkbox} from "@jashkenas/inputs"
colorScale = d3.scaleOrdinal(
[...new Set(data.map((d) => d.channelType))],
d3.schemeTableau10
)
sliderDates = slider.map(d => d3.timeDay.offset(start, d))
legend = Swatches(d3.scaleOrdinal()
.domain(["Corporate"])
.range(["#e87657"]))
//beeswarm(dataset, assex, assey, colore, dimensione)
chart = beeswarm(data, "date", "videoCategoryLabel", "channelType", "viewCount", "videoTitle")
end = new Date(2022, 1, 31)
style = html`
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Spectral:ital,wght@0,300;0,400;0,500;1,400&display=swap');
.toolTip {
position: absolute;
display: none;
min-width: 30px;
max-width: 350px;
border-radius: 4px;
overflow-wrap: break-word;
height: auto;
background: rgba(250,250,250, 0.9);
border: 1px solid #DDD;
padding: 4px 8px;
font-size: .85rem;
font-family: 'Spectral', serif;
text-align: left;
z-index: 1000;
}
.toolTip h4{
font-family: 'DM Sans', sans-serif;
line-height:1rem;
margin-top:0.85rem;
}
</style>
`
dataFile = FileAttachment("Combined data - beeswarm_visualization (4)@1.csv").csv()
parseDate = d3.timeParse("%Y-%m-%dT%H:%M:%SZ")
formatDate = d3.timeFormat("%Y-%m-%dT%H:%M:%SZ")
data = dataFile.map((d) => {
return {
...d,
date: parseDate(d.date),
videoCategoryLabel: d.videoCategoryLabel,
count:+d.viewCount,
title: d.videoTitle,
channelType: d.channelType
};
})
d3 = require("d3@v6")
import {Legend, Swatches} from "@d3/color-legend"
import { rangeSlider as rangeSlider } from '@mootari/range-slider'
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.
