PSR B1919+21 / D3 | Observable

Bring your data to life.

Workspace

Public

Edited

Sep 23, 2024

39 forks

126 stars

Visualization

Global temperature trends Beeswarm, Log Scale Contours Density contours Bubble chart component Circle packing component Exploring Data with Vega-Lite Streaming data into Vega Vega-Lite Line Chart Brushable scatterplot Vega-Lite Scatterplot Night Skies — Lights and Light Pollution WebGL Globe Physics based t-SNE Graphviz Ridgeline plot Zoomable sunburst Hierarchical edge bundling Methods of Comparison, Compared Chord diagram A Guide to Guides: Axes & Legends in Vega

PSR B1919+21

Hexbin Stacked-to-grouped bars Tree of Life Heat index Zoomable circle packing Marimekko Vizsla and Vega-Lite Directly labelling lines Parallel coordinates Collapsible tree Tangled tree visualization Marey’s Trains World History Timeline Small multiple chart cartogram The Real MVP in the NBA Animated treemap Density Contour Matrix with Brushing Stars and constellations Hertzsprung–Russell diagram The Coronavirus landscape GitHub Burndown Candlestick Chart Concentration values vs. Time A few days of CO2 levels in my home Irregular bins histogram ELD Viewer Distributions and summary statistics - a collection of Plot examples Mermaid Bivariate Bubble Map D3 gallery Calendar Stacked bar chart Dot plot Connected scatterplot Candlestick chart Histogram Force-directed graph Disjoint force-directed graph Index chart Sankey diagram Line chart, percent change Stacked area chart Bubble chart Area chart Horizontal bar chart Radial tidy tree Circle packing Icicle Streamgraph Tidy tree Cluster tree Sunburst Horizon chart Box plot Scatterplot Difference chart Band chart Bar chart transitions Treemap Line chart, multiple series Scatterplot matrix Brushable scatterplot matrix Playfair's Wheat and Wages

Also listed in…

Gallery

chart = {

const width = 1152;

const height = 760;

const marginTop = 60;

const marginRight = 10;

const marginBottom = 20;

const marginLeft = 10;

const overlap = 16;

const x = d3.scaleLinear()

.domain(d3.extent(pulsar, d => d[0]))

.range([marginLeft, width - marginRight]);

const z = d3.scalePoint()

.domain(pulsar.map(d => d[2]))

.range([marginTop, height - marginBottom]);

const y = d3.scaleLinear()

.domain(d3.extent(pulsar, d => d[1]))

.range([0, -overlap * z.step()]);

const line = d3.line()

.defined(d => !isNaN(d[1]))

.x(d => x(d[0]))

.y(d => y(d[1]));

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox", [0, 0, width, height])

.attr("style", "max-width: 100%; height: auto;");

svg.append("g")

.attr("fill", "white")

.attr("stroke", "black")

.selectAll("path")

.data(d3.group(pulsar, d => d[2]))

.join("path")

.attr("transform", d => `translate(0,${z(d[0])})`)

.attr("d", d => line(d[1]));

svg.append("g")

.attr("transform", `translate(0,${height - marginBottom})`)

.call(d3.axisBottom(x).ticks(width / 80))

.call(g => g.select(".domain").remove())

.call(g => g.select(".tick:first-of-type text").append("tspan").attr("x", 10).text(" ms"));

return svg.node();

}

pulsar = (await FileAttachment("pulsar.csv").csv({typed: true, array: true}))

.flatMap((Y, z) => Y.map((y, x) => [x * 92 / 299, y, z]))

Plot.plot({

width: 1152,

height: 760,

marginTop: 30,

axis: null,

x: {axis: "bottom", label: "Time (ms) →"},

y: {domain: [0, d3.max(pulsar, ([, y]) => y) / 16]},

marks: [Plot.lineY(pulsar, {x: "0", y: "1", fy: "2", fill: "white", stroke: "currentColor", strokeWidth: 1})]

})

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.

Learn more