2b:null 2c:["$","title",null,{"children":"Let's make a line graph - update | Michele Mauri | Observable"}] 31:T1266,render = ({ dimensions: dimensions, render: function (svgNode, data, visualOptions, mapping, originalData) { const { // artboard options width, height, background = 'red', margin = { top: 20, right: 20, bottom: 20, left: 20, }, // chart options interpolation = "Cardinal", fillGaps = true, showPoints = true, pointsRadius = 3, // series options columnsNumber = 2, useSameScale = false, sortSeriesBy = "Total value (descending)", gutter = 2 //TODO add labels legends and colors } = visualOptions; console.log(data); const chartWidth = width - margin.left - margin.right; const chartHeight = height - margin.top - margin.bottom; // get string for colors const colorKeys = data.map(function(d){ const uniq = d3.map(d[1], d => d.color).keys().join(",") d[2] = uniq; return uniq }) console.log(data) const colorScale = d3.scaleOrdinal(d3.schemeCategory10).domain(colorKeys); const xDomain = [ d3.min(data.map(function(d){return d3.min(d[1], e => e.x)})), d3.max(data.map(function(d){return d3.max(d[1], e => e.x)})) ]; const yDomain = [ d3.min(data.map(function(d){return d3.min(d[1], e => e.y)})), d3.max(data.map(function(d){return d3.max(d[1], e => e.y)})) ]; const x = d3.scaleLinear() .domain(xDomain) .nice() .range([0,chartWidth]); const y = d3.scaleLinear() .domain(yDomain) .nice() .range([chartHeight, 0]); const xAxis = (g) => { return g .attr("transform", `translate(0,${chartHeight})`) .call(d3.axisBottom(x).ticks(width / 80)) .call((g) => g .append("text") .attr("font-family", "Arial, sans-serif") .attr("font-size", 12) .attr("x", chartWidth) .attr("dy", -5) .attr("fill", "black") .attr("font-weight", "bold") .attr("text-anchor", "end") .text(mapping["x"].value) ); } const yAxis = (g) => { return g .call(d3.axisLeft(y)) .call((g) => g.select(".tick:last-of-type text").clone() .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("x", 4) .attr("fill", "black") .attr("font-weight", "bold") .attr("text-anchor", "start") .text(mapping["y"].value) ); } // convert string to d3 functions const curveType = { "Basis": d3.curveBasis, "Bundle": d3.curveBundle, "Cardinal": d3.curveCardinal, "Catmull–Rom": d3.curveCatmullRom, "Linear": d3.curveLinear, "Monotone X": d3.curveMonotoneX, "Natural": d3.curveNatural, "Step": d3.curveStep, "Step After": d3.curveStepAfter, "Step Before": d3.curveStepBefore } const line = d3.line() .x(function(d) { return x(d.x); }) .y(function(d) { return y(d.y); }) .curve(curveType[interpolation]) // TODO: use variables const svg = d3.select(svgNode).append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .attr("id", "visualization") const axisLayer = svg.append("g").attr("id", "axis") axisLayer.append("g").call(xAxis); axisLayer.append("g").call(yAxis); const vizLayer = svg .append("g") .attr("id", "viz") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") const groups = vizLayer.selectAll("g") .data(data) .join("g") .attr("stroke", d => colorScale(d[2])) .attr("fill", d => colorScale(d[2])) groups.append("path") .style("mix-blend-mode", "multiply") .attr("d", d => line(d[1])) .attr("fill", "none") if(showPoints) { groups.append("g").selectAll("circle") .data(d => d[1]) .join("circle") .attr("class", "dot") .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", pointsRadius) } /*const labelsLayer = svg.append("g").attr("id", "labels") labelsLayer .selectAll("text") .data(data) .join("text") .attr("dy", "0.35em") .attr("x", (d) => x(d.x) + 7) .attr("y", (d) => y(d.y)) .attr("font-family", "Arial, sans-serif") .attr("font-size", 10) .text((d) => d.label);*/ }, })32:[{"id":"70c8b70d0d2f879471e7205ebef1093474f8bdee1cb0a67d945d5ffe42c8801591801bb16a6ef810af549ba17b0060e90514c45d0b22703bbcbce1a489b443bb","href":"https://static.observableusercontent.com/files/70c8b70d0d2f879471e7205ebef1093474f8bdee1cb0a67d945d5ffe42c8801591801bb16a6ef810af549ba17b0060e90514c45d0b22703bbcbce1a489b443bb","name":"index.umd@5.js","type":"application/javascript","lastModified":1591880522373.399,"size":176616},{"id":"c663db6212e3e6d901defc8b2cf9ad32a75213b848d98467aec13604a8f84ba8432a5e648d120e5ba92078b79acfacb9c82f4f0c47c04f2ab4a99656841b0069","href":"https://static.observableusercontent.com/files/c663db6212e3e6d901defc8b2cf9ad32a75213b848d98467aec13604a8f84ba8432a5e648d120e5ba92078b79acfacb9c82f4f0c47c04f2ab4a99656841b0069","name":"Line graph - RIAA Music format revenues - data.csv","type":"text/csv","lastModified":1591880996835.583,"size":26709}] 2f:{"id":"a9c56dad01664761","slug":"lets-make-a-line-graph","title":"Let's make a line graph - update","thumbnail":"c508ac69572f10f08fa5b7cd15b7f2716be6e4aa195cb97c4867eb158a243172","access_level":"public","create_time":"$D2020-06-11T13:02:02.373Z","update_time":"$D2020-07-30T12:26:45.493Z","view_time":null,"first_public_time":"$D2020-06-11T13:15:59.573Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4be3d1d68b4eab5a","login":"mikima","name":"Michele Mauri","avatar_url":"https://avatars-next.observableusercontent.com/d76c5aa791b94671438fe822f26d224a383c16411fbbd792799179b3c3912918","tier":"starter_2024"},"version":855,"publish_version":855,"role":null,"authored":false,"authors":[{"type":"individual","id":"88179e875414a070","login":"mikima","name":"Michele Mauri","avatar_url":"https://avatars-next.observableusercontent.com/d76c5aa791b94671438fe822f26d224a383c16411fbbd792799179b3c3912918","tier":null}],"members":[{"type":"individual","id":"88179e875414a070","login":"mikima","name":"Michele Mauri","avatar_url":"https://avatars-next.observableusercontent.com/d76c5aa791b94671438fe822f26d224a383c16411fbbd792799179b3c3912918","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Let's make a line graph - update","cells":[{"id":195,"value":"md`\n# Let's make a line graph - update\n\n## The chart definition 🤟\n\nIn our secret lib the chart is defined by a JS object with two attributes:\n- **dimensions**: a list of dimensions\n- **render**: a function for rendering the chart into a svg element\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"dimensions = [\n {\n \"id\": \"lines\",\n \"name\": \"lines\",\n \"validTypes\": [\n \"number\",\n \"string\",\n \"date\"\n ],\n \"required\": false,\n \"operation\": \"group\"\n },\n {\n \"id\": \"x\",\n \"name\": \"x\",\n \"operation\": \"get\",\n \"required\": true\n },\n {\n \"id\": \"y\",\n \"name\": \"y\",\n \"operation\": \"get\",\n \"required\": false\n },\n {\n \"id\": \"color\",\n \"name\": \"color\",\n \"operation\": \"get\",\n \"required\": false\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`\n## Data loading & Mapping\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"jsonData = d3.csvParse(await FileAttachment(\"Line graph - RIAA Music format revenues - data.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"md`\n### Parsing and types casting\n\nWe're using our \"parseDataset(dataset, dataTypes)\" helper, that gives us an array of three elments: [dataSet, dataTypes, errors]. In this case, we don't pass dataTypes to the function, that will infer them from the dataset.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"parseOutput = theLib.parseDataset(jsonData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"parsedData = parseOutput.dataset","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"md`\n### Defining our current mapping\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"viewof mapping = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"lineChartMapping = ({\n lines: {\n value: mapping.lines\n },\n x: {\n value: mapping.x\n },\n y: {\n value: mapping.y\n },\n color: {\n value: mapping.color\n }\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"md`\n## Set some visual options and get the \"raw\" instance\nThis is not yet complete in our lib, but we'll have some \"global\" options, always available for all charts and some options defined by the chart itself.\n\nIn our case, the chart accepts options about width, height and fill color of data points. \nLet's bind these options to interactive inputs and build a visualOptions object.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"viewof c = color(\n {\n value: \"#ffffff\",\n title: \"Background\",\n //description: \"This color picker starts out blue\"\n}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"viewof aWidth = number({\n title:\"Artboard width\",\n min: 300, \n step: 1, \n value: width,\n //description: \"ldjfglsghb sèojfghn so\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"viewof aHeight = number({\n title:\"Artboard height\",\n min: 300, \n step: 1, \n value: 500,\n //description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"viewof margin = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"viewof interpolation = select({\n title: \"Interpolation\",\n description: \"See: https://github.com/d3/d3-shape\",\n options: [\"Basis\", \"Bundle\", \"Cardinal\", \"Catmull–Rom\", \"Linear\", \"Monotone X\", \"Natural\", \"Step\", \"Step After\", \"Step Before\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"viewof fillGaps = checkbox({\n title: \"Fill Gaps\",\n options: [{ value: \"toggle\", label: \"Fill Gaps\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"viewof showPoints = checkbox({\n title: \"Show Points\",\n options: [{ value: \"toggle\", label: \"Show Points\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"viewof pointsRadius = number({\n title:\"Points Radius\",\n min: 1, \n step: 1, \n value: 3,\n //description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"viewof columnsNumber = number({\n title:\"Column number\",\n min: 1, \n step: 1, \n value: 2,\n description: \"If series dimension is used\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"viewof useSameScale = checkbox({\n title: \"Use same scale\",\n options: [{ value: \"toggle\", label: \"Use same scale\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"viewof sortSeriesBy = select({\n title: \"Sort series by\",\n description: \"If series dimension is used\",\n options: [\"Total value (descending)\", \"Total value (ascending)\", \"Alphabetical\", \"Original\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"viewof gutter = number({\n title:\"Gutter\",\n min: 1, \n step: 1, \n value: 2,\n description: \"If series dimension is used\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"visualOptions = ({\n width: aWidth,\n height: aHeight,\n background: c,\n margin: margin,\n interpolation: interpolation,\n fillGaps: fillGaps,\n showPoints: showPoints,\n pointsRadius: pointsRadius,\n columnsNumber: columnsNumber,\n useSameScale: useSameScale,\n sortSeriesBy: sortSeriesBy,\n gutter: gutter\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"md`\n## Rendering ✌\n\nNote: In this case we don't render directly to the DOM but we use the \"renderToString\" method of the raw instance as we couldn't find a clean way to pass a node created within the notebook...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"container = {\n \n const div = html`

` \n viz.renderToDOM(div)\n return div\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"viz = newRaw.rawChart(render, {\n data: parsedData,\n mapping: lineChartMapping,\n visualOptions: visualOptions\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`\n# Appendix: Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"import {slider, color, checkbox, number, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"d3 = require(\"d3@5\", \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"theLib = require('https://inmagik-public.ams3.digitaloceanspaces.com/raw-lib-0.1.13.umd.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"newRaw = require(await FileAttachment(\"index.umd@5.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"