31:Tf2b,chart = { const svg = d3 .create("svg") .attr("viewBox", [-14, 0, width + 28, height]) .style("margin", "0 -14px") .style("background", "#000") .style("color", "#fff") .style("display", "block") .attr("fill", "currentColor") .attr("font-family", "sans-serif") .attr("font-size", 10); svg .append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.color)) .attr("cy", d => y(d.absolute_magnitude)) .attr("fill", d => z(d.color)) .attr("r", 0.5); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3.axisLeft( d3.scaleLog(y.domain().map(m => Math.pow(10, 4.83 - m)), y.range()) ) ); svg .append("g") .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(y).ticks(null, "+")); svg .append("g") .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(d3.scaleLinear(x.domain().map(temperature), x.range()))); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(null, "+f")); svg.selectAll(".domain").remove(); svg .append("text") .attr("dy", 12) .attr("text-anchor", "middle") .attr( "transform", `translate(${margin.left},${(margin.top + height - margin.bottom) / 2}) rotate(-90)` ) .call(text => text .append("tspan") .attr("fill-opacity", 0.8) .text("← darker\xa0") ) .call(text => text .append("tspan") .attr("font-weight", "bold") .text("\xa0Luminosity L☉\xa0") ) .call(text => text .append("tspan") .attr("fill-opacity", 0.8) .text("\xa0brighter →") ); svg .append("text") .attr("dy", -6) .attr("text-anchor", "middle") .attr( "transform", `translate(${width - margin.right},${(margin.top + height - margin.bottom) / 2}) rotate(-90)` ) .call(text => text .append("tspan") .attr("fill-opacity", 0.8) .text("← darker\xa0") ) .call(text => text .append("tspan") .attr("font-weight", "bold") .text("\xa0Absolute magnitude M\xa0") ) .call(text => text .append("tspan") .attr("fill-opacity", 0.8) .text("\xa0brighter →") ); svg .append("text") .attr("x", (margin.left + width - margin.right) / 2) .attr("y", margin.top) .attr("dy", 12) .attr("text-anchor", "middle") .call(text => text .append("tspan") .attr("fill-opacity", 0.8) .text("← hotter\xa0") ) .call(text => text .append("tspan") .attr("font-weight", "bold") .text("\xa0Temperature K\xa0") ) .call(text => text .append("tspan") .attr("fill-opacity", 0.8) .text("\xa0colder →") ); svg .append("text") .attr("x", (margin.left + width - margin.right) / 2) .attr("y", height - margin.bottom) .attr("dy", -6) .attr("text-anchor", "middle") .call(text => text .append("tspan") .attr("fill-opacity", 0.8) .text("← blue\xa0") ) .call(text => text .append("tspan") .attr("font-weight", "bold") .text("\xa0Color B-V\xa0") ) .call(text => text .append("tspan") .attr("fill-opacity", 0.8) .text("\xa0red →") ); return html`

${svg.node()}

`; }32:[{"id":"a01b08636a1314e9dc329d141684564156cb49190d762542f3b8d09a20f7c3275fe0be93d2ed6f9056af7b27708ed91037b729cf12263e63c0eb98abd43702fc","href":"https://static.observableusercontent.com/files/a01b08636a1314e9dc329d141684564156cb49190d762542f3b8d09a20f7c3275fe0be93d2ed6f9056af7b27708ed91037b729cf12263e63c0eb98abd43702fc","name":"catalog.csv","type":"text/csv","lastModified":1575083826903.847,"size":665977}] 2f:{"title":"Hertzsprung–Russell Diagram with blur","cells":[{"id":0,"value":"md`# Hertzsprung–Russell Diagram with blur\n\nAn [HR diagram](https://en.wikipedia.org/wiki/Hertzsprung–Russell_diagram) plots the relationship between stars’ absolute magnitudes (brighter going up) and temperatures (warmer going left). For the large set of stars below, it effectively shows how [stars age over time](https://en.wikipedia.org/wiki/Stellar_evolution). Data: [Hipparcos](http://cdsarc.u-strasbg.fr/viz-bin/cat/I/311), [Gliese](http://cdsarc.u-strasbg.fr/viz-bin/cat/V/70A)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"{\n const view = html`Blur:

0px`;\n  const cover = chart.querySelector('.cover');\n  view.oninput = () => {\n    const amount = view.querySelector('input').value;\n    const filter = `blur(${amount}px)`;\n    cover.style.WebkitBackdropFilter = filter;\n    cover.style.backdropFilter = filter;\n    view.querySelector('.out').textContent = amount + 'px';\n    requestAnimationFrame(() =>\n      chart\n        .querySelectorAll('circle')\n        .forEach(c => c.setAttribute('r', amount / 3 + 0.5))\n    );\n  };\n  view.oninput();\n  return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"data = d3.csvParse(await FileAttachment(\"catalog.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"md`See [this helper notebook](/d/e697f4807166cbd9) for the source data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"z = bv2rgb","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"function bv2rgb(bv) {\n  bv = Math.max(-0.4, Math.min(2, bv));\n  let t;\n  return `#${[\n    bv < 0 ? (t = (bv + 0.4) / 0.4, 0.61 + (0.11 * t) + (0.1 * t * t))\n      : bv < 0.4 ? (t = bv / 0.4, 0.83 + (0.17 * t))\n      : 1,\n    bv < 0 ? (t = (bv + 0.4) / 0.4, 0.70 + (0.07 * t) + (0.1 * t * t))\n      : bv < 0.4 ? (t = bv / 0.4, 0.87 + (0.11 * t))\n      : bv < 1.6 ? (t = (bv - 0.4) / 1.20, 0.98 - (0.16 * t))\n      : (t = (bv - 1.6) / 0.4, 0.82 - (0.5 * t * t)), \n    bv < 0.4 ? 1\n      : bv < 1.5 ? (t = (bv - 0.4) / 1.1, 1 - (0.47 * t) + (0.1 * t * t))\n      : bv < 1.94 ? (t = (bv - 1.5) / 0.44, 0.63 - (0.6 * t * t))\n      : 0\n  ].map(t => Math.round(t * 255).toString(16).padStart(2, \"0\")).join(\"\")}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"function temperature(color) {\n  return 4600 * (1 / (0.92 * color + 1.7) + 1 / (0.92 * color + 0.62));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"x = d3.scaleLinear([-0.39, 2.19], [margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"y = d3.scaleLinear([-7, 19], [margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"margin = ({top: 40, right: 40, bottom: 40, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"height = Math.round(width * 1.2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}