diff --git a/test/data/software-versions.csv b/test/data/software-versions.csv new file mode 100644 index 0000000000..9f8a6496a5 --- /dev/null +++ b/test/data/software-versions.csv @@ -0,0 +1,431 @@ +version +324 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +369 +348 +348 +348 +348 +368 +368 +368 +368 +368 +368 +359 +369 +359 +369 +324 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +368 +348 +368 +368 +368 +368 +348 +368 +348 +348 +348 +369 +348 +368 +368 +368 +368 +368 +368 +368 +359 +359 +359 +359 +324 +348 +348 +348 +368 +368 +348 +348 +348 +348 +348 +368 +368 +368 +348 +348 +348 +348 +348 +368 +369 +348 +348 +348 +348 +368 +368 +368 +368 +368 +368 +368 +359 +369 +359 +359 +324 +348 +348 +348 +348 +348 +348 +348 +368 +368 +348 +348 +348 +348 +348 +348 +348 +348 +368 +368 +348 +369 +348 +348 +348 +368 +368 +368 +368 +368 +368 +368 +359 +359 +359 +359 +324 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +368 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +368 +368 +368 +368 +368 +368 +368 +359 +359 +359 +359 +324 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +369 +348 +348 +348 +368 +368 +368 +368 +368 +368 +368 +359 +368 +369 +359 +324 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +369 +348 +348 +348 +348 +368 +368 +368 +368 +368 +368 +368 +359 +369 +369 +359 +324 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +368 +369 +348 +348 +348 +348 +348 +368 +368 +368 +368 +368 +368 +368 +369 +368 +368 +359 +324 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +369 +348 +348 +368 +368 +368 +368 +368 +368 +368 +369 +359 +369 +359 +324 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +348 +368 +368 +368 +368 +368 +368 +368 +369 +369 +359 +359 +368 +368 +368 +368 +369 +368 +368 +368 +368 +369 +381 +381 +381 +381 +381 +381 +381 +381 +381 +381 +381 +381 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 +429 diff --git a/test/output/softwareVersions.svg b/test/output/softwareVersions.svg new file mode 100644 index 0000000000..ef91ed9fde --- /dev/null +++ b/test/output/softwareVersions.svg @@ -0,0 +1,51 @@ + + + + 0 + + + 10 + + + 20 + + + 30 + + + 40 + + + 50 + + + 60 + + + 70 + + + 80 + + + 90 + + + 100 + Frequency (%) → + + + + + + + + + + + 348368429359369381324 + + + + + \ No newline at end of file diff --git a/test/plots/index.js b/test/plots/index.js index 67812e74c1..694adcd6ec 100644 --- a/test/plots/index.js +++ b/test/plots/index.js @@ -88,6 +88,7 @@ export {default as sfTemperatureBandArea} from "./sf-temperature-band-area.js"; export {default as simpsonsRatings} from "./simpsons-ratings.js"; export {default as simpsonsRatingsDots} from "./simpsons-ratings-dots.js"; export {default as simpsonsViews} from "./simpsons-views.js"; +export {default as softwareVersions} from "./software-versions.js"; export {default as stackedBar} from "./stacked-bar.js"; export {default as stocksIndex} from "./stocks-index.js"; export {default as travelersYearOverYear} from "./travelers-year-over-year.js"; diff --git a/test/plots/software-versions.js b/test/plots/software-versions.js new file mode 100644 index 0000000000..b691e7a069 --- /dev/null +++ b/test/plots/software-versions.js @@ -0,0 +1,41 @@ +import * as Plot from "@observablehq/plot"; +import * as d3 from "d3"; + +export default async function() { + const data = await d3.csv("data/software-versions.csv"); + + function stack({text, fill, ...options} = {}) { + return Plot.stackX( + { + ...Plot.groupZ( + { + x: "proportion", + text: "first" + }, + { + z: "version", + order: "value", + text, + fill + } + ), + reverse: true, + ...options + } + ); + } + + return Plot.plot({ + x: { + percent: true + }, + color: { + scheme: "blues" + }, + marks: [ + Plot.barX(data, stack({fill: "version", insetLeft: 0.5, insetRight: 0.5})), + Plot.text(data, stack({text: "version"})), + Plot.ruleX([0, 1]) + ] + }); +}