2f:Tc0d,change_over_time_county_static = { const plot = Plot.plot({ style: { fontSize: "14px", fontFamily: "'Open Sans', sans-serif" }, marginLeft: 100, marginTop: 30, marginBottom: 75, x: { grid: false, domain: [-700, 580], label: `Percentage change of clearance rates & \n change in inflation adjusted per capita spending`, labelOffset: 50, ticks: 0 // tickFormat: percent_format }, y: { label: null, domain: [ "California", "", " ", "Alameda", "San Mateo", "Ventura", "Fresno", "San Francisco", "Los Angeles", "Solano", "San Diego", "San Bernardino", "Santa Clara", "Orange", "Santa Barbara", "Monterey", "Tulare", "Contra Costa", "Sonoma", "Riverside", "Sacramento", "San Joaquin", "Kern", "Stanislaus", "Placer" ], tickSize: 0 }, marks: [ Plot.barX(county_change_over_time_data, { x: (d) => d.per_cap_spending - d.spending_baseline, y: "county", fill: "#1864aa", title: (d) => `${d.county} \n spends ${dollar_format( d.per_cap_spending - d.spending_baseline )} more per capita than in 2003` }), Plot.text(county_change_over_time_data, { x: (d) => d.per_cap_spending - d.spending_baseline, y: "county", dx: 24, dy: 0, text: (d) => d.per_cap_spending - d.spending_baseline > 0 ? `+ ${dollar_format(d.per_cap_spending - d.spending_baseline)}` : `${dollar_format(d.per_cap_spending - d.spending_baseline)}` }), Plot.dot(county_change_over_time_data, { x: 0, y: "county", dx: 0, dy: 0, fill: "red", r: 4 }), Plot.arrow(county_change_over_time_data, { x2: (d) => d[county_static_rate] * 700, y1: "county", x1: 0, y2: "county", stroke: "red", strokeWidth: 1.5, title: (d) => `Clearances for ${county_rate_input} \n went from \n ${percent_format( d[county_static_rate_historical] )} to ${percent_format(d[county_static_rate_2021])}` }), Plot.text(county_change_over_time_data, { x: (d) => (d[county_static_rate] < 0 ? d[county_static_rate] * 700 : 0), y: "county", dx: -20, dy: 0, text: (d) => `${percent_format(d[county_static_rate])}`, title: (d) => `Clearances for ${county_static_rate} \n went from \n ${percent_format( d[county_static_rate_historical] )} to ${percent_format(d[county_static_rate])}` }) ], caption: html`

Source: CJCJ analysis of California Department of Justice Data and California Comptroller Data, 2021 vs 2003.

`, tooltip: { opacity: 0.7 } }); return plot; }30:T1091,jurisdiction_list = [ "Adelanto", "Alameda", "Alhambra", "Aliso Viejo", "Anaheim", "Antioch", "Apple Valley", "Arcadia", "Atascadero", "Atwater", "Azusa", "Bakersfield", "Baldwin Park", "Banning", "Barstow", "Beaumont", "Bell", "Bell Gardens", "Bellflower", "Belmont", "Benicia", "Berkeley", "Beverly Hills", "Brawley", "Brea", "Brentwood", "Buena Park", "Burbank", "Burlingame", "Butte", "Calaveras", "Calexico", "Camarillo", "Campbell", "Carlsbad", "Carson", "Cathedral City", "Ceres", "Cerritos", "Chico", "Chino", "Chino Hills", "Chula Vista", "Claremont", "Clovis", "Coachella", "Colton", "Compton", "Concord", "Contra Costa", "Corona", "Costa Mesa", "Covina", "Culver City", "Cupertino", "Cypress", "Daly City", "Dana Point", "Danville", "Davis", "Delano", "Desert Hot Springs", "Diamond Bar", "Downey", "Dublin", "East Palo Alto", "El Cajon", "El Centro", "El Cerrito", "El Dorado", "El Monte", "Encinitas", "Escondido", "Eureka", "Fairfield", "Folsom", "Fontana", "Foster City", "Fountain Valley", "Fremont", "Fresno", "Fullerton", "Galt", "Garden Grove", "Gardena", "Gilroy", "Glendale", "Glendora", "Goleta", "Hanford", "Hawthorne", "Hayward", "Hemet", "Hercules", "Hesperia", "Highland", "Highway Patrol", "Hollister", "Humboldt", "Huntington Beach", "Huntington Park", "Imperial", "Imperial Beach", "Indio", "Inglewood", "Irvine", "Kern", "Kings", "La Habra", "La Mesa", "La Mirada", "La Puente", "La Quinta", "La Verne", "Lafayette", "Laguna Hills", "Laguna Niguel", "Lake", "Lake Elsinore", "Lake Forest", "Lakewood", "Lancaster", "Lawndale", "Lemon Grove", "Lemoore", "Lincoln", "Livermore", "Lodi", "Loma Linda", "Lompoc", "Long Beach", "Los Altos", "Los Angeles", "Los Banos", "Los Gatos", "Lynwood", "Madera", "Manhattan Beach", "Manteca", "Marin", "Martinez", "Maywood", "Mendocino", "Menlo Park", "Merced", "Milpitas", "Mission Viejo", "Modesto", "Monrovia", "Montclair", "Montebello", "Monterey", "Monterey Park", "Moorpark", "Moreno Valley", "Morgan Hill", "Mountain View", "Murrieta", "Napa", "National City", "Nevada", "Newark", "Newport Beach", "Norwalk", "Oakland", "Oakley", "Oceanside", "Ontario", "Orange", "Oxnard", "Pacifica", "Palm Desert", "Palm Springs", "Palmdale", "Palo Alto", "Paramount", "Pasadena", "Paso Robles", "Perris", "Petaluma", "Pico Rivera", "Pittsburg", "Placentia", "Placer", "Pleasant Hill", "Pleasanton", "Pomona", "Porterville", "Poway", "Rancho Cucamonga", "Rancho Palos Verdes", "Rancho Santa Margarita", "Redlands", "Redondo Beach", "Redwood City", "Rialto", "Richmond", "Ridgecrest", "Riverside", "Rocklin", "Rohnert Park", "Rosemead", "Roseville", "Sacramento", "Salinas", "San Bernardino", "San Bruno", "San Clemente", "San Diego", "San Dimas", "San Francisco", "San Gabriel", "San Jacinto", "San Joaquin", "San Jose", "San Juan Capistrano", "San Leandro", "San Luis Obispo", "San Marcos", "San Mateo", "San Pablo", "San Rafael", "San Ramon", "Sanger", "Santa Ana", "Santa Barbara", "Santa Clara", "Santa Clarita", "Santa Cruz", "Santa Monica", "Santa Paula", "Santa Rosa", "Santee", "Saratoga", "Seal Beach", "Seaside", "Shasta", "Simi Valley", "Soledad", "Sonoma", "South Gate", "South Pasadena", "South San Francisco", "Stanislaus", "Stanton", "Stockton", "Suisun City", "Sunnyvale", "Tehama", "Temecula", "Temple City", "Thousand Oaks", "Torrance", "Tracy", "Tulare", "Tuolumne", "Turlock", "Tustin", "Twentynine Palms", "Union City", "Upland", "Vacaville", "Vallejo", "Ventura", "Victorville", "Visalia", "Vista", "Walnut", "Walnut Creek", "Watsonville", "West Covina", "West Hollywood", "West Sacramento", "Westminster", "Whittier", "Windsor", "Woodland", "Yolo", "Yorba Linda", "Yuba", "Yuba City", "Yucaipa" ]31:Td03,function searchCheckbox( data, // An array of possible selectable options options ) { options = { value: [], optionsCheckboxes: undefined, // use this if you want to pass specific options to the checkboxes or the search optionsSearch: { filter: fullSearchFilter // searches in the whole word }, height: 300, ...options }; // To remove the label from the options for the checkboxes function cloneIgnoring(obj, attrToIgnore) { const { [attrToIgnore]: _, ...rest } = obj; return rest; } data = Array.from(data); options.value = options.value === undefined ? [] : options.value; let checkboxes = Inputs.checkbox( data, options.optionsCheckboxes || cloneIgnoring(options, "label") ); const search = Inputs.search(data, options.optionsSearch || options); const btnAll = html``; const btnNone = html``; let selected = new Map(Array.from(options.value).map((d) => [d, true])); function countSelected() { return Array.from(selected.entries()).filter(([k, v]) => v).length; } function changeSome(sel, changeTo) { for (let o of sel) selected.set(o, changeTo); } function selectedFromArray(sel) { changeSome(data, false); changeSome(sel, true); } function selectedToArray() { return Array.from(selected.entries()) .filter(([k, v]) => v) .map(([k, v]) => k); } // HTML let output = htl.html`(${countSelected()} of ${ data.length } selected)`; const component = htl.html`${ options.label ? htl.html`${options.label}` : "" } ${output} ${search}

${btnAll}

${btnNone}

${checkboxes}

`; // Update the display whenever the value changes Object.defineProperty(component, "value", { get() { return selectedToArray(); }, set(v) { selectedFromArray(v); } }); function updateValueFromSelected() { checkboxes.value = selectedToArray(); output.innerHTML = `(${countSelected()} of ${data.length} selected)`; component.dispatchEvent(new Event("input", { bubbles: true })); } btnAll.addEventListener("click", () => { changeSome(search.value, true); updateValueFromSelected(); }); btnNone.addEventListener("click", () => { changeSome(search.value, false); console.log("None", selectedToArray()); updateValueFromSelected(); }); component.value = selectedToArray(); search.addEventListener("input", (evt) => { // Hide all the checkboxes that aren't in the searchbox result for (let check of checkboxes.querySelectorAll("input")) { if (search.value.includes(data[+check.value])) { check.parentElement.style.display = "inline-block"; } else { check.parentElement.style.display = "none"; } } // We don't really need to update when value when searching // component.dispatchEvent(new Event("input", { bubbles: true })); }); checkboxes.addEventListener("input", (evt) => { // avoids duplicated events evt.stopPropagation(); selectedFromArray(checkboxes.value); updateValueFromSelected(); }); return component; }32:T1f1b,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/multi-line-chart function LocalLineChart( data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 130, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat = percent_format, yLabel, // a label for the y-axis zDomain, // array of z-values color, // = "currentColor", // stroke color of line, as a constant or a function of *z* strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.5, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply" // blend mode of lines } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, (d) => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [d3.min(Y), d3.max(Y)]; if (zDomain === undefined) zDomain = Z; // zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length); //filter((i) => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80, "0f"); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. const T = title === undefined ? Z : title === null ? null : d3.map(data, title); // Construct a line generator. const line = d3 .line() .defined((i) => D[i]) .curve(curve) .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", (event) => event.preventDefault()); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .attr("font-size", "12.5px") .select(".domain") .remove(); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", "12.5px") .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("font-size", "12.5px") .attr("x", -marginLeft) .attr("y", 10) // .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel) ); svg .append("line") .attr("x1", marginLeft) .attr("y1", yScale(0)) .attr("x2", width - marginRight) .attr("y2", yScale(0)) .attr("stroke-width", 1) .attr("stroke", "black"); const serie = svg .append("g") .selectAll("g") .data(d3.group(I, (i) => Z[i])) .join("g"); const path = serie .append("path") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", strokeOpacity) .style("mix-blend-mode", "multiply") .attr("d", ([, I]) => line(I)); serie .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "start") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("text") .data(([, I]) => I) .join("text") // .attr("dy", "0.35em") .attr("x", (i) => xScale(X[i])) .attr("y", (i) => yScale(Y[i])) .attr("dx", 3) // .call((text) => // text // .filter((_, j, I) => j === I.length - 1) // .append("tspan") // .attr("font-weight", "bold") // .text((i) => Q[i]) // ) .call((text) => text .filter((_, j, I) => j === I.length - 1) .append("tspan") .attr("font-size", "12.5") .text((i) => (I.length < 172 ? ` ${Z[i]}` : null)) ) .call((text) => text.clone(true)) .attr("fill", "none"); const dot = svg.append("g").attr("display", "none"); dot.append("circle").attr("r", 2.5); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, (i) => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym) ); // closest point path .style("stroke", ([z]) => Z[i] === z ? null : z == "California" ? "#fdc9b4" : "#ddd" ) .filter(([z]) => Z[i] === z) .raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (T) { const box = dot .selectAll("path") .data([,]) .join("path") .attr("class", "tooltip"); const label = dot .selectAll("text") .data([,]) .join("text") .call((text) => text .selectAll("tspan") .data(`${T[i]}`.split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => (i ? null : "bold")) .text((d) => d) ) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .attr("y", -8); const { x, y, width: w, height: h } = label.node().getBBox(); box.attr( "d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z` ); const hbw = w / 2 + 10; const hbh = h / 2 + 10; const limitW = xScale(X[X.length - 1]); const switchHW = limitW - hbw; const tooltipOver = `M${-hbw},-5H-5l5,5l5,-5H${hbw}v${-hbh * 2}h-${ 2 * hbw }z`; const tooltipUnder = `M${-hbw},5H-5l5,-5l5,5H${hbw}v${hbh * 2}h-${ 2 * hbw }z`; const tooltipLeft = `M-5,${-hbh}V-5l5,5l-5,5V${hbh}H${-hbw * 2}V-${hbh}z`; const tooltipRight = `M5,${-hbh}V-5l-5,5l5,5V${hbh}H${hbw * 2}V-${hbh}z`; box.attr( "d", xm > switchHW ? tooltipLeft : xm < hbw ? tooltipRight : tooltipUnder ); const shiftLabelX = xm > switchHW ? -hbw : xm < hbw ? hbw : 0; const shiftLabelY = xm > switchHW || xm < hbw ? y - h / 2 + 15 : 15 - y; label.attr("transform", `translate(${shiftLabelX},${shiftLabelY})`); } svg.property("value", O[i]).dispatch("input", { bubbles: true }); } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", "multiply").style("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", { bubbles: true }); } return Object.assign(svg.node(), { value: null }); }33:T1ee9,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/multi-line-chart function caLineChart( data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 130, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat = percent_format, yLabel, // a label for the y-axis zDomain, // array of z-values color, // = "currentColor", // stroke color of line, as a constant or a function of *z* strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.5, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply" // blend mode of lines } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, (d) => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [d3.min(Y), d3.max(Y)]; if (zDomain === undefined) zDomain = Z; // zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length); //filter((i) => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80, "0f"); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. const T = title === undefined ? Z : title === null ? null : d3.map(data, title); // Construct a line generator. const line = d3 .line() .defined((i) => D[i]) .curve(curve) .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", (event) => event.preventDefault()); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .attr("font-size", "12.5px") .select(".domain") .remove(); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", "12.5px") .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("font-size", "12.5px") .attr("x", -marginLeft) .attr("y", 10) // .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel) ); svg .append("line") .attr("x1", marginLeft) .attr("y1", yScale(0)) .attr("x2", width - marginRight) .attr("y2", yScale(0)) .attr("stroke-width", 1) .attr("stroke", "black"); const serie = svg .append("g") .selectAll("g") .data(d3.group(I, (i) => Z[i])) .join("g"); const path = serie .append("path") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", strokeOpacity) .style("mix-blend-mode", "multiply") .attr("d", ([, I]) => line(I)); serie .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("text") .data(([, I]) => I) .join("text") // .attr("dy", "0.35em") .attr("x", (i) => xScale(X[i])) .attr("y", (i) => yScale(Y[i])) .attr("dx", 17) // .call((text) => // text // .filter((_, j, I) => j === I.length - 1) // .append("tspan") // .attr("font-weight", "bold") // .text((i) => Q[i]) // ) .call((text) => text .filter((_, j, I) => j === I.length - 1) .append("tspan") .attr("font-size", "12.5px") .text((i) => `${percent_format_plus(Y[i])}`) ) .call((text) => text.clone(true)) .attr("fill", "none"); const dot = svg.append("g").attr("display", "none"); dot.append("circle").attr("r", 2.5); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, (i) => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym) ); // closest point path .style("stroke", ([z]) => (Z[i] === z ? null : "#ddd")) .filter(([z]) => Z[i] === z) .raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (T) { const box = dot .selectAll("path") .data([,]) .join("path") .attr("class", "tooltip"); const label = dot .selectAll("text") .data([,]) .join("text") .call((text) => text .selectAll("tspan") .data(`${T[i]}`.split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => (i ? null : "bold")) .text((d) => d) ) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .attr("y", -8); const { x, y, width: w, height: h } = label.node().getBBox(); box.attr( "d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z` ); const hbw = w / 2 + 10; const hbh = h / 2 + 10; const limitW = xScale(X[X.length - 1]); const switchHW = limitW - hbw; const tooltipOver = `M${-hbw},-5H-5l5,5l5,-5H${hbw}v${-hbh * 2}h-${ 2 * hbw }z`; const tooltipUnder = `M${-hbw},5H-5l5,-5l5,5H${hbw}v${hbh * 2}h-${ 2 * hbw }z`; const tooltipLeft = `M-5,${-hbh}V-5l5,5l-5,5V${hbh}H${-hbw * 2}V-${hbh}z`; const tooltipRight = `M5,${-hbh}V-5l-5,5l5,5V${hbh}H${hbw * 2}V-${hbh}z`; box.attr( "d", xm > switchHW ? tooltipLeft : xm < hbw ? tooltipRight : tooltipUnder ); const shiftLabelX = xm > switchHW ? -hbw : xm < hbw ? hbw : 0; const shiftLabelY = xm > switchHW || xm < hbw ? y - h / 2 + 15 : 15 - y; label.attr("transform", `translate(${shiftLabelX},${shiftLabelY})`); } svg.property("value", O[i]).dispatch("input", { bubbles: true }); } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", "multiply").style("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", { bubbles: true }); } return Object.assign(svg.node(), { value: null }); }34:[{"id":"2fef6f696c87181c614bf79a0c0a33132bd56ac052c30680e27d322baf82422d87d9945540279db484d43cf18b090705b5229c5809d9f90f73b4d7ad56fc1a79","href":"https://static.observableusercontent.com/files/2fef6f696c87181c614bf79a0c0a33132bd56ac052c30680e27d322baf82422d87d9945540279db484d43cf18b090705b5229c5809d9f90f73b4d7ad56fc1a79","name":"county change over time@1.csv","type":"text/csv","lastModified":1684347899445.416,"size":16874},{"id":"821d9067089de6e0b87bbaea31a0a96bc2cb43f40cf096f6d26b5744380cbe2e27f60d57627df74261b3bd30407a6b1fc39251d7e75ac5013745781b266be76d","href":"https://static.observableusercontent.com/files/821d9067089de6e0b87bbaea31a0a96bc2cb43f40cf096f6d26b5744380cbe2e27f60d57627df74261b3bd30407a6b1fc39251d7e75ac5013745781b266be76d","name":"lea_data@4.csv","type":"text/csv","lastModified":1684347899445.416,"size":1656536},{"id":"20cb3d44c51bbe314d39730f550cae094eeee362a6db7fc75497deda7ac2e80d70a63dfe65038857fd02b45048f74dfb2a7df448501f1c68b97e4aa938ed6730","href":"https://static.observableusercontent.com/files/20cb3d44c51bbe314d39730f550cae094eeee362a6db7fc75497deda7ac2e80d70a63dfe65038857fd02b45048f74dfb2a7df448501f1c68b97e4aa938ed6730","name":"state_data_long.csv","type":"text/csv","lastModified":1684347899445.416,"size":21287},{"id":"634130bf6f97863205adb276d76f6b75f953b9e49ffb109ab3df5eb7ab812014b633c0c6cf6b97d095c3704b58ed0ceb2ca28b59b6d00ca303091e545e0ce95c","href":"https://static.observableusercontent.com/files/634130bf6f97863205adb276d76f6b75f953b9e49ffb109ab3df5eb7ab812014b633c0c6cf6b97d095c3704b58ed0ceb2ca28b59b6d00ca303091e545e0ce95c","name":"ca indexed change since 1985.csv","type":"text/csv","lastModified":1684347899445.416,"size":20955},{"id":"1e1aeacd3de01fcdd0313772d1e77f0bd10b2c26c9a3d330d61b1b19590f6cad553c13bccb1cf781fdcc7366f3193c72141577ccb9a2b996d94931cc7c3cba5b","href":"https://static.observableusercontent.com/files/1e1aeacd3de01fcdd0313772d1e77f0bd10b2c26c9a3d330d61b1b19590f6cad553c13bccb1cf781fdcc7366f3193c72141577ccb9a2b996d94931cc7c3cba5b","name":"hack_legend-4.csv","type":"text/csv","lastModified":1684347899445.416,"size":96},{"id":"9204ab46ad7d8c11b3b234b9d37ce5c35b9296c5fc53854385a766d69d3ef54daef1cd269aab8df8339f709860b13a253bbb5792b3dd0e3eabb3fa02ea702259","href":"https://static.observableusercontent.com/files/9204ab46ad7d8c11b3b234b9d37ce5c35b9296c5fc53854385a766d69d3ef54daef1cd269aab8df8339f709860b13a253bbb5792b3dd0e3eabb3fa02ea702259","name":"state_level_data@2.csv","type":"text/csv","lastModified":1684347899445.416,"size":4162}] 2d:{"title":"CJCJ Clearance and Spending data visualized","cells":[{"id":0,"value":"# CJCJ Clearance and Spending data visualized","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"### Change in Real Per Capita Spending and Clearance Rates since 1985","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"viewof california_rate_input = Inputs.select(\n [\n \"All Offenses\",\n \"Violent Offenses\",\n \"Property Offenses\",\n \"Homicide\",\n \"Robbery\",\n \"Aggravated Assault\",\n \"Rape\",\n \"Burglary\",\n \"Vehicle Theft\",\n \"Larceny/Theft\"\n ],\n { sort: false, value: \"All Offenses\", label: \"Select a Category of Offenses\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"legend2 = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"ca_since_1985 = caLineChart(\n ca_data_1985.filter(\n (d) => (d.var == \"per_cap_spending\") | (d.var == california_series)\n ),\n {\n x: (d) => d.year,\n y: (d) => d.value,\n z: (d) => d.var,\n\n yLabel: \"↑ Change in Per Capita Spending (%)\",\n width,\n marginTop: 40,\n marginBottom: 50,\n marginRight: 33,\n height: 600,\n color: (d) => (d[0] == \"per_cap_spending\" ? \"red\" : \"grey\"),\n title: (d) =>\n d.var == \"per_cap_spending\"\n ? `${d.year}: \\n ${dollar_format(d.real_value)} \\n \n ${percent_format_plus(d.value)} since 1985`\n : `${d.year}: \\n ${percent_format(d.real_value)} \\n \n ${percent_format_plus(d.value)} since 1985`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"### Real Spending on Law Enforcement, 1985 - 2021","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"ca_spending_chart = Plot.plot({\n marginTop: 50,\n marginLeft: 50,\n marginRight: 35,\n y: {\n label: null,\n tickFormat: dollar_format_big,\n ticks: 8\n },\n x: { tickFormat: \"0f\", label: null },\n height: 600,\n\n marks: [\n Plot.line(ca_spending_data_since_1985, {\n x: \"year\",\n y: \"spending\",\n stroke: \"red\",\n strokeOpacity: 1\n }),\n\n Plot.text(\n ca_spending_data_since_1985.filter(\n (d) =>\n ((d.year % 5 == 0) | (d.year == 2021)) &\n ((d.year != 2020) & (d.year != 1985))\n ),\n\n {\n x: \"year\",\n y: \"spending\",\n text: (d) => dollar_format_big(d.spending),\n dx: 20,\n dy: 0\n }\n ),\n Plot.text(\n ca_spending_data_since_1985.filter((d) => d.year == 1985),\n\n {\n x: \"year\",\n y: \"spending\",\n text: (d) => dollar_format_big(d.spending),\n dx: 44,\n dy: -25\n }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"### Change in Real Per Capita Spending and Clearance Rates, 2021 vs 2003","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"viewof county_rate_input = Inputs.select(\n [\"All Offenses\", \"Violent Offenses\", \"Property Offenses\"],\n { sort: false, value: \"All Offenses\", label: \"Select a Category of Offenses\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"hack_legend = {\n const plot = Plot.plot({\n style: { fontSize: \"14px\", fontFamily: \"'Open Sans', sans-serif\" },\n marginLeft: 200,\n marginTop: 0,\n marginBottom: 0,\n height: 40,\n\n x: {\n grid: false,\n label: null,\n ticks: 0,\n domain: [-155, 400],\n fontSize: 14\n },\n\n y: {\n label: null,\n tickSize: 0,\n textAnchor: \"start\"\n },\n\n marks: [\n Plot.barX(legend_data, {\n x: (d) => -d.spending,\n y: \"county\",\n fill: \"#1864aa\"\n }),\n Plot.dot(legend_data, {\n x: 0,\n y: \"county\",\n dx: 0,\n dy: 0,\n fill: \"red\",\n r: (d) => (d.county == \"Change in Spending\" ? 0 : 4)\n }),\n Plot.arrow(legend_data, {\n x2: (d) => d.clearance * 700,\n y1: \"county\",\n x1: 0,\n y2: \"county\",\n stroke: \"red\",\n strokeWidth: 1.5\n })\n ]\n });\n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof local_searchbox = searchCheckbox(\n jurisdiction_list, // What elements to chose from\n {\n // Any other options you pass here will be passed to the checkbox and search inputs\n value: [\"\"], // Start with everything selected\n label: \"Select Individual Agencies\",\n height: 300\n // You can also pass specific options for the search and the checkboxes\n // optionsSearch: {\n // filter: fullSearchFilter\n // }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"### Change in Law Enforcement Spending per Capita since 2003, by Jurisdiction","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"local_spending_chart = LocalLineChart(selected_local_data, {\n x: (d) => d.year,\n y: (d) => d.indexed_spending_change,\n z: (d) => d.j,\n\n yLabel: \"↑ Change in Per Capita Spending (%)\",\n width,\n marginTop: 60,\n marginBottom: 80,\n height: 600,\n color: (d) => (d[0] == \"California\" ? \"red\" : \"grey\"),\n title: (d) =>\n `${d.j} ${d.year}: \\n ${dollar_format(d.per_cap_spending)} \\n \n ${percent_format_plus(d.indexed_spending_change)} since 2003`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"### Change in Clearance Rates since 2003, by Jurisdiction","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"viewof local_input = Inputs.select(\n [\"All Offenses\", \"Violent Offenses\", \"Property Offenses\"],\n { sort: false, value: \"All Offenses\", label: \"Select a Category of Offenses\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"local_clearance_chart = LocalLineChart(selected_local_data, {\n x: (d) => d.year,\n y: (d) => d[local_rate],\n z: (d) => d.j,\n\n yLabel: \"↑ Change in Per Capita Spending (%)\",\n width,\n marginTop: 60,\n marginBottom: 80,\n height: 600,\n color: (d) => (d[0] == \"California\" ? \"red\" : \"grey\"),\n title: (d) =>\n `${d.j} ${d.year}: \\n ${percent_format(\n d[local_value]\n )} Clearance Rate for ${local_input} \\n \n ${percent_format_plus(d[local_rate])} since 2003`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"### Local Logic","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"legend_data = FileAttachment(\"hack_legend-4.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"selected_local_data = lea_data\n .filter((d) => local_searchbox.includes(d.names))\n .concat(california_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"colorscale = d3.scaleLinear().domain([0, 1]).range([\"#f2f2f2\", \"#000000\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"local_rate = {\n if (local_input == \"All Offenses\") {\n return \"indexed_total_rate_change\";\n } else if (local_input == \"Violent Offenses\") {\n return \"indexed_violent_rate_change\";\n } else if (local_input == \"Property Offenses\") {\n return \"indexed_property_rate_change\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"local_value = {\n if (local_input == \"All Offenses\") {\n return \"total_rate\";\n } else if (local_input == \"Violent Offenses\") {\n return \"violent_rate\";\n } else if (local_input == \"Property Offenses\") {\n return \"property_rate\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"california_series = {\n if (california_rate_input == \"All Offenses\") {\n return \"total\";\n } else if (california_rate_input == \"Violent Offenses\") {\n return \"violent\";\n } else if (california_rate_input == \"Property Offenses\") {\n return \"property\";\n } else if (california_rate_input == \"Homicide\") {\n return \"homicide\";\n } else if (california_rate_input == \"Robbery\") {\n return \"robbery\";\n } else if (california_rate_input == \"Aggravated Assault\") {\n return \"agg_assault\";\n } else if (california_rate_input == \"Rape\") {\n return \"rape\";\n } else if (california_rate_input == \"Burglary\") {\n return \"burg\";\n } else if (california_rate_input == \"Vehicle Theft\") {\n return \"vehicle_theft\";\n } else if (california_rate_input == \"Larceny/Theft\") {\n return \"lt\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"county_static_rate_2021 = {\n if (county_rate_input == \"All Offenses\") {\n return \"total_rate\";\n } else if (county_rate_input == \"Violent Offenses\") {\n return \"violent_rate\";\n } else if (county_rate_input == \"Property Offenses\") {\n return \"property_rate\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"county_static_rate = {\n if (county_rate_input == \"All Offenses\") {\n return \"indexed_total_rate_change\";\n } else if (county_rate_input == \"Violent Offenses\") {\n return \"indexed_violent_rate_change\";\n } else if (county_rate_input == \"Property Offenses\") {\n return \"indexed_property_rate_change\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"county_static_rate_historical = {\n if (county_rate_input == \"All Offenses\") {\n return \"total_clearance_baseline\";\n } else if (county_rate_input == \"Violent Offenses\") {\n return \"violent_baseline\";\n } else if (county_rate_input == \"Property Offenses\") {\n return \"property_baseline\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"county_change_over_time_data = FileAttachment(\n \"county change over time@1.csv\"\n).csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"california_data = FileAttachment(\"state_level_data@2.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"lea_data = FileAttachment(\"lea_data@4.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"ca_data_1985 = FileAttachment(\"state_data_long.csv\").csv({\n typed: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"ca_spending_data_since_1985 = FileAttachment(\"ca indexed change since 1985.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"#### Checkbox","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"// https://github.com/observablehq/inputs/blob/main/src/search.js\nfunction fullSearchFilter(query) {\n const filters = `${query}`\n .split(/\\s+/g)\n .filter((t) => t)\n .map(termFilter);\n return (d) => {\n if (d == null) return false;\n if (typeof d === \"object\") {\n out: for (const filter of filters) {\n for (const value of valuesof(d)) {\n if (filter.test(value)) {\n continue out;\n }\n }\n return false;\n }\n } else {\n for (const filter of filters) {\n if (!filter.test(d)) {\n return false;\n }\n }\n }\n return true;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"function* valuesof(d) {\n for (const key in d) {\n yield d[key];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"function termFilter(term) {\n return new RegExp(`(?:^.*|[^\\\\p{L}-])${escapeRegExp(term)}`, \"iu\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"function escapeRegExp(text) {\n return text.replace(/[\\\\^$.*+?()[\\]{}|]/g, \"\\\\$&\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"#### Line Charts","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"#### Observable tooltips","pinned":false,"hidden":false,"mode":"md"},{"id":282,"value":"import {\n addTooltips,\n hover,\n id_generator\n} from \"@cyrusobrien/property-crime-rates-by-state-1985-2020\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"Plot = tooltipPlugin(await require(\"@observablehq/plot\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"tooltipPlugin = (Plot) => {\n const { plot } = Plot;\n Plot.plot = ({ tooltip, ...options }) => addTooltips(plot(options), tooltip);\n return Plot;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"### Formatting","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"percent_format = d3.format(\".0%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"dollar_format = d3.format(\"$,.0f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"dollar_format_big = (number) => d3.format(\"$.2s\")(number).replace(\"G\", \"B\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"dollar_format_big(14012305234)","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"percent_format_plus = d3.format(\"+.0%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}