30:T45b,html` `31:T11cf,{ /* Set up */ /* ====== */ /* Dimensions and base */ /* ------------------- */ /* Scales */ /* ====== */ /* Axes components */ /* --------------- */ var xAxis = d3 .axisTop(xScale) .tickSizeOuter(0) .tickPadding(10) .tickValues( data.map(function(el) { return el.distance; }) ) .tickFormat(function(d, i) { return data[i].planet + ' ' + d3.format(',')(d) + ' km'; }); /* Axes draw */ /* --------- */ // Drawing the axis var xAxisDraw = svg .insert('g', ':first-child') .attr('class', 'x axis') .call(xAxis); // Move the axis-labels and -lines down var labelHeight = xAxisDraw .select('text') .node() .getBBox().height; xAxisDraw.attr( 'transform', 'translate(0, ' + (height + labelHeight * data.length) + ')' ); // Position the axis text xAxisDraw .selectAll('text') //(d,i)=> -(i * labelHeight + labelHeight) .attr('y', height / 2) .attr('dy', '-50%') .attr('font-size', '10em') .style('text-anchor', 'middle') .style('fill', 'white') .attr("writing-mode", "tb") .attr('glyph-orientation-vertical', -90); // Draw the axis lines xAxisDraw .selectAll('line') .attr('y1', function(d, i) { return -(i * labelHeight + labelHeight); }) .attr('y2', function(d, i) { return -( i * labelHeight + labelHeight + (data.length - 1 - i) * labelHeight + height ); }); /* Build vis */ /* ========= */ /* Sun and planets */ /* --------------- */ d3.select('.planet-group').remove(); var gPlanets = chart .insert('g', '.listener-rect') .attr('class', 'planet-group'); var planets = gPlanets .selectAll('.planet') .data(data) .enter() .append('circle') .attr('class', 'planet') .attr('id', function(d) { return d.planet; }) .attr('cx', function(d) { return xScale(d.distance); }) .attr('cy', 0) .attr('r', function(d) { d.scaledRadius = rScale(d.radius); return d.scaledRadius; }) .attr('filter', 'url(#soft-glow)'); // 7b) /* Zoom */ /* ==== */ // Cross-multiplication to get the minimum zoom so that the furthest away planet // (Pluto) just fits on the screen. 0.75 gives some leeway for the label. var minZoom = (1 / (chartWidth / width)) * 0.9; // Define the zoom behaviour var zoom = d3 .zoom() .scaleExtent([minZoom, 20]) .on('zoom', zoomed); // Listen for zoom events listenerRect.call(zoom); // Zoom function function zoomed() { // Get the transform var transform = d3.event.transform; // Lock at the Sun transform.x = Math.min(0, transform.x); // Re-scale the x scale var xScaleNew = transform.rescaleX(xScale); // Move the planets (semantic) planets .attr('cx', function(d) { return xScaleNew(d.distance); }) .attr('r', function(d) { return d.scaledRadius * transform.k; }); // Semantically zoom and pan the axis xAxis.scale(xScaleNew); xAxisDraw.call(xAxis); // Stagger the axis-labels xAxisDraw.selectAll('text').attr('y', function(d, i) { return -(i * labelHeight + labelHeight); }); // Stagger the axis-lines xAxisDraw .selectAll('line') .attr('y1', function(d, i) { return -(i * labelHeight + labelHeight); }) .attr('y2', function(d, i) { return -( i * labelHeight + labelHeight + (data.length - 1 - i) * labelHeight + height ); }); } // zoomed() /* Initial programmatic zoom */ /* ------------------------- */ // set an initial transform object on the zoom element var initialTransform = d3.zoomIdentity.scale(20); listenerRect.call(zoom.transform, initialTransform); // Trigger programmatic zoom progZoom(); // Programmatic zoom function function progZoom() { // real var zoomOutTransform = d3.zoomIdentity.translate(0, 0).scale(minZoom); listenerRect .transition() .duration(10000) .call(zoom.transform, zoomOutTransform) .on('end', zoomToNormal); function zoomToNormal() { listenerRect .transition() .duration(3000) .ease(d3.easeQuadInOut) .call(zoom.transform, d3.zoomIdentity); } } yield this || html`

Scaled Distances

${svg.node()}

`; }32:T4e9,Glow = { var defs = chart.append('defs'); var glow = defs .append('filter') .attr('id', 'soft-glow') .attr('x', '-200%') .attr('y', '-200%') // start of the filter area .attr('height', '500%') .attr('width', '500%'); // size of the filter area (start + 100% + end) glow .append('feMorphology') .attr('operator', 'dilate') .attr('radius', 1) .attr('in', 'SourceAlpha') .attr('result', 'thicken'); // feMorphology can fatten or thin elements. glow .append('feGaussianBlur') .attr('in', 'thicken') .attr('stdDeviation', 4) .attr('result', 'blurred'); // feGaussianBlur can feather elements. glow .append('feFlood') .attr('flood-color', 'deeppink') .attr('result', 'glowColour'); // feFlood fills or 'floods' the filter area // with the specified color. glow .append('feComposite') .attr('in', 'glowColour') .attr('in2', 'blurred') .attr('operator', 'in') .attr('result', 'softGlow_colored'); // feComposite stitches filter effects together var merge = glow.append('feMerge'); merge.append('feMergeNode').attr('in', 'softGlow_colored'); merge.append('feMergeNode').attr('in', 'SourceGraphic'); // merge applies filter to element }33:[] 2e:{"title":"Planetary System","cells":[{"id":0,"value":"{\n return md`# Planetary System`\n //TODO: Pluto needs to be removed (haha)\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"margin = ({\n top: width * 0.1,\n left: 50,\n bottom: width * 0.1,\n right: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"// The chart *and* screen height\nheight = width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"// Calculate width\nmapScale = 1 / 10e4","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"maxDist = d3.max(data, function(d) {\n return d.distance;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"chartWidth = maxDist * mapScale","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"svg = d3\n .create('svg')\n .attr('width', width)\n .attr('height', height)\n .attr('viewBox', [-margin.left, -margin.right, width, height])","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"chart = svg.append('g').attr('class', 'chart')","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"listenerRect = chart\n .append('rect')\n .attr('class', 'listener-rect')\n .attr('x', 0)\n .attr('y', -margin.top)\n .attr('width', width)\n .attr('height', height + margin.top + margin.bottom)\n .style('opacity', 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"rExtent = d3.extent(data, function(d) {\n return d.radius;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"rScale = d3\n .scaleSqrt()\n .domain([0, rExtent[1]])\n .range([0, height * 0.5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"xScale = d3\n .scaleLinear()\n .domain([0, maxDist])\n .range([0, chartWidth])","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`### DATA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"data = d3.csvParse(`planet,distance,radius\nSun,0,695000\nMercury,58000000,2440\nVenus,108000000,6052\nEarth,150000000,6378\nMars,228000000,3397\nJupiter,778000000,71492\nSaturn,1429000000,60268\nUranus,2871000000,25559\nNeptune,4504000000,24766\nPluto,5913000000,1150`).map(d=>{\n\n return {\n planet: d.planet,\n distance: +d.distance,\n radius: +d.radius,\n text: d.text\n };\n\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"import{slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}