2e:null 2f:["$","title",null,{"children":"Cohort Probabilistic Forecast | Aymeric | Observable"}] 34:T64c,viewof chart = { const svg = d3.select(DOM.svg(width, height)) var model_choice, year_choice; model_choice = model_choice || 'ledger' // year_choice = d3.max(Object.keys(forecast[model_choice]).map(d => parseInt(d))) year_choice = 2017 // meta chart settings let visible, lag, observation_year; // meta data var accident_years = historical.map(function(d){ return d.accident_year }) var forecast_years = [] for (var m in forecast) { for (var y in forecast[m]) { forecast_years = forecast_years.concat(forecast[m][y].map(function(d){return d.x})) } } forecast_years = arrayUnique(forecast_years) var accident_years = historical.map(function(d){ return d.accident_year }) var max_accident_year = d3.max(historical.map(function(d){ return d.accident_year})) var lags = arrayUnique(historical.map(function(d){ return d.development.length-1 })) var max_lag = d3.max(lags) var all_years = arrayUnique(accident_years.concat(forecast_years)) const filtered_data = filterData(model_choice, year_choice) // const cells = getVoronoiCells(data) // Formatting axis xAxis.ticks(filtered_data.accident_years.length/2).tickFormat(d3.format('d')) yAxis.ticks(5, '%') // define x-axis y-axis domain x.domain([x_min, x_max]) y.domain([0, y_max + 0.20]).nice() // draw axis const drawXaxis = svg.append('g') .attr('class', 'axis x') .attr('transform', 'translate(0,' + height + ')') .call(xAxis) const drawYaxis = svg.append('g') .attr('class', 'axis y') .call(yAxis) return svg.node(); }35:T1234,function filterData(model_choice, year_choice) { // forecast points const data_forecast = forecast[model_choice][year_choice] const forecast_points = [] forecast_points = all_years.map( function (y) { if (typeof data_forecast != 'undefined') { for (var i in data_forecast) { if (y == data_forecast[i].x) { let new_point = data_forecast[i] new_point.visible = true return new_point } } } return { 'x': y, 'visible': false, 'median': 0.5, 'average': 0.5, '1_percentile': 0.5, '5_percentile': 0.5, '90_percentile': 0.5, '99_percentile': 0.5, '996_percentile': 0.5, } }) console.log('forecast_points') console.log(forecast_points) // development points // development latest points // development known points // development known line var development_points = [] var development_latest_points = [] var development_known_points = [] var development_known_line = [] for (const e in historical) { for (const d in historical[e].development) { var x = historical[e].accident_year var y = historical[e].development[d] const lag = parseInt(d) const observation_year = lag + x const visible = false if (observation_year<=year_choice) { visible = true } var point = { 'x': x, 'y': y, 'lag': lag, 'visible': visible } if ((x <= year_choice) && (lag == max_lag) && (observation_year> year_choice)) { point.visible = true development_known_points.push(point) } if ((x <= year_choice) && (lag == max_lag) && (observation_year> (year_choice-1))) { point.visible = true development_known_line.push(point) } if (observation_year<=year_choice) { if (lag == max_lag) { development_latest_points.push(point) } else { development_points.push(point) } } } } // development lines var development_lines = []; for (const l in lags) { if (l!=max_lag) { development_lines.push({ 'lag': lags[l], 'data': [], }) } } for (const p in development_points) { var pts = development_points[p]; const lag = pts.lag, x = pts.x, y = pts.y; const observation_year = lag + x const visible = false if (observation_year<=year_choice) { visible = true } if (observation_year<=year_choice) { for (const l in development_lines) { if (development_lines[l].lag == lag) { development_lines[l].data.push({ 'x': x, 'y': y, 'visible': visible }) } } } } // incurred lines // incurred points // incurred latest points var incurred_latest_points = [] var incurred_lines = [] var incurred_points = [] for (const ay in historical) { var cx = parseInt(historical[ay].accident_year) const cy = 0.50 const visible = false if (cx < year_choice) { incurred_lines.push({ 'accident_year': cx, 'data': [] }) } for (const i in historical[ay].incurred) { var lag = parseInt(i) const observation_year = cx + lag if (observation_year <= parseInt(year_choice)) { const cy = historical[ay].incurred[i] const visible = true if (cx 1 return d }) return { 'max_lag' : max_lag, 'forecast_years' : forecast_years, 'accident_years' : accident_years, 'incurred_lines' : incurred_lines, // DONE 'incurred_points' : incurred_points, // DONE 'incurred_latest_points' : incurred_latest_points, // DONE 'development_points' : development_points, // DONE 'development_lines' : development_lines, // DONE 'development_latest_points' : development_latest_points, // DONE // 'development_latest_lines' : development_latest_lines, 'development_known_points' : development_known_points, // DONE 'development_known_line' : development_known_line, // DONE 'forecast_points' : forecast_points, // DONE } }36:Tb89,function getVoronoiCells (filtered_data) { var forecast_keys = [ 'average', 'median', '1_percentile', '5_percentile', '90_percentile', '99_percentile', ] var cell_forecast = [] if (display.includes('forecast')) { for (const key in forecast_keys) { var new_cells = filtered_data.forecast_points new_cells = new_cells.filter( function(d){ return d.visible }) new_cells = new_cells.map(function (d) { return { 'x': d.x, 'y': d[forecast_keys[key]], 'lag': 9, 'label': 'Forecasted Development', 'text': forecast_keys[key], } }) cell_forecast = cell_forecast.concat(new_cells) } } var cell_incurred = [] if (display.includes('incurred')) { cell_incurred = filtered_data.incurred_points.map(function (d) { var filing_year = d.accident_year+ d.lag return { 'x': d.x, 'y': d.y, 'lag': d.lag, 'label': 'Company Loss Estimate', 'text': 'Incurred loss ratio for accident year '+d.accident_year+' as reported in '+filing_year, 'target': '.line.incurred.lag-'+d.lag } }) } var cell_development = [] if (display.includes('paid')) { cell_development = filtered_data.development_points.filter(function (d) { return d.visible}) .map(function (d) { var observation_year = d.x + d.lag return { 'x': d.x, 'y': d.y, 'lag': d.lag, 'label': 'Paid Loss Development', 'text': observation_year+' paid loss ratio for accident year '+ d.x, 'target': '.line.development.lag-'+d.lag } }) } var cell_development_latest = [] if (display.includes('latest')) { cell_development_latest = filtered_data.development_latest_points.filter(function (d) { return d.visible}) .map(function (d) { var observation_year = d.x + d.lag return { 'x': d.x, 'y': d.y, 'lag': d.lag, 'label': 'Latest Loss Development', 'text': observation_year+' paid loss ratio for accident year '+ d.x, 'target': '.line.development.latest' } }) } var cell_development_known = [] if ((filtered_data.development_known_points.length > 0) && (display.includes('latest'))) { cell_development_known = filtered_data.development_known_points.map(function (d) { var observation_year = d.x + d.lag return { 'x': d.x, 'y': d.y, 'lag': d.lag, 'label': 'Actual Loss Development', 'text': 'Actual prediction target is '+ observation_year+' paid loss ratio for accident year '+ d.x, 'target': '.line.development.known' } }) } var cells = cell_development.concat(cell_development_known).concat(cell_forecast).concat(cell_incurred).concat(cell_development_latest); var out = []; for (var i = 0, l = cells.length; i < l; i++) { var unique = true; for (var j = 0, k = out.length; j < k; j++) { if ((cells[i].x === out[j].x) && (cells[i].y === out[j].y)) { unique = false; } } if (unique) { out.push(cells[i]); } } return out }37:T4da,function computeVoronoi (cells) { d3.selectAll('.voronoiWrapper').remove(); var limitedVoronoi = d3.distanceLimitedVoronoi() .x(function (d) { return x(d.x) }) .y(function (d) { return y(d.y) }) .limit(30) .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]) var limitedVoronoiCells = limitedVoronoi(cells); //Initiate a group element to place the voronoi diagram in var limitedVoronoiGroup = svg.append('g') .attr('class', 'voronoiWrapper'); //Create the distance-limited Voronoi diagram limitedVoronoiGroup.selectAll('path') .data(limitedVoronoiCells) //Use vononoi() with your dataset inside .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 }}) //Give each cell a unique class where the unique part corresponds to the circle classes .attr('class', function(d,i) { if (typeof d !== 'undefined') { return 'voronoi ' + d.x + '-' + d.lag; } }) .style('stroke', 'none') .style('fill', 'none') .style('cursor','crosshair') .style('pointer-events', 'all') .on('mouseenter', showLabel) .on('mouseout', hideLabel); }38:T11d4,function updateData (model_choice, year_choice){ console.log('updateData: model_choice ' + model_choice); console.log('updateData: year ' + year_choice); const data = filterData(model_choice, year_choice) const cells = getVoronoiCells(data) // console.log(data) // console.log(cells) d3.selectAll('#development_lines .line') .data(data.development_lines) .attr('d', function (d) { return drawline.curve(d3.curveLinear)(d.data) }) .exit() .style('opacity', 0) d3.selectAll('#development_latest_line .line') .attr('d', drawline.curve(d3.curveLinear)(data.development_latest_points)) .exit() .style('opacity', 0) d3.selectAll('#development_points .point') .data(data.development_points) .attr('cx', function (d) { return x(d.x) }) .attr('cy', function (d) { return y(d.y) }) .style('opacity', function(d){ return d.visible ? 1 : 0 }) .exit() .style('opacity', 0) if ((data.development_known_points.length > 0) && (display.includes('latest'))) { d3.select('#development_known_line').remove() var development_known_line = svg.append('g').attr('id','development_known_line') .append('path') .attr('d', drawline.curve(d3.curveLinear)(data.development_known_line)) .attr('class', function (d) { return 'line development lag-' + data.max_lag }) .style('stroke', colors.purple) .style('stroke-width', 3) .style('stroke-dasharray', ('3, 7')) .style('fill', 'none') } else { d3.select('#development_known_points').remove() } var thickness thickness = 2 d3.selectAll('#forecast_elements .bar.forecast.thin') .data(data.forecast_points) .transition() .attr('x', function (d) { return x(d.x)-thickness/2 }) .attr('y', function (d) { return y(d['99_percentile']) }) .attr('height', function (d) { return height - y(d['99_percentile'] - d['1_percentile']) }) .style('opacity', function(d){ return d.visible ? 1 : 0 }) thickness = 6 d3.selectAll('#forecast_elements .bar.forecast.thick') .data(data.forecast_points) .transition() .attr('x', function (d) { return x(d.x) -thickness/2 }) .attr('y', function (d) { return y(d['90_percentile']) }) .attr('height', function (d) { return height - y(d['90_percentile'] - d['5_percentile']) }) .style('opacity', function(d){ return d.visible ? 1 : 0 }) thickness = 12 d3.selectAll('#forecast_elements .forecast.average') .data(data.forecast_points) .transition() .attr('x1', function (d) { return x(d.x) - thickness/2 }) .attr('y1', function (d) { return y(d.average) }) .attr('x2', function (d) { return x(d.x) + thickness/2 }) .attr('y2', function (d) { return y(d.average) }) .style('opacity', function(d){ return d.visible ? 1 : 0 }) thickness = 6 d3.selectAll('#forecast_elements .forecast.median') .data(data.forecast_points) .transition() .attr('x1', function (d) { return x(d.x) - thickness/2 }) .attr('y1', function (d) { return y(d.median) }) .attr('x2', function (d) { return x(d.x) + thickness/2 }) .attr('y2', function (d) { return y(d.median) }) .style('opacity', function(d){ return d.visible ? 1 : 0 }) d3.selectAll('#development_latest_points .point') .data(data.development_latest_points) .attr('cx', function (d) { return x(d.x) }) .attr('cy', function (d) { return y(d.y) }) .style('opacity', function(d){ return d.visible ? 1 : 0 }) .exit() .style('opacity', 0) d3.selectAll('#incurred_lines .line') .data(data.incurred_lines) .attr('d', function (d) { return drawline.curve(d3.curveMonotoneX)(d.data) }) .style('opacity', function(d){ return d.visible ? 1 : 0 }) .exit() .style('opacity', 0) if ((data.development_known_points.length > 0) && (display.includes('latest'))) { d3.select('#development_known_points').remove() var development_known_points = svg.append('g').attr('id', 'development_known_points') .selectAll('dot') .data(data.development_known_points) .enter().append('circle') .attr('cx', function (d) { return x(d.x) }) .attr('cy', function (d) { return y(d.y) }) .attr('class', function (d) { return 'point development lag-' + d.lag }) .attr('r', 3) .style('fill', colors.background) .attr('stroke-width', 2) .attr('stroke', colors.purple) } else { d3.select('#development_known_points').remove() } d3.selectAll('#incurred_latest_points .point') .data(data.incurred_latest_points) .attr('cx', function (d) { return x(d.x) }) .attr('cy', function (d) { return y(d.y) }) .style('opacity', function(d){ return d.visible ? 1 : 0 }) .exit() .style('opacity', 0) computeVoronoi(cells) }39: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; }3a:[] 32:{"id":"009dc0894b0a4b46","slug":"cohort-probabilistic-forecasts","title":"Cohort Probabilistic Forecast","thumbnail":"032c6b38881394241595471b7953e51296e3d642ea4d91621b49e0be6609850b","access_level":"public","create_time":"$D2018-05-23T18:43:52.992Z","update_time":"$D2018-05-30T20:08:53.600Z","view_time":null,"first_public_time":"$D2018-05-23T20:35:08.551Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3f92d75689c44e97","login":"aymericr","name":"Aymeric","avatar_url":"https://avatars-next.observableusercontent.com/a150523457a1d2fccb0dc4014fadaefc8902de167aeeaf18992ee01d2fc106dd","tier":"starter_2024"},"version":298,"publish_version":298,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c33f9e64f9e66cf","login":"aymericr","name":"Aymeric","avatar_url":"https://avatars-next.observableusercontent.com/a150523457a1d2fccb0dc4014fadaefc8902de167aeeaf18992ee01d2fc106dd","tier":null}],"members":[{"type":"individual","id":"5c33f9e64f9e66cf","login":"aymericr","name":"Aymeric","avatar_url":"https://avatars-next.observableusercontent.com/a150523457a1d2fccb0dc4014fadaefc8902de167aeeaf18992ee01d2fc106dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Cohort Probabilistic Forecast","cells":[{"id":0,"value":"md`# Cohort Probabilistic Forecast`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md `Some chart configuration (fix when porting to platform)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof height = slider({\n min: 0,\n max: 1000,\n step: 10,\n value: 500,\n title: 'height',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"margin = ({\n\ttop: 20,\n\tright: 20,\n\tbottom: 40,\n\tleft: 45\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md `## Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof model_choice = radio({\n title: 'Choose a Forecasting Model',\n description: 'Please select a forecasting model',\n options: [\n { label: 'Ledger MCMC', value: 'ledger' },\n { label: 'Mack SA', value: 'mack_alpha_is_0' },\n { label: 'Mack VW', value: 'mack_alpha_is_1' },\n { label: 'Mack OLS', value: 'mack_alpha_is_2' },\n { label: 'Bootstrap ODP', value: 'ODP_bootstrap_volume_weighted' },\n\n ],\n value: 'ledger'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"model_choice","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof display = checkbox({\n title: 'Display Options',\n description: 'Visibility option for the chart',\n options: [\n { value: 'incurred', label: 'Incurred Loss Ratio' },\n { value: 'paid', label: 'Paid Loss Ratio ' },\n { value: 'latest_paid', label: 'Latest Paid Loss Ratio' },\n { value: 'forecast', label: 'Forecasted Paid Loss Ratio' },\n ],\n value: ['incurred','paid','latest_paid','forecast']\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"display","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md `## Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md `### Style CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"viewof style = html `\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md `## Data from API (Postman mock server)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"data = d3.json('https://2012f590-dc50-43c4-8843-a379b221cc78.mock.pstmn.io/analytics')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"forecast = data['forecast']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"historical = data['historical']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md `### Meta-data for drawing the chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"colors = ({\n \"blue\": \"#2b8ccd\",\n \"grey\": \"#7d8da0\",\n \"purple\": \"#9d81e6\",\n \"green\": \"#20ab73\",\n \"orange\": \"#ff5a00\",\n \"white\": \"#f5f8fc\",\n \"background\": \"#f5f8fc\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"function getAllForecastYears (forecast) {\n let forecast_years = []\n for (var m in forecast) {\n for (var y in forecast[m]) {\n forecast_years = forecast_years.concat(forecast[m][y].map(function(d){return d.x}))\n }\n }\n forecast_years = arrayUnique(forecast_years)\n return forecast_years\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"accident_years = historical.map(function(d){ return d.accident_year })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"forecast_years = getAllForecastYears(forecast)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"all_years = arrayUnique(accident_years.concat(forecast_years))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"max_accident_year = d3.max(accident_years)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"lags = arrayUnique(historical.map(function(d){ return d.development.length-1 }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"max_lag = d3.max(lags)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"filterData('ledger', 2017)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"cells = getVoronoiCells(filtered_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"x_max = d3.max(forecast_years)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"// x_min = d3.min(cells.map(function(d){return parseInt(d.x)}))\nx_min = 1987","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"// y_max = d3.max(cells.map(function(d){return d.y}))\ny_max = 1.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"y_min = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md `### Useful functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"x = d3.scaleLinear().range([margin.left / 2, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"y = d3.scaleLinear().range([height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"xAxis = d3.axisBottom(x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"yAxis = d3.axisLeft(y)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"function moveHandle(h) {\n\tif ((x_min<=h)&&(h<=max_accident_year)){\n\t\tconst year_choice = parseInt(Math.round(h))\n const handle = d3.select('.handle')\n\t\tvar current_year = x.invert(handle.attr('cx'))\n\t\thandle.attr('cx', x(year_choice))\n\t\td3.select('.track-inset').attr('x2', x(year_choice))\n\t\tif (year_choice != current_year) {\n\t\t\tslider.attr('data-year', year_choice)\n\t\t\tupdateData(model_choice, year_choice)\n\t\t}\n\t}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"function showLabel (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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"function hideLabel (d) {\n\td3.selectAll('.label')\n\t\t.style('opacity',0);\n\td3.selectAll('.pointer')\n\t\t.style('opacity',0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"function arrayUnique(array) {\n\tvar a = array.concat();\n\tfor (var i = 0; i < a.length; ++i) {\n\t\tfor (var j = i + 1; j < a.length; ++j) {\n\t\t\tif (a[i] === a[j]) a.splice(j--, 1);\n\t\t}\n\t}\n\treturn a.sort();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"drawline = d3.line()\n\t\t.defined(function (d) { return d })\n\t\t.x(function (d) { return x(d.x) })\n\t\t.y(function (d) { return y(d.y) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`### Useful Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"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":31,"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":33,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { input, slider, color, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"