30:T505,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) // .style("background-color", "#eee"); 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); }); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }31:[] 2e:{"title":"Streamgraph","cells":[{"id":0,"value":"md`# Streamgraph`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":57,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"lineColor(50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"input_data = (\n await d3.json(\"https://gist.githubusercontent.com/sashtur/d17c51a6d8824b6b0bc32b57b31b71e5/raw/5c9d08ca23d887de449cd4c927aecfd0f152014a/streamgraph\", d3.autoType))","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":337,"value":"primary_array = getPrimary(input_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"primary_value = primary_array[0].value;","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":358,"value":"secondary_arrays = getSecondary(input_data);","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"secondary_values = secondary_arrays.map( d => d.value );\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"processAreaData = (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 // Get the nested data array\n let nested_array = data[i].data;\n // Get the entries in the nested array\n let entries = Object.entries(nested_array);\n // Loop thru all entries and create 1 row per entry\n for (const [k, v] of entries) {\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 (const value of values) {\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"},{"id":598,"value":"getEquidistantValues = (primary_value, secondary_values) => {\n // Get 'distances' of all secondary values from primary value\n let distances = secondary_values.map( s => Math.abs(primary_value - s) );\n // Get all secondary values that are equidistant from primary value\n // First get the counts for each distance\n let map = distances.reduce( (r, k) => { r[k] = ++r[k] || 1; return r }, {} );\n // Now filter out those which have a count == 2\n let match = Object.keys(map).filter( k => map[k] == 2 ).map( k => +k );\n // Now get the corresponding secondary values\n let equal_secondary_values = match.map( m => primary_value - m ).concat( match.map( m => primary_value + m ) );\n return equal_secondary_values.sort( (a, b) => a - b );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"// Get array which will be used for the area charts\ngetAreaData = (input_data, primary_value, secondary_values) => {\n // Get equidistant secondary values\n let equal_secondary_values = getEquidistantValues(primary_value, secondary_values);\n // Now get the corresponding secondary arrays -- these will be used as input data for the series\n let data_array = input_data.filter(d => equal_secondary_values.includes(d.value) );\n// console.log(equal_secondary_values);\n // Process the data array so that for each percentile there are as many rows as # of keys in data\n const processed_data = processAreaData(data_array, equal_secondary_values);\n return processed_data.sort( (a, b) => a.date - b.date );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"area_data = getAreaData(input_data, primary_value, secondary_values);","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"series = d3.stack()\n .keys(d3.keys(area_data[0]).slice(1))\n .offset(d3.stackOffsetWiggle)\n // .order(d3.stackOrderInsideOut)\n (area_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"lineCurve = d3.curveCatmullRom;","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"processLineData = (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 // Get the nested data array\n let nested_array = data[i].data;\n // Get the entries in the nested array\n let entries = Object.entries(nested_array);\n // Loop thru all entries and create 1 row per entry\n for (const [k, v] of entries) {\n let row = {};\n // Row attributes\n // row['name'] = data[i].name;\n row['percentile'] = data[i].value + '%';\n row['date'] = new Date(k);\n row['value'] = +v;\n // Add row to array\n processed_array.push(row);\n }\n }\n return processed_array;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":641,"value":"// Get array which will be used for the line charts\ngetLineData = (input_data, primary_value, secondary_values) => {\n // Get equidistant secondary values\n let equal_secondary_values = getEquidistantValues(primary_value, secondary_values);\n // Get the arrays which are not in the above set\n let data_array = input_data.filter(d => !equal_secondary_values.includes(d.value) );\n let line_values = data_array.map( d => d.value );\n // Process the data array so that for each percentile there are as many rows as # of keys in data\n const processed_data = processLineData(data_array, line_values);\nconsole.log(processed_data);\n return processed_data.sort( (a, b) => a.date - b.date );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"line_data = getLineData(input_data, primary_value, secondary_values)","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"dataNest = d3.nest()\n .key(d => d.percentile)\n .entries(line_data);","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"area = d3.area()\n .x(d => x(d.data.date))\n .y0(d => y(d[0]))\n .y1(d => y(d[1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":672,"value":"priceline = d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y(d => y(d.value))\n .curve(lineCurve);","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":40,"value":"x = d3.scaleUtc()\n .domain(d3.extent(area_data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":65,"value":"areaColor = d3.scaleOrdinal()\n .domain(series.map(d => d.key))\n .range([\"powderblue\", \"skyblue\", \"skyblue\", \"powderblue\"])\n .unknown(\"#ccc\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"areaColor.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"lineColor.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"lineColor = d3.scaleOrdinal()\n .domain(dataNest.map(d => d.key))\n .range([\"tomato\", \"darkgoldenrod\", \"firebrick\"])\n .unknown(\"#ccc\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":37,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}