36:["$","title",null,{"children":"Examples: Line charts | chekos | Observable"}] 3e:Ta5a,async function lineChart() { // Data - can change to sampleData for alluma-esque data const dataset = await d3.json( "https://gist.githubusercontent.com/chekos/7ee802ef53ba4bbd10a3b8161116d638/raw/e0d655473a57fae5ba54e648429bfd01ca698e12/tijuana_weather_data.json" ); // Chart dimensions let dimensions = { width: 685, height: 450, margin: { top: 25, right: 10, bottom: 50, left: 50 } }; dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right; dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom; // Canvas const wrapper = d3 .select("#wrapper-lineChart") .append("svg") .attr("width", dimensions.width) .attr("height", dimensions.height); const bounds = wrapper .append("g") .style( "transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)` ); // Accessors + Scales const dateParser = d3.timeParse("%Y-%m-%d"); const xAccessor = d => dateParser(d.date); const yAccessor = d => ((d.temperatureMax - 32) * 5) / 9; const xScale = d3 .scaleTime() .domain(d3.extent(dataset, xAccessor)) .range([0, dimensions.boundedWidth]) .nice(); const yScale = d3 .scaleLinear() .domain(d3.extent(dataset, yAccessor)) .range([dimensions.boundedHeight, 0]) .nice(); // Draw data const lineGenerator = d3 .line() .x(d => xScale(xAccessor(d))) .y(d => yScale(yAccessor(d))); bounds .append("path") .attr("d", lineGenerator(dataset)) .attr("fill", "none") .attr("stroke", selected_color) .attr("stroke-width", 1.4); // Peripherals const xAxisGenerator = d3.axisBottom().scale(xScale); const xAxis = bounds .append("g") .call(xAxisGenerator) .style("transform", `translateY(${dimensions.boundedHeight}px)`); const xAxisLabel = xAxis .append("text") .attr("x", dimensions.boundedWidth / 2) .attr("y", dimensions.margin.bottom - 10) .attr("fill", allumaSlate) .style("font-size", "1.4em") .html("X axis title") .attr("class", "axis-title"); const yAxisGenerator = d3 .axisLeft() .scale(yScale) .ticks(dimensions.boundedHeight / 50); const yAxis = bounds.append("g").call(yAxisGenerator); const yAxisLabel = yAxis .append("text") .attr("x", -dimensions.margin.left) .attr("y", -dimensions.margin.top / 2) .attr("fill", allumaSlate) .style("font-size", "1.4em") .text("Y axis title") .style("text-anchor", "start") .attr("class", "axis-title"); // Interactions }3f:[] 3a:{"id":"ad5c20f06f003af6","slug":"untitled/3","title":"Examples: Line charts","thumbnail":"6c69a192190d274515c34111f0176711eb0bcc9b8c69fb986cc8132b6da1ff30","access_level":"public","create_time":"$D2020-06-01T23:43:25.968Z","update_time":"$D2020-06-18T16:01:04.476Z","view_time":null,"first_public_time":"$D2020-06-18T16:00:16.975Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9b939657e9657184","login":"chekos","name":"chekos","avatar_url":"https://avatars-next.observableusercontent.com/02e1269ba639f9fd455195525e598362026456288bd4a14ddcdd18f2db7ab0dd","tier":"starter_2024","bio":"data engineer + public policy nerd.\nHip Hop head. \ntacosdedatos.com\nTijuana, Baja California, Mexico -> San Francisco Bay Area, CA, USA","followed_by_you":false,"follows_you":false},"version":142,"publish_version":142,"role":null,"authored":false,"authors":[{"type":"individual","id":"78ce9538d2f7c9b0","login":"chekos","name":"chekos","avatar_url":"https://avatars-next.observableusercontent.com/02e1269ba639f9fd455195525e598362026456288bd4a14ddcdd18f2db7ab0dd","tier":null,"bio":"data engineer + public policy nerd.\nHip Hop head. \ntacosdedatos.com\nTijuana, Baja California, Mexico -> San Francisco Bay Area, CA, USA","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"78ce9538d2f7c9b0","login":"chekos","name":"chekos","avatar_url":"https://avatars-next.observableusercontent.com/02e1269ba639f9fd455195525e598362026456288bd4a14ddcdd18f2db7ab0dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"4a817ebb9de83233","slug":"alluma-data-visualization-style-guide","title":"Alluma Data Visualization Style Guide","owner":{"id":"9b939657e9657184","login":"chekos","name":"chekos"}},"type":"notebook","body":{"titling":"auto","title":"Examples: Line charts","cells":[{"id":0,"value":"md`\n# Examples: Line charts\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof color_scheme = colorSchemePicker({ schemes: colorsForPicker })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof selected_color = radio({\n title: 'select a color',\n description: 'Please ',\n options: vals,\n value: color_scheme[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"line_chart = {\n yield html`\n

Title of Chart

`;\n lineChart();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"allumaGreen = colorSchemes.primary[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"allumaSlate = colorSchemes.primary[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"sampleData = [\n { county: \"Alameda\", gender: \"Female\", value: 1219900 },\n { county: \"Alameda\", gender: \"Male\", value: 914301 },\n { county: \"Los Angeles\", gender: \"Female\", value: 1388536 },\n { county: \"Los Angeles\", gender: \"Male\", value: 622894 },\n { county: \"Orange County\", gender: \"Female\", value: 523747 },\n { county: \"Orange County\", gender: \"Male\", value: 553368 },\n { county: \"San Francisco\", gender: \"Female\", value: 429355 },\n { county: \"San Francisco\", gender: \"Male\", value: 850145 },\n { county: \"San Mateo\", gender: \"Female\", value: 867492 },\n { county: \"San Mateo\", gender: \"Male\", value: 582689 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"Object.keys(colorSchemes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"Object.values(colorSchemes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"colorsForPicker = {\n let _ = [];\n for (let [key, value] of Object.entries(colorSchemes)) {\n _.push({ name: key, colors: value });\n }\n return _;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"vals = {\n let vals = [];\n for (let index = 0; index < color_scheme.length; index++) {\n vals.push({\n label: html` ${color_scheme[index]} `,\n value: color_scheme[index]\n });\n }\n return vals;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"colorsForRadio = {\n let _ = [];\n for (let [key, value] of Object.entries(color_scheme)) {\n _.push({\n label: key,\n value: value\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import { colorSchemes } from '@chekos/alluma-data-visualization-style-guide'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"import { select, radio } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"import { colorSchemePicker } from \"@zechasault/color-schemes-and-interpolators-picker\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 35:null