2e:null 2f:["$","title",null,{"children":"A Line Chart to rule them all | Aymeric | Observable"}] 34:Tb9a,chart = { // const width = d3.select(DOM.svg); // console.log(d3.select); const svg = d3.select(DOM.svg(width, height)) .call(zoom) .on('mousemove', moveRuler) .on('mouseout', hideRuler); const clip = svg.append('defs') .append('clipPath') .attr('id', 'clip') .append('rect') .attr('x', margin.left) .attr('y', margin.top) .attr('height', inner_height) .attr('width', inner_width) .call(zoom) ; svg.append('rect') .attr('x', margin.left) .attr('y', margin.top) .attr('height', inner_height) .attr('width', inner_width) .attr('stroke', 'red') .attr('stroke-width', '3px') .attr('stroke-opacity', 0.3) .attr('fill', 'none') .call(zoom); const ruler = svg.append('rect') .attr('x', 0) .attr('y', margin.top+5) .attr('height', inner_height) .attr('width', 2) .attr('class', 'ruler') .attr('opacity', 0) const label = svg.append('text') .attr('text-anchor', 'middle') .attr('class', 'label') .attr('x', 0) .attr('y', margin.top) .attr('opacity', 0) const gX = svg.append('g') .attr('class', 'x-axis') .attr('transform', `translate(0, ${inner_height+margin.top})`) .call(xAxis); const gY = svg.append('g') .attr('class', 'y-axis') .attr('transform', `translate(${margin.left},0)`) .call(yAxis) .call(g => g.select('.y-axis .domain').remove()); for (const i in series) { svg.append('path') .datum(series[i].data.map(d => ({ x: d.x, y: d.y }))) .attr('d', line.curve(interpolate[interpolationMethod])) .attr('clip-path','url(#clip)') .attr('class', 'line ' + series[i].name ) .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .attr('stroke-width', 1) } for (const i in series) { svg.append('circle') .attr('class', 'marker ' + series[i].name ) .attr('cx', 100) .attr('cy', 100) .attr('r', 5) .style('opacity', 0) } const merged_points = d3.merge(series.map(d => d.data)) console.log('series', series); console.log('merged_points', merged_points); const limitedVoronoiCells = limitedVoronoi(merged_points); const limitedVoronoiGroup = svg.append('g') .attr('class', 'voronoiWrapper'); limitedVoronoiGroup.selectAll('path') .data(limitedVoronoiCells) .enter().append('path') .attr('d', function(d, i) { if (typeof d != 'undefined') { return d.path } }) .datum(function(d, i) { if (typeof d != 'undefined') { return d.datum }}) .attr('class', function(d, i) { return `voronoi cell-${i}` }) .attr('clip-path','url(#clip)') .style('stroke', 'lightBlue') .style('fill', 'none') .style('pointer-events', 'all') // .on('mouseenter', showLabel) // .on('mouseout', hideLabel) return svg.node(); }35:T526,function zoom(svg) { const extent = [[margin.left, margin.top], [inner_width+margin.left, inner_height+margin.top]]; svg.call(d3.zoom() .scaleExtent([1, 8]) .translateExtent(extent) .extent(extent) .on("zoom", zoomed)); function zoomed() { const transform = d3.event.transform const xExtent = [margin.left, inner_width+margin.left] const yExtent = [inner_height+margin.top, margin.top] x.range(xExtent.map(d => transform.applyX(d))) // y.range(yExtent.map(d => transform.applyY(d))) // x.domain(transform.rescaleX(x).domain()) // y.domain(transform.rescaleY(y).domain()) const limitedVoronoiCells = limitedVoronoi(merged_points); svg.selectAll(".line").attr("d", line.curve(interpolate[interpolationMethod])); svg.selectAll(".voronoi") .data(limitedVoronoiCells) .attr('d', function(d, i) { if (typeof d != 'undefined') { return d.path } }) .datum(function(d, i) { if (typeof d != 'undefined') { return d.datum }}); x.range(xExtent).nice() y.range(yExtent).nice() svg.selectAll(".x-axis").call(xAxis.scale(transform.rescaleX(x))); svg.selectAll(".y-axis").call(yAxis.scale(transform.rescaleY(y))); svg.selectAll(".y-axis").call(g => g.select(".y-axis .domain").remove()); } }36:T628,function multiChoice(config = {}) { const {title, description, placeholder, submit, options} = config; const checked = config.value const isChecked = value => type === 'checkbox' ? (checked || []).indexOf(value) > -1 : value === checked const type = config.type === 'radio' || config.type === 'checkbox' ? config.type : 'radio' const _options = (Array.isArray(config) ? config : options) .map(o => typeof o === 'string' ? { value: o, label: o } : o) const getValue = input => { if (type === 'checkbox') { return Array.prototype.filter.call(input, radio => radio.checked).map(input => input.value) } const checked = Array.prototype.find.call(input, radio => radio.checked) return checked ? checked.value : undefined } const form = input({ title, description, submit, form: html` `, // By making some simple changes to @jashkenas/input (support for subscribing to the form's // `onchange` event), this code could be spared from declaring `action()` action: form => { const update = (e) => { e && e.preventDefault(); form.value = getValue(form.input) form.dispatchEvent(new CustomEvent("input")) } form.onchange = update update() } }) form.output.remove(); form.style.fontSize = "1em"; return form; }37:T258b,d3.distanceLimitedVoronoi = function () { /////// Internals /////// var voronoi = d3.voronoi().extent([[-1e6,-1e6], [1e6,1e6]]); var limit = 20; // default limit var context = null; // set it to render to a canvas' 2D context function _distanceLimitedVoronoi (data) { if (context!=null) { //renders into a Canvas context.beginPath(); voronoi.polygons(data).forEach(function(cell) { distanceLimitedCell(cell, limit, context); }); return true; } else { //final viz is an SVG return voronoi.polygons(data).map(function(cell) { return { path: distanceLimitedCell(cell, limit, d3.path()).toString(), datum: cell.data }; }); } } /////////////////////// ///////// API ///////// /////////////////////// _distanceLimitedVoronoi.limit = function(_) { if (!arguments.length) { return limit; } if (typeof _ === "number") { limit = Math.abs(_); } return _distanceLimitedVoronoi; }; _distanceLimitedVoronoi.x = function(_) { if (!arguments.length) { return voronoi.x(); } voronoi.x(_); return _distanceLimitedVoronoi; }; _distanceLimitedVoronoi.y = function(_) { if (!arguments.length) { return voronoi.y(); } voronoi.y(_); return _distanceLimitedVoronoi; }; _distanceLimitedVoronoi.extent = function(_) { if (!arguments.length) { return voronoi.extent(); } voronoi.extent(_); return _distanceLimitedVoronoi; }; //exposes the underlying d3.geom.voronoi //eg. allows to code 'limitedVoronoi.voronoi().triangle(data)' _distanceLimitedVoronoi.voronoi = function(_) { if (!arguments.length) { return voronoi; } voronoi = _; return _distanceLimitedVoronoi; }; _distanceLimitedVoronoi.context = function(_) { if (!arguments.length) { return context; } context = _; return _distanceLimitedVoronoi; }; /////////////////////// /////// Private /////// /////////////////////// function distanceLimitedCell (cell, r, context) { var seed = [voronoi.x()(cell.data), voronoi.y()(cell.data)]; if (allVertecesInsideMaxDistanceCircle(cell, seed, r)) { context.moveTo(cell[0][0], cell[0][1]); for (var j = 1, m = cell.length; j < m; ++j) { context.lineTo(cell[j][0], cell[j][1]); } context.closePath(); return context; } else { var pathNotYetStarted = true; var firstPointTooFar = pointTooFarFromSeed(cell[0], seed, r); var p0TooFar = firstPointTooFar; var p0, p1, intersections; var openingArcPoint, lastClosingArcPoint; var startAngle, endAngle; //begin: loop through all segments to compute path for (var iseg=0; isegMath.pow(r, 2)); } function angle(seed, p) { var v = [p[0] - seed[0], p[1] - seed[1]]; // from http://stackoverflow.com/questions/2150050/finding-signed-angle-between-vectors, with v1 = horizontal radius = [seed[0]+r - seed[0], seed[0] - seed[0]] return Math.atan2( v[1], v[0]); } } function segmentCircleIntersections (A, B, C, r) { /* from http://stackoverflow.com/questions/1073336/circle-line-segment-collision-detection-algorithm */ var Ax = A[0], Ay = A[1], Bx = B[0], By = B[1], Cx = C[0], Cy = C[1]; // compute the euclidean distance between A and B var LAB = Math.sqrt(Math.pow(Bx-Ax, 2)+Math.pow(By-Ay, 2)); // compute the direction vector D from A to B var Dx = (Bx-Ax)/LAB; var Dy = (By-Ay)/LAB; // Now the line equation is x = Dx*t + Ax, y = Dy*t + Ay with 0 <= t <= 1. // compute the value t of the closest point to the circle center (Cx, Cy) var t = Dx*(Cx-Ax) + Dy*(Cy-Ay); // This is the projection of C on the line from A to B. // compute the coordinates of the point E on line and closest to C var Ex = t*Dx+Ax; var Ey = t*Dy+Ay; // compute the euclidean distance from E to C var LEC = Math.sqrt(Math.pow(Ex-Cx, 2)+Math.pow(Ey-Cy, 2)); // test if the line intersects the circle if( LEC < r ) { // compute distance from t to circle intersection point var dt = Math.sqrt(Math.pow(r, 2)-Math.pow(LEC, 2)); var tF = (t-dt); // t of first intersection point var tG = (t+dt); // t of second intersection point var result = []; if ((tF>0)&&(tF0)&&(tG\n svg {\n font-family: sans-serif!important;\n // border: 1px solid black;\n }\n .line {\n stroke-width: 2.5px;\n }\n\n\n svg path.line.premium {\n stroke: ${premium_color};\n }\n svg path.line.losses {\n stroke: ${losses_color};\n }\n\n svg .ruler {\n fill: #d3d3d3;\n }\n svg .label {\n fill: #505050;\n }\n svg circle.marker {\n stroke: #ffffff;\n stroke-opacity: 1;\n stroke-width: 2px;\n }\n svg circle.marker.premium {\n fill: ${premium_color};\n stroke-color: ${premium_color};\n }\n svg circle.marker.losses {\n fill: ${losses_color};\n }\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"md `# Chart variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"margin = ({top: top, right: right, bottom: bottom, left: left})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"inner_width = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1405,"value":"inner_height = height - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1409,"value":"series = getSeries('date', data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1411,"value":"merged_points = d3.merge(series.map(function (d) {\n return d.data.map(function (i){ i.name = d.name; return i })\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"options = [{\n 'premium': {\n 'format': '',\n },\n 'losses': {\n 'format': '',\n },\n 'date': {\n 'format': '',\n }\n}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"md`# Utility functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"line = d3.line()\n .defined(d => d)\n .x(d => x(d.x))\n .y(d => y(d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"parseTime = d3.timeParse('%Y')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"x = d3.scaleLinear()\n .range([margin.left, inner_width+margin.left])\n .domain(d3.extent(data, d => d.date))\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"y = d3.scaleLinear()\n .range([inner_height+margin.top, margin.top])\n .domain([0, d3.max(data, d => d.losses)])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"xAxis = d3.axisBottom(x).ticks().tickFormat(d3.formatPrefix(\".0\", 1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"yAxis = d3.axisLeft(y)\n .ticks(height/50)\n .tickFormat(d3.formatPrefix(\".1\", 1e1))\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"function getSeries(basis, data) {\n const columns = Object.keys(data[0])\n const serie_names = columns.filter(d => d!=basis)\n const series = serie_names.map(name => ({\n 'name': name,\n 'options': {},\n 'data': data.map(d => ( {'x': d[basis], 'y': d[name] } ))\n }))\n return series\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"function showLabel (d) {\n // console.log('enter:',d)\n\td3.selectAll('.label')\n\t\t.text((d.y * 100).toFixed(1)+'%')\n\t\t.attr('x', x(d.x))\n\t\t.attr('y', y(d.y)-15)\n\t\t.style('opacity',1);\n\td3.selectAll('.pointer')\n\t\t.attr('cx', x(d.x))\n\t\t.attr('cy', y(d.y))\n\t\t.style('opacity',1);\n\td3.selectAll('.ruler')\n\t\t.attr('x', x(d.x))\n\t\t.style('opacity',1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"value":"function hideLabel (d) {\n // console.log('leaving:',d)\n\td3.selectAll('.label')\n\t\t.style('opacity',0);\n\td3.selectAll('.pointer')\n\t\t.style('opacity',0);\n \n\td3.selectAll('.ruler')\n\t\t.style('opacity',0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"limitedVoronoi = d3.distanceLimitedVoronoi()\n .x(function (d) { return x(d.x) })\n .y(function (d) { return y(d.y) })\n .limit(voronoiLimit)\n .extent([[margin.left, margin.top], [inner_width+margin.left, inner_height+margin.top]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1426,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"moveRuler = function() {\n const x_value = Math.round(x.invert(d3.mouse(this)[0]))\n if (merged_points.map(d => d.x).indexOf(x_value) > -1) {\n d3.selectAll('.ruler')\n .attr('x', x(x_value))\n .style('opacity',1);\n \n d3.selectAll('.label')\n .attr('x', x(x_value))\n .text(x_value)\n .style('opacity',1);\n \n for (const i in series) {\n const found_idx_points = series[i].data.map(d => d.x).indexOf(x_value)\n if ( found_idx_points > -1) {\n const y_value = series[i].data[found_idx_points].y\n d3.selectAll('.marker.'+series[i].name)\n .attr('cx', x(x_value))\n .attr('cy', y(y_value))\n .style('opacity',1);\n } else {\n d3.selectAll('.marker.'+series[i].name)\n .style('opacity',0);\n }\n }\n\n } else {\n d3.selectAll('.ruler')\n .style('opacity',0);\n d3.selectAll('.marker')\n .style('opacity',0);\n d3.selectAll('.label')\n .style('opacity',0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"hideRuler = function () {\n d3.selectAll('.ruler')\n .style('opacity',0);\n d3.selectAll('.marker')\n .style('opacity',0);\n d3.selectAll('.label')\n .style('opacity',0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"md `# Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1380,"value":"csv = `date,premium,losses\n1993,255.00,233.00\n1994,288.00,302.00\n1995,405.00,415.00\n1996,415.00,415.00\n1997,400.00,405.00\n1998,323.00,415.00\n1999,405.00,415.00\n2000,222.66,200.66\n2001,255.00,233.00\n2002,288.00,302.00\n2003,405.00,415.00\n2004,415.00,415.00\n2005,400.00,405.00\n2006,323.00,415.00\n2007,333.29,113.29\n2008,245.29,116.29\n2009,211.64,211.64\n2010,222.66,200.66\n2011,255.00,233.00\n2012,288.00,302.00\n2013,405.00,415.00\n2014,415.00,415.00\n2015,400.00,405.00\n2016,323.00,415.00\n2017,405.00,415.00`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"data = d3.csvParse(csv).map((d) => {\n d.date = +d.date;\n d.premium = +d.premium;\n d.losses = +d.losses;\n return d;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"md `# Useful imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"function radio(config = {}) {\n return multiChoice(Object.assign({ type: 'radio' }, config))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"import { input, slider, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"md `### Distance limited voronoi D3 plugin`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"