31:[] 2f:{"title":"Chapter 6: Hello Export","cells":[{"id":0,"value":"md`# Chapter 6: Hello Export\n\nHow to repurpose a chart for publishing online. \n\nBased on [\"2020 Iowa caucus results\"](https://www.latimes.com/projects/2020-iowa-caucuses-live-results/) from LA Times. \n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`In Observable, you can import functions and code from other notebooks. Here, we'll import our chart from our chart maker.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { drawChart } from '@palewire/chapter-5-hello-graphic-maker'","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`We can now render the chart in this notebook by calling the \\`drawChart\\` function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"drawChart()","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`But, what if we want to modify more pieces of the chart or combine multiple charts into a single one? We can do that using a special keyword.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`## Modify existing code from other notebooks using the \\`with\\` clause`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`When importing code from another notebook, Observable provides a special \\`with\\` clause that allows you to insert values into the code you're importing and essentially \"rewrite\" it. \n\nThis is kind of confusing but very powerful. Let's see it in action.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`In Chapter 5, we set the \\`selectedBarColor\\` variable to \\`#EA5919\\`. \n\nHere, we'll create a new variable named \\`updatedBarColor\\` and set it to a value of \\`#00b6bd\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"viewof updatedBarColor = color({\n value: '#00b6bd'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`Next, we'll use the \\`with\\` clause to modify the \\`drawChart\\` function to use this variable value _instead_ of value set in the notebook.\n\nWe'll also set the name of our modified function to \\`updatedChart\\` so we can keep the existing function we imported above as is.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"import { drawChart as updatedChart } with {\n updatedBarColor as selectedBarColor\n} from '@palewire/chapter-5-hello-graphic-maker'","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"updatedChart()","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`With very little code we were able to modify a function from another notebook. This is a powerful concept in Observable because you can easily import, remix, and reuse other pieces of code without copy and pasting large snippets of code or forking existing notebooks to change how they work.\n\nLet's put this in action. Let's create a chart that shows where the Black population in Louisiana ranks in the U.S. Let's also modify several features of the chart like the bar color and size of the chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"viewof customSelectedState = select({\n value: '22',\n options: data.map(d => ({\n label: d.NAME,\n value: d.state\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof customSelectedRace = select({\n value: 'Black',\n options: Array.from(raceCensusVariables.keys())\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof customBarColor = color({\n value: '#D3BC8D',\n description: 'Who Dat?!'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"viewof customChartWidth = slider({\n min: 100,\n max: width,\n value: 400\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"import { drawChart as customChart } with {\n customSelectedState as selectedState,\n customBarColor as selectedBarColor,\n customSelectedRace as selectedRace,\n customChartWidth as chartWidth\n} from '@palewire/chapter-5-hello-graphic-maker'","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"customChart()","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`#### Pro tip: Order matters!\n\nThe \\`with\\` clause is very slick but expects a specific order:\n\n\\`\\`\\`\nimport { func } with { \n myVariable as existingVar\n} from '@user/notebook-name'\n\\`\\`\\`\n\nYou always include the variable that you want to use **before** you include the variable you're modifying. This takes some practice. For more information on imports, see: \n - [@observablehq/introduction-to-imports](https://observablehq.com/@observablehq/introduction-to-imports)\n - [@bryangingechen/imports-tips-and-tricks](https://observablehq.com/@bryangingechen/imports-tips-and-tricks)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md`## Putting it all together`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`Now take the \\`customChart\\` function we created using the \\`with\\` clause and create a graphic export as a image file or SVG for print.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`To do this, we'll going to use two new inputs from @jashkenas's inputs bazaar: \\`text\\` and \\`textarea\\`. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"import { text, textarea } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"viewof hed = text({\n title: \"Headline\",\n value: 'Your headline'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof dek = textarea({\n spellcheck: true,\n width: \"50%\",\n rows: 4,\n value:\n \"Write something pithy about the graphic you just made at the NICAR 2020 Observable Workshop.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"viewof source = text({\n value: \"Source: NICAR 2020\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`We'll also add sliders to change the dimensions of the chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof width = slider({\n description: \"Width\",\n min: 200,\n max: 1200,\n value: 470 - margin.top - margin.bottom\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"viewof height = slider({\n description: \"Height\",\n min: 200,\n max: 1200,\n value: 325 - margin.top - margin.bottom\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"graphic = customChart() // required to render chart","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`Click on the cell menu icon to export this graphic as a .png file you could upload to your website or as an .svg file that you could bring into Adobe Illustrator or Indesign for print.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"graphicDek = createSVGtext({\n text: dek,\n y: margin.top * 5,\n fontSize: 16,\n maxCharsPerLine: 45,\n lineHeight: 1.5\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"import { createSVGtext } from '@gallowayevan/svg-word-wrap'","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"import {\n data,\n raceCensusVariables\n} from '@palewire/chapter-5-hello-graphic-maker'","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"import { slider, color, select } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}