29:null 2a:["$","title",null,{"children":"Eviction Data Story Graphics | Patrick Sier | Observable"}] 2f: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" })30: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" }); }31: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" }); }32: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" }); }33:[] 2d:{"id":"7e3c897489ca2e2b","slug":"eviction-data-story-graphics","title":"Eviction Data Story Graphics","thumbnail":"052e5a50b0e1dcd1b998ef9d08d47a4d5e0026b40396ceae3efcf54d123e80d0","access_level":"public","create_time":"$D2020-08-31T20:05:29.346Z","update_time":"$D2020-09-11T18:06:30.011Z","view_time":null,"first_public_time":"$D2020-09-09T18:58:53.235Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"131ebbed378efb4e","login":"pjsier","name":"Patrick Sier","avatar_url":"https://avatars-next.observableusercontent.com/1b88cd4161cba2dad3bf87cbb75ae3bed18489a962e046eb6b5c3d920631b97f","tier":"starter_2024"},"version":591,"publish_version":591,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b8fd2b6e2488e83","login":"pjsier","name":"Patrick Sier","avatar_url":"https://avatars-next.observableusercontent.com/1b88cd4161cba2dad3bf87cbb75ae3bed18489a962e046eb6b5c3d920631b97f","tier":null}],"members":[{"type":"individual","id":"9b8fd2b6e2488e83","login":"pjsier","name":"Patrick Sier","avatar_url":"https://avatars-next.observableusercontent.com/1b88cd4161cba2dad3bf87cbb75ae3bed18489a962e046eb6b5c3d920631b97f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"fa9f97d3be3cc07d","slug":"city-bureau","title":"City Bureau","owner":{"id":"131ebbed378efb4e","login":"pjsier","name":"Patrick Sier"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"zipChart = Object.assign(\n html`