32: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 }33:[] 31:{"title":"Examples: Line charts","cells":[{"id":0,"value":"md`\n# Examples: Line charts\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof color_scheme = colorSchemePicker({ schemes: colorsForPicker })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":8,"value":"line_chart = {\n yield html`\n

Title of Chart

`;\n lineChart();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"allumaGreen = colorSchemes.primary[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"allumaSlate = colorSchemes.primary[1]","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":65,"value":"Object.keys(colorSchemes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"Object.values(colorSchemes)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import { colorSchemes } from '@chekos/alluma-data-visualization-style-guide'","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"import { select, radio } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"import { colorSchemePicker } from \"@zechasault/color-schemes-and-interpolators-picker\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}