Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vega@4.3.0"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc10"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.24.1"></script> <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script> <style> body { margin:20;position:fixed;top:0;right:0;bottom:0;left:0; } .vega-bindings { visibility: hidden } .vega-actions { visibility: hidden } </style></head><body> <div id="stackedBarChart"></div> <script> init() var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); function init() { d3.queue() .defer(d3.json, 'deathPercentages_byProvince_byTime.json') .defer(d3.json, 'VietnamWarTimeline.json') .await(createChart); } function createChart(error, deathJSON, timelineJSON) { timelineJSON_nodup = removeDuplicates(timelineJSON, 'Event') var yourVlSpec1 = { "config": {"view": {"width": 400, "height": 300}}, "layer": [ { "data": { "values": deathJSON }, "title": "U.S. Army Infantry Casualties from March 1965 to March 1973", "mark": {"type": "bar", "size": 7}, "encoding": { "color": { "type": "nominal", "field": "DEPLOYMENT PROVINCE", "scale": { "domain": [ "Quang Tri", "Thua Thien - Hue", "Quang Nam", "Quang Ngai", "Kon Tum", "Binh Dinh", "Binh Duong", "Tay Ninh", "Other provinces" ], "range": [ "#B2172A", "#E3191C", "#FD8D3B", "#FED975", "#31A353", "#74C476", "#9ECAE0", "#2066AC", "#BDBDBD" ] } }, "x": { "type": "temporal", "field": "FATALITY_DATE", "timeUnit": "yearmonth", "title": "", "axis": { "labelColor":"black", "labelFontSize":12 } }, "y": { "type": "quantitative", "field": "count", "scale": {"domain": [0, 2400]}, "sort": "ascending", "axis": { "labelColor":"black", "labelFontSize":12, "title": "Count of deaths", "titleFontSize":12, } } }, "height": h*0.65, "width": w*0.8 }, { "layer": [ { "data": { "values": timelineJSON }, "mark": {"type": "tick", "dx": 0, "dy": 0, 'thickness':7}, "encoding": { "color": { "type": "nominal", "field": "plot", "legend": null, "scale": { "domain": ["Yes", "No"], "range": ["#000000", "white"] } }, "x": { "type": "temporal", "axis": null, "field": "FATALITY_DATE", "timeUnit": "yearmonth", "title": null }, "y": { "type": "quantitative", "axis": null, "field": "y", "title": null } }, "height": h*0.65, "width": w*0.8 }, { "data": { "values": timelineJSON_nodup }, "mark": { "type": "text", "align": "left", "angle": 90, "baseline": "middle", "dx": 10, "dy": 0 }, "encoding": { "text": {"type": "ordinal", "field": "Event"}, "x": { "type": "temporal", "axis": null, "field": "FATALITY_DATE", "timeUnit": "yearmonth", "title": null }, "y": { "type": "quantitative", "axis": null, "field": "y", "title": null } }, "height": h*0.65, "width": w*0.8 } ] } ], "resolve": { "scale": {"color": "independent", "y": "independent", "x": "shared"} }, "$schema": "https://vega.github.io/schema/vega-lite/v2.4.3.json" } vegaEmbed("#stackedBarChart", yourVlSpec1); } function removeDuplicates(originalArray, prop) { var newArray = []; var lookupObject = {}; for(var i in originalArray) { lookupObject[originalArray[i][prop]] = originalArray[i]; } for(i in lookupObject) { newArray.push(lookupObject[i]) } return newArray; } function appendCol(originalArray) { for(var i in originalArray) { originalArray[i]['y'] = 3000 } return originalArray } </script></body> https://cdn.jsdelivr.net/npm/vega@4.3.0
https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc10
https://cdn.jsdelivr.net/npm/vega-embed@3.24.1
https://d3js.org/d3.v4.min.js