2b:null 2c:["$","title",null,{"children":"Streamgraph with flexible time formats | Sachin Ashturkar | Observable"}] 31:T825,chart = { // Initialize svg const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) // .style("background-color", "#eee"); // Draw area graphs svg.append("g") .selectAll("path") .data(series) .join("path") .attr("fill", ({key}) => areaColor(key)) .attr("d", area) .append("title") .text(({key}) => key + '%'); // add the Y gridlines svg.append("g") .attr("class", "grid") .attr("transform", `translate(${margin.left},0)`) .attr("stroke", "lightgrey") .attr("stroke-opacity", "0.3") .attr("stroke-width", ".3") .attr("shape-rendering", "crispEdges") .call(make_y_gridlines() .tickSize(-width + margin.left + margin.right) .tickFormat("") ) // Loop through each symbol / key dataNest.forEach(function(d,i) { svg.append("path") .attr("class", "line") .style("stroke", function() { // Add the colours dynamically return d.color = lineColor(d.key); }) .style("fill", "none") .style("stroke-width", "3px") .attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID .attr("d", priceline(d.values)) .append("title") .text(d.key + '%'); }); // Append the X axis let x_axis = svg.append("g") .attr("id", "x-axis") .attr("class", "x axis") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); // Set the tick format on the X axis // Options: H, D, W, M, Q, Y setTickFormatX(period); // Rotate tick labels for certain periods if (['H','D','W','M'].includes(period)) { x_axis.selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); } // console.log(x.ticks()); // Check if number of tick marks are more than fitting the width // if (x.ticks().length > no_of_x_ticks) { // xAxis.ticks(d3.timeWeek.every(50)); // } // Append the Y axis svg.append("g") .attr("class", "y axis") .call(yAxis); // Return the svg return svg.node(); }32:T6f6,getFilteredData = (primary_value, secondary_values, matching) => { // Get 'distances' of all secondary values from primary value let distances = secondary_values.map( s => Math.abs(primary_value - s) ); // Get all secondary values that are equidistant from primary value // First get the counts for each distance let counts = distances.reduce( (r, k) => { r[k] = ++r[k] || 1; return r }, {} ); // Now filter out those which have a count == 2 let match = Object.keys(counts).filter( k => counts[k] == 2 ).map( k => +k ); // Now get the corresponding secondary values for matching distances from primary let result_values = match.map( m => primary_value - m ).concat( match.map( m => primary_value + m ) ); // Get non-matching set of values if required if (!matching) result_values = secondary_values.filter(s => !result_values.includes(s)).concat([primary_value]); // Extract corresponding secondary arrays from input data let secondary_array = input_data.filter(d => result_values.includes(d.value) ); // Process the secondary array so that there is one row per date and percentile // [{date: Fri Jan 02 2015 05:30:00 GMT+0530 (India Standard Time), percentile: "25", value: 215}, ...] let processed_data = processData(secondary_array, result_values); // console.log('processed_data', processed_data); // Now rollup the data (sum) on month and percentile as keys // This will be of the form // {01-2015: {25: 69840, 75: 77541, 5: 82570, 95: 75823}, 02-2015: {…},...} let rolledup_data = d3.nest() .key( d => keyFunction(d) ) .key( d => d.percentile ) .rollup( v => rollupFunction(v, aggregate) ) .object( processed_data ); // console.log('rolledup_data', rolledup_data); // Return sorted list return rolledup_data; }33:[] 2f:{"id":"c96364c3071fb933","slug":"streamgraph-with-flexible-time-formats","title":"Streamgraph with flexible time formats","thumbnail":"325fe2d8d27b0f2c4b2dbd03be0ee751139da005e329c40e8447157f4a78e7f6","access_level":"public","create_time":"$D2019-11-08T08:13:33.674Z","update_time":"$D2019-12-04T08:18:20.213Z","view_time":null,"first_public_time":"$D2019-11-08T10:40:30.128Z","fork":{"id":"1f600d8371dc106b","slug":"streamgraph","title":"Streamgraph","owner":{"id":"9ef9a777beb6d079","login":"sachina","name":"Sachin Ashturkar"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9ef9a777beb6d079","login":"sachina","name":"Sachin Ashturkar","avatar_url":"https://avatars-next.observableusercontent.com/fe61ee1b067cbbab0dba16ef8bd50dd03cf872b2e7bd6df32ba48cc8c887f7b6","tier":"starter_2024"},"version":1373,"publish_version":1373,"role":null,"authored":false,"authors":[{"type":"individual","id":"19e0f248887fef00","login":"sachina","name":"Sachin Ashturkar","avatar_url":"https://avatars-next.observableusercontent.com/fe61ee1b067cbbab0dba16ef8bd50dd03cf872b2e7bd6df32ba48cc8c887f7b6","tier":null}],"members":[{"type":"individual","id":"19e0f248887fef00","login":"sachina","name":"Sachin Ashturkar","avatar_url":"https://avatars-next.observableusercontent.com/fe61ee1b067cbbab0dba16ef8bd50dd03cf872b2e7bd6df32ba48cc8c887f7b6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Streamgraph with flexible time formats","cells":[{"id":0,"value":"md`# Streamgraph with flexible time formats`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1198,"value":"// Initialize variable for aggregate\n// count, sum, mean, min, max, stdev, variance\naggregate = 'min';","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1196,"value":"// Initialize variable for period\n// H, D, W, M, Q, Y\nperiod = 'W';","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1267,"value":"no_of_x_ticks = width / 80;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"legend = {\n const id = DOM.uid().id;\n return html`\n

${areaColor.domain().map(name => html`\n

\n ${document.createTextNode(name + '%')}\n

`)}\n

${lineColor.domain().map(name => html`\n

\n ${document.createTextNode(name + '%')}\n

`)}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"// Use this input data for hourly/daily/weekly\ninput_data = (\n await d3.json(\"https://gist.githubusercontent.com/sashtur/d17c51a6d8824b6b0bc32b57b31b71e5/raw/31d1b6509fc2ce9f346b670edd5403de9f0234a0/streamgraph\", d3.autoType))\n// Use this input data for monthly/quarterly/yearly\n// input_data = (\n// await d3.json(\"https://gist.githubusercontent.com/sashtur/a19aacff5cee92f89d2864eee3050b23/raw/0a479481ddd4ad47e9f78e8cb4596f795c9e1663/gistfile1.txt\", d3.autoType))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"getPrimary = (data) => {\n // Get primary value by finding the array having a 'primary' key with good value\n let primary_array = data.filter( d => d.hasOwnProperty(\"primary\") && d['primary'] !== undefined );\n return primary_array;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"primary_array = getPrimary(input_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"primary_value = primary_array[0].value;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"getSecondary = (data) => {\n // Find the arrays that do not have a 'primary' key\n let secondary_arrays = data.filter( d => d.value != primary_value );\n return secondary_arrays;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"secondary_arrays = getSecondary(input_data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":372,"value":"secondary_values = secondary_arrays.map( d => d.value );\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":471,"value":"processData = (data, values) => {\n // console.log(data);\n // Initialize array to hold final array of processed rows\n let processed_array = [];\n // Loop thru all data items - each row of the complex structure\n for (let i = 0; i < data.length; i++) {\n // Loop thru all entries and create 1 row per entry\n for (let [k, v] of Object.entries(data[i].data)) {\n let row = {};\n // Row attributes\n // row['name'] = data[i].name;\n row['date'] = new Date(k);\n // Loop thru all good percentile values\n for (let value of values) {\n // row['percentile'] = data[i].value + '%';\n row['percentile'] = data[i].value;\n row['value'] = v;\n }\n // Add row to array\n processed_array.push(row);\n }\n }\n return processed_array;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1162,"value":"rollupFunction = (v, aggregate) => {\n switch (aggregate) {\n case 'count':\n return v.length;\n break;\n case 'sum':\n return d3.sum( v, d => d.value );\n break;\n case 'min':\n return d3.min( v, d => d.value );\n break;\n case 'max':\n return d3.max( v, d => d.value );\n break;\n case 'mean':\n return d3.mean( v, d => d.value );\n break;\n case 'stdev':\n return d3.deviation( v, d => d.value );\n break;\n case 'variance':\n return d3.variance( v, d => d.value );\n break;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1159,"value":"keyFunction = (d) => {\n return d3.timeFormat(time_format)(d.date);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":598,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"// Get array which will be used for the area charts\ngetAreaData = (input_data, primary_value, secondary_values) => {\n // Get rolledup data for matching secondary values\n let rolledup_data = getFilteredData(primary_value, secondary_values, true);\n// console.log('area filtered_data', filtered_data);\n // Now flatten the structure to get the following structure\n // [{25: 69840, 75: 77541, 5: 82570, 95: 75823, date: \"01-2015\"}, {}, ...]\n let flattened_data = Object.keys(rolledup_data).map( d => {\n let f = { date: d };\n Object.assign(f, Object.fromEntries(\n Object.entries(rolledup_data[d]).map( ([k, v]) => \n [k, v])\n ));\n return f;\n });\n // console.log('flat areadata', flatdata);\n // Return the flattened data sorted on date\n return flattened_data.sort( (a, b) => a.date - b.date );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":375,"value":"area_data = getAreaData(input_data, primary_value, secondary_values);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"series = d3.stack()\n .keys(Object.keys(area_data[0]).slice(0,-1)) // Get all elements except last (which is date)\n .offset(d3.stackOffsetWiggle)\n // .order(d3.stackOrderInsideOut)\n (area_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"area = d3.area()\n .x(d => x(new Date(parseDate(d.data.date))))\n .y0(d => y(d[0]))\n .y1(d => y(d[1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":641,"value":"// Get array which will be used for the line charts\ngetLineData = (input_data, primary_value, secondary_values) => {\n // Get rolledup data for non-matching secondary values\n let rolledup_data = getFilteredData(primary_value, secondary_values, false);\n// console.log('line filtered_data', filtered_data);\n // Now flatten the structure to get the following structure\n // [{percentile: \"50\", date: 2019-10-01, value: 10}, {}, ...]\n let flattened_data = [];\n Object.keys(rolledup_data).forEach( d => {\n Object.keys(rolledup_data[d]).forEach( p => {\n let f = {\n percentile: p,\n date: d,\n value: rolledup_data[d][p]\n };\n flattened_data.push(f); \n });\n });\n // Return the flattened data sorted on date\n return flattened_data.sort( (a, b) => a.date - b.date );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":636,"value":"line_data = getLineData(input_data, primary_value, secondary_values)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"dataNest = d3.nest()\n .key(d => d.percentile)\n .entries(line_data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"lineCurve = d3.curveCatmullRom;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":672,"value":"priceline = d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => x(new Date(parseDate(d.date))))\n .y(d => y(d.value))\n .curve(lineCurve);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":674,"value":"// gridlines in x axis function\nfunction make_x_gridlines() {\t\t\n return d3.axisBottom(x);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":678,"value":"// gridlines in y axis function\nfunction make_y_gridlines() {\t\t\n return d3.axisLeft(y);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1361,"value":"d3.timeWeeks(x.domain()[0], x.domain()[1]).length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"x = d3.scaleTime()\n .domain(d3.extent(area_data, d => new Date(parseDate(d.date))))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"y = d3.scaleLinear()\n .domain([d3.min(series, d => d3.min(d, d => d[0])), d3.max(series, d => d3.max(d, d => d[1]))])\n .range([height - margin.bottom, margin.top]).nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1278,"value":"getAreaColors = (count) => {\n let blues = d3.schemeBlues[count];\n // Match 1st color with last, 2nd with 2nd last, etc.\n // Loop thru half the blues\n for (let i=0; i d.key))\n .range(area_colors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":594,"value":"areaColor.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"lineColor.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"lineColor = d3.scaleOrdinal()\n .domain(dataNest.map(d => d.key))\n .range(d3.schemeDark2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":776,"value":"quarter = (d) => {\n // Return quarter\n return \"Q\" + (1 + ~~(d.getMonth() / 3)) + \"-\" + d.getFullYear();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":798,"value":"quarter(new Date('2017-09-01'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1231,"value":"time_format = getTimeFormat(period)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1227,"value":"getTimeFormat = p => {\n switch (p) {\n case 'H':\n return '%d-%m-%Y:%H';\n break;\n case 'D':\n return '%d-%m-%Y';\n break;\n case 'W':\n return '%d-%m-%Y';\n break;\n case 'M':\n return '%m-%Y';\n break;\n case 'Q':\n return '%m-%Y';\n break;\n case 'Y':\n return '%Y';\n break;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1070,"value":"parseDate = d3.timeParse(time_format);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":757,"value":"setTickFormatX = (period) => {\n return xAxis.tickFormat(d3.timeFormat(time_format));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"xAxis = d3.axisBottom(x).ticks(no_of_x_ticks).tickSizeOuter(0)\n// xAxis = d3.axisBottom(x).ticks(d3.timeWeek).tickSizeOuter(0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":572,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"margin = ({top: 5, right: 15, bottom: 50, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"