University of Illinois at Urbana-Champaign | Comparative and World Literature | National Center for Supercomputing Applications |
Unlisted
Edited
Feb 22, 2024
Plot.plot({
//style: "background-color:green",
height: 800,
width: 1000,
marginBottom: 50,
marginTop: 50,
marginRight: 50,
x: {
tickFormat: formatYear,
tickRotate: 45
},
y: {
grid: true
},
marks: [
Plot.rectY(
lata,
Plot.binX(
{
y: "count",
title: "first",
title: (bin) => bin.map((d) => d.Song)
},
{ rx: 8, x: "Year", fill: "Song" }
)
),
Plot.ruleY([0, 1])
]
})
viewof search = Inputs.search(filtered)
Inputs.table(search, {
format: {
Year: (d) => `${d}`
}
})
viewof Lyricists = Inputs.select(
LyricistCounts.map((d) => d[0]),
{
label: "Lyricist",
multiple: true,
value: "Anand Bakshi"
// format: (x) => x.Lyricist,
// value: lata.find((t) => t.Lyricist === "Anand Bakshi")
}
)
viewof MusicDirector = Inputs.select(
["All"].concat(MusicDirectors.map((d) => d[0])),
{
label: "Music Director",
unique: true
// format: (x) => x.MusicDirector
}
)
MusicDirectors = d3
.rollups(
lata,
(v) => v.length,
(d) => d.MusicDirector
)
.sort((a, b) => b[1] - a[1])
LyricistCounts = d3
.rollups(
lata,
(v) => v.length,
(d) => d.Lyricist
)
.sort((a, b) => b[1] - a[1])
lata
Lyricists
filtered = lata.filter((d) => {
let md = MusicDirector == "All" ? true : d.MusicDirector == MusicDirector;
let l = Lyricists.length ? Lyricists.indexOf(d.Lyricist) >= 0 : true;
return md && l;
})
films = lata.map((d) => d.Film)
years = lata.map((d) => d.Year)
lyricists = lata.map((d) => d.Lyricist)
musicdirectors = lata.map((d) => d.MusicDirector)
https://observablehq.com/@observablehq/plot-stack
d3 = require("d3@6")
color = d3.scaleOrdinal(d3.schemeTableau10)
import {swatches} from "@d3/color-legend"
import { importCell } from "@mbostock/dataflow"
import { Range, Select, Table, Checkbox } from "@observablehq/inputs"
import { html, svg } from "@observablehq/htl"
import { palettes } from "@tomshanley/cheysson-color-palettes"
import { pbcopy } from "@mbostock/pbcopy"
formatYear = (year) => `${year}`
fmt = (n) => d3.format(",d")(n)
html`<style>svg { font-size: 14px !important }`
(d3.scaleBivariate = function () {
function scaleBivariate(value) {
var r = reds(value[0]);
var b = blues(value[1]);
return "rgb(" + r + "," + (r + b) / 2 + "," + b + ")";
}
var blues = d3
.scaleThreshold()
.range([255, 205, 155, 105, 55])
.domain([0, 1, 2, 3, 4, 5]);
var reds = d3
.scaleThreshold()
.range([255, 205, 155, 105, 55])
.domain([0, 1, 2, 3, 4, 5]);
return scaleBivariate;
})
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.
