2e:null 2f:["$","title",null,{"children":"Intro to D3.js 🌖 SVG gradients | Kie Ichikawa | Observable"}] 34:T7bd,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "#28343e"); svg .selectAll(".planetsTraj") .data(planets) .enter() .append("circle") .attr("transform", (d) => `rotate(10) translate(0 -100)`) .attr("cx", -width / 2) .attr("cy", height / 2) .attr("r", (d) => sizeTrajScale(d.distance)) .attr("class", "planetsTraj") .style("stroke", "gray") .style("stroke-width", 0.5) .style("fill", "none"); svg .selectAll(".stars") .data(stars) .enter() .append("circle") .attr("cx", (d) => xStars(d.x)) .attr("cy", (d) => yStars(d.y)) .attr("r", (d) => rStars(d.r)) .attr("fill", "#fff") .attr("class", "stars"); const gradientRadial = svg .append("defs") .selectAll("radialGradient") .data(planets) .enter() .append("radialGradient") .attr("id", function (d) { return "gradient-" + d.name; }) .attr("cx", "15%") .attr("cy", "50%") .attr("r", "85%"); gradientRadial .append("stop") .attr("offset", "0%") .attr("stop-color", function (d) { return d3.rgb(d.color).brighter(1); }); gradientRadial .append("stop") .attr("offset", "50%") .attr("stop-color", function (d) { return d.color; }); gradientRadial .append("stop") .attr("offset", "100%") .attr("stop-color", function (d) { return d3.rgb(d.color).darker(2.5); }); svg .selectAll(".planets") .data(planets) .enter() .append("circle") .attr("transform", (d) => `rotate(10) translate(0 -100)`) .attr("cx", (d) => x(d.distance)) .attr("cy", height / 2) .attr("r", (d) => sizeScale(d.size)) .attr("class", "planets") .style("fill", function (d) { return "url(#gradient-" + d.name + ")"; }); return svg.node(); }35:[] 32:{"id":"6542a41d0fa56091","slug":"intro-to-d3-js-svg-gradients","title":"Intro to D3.js 🌖 SVG gradients","thumbnail":"7ca0ff9bd48303d3b5aaebe012a16b364a346aa4597fcac3a036934494b3ac17","access_level":"public","create_time":"$D2021-07-17T03:54:01.105Z","update_time":"$D2021-07-27T03:59:10.682Z","view_time":null,"first_public_time":"$D2021-07-17T12:48:02.859Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":"starter_2024"},"version":353,"publish_version":353,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d4542cfe1860f7f","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":null}],"members":[{"type":"individual","id":"5d4542cfe1860f7f","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"010a514e167ce9e2","slug":"intro-to-d3-js","title":"Intro to D3.js","owner":{"id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa"}},"type":"notebook","body":{"title":"Intro to D3.js 🌖 SVG gradients","cells":[{"id":0,"value":"# Intro to D3.js 🌖 SVG gradients\n## *Chart of Cosmic Exploration*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"

\n- Data: [Planets and Satellites](https://devstronomy.com/#/datasets)\n- Reference:\n - [Boost D3.js charts with SVG gradients](https://www.creativebloq.com/how-to/boost-d3js-charts-with-svg-gradients) \n - [ID IIT Fall 2020 Data Visualization Workshop](https://observablehq.com/collection/@zachpino/id-iit-fall-2020-data-visualization-workshop)\n

\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"To see the chart below, click the **Switch to Next** action in the notebook menu.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"sizeScale = d3\n .scaleLinear()\n .domain(d3.extent(planets, (d) => d.size))\n .range([3, 50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"x = d3\n .scaleLinear()\n .domain(d3.extent(planets, (d) => d.distance))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"xTraj = d3\n .scaleLinear()\n .domain(d3.extent(planets, (d) => d.distance))\n .range([margin.left - width * 2, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"sizeTrajScale = d3\n .scaleLinear()\n .domain(d3.extent(planets, (d) => d.distance))\n .range([width / 1.77, width / 0.687])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"xStars = d3\n .scaleLinear()\n .domain(d3.extent(stars, (d) => d.x))\n .range([25, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"yStars = d3\n .scaleLinear()\n .domain(d3.extent(stars, (d) => d.y))\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"rStars = d3\n .scaleLinear()\n .domain(d3.extent(stars, (d) => d.r))\n .range([0.1, 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"stars = {\n let fakeData = [];\n let count = 300;\n\n for (let i = 0; i < count; i++) {\n fakeData.push({\n x: Math.random() * 100,\n y: Math.random() * 100,\n r: Math.random() * 10\n });\n }\n return fakeData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"planets = [\n {\n name: \"Mercury\",\n size: 12878,\n distance: 0.39,\n color: \"#666699\"\n },\n {\n name: \"Venus\",\n size: 12104,\n distance: 0.723,\n color: \"#ffcc00\"\n },\n {\n name: \"Earth\",\n size: 12756,\n distance: 1,\n color: \"#33ccff\"\n },\n {\n name: \"Mars\",\n size: 6787,\n distance: 1.524,\n color: \"#ff6666\"\n },\n {\n name: \"Jupiter\",\n size: 142796,\n distance: 5.203,\n color: \"#ff9977\"\n },\n {\n name: \"Saturn\",\n size: 120660,\n distance: 9.539,\n color: \"#ddcc66\"\n },\n {\n name: \"Uranus\",\n size: 51118,\n distance: 19.18,\n color: \"#99ccff\"\n },\n {\n name: \"Neptune\",\n size: 48600,\n distance: 30.06,\n color: \"#33cccc\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"margin = ({ top: 25, right: 50, bottom: 25, left: 75 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"