Public
Edited
Jan 27, 2022
1 fork
4 stars
Liquid flow velocity in pipesTernary plotMerging hexagonsSpotify Pop ArtistsDistance Angle VoronoiAoC 12: shortest path under constraintsVoronoi labelsHello, olliRough PlotCorrelation heatmapUsing d3.blur with PlotJob vacancies in AustraliaWarming stripesAssemblée nationale 2017-2022Minimalist dodge plotPlot.image borderfrom columnar to tidy dataAge/Handgroup, bin and sortPlot.stereoHistogramVariants of SARS-Cov-2 in EuropeVariants du SARS-CoV-2 en FranceTopological subsamplingAnimate a bar chart (OBSOLETE)Metbrewer color schemesHow many books was I reading?Road traffic under COVID restrictions (France)Convex hull mark (#154)Hello, Open MeteoK-means binningMatrix diagramQuasi-random Monte Carlo integrationDifference chartELD ViewerPlot early birdROC curveSkies PlotHappy anniversary, Project Gutenberg!The Sun’s analemmaObservable Plot in a Web WorkerregressionEdit data with PlotConical gradient PlotPlot HyperboloidExperimental Plot BeeswarmThe ARPANET in December 1969Irregular bins histogramLog-scale histogramDatabase Outage Plotcount distinct (#412)Scatterplot matrixIrregular Bar ChartFacet exclusion transformCanvas PlotHow to attach a plot to a DOM elementRenko ChartWaffle ChartQatar Population PyramidSequence LogosStacked bin dots
Slope Chart
Also listed in…
Plot Experiments
Plot.plot({
x: {
axis: "top",
grid: true,
tickSize: 0,
tickFormat: d => d.replace(/ COVID-19 deaths/, ""),
label: "COVID-19 deaths (thousands)"
},
y: { nice: true, axis: null },
marginBottom: 10,
marks: [
Plot.link([0, 1e6], {
x1: () => "Reported COVID-19 deaths",
x2: () => "Total COVID-19 deaths",
y1: d => d,
y2: d => d,
strokeOpacity: 0.1,
strokeDasharray: [4, 4]
}),
linkText(data, {
x1: () => "Reported COVID-19 deaths",
x2: () => "Total COVID-19 deaths",
y1: "Reported COVID-19 deaths",
y2: "Total COVID-19 deaths",
strokeWidth: 0.5,
text: "Country"
}),
Plot.text(data, {
x: () => "Reported COVID-19 deaths",
y: "Reported COVID-19 deaths",
text: d => ["Italy", "Mexico"].includes(d.Country) ? "" : format(d["Reported COVID-19 deaths"]),
textAnchor: "end",
dx: -4
}),
Plot.text(data, {
x: () => "Total COVID-19 deaths",
y: "Total COVID-19 deaths",
text: d => ["Egypt", "Iran", "Brazil"].includes(d.Country) ? "" : format(d["Total COVID-19 deaths"]),
textAnchor: "start",
dx: +4
}),
Plot.text([0, 1e6], {
x: () => "Total COVID-19 deaths",
y: d=>d,
text: format,
textAnchor: "start",
fillOpacity: 0.5,
dx: +4
})
],
height: 600,
width: 350,
marginLeft: 0,
marginRight: 0
})
format = d => d3.format(",")(Math.round(d / 1000))
// This experimental Plot plugin takes the title from a Plot.link mark
// and adds the title as text that follows the path.
function linkText(
data,
{ text, textFill = "currentColor", shade = "white", ...options } = {}
) {
const link = Plot.link(data, { title: text, ...options });
const render = link.render;
link.render = function() {
const l = render.apply(this, arguments);
const g = d3.create("svg:g");
g.node().appendChild(l);
// white shade
g.append("g")
.attr("transform", d3.select(l).attr("transform"))
.selectAll("text")
.data(Array.from(d3.select(l).selectAll("path")))
.join("text")
.attr("dx", d => d.getTotalLength() / 2)
.attr("dy", "0.32em")
.attr("stroke-width", 4)
.attr("stroke", shade)
.attr("fill", shade)
.append("textPath")
.attr("href", (p, i) => `#text${i}`)
.text((p, i) => d3.select(p).text());
// actual text
g.append("g")
.attr("transform", d3.select(l).attr("transform"))
.selectAll("text")
.data(Array.from(d3.select(l).selectAll("path")))
.join("text")
.attr("dx", d => d.getTotalLength() / 2)
.attr("dy", "0.32em")
.attr("stroke", "none")
.attr("fill", textFill)
.append("textPath")
.attr("href", (p, i) => `#text${i}`)
.text((p, i) =>
d3
.select(p)
.attr("id", `text${i}`)
.text()
);
d3.select(l)
.selectAll("title")
.remove();
return g.node();
};
return link;
}
data = d3.csvParse(`Country,Total COVID-19 deaths,Reported COVID-19 deaths
United States of America,905289,574043
India,654395,221181
Mexico,617127,217694
Brazil,595903,408680
Russian Federation,593610,109334
United Kingdom,209661,150519
Italy,175832,121257
Iran,174177,72906
Egypt,170041,13529
South Africa,160452,54390`, d3.autoType)
d3 = require("d3@6")
Plot.link(data, {
x1: () => "Reported COVID-19 deaths",
x2: () => "Total COVID-19 deaths",
y1: "Reported COVID-19 deaths",
y2: "Total COVID-19 deaths"
}).plot({ marginLeft: 100 })
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.