31:T471,mtoChart = () => vl .markLine({ strokeWidth: 5, stroke: "#ed1651" }) .config({ title: { fontSize: 16 }, legend: { titleFontSize: 14, labelFontSize: 12 }, axis: { labelFontSize: 12 }, style: { cell: { stroke: "transparent" } } }) .title("Eviction-related renter hotline calls") .width(width) .data(mtoChiCalls) .encode( vl .y() .fieldQ("calls") .axis({ domain: false, ticks: false, labelPadding: 10, tickCount: { interval: 5 } }) .title(null), vl .x() .fieldT("month") .axis({ format: "%b", ticks: false, tickCount: compareMonths.length, labelPadding: 10, domain: false }) .title(null), vl.tooltip([ vl .tooltip() .fieldQ("calls") .title("Calls"), vl .tooltip() .fieldT("month") .format("%B") .title("Month") ]) ) .autosize({ type: "fit-x", contains: "padding" }) .render({ renderer: "svg" })32:T491,zipCallChart = () => { const chart = vl .markGeoshape({ stroke: "#9b9c9f", strokeWidth: 0.5 }) .project(vl.projection("mercator")) .title({ text: "Eviction-related renter hotline calls", subtitle: "Since March 24 moratorium", subtitlePadding: 8, dy: -16 }) .data(zipsByMTOCalls.features) .encode( vl .color() .fieldQ("properties.calls") .scale({ zero: true, range: ["rgba(0, 134, 138, 0.1)", "rgba(0, 134, 138, 1)"] }) .title("Calls"), vl.tooltip([ vl .tooltip() .fieldO("properties.zip") .title("ZIP"), vl .tooltip() .fieldQ("properties.calls") .format(",") .title("Calls") ]) ) .width(width) .height(500); return chart .config({ title: { fontSize: 16 }, legend: { titleFontSize: 14, labelFontSize: 12, symbolStrokeWidth: 0 }, axis: { labelFontSize: 12 }, style: { cell: { stroke: "transparent" } } }) .autosize({ type: "fit-x", contains: "padding" }) .render({ renderer: "svg" }); }33:T778,mtoCompareChart = () => { const hover = vl .selectSingle("hover") .fields(["month", "calls", "calls19", "calls20"]) .nearest(true) .on("mouseover") .empty("none") .clear("mouseout"); const month = vl .x() .fieldT("month") .axis({ format: "%b", ticks: false, tickCount: mtoCompareMonths.length, labelPadding: 10, domain: false }); const calls = vl .y() .fieldQ("calls") .axis({ domain: false, ticks: false, labelPadding: 10, tickCount: { interval: 5 } }); const transforms = [ vl.fold("calls19", "calls20").as("yearVal", "calls"), vl.calculate("datum.yearVal === 'calls19' ? '2019' : '2020'").as("year") ]; const year = vl .color() .field("year") .title("Year") .scale({ range: ["#9b9c9f", "#ed1651"] }); const lines = vl .markLine({ strokeWidth: 5 }) .width(width) .height(400) .title({ text: "Eviction-related renter hotline calls", dy: -16 }) .transform(transforms) .encode(calls.title(null), month.title(null), year); const rule = vl .markRule() .width(width) .height(400) .encode( month, vl .opacity() .if(hover, vl.value(0.3)) .value(0), vl.tooltip([ vl .tooltip() .fieldQ("calls19") .title("2019 calls"), vl .tooltip() .fieldQ("calls20") .title("2020 calls") ]) ) .select(hover) .transform(transforms); return vl .layer([lines, rule]) .config({ title: { fontSize: 16 }, legend: { titleFontSize: 14, labelFontSize: 12, symbolStrokeWidth: 5 }, axis: { labelFontSize: 12 }, style: { cell: { stroke: "transparent" } } }) .data(mtoCallsCompare) .autosize({ type: "fit-x", contains: "padding" }) .render({ renderer: "svg" }); }34:Td21,cookEvictionsChart = () => { vl.markLine({ strokeWidth: 5 }) .config({ title: { fontSize: 16 }, legend: { titleFontSize: 14, labelFontSize: 12, symbolStrokeWidth: 5 }, axis: { labelFontSize: 12 }, style: { cell: { stroke: "transparent" } } }) .title({ text: "Cook County Eviction Filings", dy: -16 }) .data(cookEvictionsCompare) .transform( vl.fold("cases19", "cases20").as("yearVal", "cases"), vl.calculate("datum.yearVal === 'cases19' ? '2019' : '2020'").as("year") ) .encode( vl .y() .fieldQ("cases") .axis({ domain: false, ticks: false, labelPadding: 10, tickCount: { interval: 5 } }) .title(null), vl .x() .fieldT("month") .axis({ format: "%b", ticks: false, tickCount: compareMonths.length + 1, labelPadding: 10, domain: false }) .title(null), vl .color() .field("year") .title("Year") .scale({ range: ["#9b9c9f", "#ed1651"] }), vl.tooltip([ vl .tooltip() .fieldT("month") .format("%B") .title("Month"), vl .tooltip() .fieldQ("cases") .title("Cases") ]) ) .autosize({ type: "fit-x", contains: "padding" }) .render({ renderer: "svg" }); const hover = vl .selectSingle("hover") .fields(["month", "cases", "cases19", "cases20"]) .nearest(true) .on("mouseover") .empty("none") .clear("mouseout"); const month = vl .x() .fieldT("month") .axis({ format: "%b", ticks: false, tickCount: compareMonths.length, labelPadding: 10, domain: false }); const cases = vl .y() .fieldQ("cases") .axis({ domain: false, ticks: false, labelPadding: 10, tickCount: { interval: 5 } }); const transforms = [ vl.fold("cases19", "cases20").as("yearVal", "cases"), vl.calculate("datum.yearVal === 'cases19' ? '2019' : '2020'").as("year") ]; const year = vl .color() .field("year") .title("Year") .scale({ range: ["#9b9c9f", "#ed1651"] }); const lines = vl .markLine({ strokeWidth: 5 }) .width(width) .height(400) .title("Cook County Eviction Filings") .width(width) .transform(transforms) .encode(cases.title(null), month.title(null), year); const rule = vl .markRule() .width(width) .height(400) .encode( month, vl .opacity() .if(hover, vl.value(0.3)) .value(0), vl.tooltip([ vl .tooltip() .fieldQ("cases19") .format(",") .title("2019 cases"), vl .tooltip() .fieldQ("cases20") .format(",") .title("2020 cases") ]) ) .select(hover) .transform(transforms); return vl .layer([lines, rule]) .config({ title: { fontSize: 16 }, legend: { titleFontSize: 14, labelFontSize: 12, symbolStrokeWidth: 5 }, axis: { labelFontSize: 12 }, style: { cell: { stroke: "transparent" } } }) .data(cookEvictionsCompare) .autosize({ type: "fit-x", contains: "padding" }) .render({ renderer: "svg" }); }35:[] 2f:{"title":"Eviction Data Story Graphics","cells":[{"id":0,"value":"md`# Eviction Data Story Graphics\n\nGraphics for City Bureau story [Eviction Filings Are Down, But More People Are Seeking Help With Evictions](https://www.citybureau.org/newswire/2020/9/10/eviction-filings-are-down-but-more-people-are-seeking-help-with-evictions) published September 11, 2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"zipChart = Object.assign(\n html`