3f:null 40:["$","title",null,{"children":"test: location risk summaries | akpresto | Observable"}] 46:T1a62,{ const svg = d3.select(DOM.svg(600, 370)); var x_offset = 10; var y_offset = 70; var y_interval = 58; // background /* svg.append('rect').attr('class', 'background') .attr('x', x_offset).attr('y', y_offset).attr('width', 300).attr('height', 4*y_interval).attr('fill', '#f5f5f3')*/ svg.append('text').attr('x', x_offset + 3*50).attr('y', 54).attr('text-anchor', 'middle').text('Typical Risk out of 100') svg.selectAll('rect .risk') .data(colors).enter().append('rect').attr('class', 'risk') .attr('x', d => x_offset + 3*d['min'] + (300/6)) .attr('y', y_offset) .attr('height', 4*y_interval) .attr('width', 2) .attr('fill', function(d,i){/*if (i==colors.length-1){ return 'none'} else */return '#f5f5f3'}) /* svg.selectAll('rect .hazard') .data(state_scores).enter().append('rect').attr('class', 'hazard') .attr('x', x_offset) .attr('y', function(d,i){return y_offset + (i+1)*y_interval-3;}) .attr('height', 6) .attr('width', 300) .attr('fill', function(d,i){if (i == state_scores.length-1) return 'none'; else return '#f5f5f3';}) */ svg.append('text') .text('0') .attr('class', 'label') .attr('x', x_offset) .attr('y', y_offset - 8) .attr('font-size', '8px').attr('text-anchor', 'middle').attr('font-weight', 800) svg.append('text') .text('100') .attr('class', 'label') .attr('x', x_offset + 3*100) .attr('y', y_offset-8).attr('font-size', '8px').attr('text-anchor', 'middle').attr('font-weight', 800) svg.append('rect').attr('class', 'axis').attr('x', x_offset) .attr('y', function(){return y_offset + 4*y_interval;}) .attr('width', 300).attr('height', 0.5).attr('fill', 'black') svg.append('rect').attr('class', 'axis').attr('x', x_offset) .attr('y', y_offset) .attr('width', 0.5).attr('height', 4*y_interval).attr('fill', 'black') const bars = getScoreRangeBars(state_scores); svg.selectAll('rect .bar') .data(bars) .enter() .append('rect') .attr('class', 'bar') .attr('x', function(d){ return x_offset + 3*d['pos']; }) .attr('y', function(d){ return y_offset + d['i']*y_interval + 0.5*y_interval - 6; }) .attr('width', 3) .attr('height', 12) .attr('fill', function(d){ return d3.interpolateSpectral(1-(d['pos']/ 100)); }) .attr('opacity', 0.85) svg.selectAll('rect .bar_outline') .data(state_scores) .enter() .append('rect') .attr('class', 'bar_outline') .attr('x', function(d){ return x_offset + 3*d['p_25']; }) .attr('y', function(d,i){ return y_offset + i*y_interval + 0.5*y_interval - 6; }) .attr('width', function(d,i){ return 3*(d['p_75'] - d['p_25']) }) .attr('height', 12) .attr('fill', 'none') .attr('stroke', 'black').attr('stroke-width', 0.25) svg.selectAll('text .hazard') .data(state_scores) .enter() .append('text') .attr('class', 'hazard') .text(function(d){ return d['hazard']; }) .attr('x', function(d){ return x_offset + 300 + 10; }) .attr('y', function(d,i){ return y_offset + i*y_interval + 0.5*y_interval + 6; }) .attr('font-family', 'Muli').attr('font-weight', 600).attr('font-size', '16px').attr('text-anchor', 'start') svg.selectAll('text .hazard_description') .data(state_scores) .enter() .append('text') .attr('class', 'hazard_description') .text(function(d){ var unit = 'people'; if (d['hazard'] == 'Fire'){unit = 'buildings';} return d['hazard']; }) .attr('x', function(d){ return x_offset + 300 + 10; }) .attr('y', function(d,i){ return y_offset + i*y_interval + 0.5*y_interval + 22; }) .attr('font-family', 'Muli').attr('font-weight', 200).attr('font-size', '11px').attr('text-anchor', 'start') //refactor this for (var s = 0; s < state_scores.length; s++){ var pie_bg = svg.append('g') .attr('x', 0) .attr('y', 0) .attr('width', 400).attr('height', 400) var pie_area = svg.append('g') .attr('x', 0) .attr('y', 0) .attr('width', 400).attr('height', 400) var pie = d3.pie() .sort(null) .value(d => d); var innerRadius = 12; var outerRadius = 18; var arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); pie_bg.append('circle') .attr('cx', x_offset + state_scores[s]['p_50']*3) .attr('cy', y_offset + s*y_interval + 0.5*y_interval) .attr('r', innerRadius) .attr('fill', 'white') .attr('opacity', 0.8) var score = state_scores[s]['p_50']; var donut_data = [score, 100 - score] var arcs = pie(donut_data); var key = 'pie' + s.toString(); var id = "path," + key var bg_key = 'bg_pie' + s.toString(); var bg_id = "path," + bg_key pie_bg.selectAll(bg_id) .data(arcs) .enter().append("path") .attr("fill", '#f5f5f3') .attr('opacity', 1.0) .attr("d", arc) .attr('stroke', 'none') .attr('stroke-width', 0.25) .attr('class', bg_key) .attr('transform', function(){ var x = x_offset + score*3; var y = y_offset + s*y_interval + 0.5*y_interval; return 'translate(' + x + ',' + y + ')'; }) pie_area.selectAll(id) .data(arcs) .enter().append("path") .attr("fill", function(){ return d3.interpolateSpectral(1-(score/ 100)); }) .attr('opacity', function(d,i){ if (i == 0){ return 1.0; } else { return 0.3; } }) .attr("d", arc) .attr('stroke', function(d,i){ if (i==0){return 'black';} else return 'none'; }) .attr('stroke-width', 0.25) .attr('class', key) .attr('transform', function(){ var x = x_offset + score*3; var y = y_offset + s*y_interval + 0.5*y_interval; return 'translate(' + x + ',' + y + ')'; }) } svg.selectAll('text .score') .data(state_scores) .enter() .append('text') .attr('class', 'score') .attr('x', d => x_offset + 3*d['p_50']) .attr('y', function(d,i){ return y_offset + i*y_interval + 0.5*y_interval + 4; }) .text(d => d['p_50']) .attr('font-family', 'Muli').attr('font-weight', 700) .attr('font-size', '11px') .attr('text-anchor', 'middle') svg.selectAll('text .risk') .data(colors).enter().append('text').attr('class', 'risk') .text(d => d.risk) .attr('x', d => x_offset + 3*d['min'] + (300/12)) .attr('y', y_offset + 4*y_interval + 12) .attr('font-family', 'Muli').attr('font-weight', 700).attr('font-size', '10px').attr('text-anchor', 'middle') return svg.node(); }47:T251b,{ const svg = d3.select(DOM.svg(1000, 500)); var state = 'California'; var xScale = d3.scaleLinear().domain([0, 100]).range([0,800]) var fireXScale = d3.scaleLinear().domain([0, 45]).range([800,0]) var y_offset = 30; var x_offset = 30; /*svg.append('rect').attr('class', 'background') .attr('x', x_offset-8).attr('y', 0).attr('width', 1000).attr('height', 460).attr('fill', '#f5f5f3')*/ var states_hash = {'Alabama': 'AL', 'Alaska': 'AK', 'American Samoa': 'AS', 'Arizona': 'AZ', 'Arkansas': 'AR', 'California': 'CA', 'Colorado': 'CO', 'Connecticut': 'CT', 'Delaware': 'DE', 'District Of Columbia': 'DC', 'Federated States Of Micronesia': 'FM', 'Florida': 'FL', 'Georgia': 'GA', 'Guam': 'GU', 'Hawaii': 'HI', 'Idaho': 'ID', 'Illinois': 'IL', 'Indiana': 'IN', 'Iowa': 'IA', 'Kansas': 'KS', 'Kentucky': 'KY', 'Louisiana': 'LA', 'Maine': 'ME', 'Marshall Islands': 'MH', 'Maryland': 'MD', 'Massachusetts': 'MA', 'Michigan': 'MI', 'Minnesota': 'MN', 'Mississippi': 'MS', 'Missouri': 'MO', 'Montana': 'MT', 'Nebraska': 'NE', 'Nevada': 'NV', 'New Hampshire': 'NH', 'New Jersey': 'NJ', 'New Mexico': 'NM', 'New York': 'NY', 'North Carolina': 'NC', 'North Dakota': 'ND', 'Northern Mariana Islands': 'MP', 'Ohio': 'OH', 'Oklahoma': 'OK', 'Oregon': 'OR', 'Palau': 'PW', 'Pennsylvania': 'PA', 'Puerto Rico': 'PR', 'Rhode Island': 'RI', 'South Carolina': 'SC', 'South Dakota': 'SD', 'Tennessee': 'TN', 'Texas': 'TX', 'Utah': 'UT', 'Vermont': 'VT', 'Virgin Islands': 'VI', 'Virginia': 'VA', 'Washington': 'WA', 'West Virginia': 'WV', 'Wisconsin': 'WI', 'Wyoming': 'WY' } svg.append('text') .text('Fire') .attr('x', x_offset) .attr('y', 50+y_offset) .attr('font-family', 'Muli').attr('font-weight', 600).attr('font-size', '16px') svg.append('text') .text('California ranks #9 overall') .attr('x', x_offset) .attr('y', 70+y_offset) .attr('font-family', 'Muli').attr('font-size', '12px') svg.append('text') .text('') .attr('x', x_offset) .attr('y', 150+y_offset) .attr('font-family', 'Muli').attr('font-weight', 600).attr('font-size', '16px') svg.append('text') .text('California ranks #11 overall') .attr('x', x_offset) .attr('y', 170+y_offset) .attr('font-family', 'Muli').attr('font-size', '12px') svg.append('text') .text('Heat') .attr('x', x_offset) .attr('y', 250+y_offset) .attr('font-family', 'Muli').attr('font-weight', 600).attr('font-size', '16px') svg.append('text') .text('California ranks #33 overall') .attr('x', x_offset) .attr('y', 270+y_offset) .attr('font-family', 'Muli').attr('font-size', '12px') svg.append('text') .text('Precipitation') .attr('x', x_offset) .attr('y', 350+y_offset) .attr('font-family', 'Muli').attr('font-weight', 600).attr('font-size', '16px') svg.append('text') .text('California ranks #41 overall') .attr('x', x_offset) .attr('y', 370+y_offset) .attr('font-family', 'Muli').attr('font-size', '12px') var alphas = getTransparency(fireXScale, fire_composite, 'composite_risk_rating', 'California') svg.selectAll('circle .fire') .data(fire_composite) .enter() .append('circle') .attr('class', 'drought') .attr('cx', function(d){ return x_offset + fireXScale(d['composite_risk_rating']) }) .attr('cy', 100+y_offset) .attr('fill', function(d){ if (d['state'] == state){ return 'none'; } else return d3.interpolateSpectral(1-fireXScale(d['composite_risk_rating'])/800); }) .attr('opacity', function(d,i){ if (d['state'] == state){return 1;} else return alphas[i]['circle']; }) .attr('stroke', '#2f3d40').attr('stroke-width',function(d){if (d['state'] == state) return 3; else return 1;}) .attr('r', 8) svg.selectAll('text .fire') .data(fire_composite) .enter() .append('text') .attr('class', 'fire') .text(function(d){return states_hash[d['state']];}) .attr('y', function(d){if (d['state'] == state) return 90 + y_offset-2; else return 90+y_offset + 30;}) .attr('font-family', 'Muli').attr('font-weight', 700) .attr('font-size', function(d){if (d['state']== state) return '14px'; else return '10px';}) .attr('x', function(d){ return x_offset + fireXScale(d['composite_risk_rating']) }) .attr('text-anchor', 'middle') .attr('opacity', function(d,i){ if (d['state'] == state){return 1;} else return alphas[i]['text']; }) var alphas = getTransparency(xScale, scores, 'drought', 'California') svg.selectAll('circle .drought') .data(scores) .enter() .append('circle') .attr('class', 'drought') .attr('cx', function(d){ return x_offset + xScale(d['drought']) }) .attr('cy', 200+y_offset) .attr('fill', function(d){ if (d['state'] == state){ return 'none'; } else return d3.interpolateSpectral(1-d['drought']/100); }) .attr('opacity', function(d,i){ if (d['state'] == state){return 1;} else return alphas[i]['circle']; }) .attr('stroke', '#2f3d40').attr('stroke-width',function(d){if (d['state'] == state) return 3; else return 1;}) .attr('r', 8) svg.selectAll('text .drought') .data(scores) .enter() .append('text') .attr('class', 'drought') .text(function(d){return states_hash[d['state']];}) .attr('y', function(d){if (d['state'] == state) return 190 + y_offset-2; else return 190+y_offset + 30;}) .attr('font-family', 'Muli').attr('font-weight', 700) .attr('font-size', '10px') .attr('x', function(d){ return x_offset + xScale(d['drought']) }) .attr('text-anchor', 'middle') .attr('opacity', function(d,i){ if (d['state'] == state){return 1;} else return alphas[i]['text']; }) var alphas = getTransparency(xScale, scores, 'heat', 'California') svg.selectAll('text .heat') .data(scores) .enter() .append('text') .attr('class', 'heat') .text(function(d){ return states_hash[d['state']]; }) .attr('y', function(d){if (d['state'] == state) return 290 + y_offset-2; else return 290+y_offset + 30;}) .attr('font-family', 'Muli').attr('font-weight', 700) .attr('font-size', '10px') .attr('x', function(d){ return x_offset + xScale(d['heat']) }) .attr('text-anchor', 'middle') .attr('opacity', function(d,i){ if (d['state'] == state){return 1;} else return alphas[i]['text']; }) svg.selectAll('circle .heat') .data(scores) .enter() .append('circle') .attr('class', 'heat') .attr('cx', function(d){ return x_offset + xScale(d['heat']) }) .attr('cy', 300+y_offset) .attr('fill', function(d){ if (d['state'] == state){ return 'none'; } else return d3.interpolateSpectral(1-d['heat']/100); }) .attr('opacity', function(d,i){ if (d['state'] == state){return 1;} else return alphas[i]['circle']; }) .attr('stroke', '#2f3d40').attr('stroke-width',function(d){if (d['state'] == state) return 3; else return 1;}) .attr('r', 8) var alphas = getTransparency(xScale, scores, 'precipitation', 'California') svg.selectAll('text .precipitation') .data(scores) .enter() .append('text') .attr('class', 'precipitation') .text(function(d){ return states_hash[d['state']]; }) .attr('y', function(d){if (d['state'] == state) return 390 + y_offset-2; else return 390+y_offset + 30;}) .attr('font-family', 'Muli').attr('font-weight', 700) .attr('font-size', '10px') .attr('x', function(d){ return x_offset + xScale(d['storm']) }) .attr('text-anchor', 'middle') .attr('opacity', function(d,i){ if (d['state'] == state){return 1;} else return alphas[i]['text']; }) svg.selectAll('circle .precipitation') .data(scores) .enter() .append('circle') .attr('class', 'precipitation') .attr('cx', function(d){ return x_offset + xScale(d['storm']) }) .attr('cy', 400+y_offset) .attr('fill', function(d){ if (d['state'] == state){ return 'none'; } else return d3.interpolateSpectral(1-d['storm']/100); }) .attr('opacity', function(d,i){ if (d['state'] == state){return 1;} else return alphas[i]['circle']; }) .attr('stroke', '#2f3d40').attr('stroke-width',function(d){if (d['state'] == state) return 3; else return 1;}) .attr('r', 8) var axis = d3.axisBottom(xScale).ticks(5) svg.append('g') .attr('transform', function(){ return 'translate('+ x_offset+ ','+ (y_offset+430)+ ')'; }) .call(axis); var fireAxis = d3.axisBottom(fireXScale).ticks(5) svg.append('g') .attr('transform', function(){ return 'translate('+ x_offset+ ','+ (156)+ ')'; }) .call(fireAxis); return svg.node(); }48:T1376,{ const svg = d3.select(DOM.svg(900, 800)); var xScale = d3.scaleLinear().domain([0, 100]).range([0,250]) var x_offset = 400; var y_offset = 50; var y_interval = 50; var sub_y_int = 13; function getCityLines(data){ var lines = [] for (var c = 0; c < data.length; c++){ var entry = [] entry.push({'x': data[c]['lon'], 'y': data[c]['lat']}); entry.push({'x': 0, 'y': c}) lines.push(entry); } return lines; } var map_width = 250 var map_height = 540 var projection = d3.geoAlbersUsa() .fitSize([map_width, map_height], ca_border); var path = d3.geoPath() .projection(projection) .pointRadius(2); svg.append("path") .datum(ca_border) .attr("class", "border") .attr("d", path) .attr('transform', 'translate(30, 0)') //fixme var rScale = d3.scaleLinear().domain([300000,4000000]).range([5,12]) svg.selectAll('circle') .data(top_cities) .enter() .append('circle') .attr('cx', function(d){ return projection([d['lon'], d['lat']])[0]+30; }) .attr('cy', function(d){ return projection([d['lon'], d['lat']])[1]; }) .attr('r',function(d){ return rScale(d['population']) }) .attr('fill', function(d){ return d3.interpolateSpectral(1-(parseFloat(d['storm_score_2050'])+ parseFloat(d['heat_score_2050']) + parseFloat(d['drought_score_2050']))/300); }) .attr('stroke', 'black').attr('stroke-width', 0.5) for (var i = 0; i < 10; i++){ svg.append('rect') .attr('x', x_offset-2) .attr('y', y_offset + i*y_interval - 8) .attr('width', 50 + xScale(100)) .attr('height',42) .attr('fill', 'white') } //HEAT svg.selectAll('rect .heat') .data(top_cities) .enter() .append('rect') .attr('class', 'heat') .attr('x', x_offset) .attr('y', function(d,i){ return y_offset + i*y_interval-6; }) .attr('height', 12) .attr('width', function(d){ return xScale(d['heat_score_2050']); }) .attr('fill', d => d3.interpolateSpectral(1-d['heat_score_2050']/100)).attr('opacity', 0.4) svg.selectAll('text .heat') .data(top_cities) .enter() .append('text') .attr('class', 'heat') .text('Heat') .attr('font-family', 'Muli') .attr('font-size', '10px').attr('font-weight', 700) .attr('x', function(d){ return x_offset + xScale(d['heat_score_2050']+1) }) .attr('y', function(d,i){ return y_offset + i*y_interval - 9 + sub_y_int; }) .attr('text-anchor', 'start') //STORM svg.selectAll('rect .precipitation') .data(top_cities) .enter() .append('rect') .attr('class', 'precipitation') .attr('x', x_offset) .attr('y', function(d,i){ return y_offset + i*y_interval + sub_y_int - 6; }) .attr('height', 12) .attr('width', function(d){ return xScale(d['storm_score_2050']); }) .attr('fill', d => d3.interpolateSpectral(1-d['storm_score_2050']/100)).attr('opacity', 0.4) svg.selectAll('text .precipitation') .data(top_cities) .enter() .append('text') .attr('class', 'precipitation') .text('Precipitation') .attr('font-family', 'Muli') .attr('font-size', '10px').attr('font-weight', 700) .attr('x', function(d){ return x_offset + xScale(d['storm_score_2050']+ 1) }) .attr('y', function(d,i){ return y_offset + i*y_interval - 9 + 2*sub_y_int; }) .attr('text-anchor', 'start') //DROUGHT svg.selectAll('rect .drought') .data(top_cities) .enter() .append('rect') .attr('class', 'drought') .attr('x', x_offset) .attr('y', function(d,i){ return y_offset + i*y_interval + 2*sub_y_int - 6; }) .attr('height', 12) .attr('width', function(d){ return xScale(d['drought_score_2050']); }) .attr('fill', d => d3.interpolateSpectral(1-d['drought_score_2050']/100)).attr('opacity', 0.4) svg.selectAll('text .drought') .data(top_cities) .enter() .append('text') .attr('class', 'drought') .text('Drought') .attr('font-family', 'Muli') .attr('font-size', '10px').attr('font-weight', 700) .attr('x', function(d){ return x_offset + xScale(d['drought_score_2050']+1) }) .attr('y', function(d,i){ return y_offset + i*y_interval - 9 + 3*sub_y_int; }) .attr('text-anchor', 'start') svg.selectAll('text .city') .data(top_cities) .enter() .append('text') .attr('class', 'city') .text(d => d.NAME) .attr('x', x_offset - 110) .attr('y', function(d,i){ return y_offset + i*y_interval + 1.2*sub_y_int; }) .attr('font-family', 'Muli').attr('font-size', '14px').attr('font-weight', 700).attr('text-anchor', 'start') var line = d3.line() .x(function(d,i){ if (i == 0) return projection([d.x, d.y])[0]+30; else return x_offset - 120;}) .y(function(d,i){ if (i == 0) return projection([d.x, d.y])[1]; else return y_offset + d.y*y_interval + 12;}) svg.selectAll('path .line') .data(lineData) .enter() .append('path').attr('class', 'line') .attr('d', line) .attr('stroke', 'black') var axis = d3.axisBottom(xScale).ticks(5) svg.append('g') .attr('transform', function(){ return 'translate('+ x_offset+ ','+ (y_offset+10*y_interval - 16)+ ')'; }) .call(axis); return svg.node(); }49:[{"id":"39cb59ed4f5229ad29403af6038fcce64d6a5145e896d99185c8d60f5c0d900522f58937b589a27f959e840856c6ea5c493512d760bdb7953cdc5828c1075917","href":"https://static.observableusercontent.com/files/39cb59ed4f5229ad29403af6038fcce64d6a5145e896d99185c8d60f5c0d900522f58937b589a27f959e840856c6ea5c493512d760bdb7953cdc5828c1075917","name":"top_ca_sorted@1.csv","type":"text/csv","lastModified":1614912699653.247,"size":530},{"id":"96769d5bd6e1a3560d8648f8d2654fca12790ae0becaec2deb8ceb3b983913efdf0027f588010a515ebfb47e56a6c3502a522ab3401c0ce9ba723ef65b98a037","href":"https://static.observableusercontent.com/files/96769d5bd6e1a3560d8648f8d2654fca12790ae0becaec2deb8ceb3b983913efdf0027f588010a515ebfb47e56a6c3502a522ab3401c0ce9ba723ef65b98a037","name":"state_scores.csv","type":"text/csv","lastModified":1610674523084.468,"size":1442},{"id":"115e58ef88b48f866418122cc450e6991cd40fb9bcc9dade95ad52c0fa765e33d1ff5126b94b805fafb4629b8b4ffb40ee43e151104b119897a4c932b7c2c363","href":"https://static.observableusercontent.com/files/115e58ef88b48f866418122cc450e6991cd40fb9bcc9dade95ad52c0fa765e33d1ff5126b94b805fafb4629b8b4ffb40ee43e151104b119897a4c932b7c2c363","name":"fire_composite_avgs.csv","type":"text/csv","lastModified":1615838628508.974,"size":634}] 44:{"id":"747e708f04da53dc","slug":"location-page-content","title":"test: location risk summaries","thumbnail":"6281f009f6f77a1b2afd54da5c8ee435b48878341e34795fef1f3c56b01c20f8","access_level":"public","create_time":"$D2021-01-14T21:39:14.108Z","update_time":"$D2026-04-24T21:02:33.625Z","view_time":null,"first_public_time":"$D2021-03-10T17:35:57.623Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e8faf16d5c1c7cbd","login":"akpresto","name":"","avatar_url":"https://avatars-next.observableusercontent.com/61a5ea9d22dce32a1c90c1a2d1d55f630547b97427d9e9639ef507a801cdfa86","tier":"starter_2024","bio":"","following":false},"version":799,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3555829e1619758f","login":"akpresto","name":"","avatar_url":"https://avatars-next.observableusercontent.com/61a5ea9d22dce32a1c90c1a2d1d55f630547b97427d9e9639ef507a801cdfa86","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3555829e1619758f","login":"akpresto","name":"","avatar_url":"https://avatars-next.observableusercontent.com/61a5ea9d22dce32a1c90c1a2d1d55f630547b97427d9e9639ef507a801cdfa86","tier":null,"role":"editor"},{"type":"team","id":"e8faf16d5c1c7cbd","login":"akpresto","name":"","avatar_url":"https://avatars-next.observableusercontent.com/61a5ea9d22dce32a1c90c1a2d1d55f630547b97427d9e9639ef507a801cdfa86","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"test: location risk summaries","cells":[{"id":0,"value":"md`# test: location risk summaries`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// california scores by percentile\nstate_scores = [{'hazard': 'Fire', 'p_25': 18, 'p_40': 19, 'p_50': 57, 'p_60': 62, 'p_75': 70}, {'hazard': 'Heat', 'p_25': 37, 'p_40': 37, 'p_50': 46, 'p_60': 49, 'p_75': 55}, {'hazard': 'Drought', 'p_25': 26, 'p_40': 27, 'p_50': 37, 'p_60': 47, 'p_75': 50}, {'hazard': 'Precipitation', 'p_25': 17, 'p_40': 17, 'p_50': 29, 'p_60': 35, 'p_75': 47}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"function getScoreRangeBars(data){\n var rangeBars = []\n for (var i = 0; i < data.length; i++){\n var range = state_scores[i]['p_75'] - state_scores[i]['p_25']\n for (var j = state_scores[i]['p_25']; j < state_scores[i]['p_75']; j++){ // can make this a larger interval\n var entry = {'i': i, 'pos': j};\n rangeBars.push(entry)\n }\n }\n return rangeBars;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"style = html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"lineData = getCityLines(top_cities)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"function getCityLines(data){\n var lines = []\n for (var c = 0; c < data.length; c++){\n var entry = []\n entry.push({'x': data[c]['lon'], 'y': data[c]['lat']});\n entry.push({'x': 0, 'y': c})\n lines.push(entry);\n }\n return lines;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"ca_border = d3.json(\"https://gist.githubusercontent.com/akpresto/4dcce06da629fcf22b433f0a24c63ce3/raw/6d1ebaa98a797be200734c4c481f4c8be1a097b3/california_border.geojson\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"path = d3.geoPath()\n .projection(projection)\n .pointRadius(2);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"map_width = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"map_height = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"projection([-120, 35])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"projection = d3.geoAlbersUsa()\n .fitSize([map_width, map_height], ca_border);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"colors = [{'risk': 'very low', 'color': '#3288bd', 'min': 0}, {'risk': 'low', 'color': '#99d594', 'min': 16.7}, {'risk': 'moderate', 'color': '#e6f598', 'min': 33.3}, {'risk': 'high', 'color': '#fee08b', 'min': 50}, {'risk': 'very high', 'color': '#fc8d59', 'min': 66.7}, {'risk': 'extreme', 'color': '#d53e4f', 'min': 83.3}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"top_cities = d3.csvParse(await FileAttachment('top_ca_sorted@1.csv').text(), d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"function getTransparency(xScale, data, hazard, state){\n var opacities = []\n var placements = {}\n var threshold = 12\n var text_alpha = 1;\n var circle_alpha = 1;\n for (var i = data.length-1; i >= 0; i--){ //go in reverse order\n var placement = Math.round(xScale(parseFloat(data[i][hazard])))\n var n_near = 0\n for (var p = placement - threshold; p <= placement + threshold; p++){\n if (p in placements){\n n_near += placements[p]\n }\n if (p == placement && data['state'] != state){\n if (p in placements){\n placements[p] += 1;\n } else {\n placements[p] = 1;\n }\n }\n }\n if (n_near == 0){text_alpha = 1; circle_alpha = 1;}\n else if (n_near == 1){text_alpha = 0.2; circle_alpha = 0.5;}\n else if (n_near == 2 || n_near == 3){text_alpha = 0.05; circle_alpha = 0.2;}\n else {text_alpha = 0; circle_alpha = 0.05;};\n opacities = [{'text': text_alpha, 'circle': circle_alpha}, ...opacities]\n }\n return opacities;\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"fire_composite = d3.csvParse(await FileAttachment(\"fire_composite_avgs.csv\").text(), d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"scores = d3.csvParse(await FileAttachment(\"state_scores.csv\").text(), d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"