D3 Bar Chart Example

2b:null 2c:["$","title",null,{"children":"Buddhists in the World Data Visualization | Claire Wang | Observable"}] 31:T609, D3 Bar Chart Example 32:T8c9,stateProps = [ { state: "Alabama", population: 2555 }, { state: "Alaska", population: 3100 }, { state: "Arizona", population: 6530 }, { state: "Arkansas", population: 1555 }, { state: "California", population: 73940 }, { state: "Colorado", population: 5040 }, { state: "Connecticut", population: 3770 }, { state: "Delaware", population: 1505 }, { state: "District of Columbia", population: 1515 }, { state: "Florida", population: 10100 }, { state: "Georgia", population: 4840 }, { state: "Hawaii", population: 24960 }, { state: "Idaho", population: 1600 }, { state: "Illinois", population: 13260 }, { state: "Indiana", population: 3270 }, { state: "Iowa", population: 1650 }, { state: "Kansas", population: 3070 }, { state: "Kentucky", population: 2195 }, { state: "Louisiana", population: 4650 }, { state: "Maine", population: 3030 }, { state: "Maryland", population: 6440 }, { state: "Massachusetts", population: 7040 }, { state: "Michigan", population: 9820 }, { state: "Minnesota", population: 2815 }, { state: "Mississippi", population: 1545 }, { state: "Missouri", population: 6420 }, { state: "Montana", population: 3120 }, { state: "Nebraska", population: 3120 }, { state: "Nevada", population: 1570 }, { state: "New Hampshire", population: 1515 }, { state: "New Jersey", population: 4430 }, { state: "New Mexico", population: 3120 }, { state: "New York", population: 19660 }, { state: "North Carolina", population: 5110 }, { state: "North Dakota", population: 1690 }, { state: "Ohio", population: 11320 }, { state: "Oklahoma", population: 1955 }, { state: "Oregon", population: 2095 }, { state: "Pennsylvania", population: 6830 }, { state: "Rhode Island", population: 1525 }, { state: "South Carolina", population: 2475 }, { state: "South Dakota", population: 3050 }, { state: "Tennessee", population: 6610 }, { state: "Texas", population: 25350 }, { state: "Utah", population: 3150 }, { state: "Vermont", population: 3060 }, { state: "Virginia", population: 8820 }, { state: "Washington", population: 7140 }, { state: "West Virginia", population: 1545 }, { state: "Wisconsin", population: 3000 }, { state: "Wyoming", population: 3160 } ]33:T509,class Tooltip { constructor(selection) { if (!selection || !selection.size()) { throw "Requires a tooltip div element selection"; } this._selection = selection; } move(event) { if (!event) return; const margin = 20; const { clientX: x, clientY: y } = event; const { width, height } = this.selection.node().getBoundingClientRect(); const left = this.clamp( margin, x - width / 2, window.innerWidth - width - margin ); const top = window.innerHeight > y + margin + height ? y + margin : y - height - margin; this.selection.style("top", `${top}px`).style("left", `${left}px`); } display(datum, callback) { if (!callback || typeof callback !== "function") { throw "ToolTip.display requires a callback function that returns an HTML string"; } this.selection.style("display", "block").html(callback(datum)); } hide() { this.selection.style("display", "none").html(""); } clamp(min, d, max) { return Math.max(min, Math.min(max, d)); } get selection() { return this._selection; } set selection(sel) { if (sel && sel.size()) { this._selection = sel; } else { throw "selection must be a non-empty selected element"; } } }34:Taa8,chart = { const container = html``; const width = 920; const height = 560; const projection = d3.geoAlbersUsa().fitSize([width, height], states); const path = d3.geoPath().projection(projection); const svg = d3.create("svg").attr("viewBox", [0, 0, 975, 610]); svg .selectAll(".state") .data(states.features) .join("path") .attr("d", path) .attr("class", "state") .style("fill", function (d) { //Get data value const value = stateBuddhistProportions.get(d.properties.NAME); if (value) { //If value exists… return colorScale(value); } else { //If value is undefined… return "#ccc"; } }) //.attr("fill", d => colorScale(d => +d.count.split(",").join(""))) .attr("fill-opacity", 1) .attr("stroke", "black"); svg .append("g") .attr("transform", "translate(520,-5)") .append(() => legend({ color, title: "Proportion of Buddhists, thousands", width: 340 }) ); const div = d3.select(container).append("div").classed("tooltip", true); // const tooltip = svg.append("g"); const tooltip = new Tooltip(div); // function that sets the tooltip's HTML when revealed // can be passed the hovered selection's datum function tooltipContents(datum) { const { x, y } = datum; return `x: ${x}, y: ${y}`; } svg .selectAll(".state") // .on("touchmove mousemove", function (event, d) { // tooltip.call( // callout, `${stateBuddhistProportions.get(d.properties.NAME)} ${d.properties.NAME}, ${data.get(d.value)}` // ); // tooltip.attr("transform", `translate(${d3.pointer(event, this)})`); // d3.select(this).attr("stroke", "gray").raise(); // }) // .on("touchend mouseleave", function () { // tooltip.call(callout, null); // d3.select(this).attr("stroke", null).lower(); // }); .on("mouseover", (event, d) => { // reveal the tooltip. // pass the current datum (if desired), // and a render function that returns an HTML string (required) tooltip.display( d, `${stateBuddhistProportions.get(d.properties.NAME)} ${ d.properties.NAME }, ${data.get(d.value)}` ); d3.select(this).attr("stroke", "gray").raise(); }); return svg.node(); // return container; }35:T508, const spec = { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": { "values": [ {"year": 2014, "tier": "a", "value": 29}, {"year": 2007, "tier": "a", "value": 39}, {"year": 2014, "tier": "b", "value": 29}, {"year": 2007, "tier": "b", "value": 28}, {"year": 2014, "tier": "c", "value": 10}, {"year": 2007, "tier": "c", "value": 7}, {"year": 2014, "tier": "d", "value": 1}, {"year": 2007, "tier": "d", "value": 1}, {"year": 2014, "tier": "e", "value": 27}, {"year": 2007, "tier": "e", "value": 19}, {"year": 2014, "tier": "f", "value": 4}, {"year": 2007, "tier": "f", "value": 6} ] }, "mark": {"type": "bar", "cornerRadiusEnd": 3}, "encoding": { "y": {"field": "tier", "type": "nominal", "sort": ["a", "b", "c", "d", "e", "f"]}, "x": {"field": "value", "type": "quantitative", "axis": {"title": "%"}}, "color": { "field": "year", "type": "nominal", "scale": {"range": ["#4c78a8", "#f58518"]}, "legend": {"title": "Year"} } }, "width": 500, "height": 150, "title": "Comparison of Tiers by Year" }; const runtime = new VegaLite.Runtime(); const view = new VegaLite.View(runtime, spec, {renderer: "svg"}); const svg = view.toSVG(); 36:[{"id":"d630a2d6cc7c18cc54274efbcc8e08c6f1b079a03bea627db76febda694e6b0b9ce78f45f7c43a44fb35844305cae6ce5e4b28351bf74c612ce61816e2c36155","href":"https://static.observableusercontent.com/files/d630a2d6cc7c18cc54274efbcc8e08c6f1b079a03bea627db76febda694e6b0b9ce78f45f7c43a44fb35844305cae6ce5e4b28351bf74c612ce61816e2c36155","name":"bgis-csv.csv","type":"text/csv","lastModified":1676011651600.953,"size":4956919},{"id":"d630a2d6cc7c18cc54274efbcc8e08c6f1b079a03bea627db76febda694e6b0b9ce78f45f7c43a44fb35844305cae6ce5e4b28351bf74c612ce61816e2c36155","href":"https://static.observableusercontent.com/files/d630a2d6cc7c18cc54274efbcc8e08c6f1b079a03bea627db76febda694e6b0b9ce78f45f7c43a44fb35844305cae6ce5e4b28351bf74c612ce61816e2c36155","name":"bgis-csv@1.csv","type":"text/csv","lastModified":1676011677883.194,"size":4956919},{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1677567045882.846,"size":795407},{"id":"0856c3b0b3cb1965a6937bd69aa0338a033222c35febdfe9404379b6f7dbfce31575dff0ff9d2c6d85e13c978738f5a478d86421731290783c1ab6fb7a014cc8","href":"https://static.observableusercontent.com/files/0856c3b0b3cb1965a6937bd69aa0338a033222c35febdfe9404379b6f7dbfce31575dff0ff9d2c6d85e13c978738f5a478d86421731290783c1ab6fb7a014cc8","name":"states-proportions.csv","type":"text/csv","lastModified":1677565113128.026,"size":829},{"id":"f8f0370b8e5033b6e423881d3af9d9aac5505914c5d56eed6ebb261303e464aba1ba3bc28cb16680114537f9096bfc50cc2aaea4bb9c6ba466a6c593004f397d","href":"https://static.observableusercontent.com/files/f8f0370b8e5033b6e423881d3af9d9aac5505914c5d56eed6ebb261303e464aba1ba3bc28cb16680114537f9096bfc50cc2aaea4bb9c6ba466a6c593004f397d","name":"pop_state.csv","type":"text/csv","lastModified":1677568238349.692,"size":817},{"id":"5d2abad1d5ee54f7a5360a32c52d5cb044e489f185f5a3ed7fa831bb01aa0170c2de1c8e58e5de207424fd84d2377dd53b00b7c5ad422101235e4902b3da0384","href":"https://static.observableusercontent.com/files/5d2abad1d5ee54f7a5360a32c52d5cb044e489f185f5a3ed7fa831bb01aa0170c2de1c8e58e5de207424fd84d2377dd53b00b7c5ad422101235e4902b3da0384","name":"usState.json","type":"application/json","lastModified":1677568278694.881,"size":643152},{"id":"ae3a604e9ef877ac5a60a2cdfa8c7058327ed367066782f0765ecdfbdda3792e7ef4d2225a2096b0dce5b0152cae7c4316c25041cc36bbc11eae6f4b494dc331","href":"https://static.observableusercontent.com/files/ae3a604e9ef877ac5a60a2cdfa8c7058327ed367066782f0765ecdfbdda3792e7ef4d2225a2096b0dce5b0152cae7c4316c25041cc36bbc11eae6f4b494dc331","name":"german-morals.png","type":"image/png","lastModified":1677581708485.334,"size":151994},{"id":"9927b0b47a648c1396c349584c4d4a5e295024534e8445f9e801e44c3257f8be75a966453fae8d32c48376c94475d1357dade2b3757c17c1c5bcdfbaf6a54a63","href":"https://static.observableusercontent.com/files/9927b0b47a648c1396c349584c4d4a5e295024534e8445f9e801e44c3257f8be75a966453fae8d32c48376c94475d1357dade2b3757c17c1c5bcdfbaf6a54a63","name":"germany-responses.csv","type":"text/csv","lastModified":1677581825355.158,"size":664},{"id":"06ca0acfbea5c9db499061b249946ed0256dc48d3a01f76a468001982aab0a636434c6597d0bc67f0d07f7e3f3e98050becab58e55fdcbd054d93173e80e5e2d","href":"https://static.observableusercontent.com/files/06ca0acfbea5c9db499061b249946ed0256dc48d3a01f76a468001982aab0a636434c6597d0bc67f0d07f7e3f3e98050becab58e55fdcbd054d93173e80e5e2d","name":"uk-responses.csv","type":"text/csv","lastModified":1677581910332.118,"size":460},{"id":"ba0571bc4aff46e92fb17982fa2f30929fd137a216b01a666560ddc7727a50d6c5421242de5591edd2cd2933f2119e08bf983e8d5f12a3fd04556ff08958b93c","href":"https://static.observableusercontent.com/files/ba0571bc4aff46e92fb17982fa2f30929fd137a216b01a666560ddc7727a50d6c5421242de5591edd2cd2933f2119e08bf983e8d5f12a3fd04556ff08958b93c","name":"uk-bvc.png","type":"image/png","lastModified":1677582011711.062,"size":138144},{"id":"7e3b3515d561a8028f45dcbac81dcd48e1cd7cf6da2bf3ce476a3c37a98652454a66531f39d5234fafde4bc9c7ef5f7e50a6a45ea130b5386a015d3ff6d263bd","href":"https://static.observableusercontent.com/files/7e3b3515d561a8028f45dcbac81dcd48e1cd7cf6da2bf3ce476a3c37a98652454a66531f39d5234fafde4bc9c7ef5f7e50a6a45ea130b5386a015d3ff6d263bd","name":"slide1.png","type":"image/png","lastModified":1677582143450.021,"size":280809},{"id":"b0a614904a10d70f7f794e96ac953bd08cc75b4213bf46f4c5baf4893843e4ec3fa02b5158da07309aacd5a03c34c7b91f9a72a4a39434dfbabba0386f1ce854","href":"https://static.observableusercontent.com/files/b0a614904a10d70f7f794e96ac953bd08cc75b4213bf46f4c5baf4893843e4ec3fa02b5158da07309aacd5a03c34c7b91f9a72a4a39434dfbabba0386f1ce854","name":"slide2.png","type":"image/png","lastModified":1677582176869.496,"size":210144},{"id":"6b9efa3de58b4a823da00b36bb6cfb48e275bb831583ac47171359057b5e2eb543ed9fd06ab58afcd6217305769a912ddbdd771adb07637abcadce8e2e619d8e","href":"https://static.observableusercontent.com/files/6b9efa3de58b4a823da00b36bb6cfb48e275bb831583ac47171359057b5e2eb543ed9fd06ab58afcd6217305769a912ddbdd771adb07637abcadce8e2e619d8e","name":"buddhism-final.pdf","type":"application/pdf","lastModified":1677582400464.088,"size":1720736}] 2f:{"id":"53b386de887bca76","slug":null,"title":"Buddhists in the World Data Visualization","thumbnail":"7a2a28662f9c8e2a746d110f5cc3d6f2fd1afb5b16b70261bc7bc4f6e2873415","access_level":"public","create_time":"$D2023-02-10T06:46:40.682Z","update_time":"$D2023-02-28T11:11:41.312Z","view_time":null,"first_public_time":"$D2023-02-10T06:46:40.682Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b17933e0f3487e64","login":"clairebookworm","name":"Claire Wang","avatar_url":"https://avatars-next.observableusercontent.com/3bc2691d9a8e3c939645a5905b0af9aaf2ad8211a237c28225b2baafdf840de6","tier":"starter_2024"},"version":305,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd000753785ff3ac","login":"clairebookworm","name":"Claire Wang","avatar_url":"https://avatars-next.observableusercontent.com/3bc2691d9a8e3c939645a5905b0af9aaf2ad8211a237c28225b2baafdf840de6","tier":null}],"members":[{"type":"individual","id":"fd000753785ff3ac","login":"clairebookworm","name":"Claire Wang","avatar_url":"https://avatars-next.observableusercontent.com/3bc2691d9a8e3c939645a5905b0af9aaf2ad8211a237c28225b2baafdf840de6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Buddhists in the World Data Visualization","cells":[{"id":0,"value":"# Buddhists in the World Data Visualization\n\nI'm not entirely sure how to submit the PDF, but I've attached here below! If you look to the sidebar on the right and see a little paperclip icon, you can find the file titled `buddhism-final.pdf`, click on the three dots to the side and press download. \n\nIf my **pdfview** works, you should see a viewer below!! :) Apologies, the resolution seems to be a bit low.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"pdfView(await FileAttachment(\"buddhism-final.pdf\").url(), {\n backgroundColor: \"#776EA7\",\n fontColor: \"#BDC6FF\",\n scale: 2\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"Feel free to ignore most of these lines of code, I'm just importing things!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"import { printTable } from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"data = d3\n .csvParse(await FileAttachment(\"pop_state.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"states = await FileAttachment(\"usState.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"stateBuddhistProportions = new Map(data.map((d) => [d.state, d.value]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"max = d3.max(data, d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"min = d3.min(data, d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"FileAttachment(\"slide1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"Here are the data obtained from the BGIS Harvard Database. There is a long series of data / specific geographical information available. Not all of it is used in this specific notebook, but it's very interesting to plot and analyze what areas of China have higher concentrations of these temples. \n\nLink to the dataset: https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/VAYEUZ. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"bgisCsv1 = await FileAttachment(\"bgis-csv@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"bgisCsv1","database":"$undefined"},{"id":192,"value":"Plot.plot({\n marks: [\n Plot.dot(bgisCsv1, {x: \"NEW_LAT\", y: \"NEW_LONG\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"FileAttachment(\"slide2.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"Plot.plot({\n marks: [\n Plot.barY(bgisCsv1, {x: \"TYPE_ENG\", y: \"OBJECTID\", sort: {x: \"y\", reverse: true}}),\n Plot.ruleY([0,100000]),\n // Plot.color(field: \"TYPE_ENG\", type: \"nominal\", scale: {scheme: \"category10\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"germanMorals = FileAttachment(\"german-morals.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"**Explanation** of the abbreviations:\n- ipadvnt = to seek adventures and have an exciting life\n- ipbhprp = to behave properly\n- ipcrtiv = think new ideas and being creative\n- ipeqopt = that people are treated equally & equal opportunities \n- ipfrule = to do what is told and follow rules\n- ipgdtim = to have a good time \n- iphlppl = help people and care for others well being \n- iplylfr = be loyal to friends and devote to people close\n- ipmodst = to be humble and modest, not draw attention \n- iprspot = to get respect from others\n- ipshabt = to show abilities and be admired\n- ipstrgv = that government is strong and ensures safety\n- ipsuces = to be successful & achievements are recognized\n- ipudrst = to understand different people\n\nBelow is a preview of the germany & united kingdom datasets for responses that said they were Buddhist. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"germanyResponses = FileAttachment(\"germany-responses.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"ukResponses = FileAttachment(\"uk-responses.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"printTable(germanyResponses)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"printTable(ukResponses.splice(1,20))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"FileAttachment(\"uk-bvc.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"bgis = FileAttachment(\"bgis-csv@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"printTable(bgis.slice(0, 5))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"Much of this is playing around with the state data & european data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"{\n const type_eng = vl\n // .markPoint({ color: \"#ec6833\", size: 90, filled: true })\n .data(bgis)\n .encode(vl.x().fieldN(\"TYPE_ENG\"), vl.tooltip([\"TYPE_END\"]));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"printTable(stateProps.splice(1, 5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"vegaDatasets = (await require(\"vega-datasets@1.21.1\")).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"embed = require(\"vega-embed@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"colorScale = d3.scaleSequential(d3.interpolatePurples)\n .domain([d3.min(data,d => d.value),\n d3.max(data,d => d.value)])\n // .range([\"#ffffd9\",\"#edf8b1\",\"#c7e9b4\",\"#7fcdbb\",\"#41b6c4\",\"#1d91c0\",\"#225ea8\",\"#253494\",\"#081d58\"])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"color = d3.scaleQuantize([43434, 83385], d3.schemePurples[9])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"# States\n\nWe define a tooltip class to allow hover interactions. It might not work too well right now, but you can inspect the code. For some reason, observable isn't letting me import `vega`, so I'm going to not do some of the color scheme details. \n\nOtherwise, the existence of California ruins the coloring -> better to use log scale next time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import {VegaLite} from 'vega-lite';","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"import {vega} from 'vega';","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"import { callout } from \"@d3/line-chart-with-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"import {pdfView} from \"@saneef/pdf-view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"