2c:null 2d:["$","title",null,{"children":"Visualization Covid-19 Vaccination Data - Laos | Douangtavanh Kongphaly | Observable"}] 32:T471,

	People	of total population*
People who received at least one dose (total):	${d3.format(",")( lastIndexDataLength["total_vaccinated"] )}	-
People vaccinated (1 dose):	${d3.format(",")( lastIndexDataLength["people_vaccinated"] )}	${d3.format([".1" + "%"])( sort_table_data[0].oneDose )}
People fully vaccinated (2 doses):	${d3.format(",")( lastIndexDataLength["people_fully_vaccinated"] )}	${d3.format([".1" + "%"])( sort_table_data[0].twoDoses )}

Last updated: ${lastIndexDataLength["date"]}

*total number of population based on publication 'Lao Population Projections 2015 - 2045' - medium assumption projected mid year population in 2021

33:T74c,vac_timeline_chart = { let wrapper = d3.create("div").attr("class", "vac-timeline-chart"); //Set up svg bounds let height = 3000; let svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); let rect = svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "#FAFAFA"); //Set Scale let timeFormat = d3.timeParse("%d %B %Y"); let yAxisScale = d3 .scaleTime() .domain(d3.extent(data_vac_donate, (d) => timeFormat(d["date"]))) .range([30, height - margin.bottom]) .nice(); let yAxixGenerator = d3.axisLeft().scale(yAxisScale); let yAxisDraw = svg .append("g") .attr("id", "group-ticks-vac-timeline") .call(yAxixGenerator) .style("transform", `translateX(${150}px)`) .style("color", "#838383"); //Adjust YAxis label svg.select("#group-ticks-vac-timeline").selectAll("line").attr("x2", "-50"); svg.select("#group-ticks-vac-timeline").selectAll("text").attr("x", "-60"); //Create ciricle let circle = svg .append("g") .selectAll("circle") .data(data_vac_timeline) .join("circle") .attr("id", (d, i) => `circle-vac-${i}`) .attr("fill", "#00B8D4") .attr("cx", 150) .attr("cy", (d) => yAxisScale(timeFormat(d["date"]))) .attr("r", ".2em"); //Create text let annotation_text = svg .append("g") .selectAll("text") .data(data_vac_timeline) .join("text") .attr("x", 160) .attr("y", (d) => yAxisScale(timeFormat(d["date"])) + 4) .attr("fill", "#838383") // .style("text-anchor", "middle") .style("font-size", ".7em") .style("font-family", "sans-serif") .text( (d) => `${d["type_of_vaccine"]} — ${d3.format(",")( d["amount_of_vaccine"] )} doses — ${d["support_organization"]}` ); return svg.node(); }34:T487,vac_donate_chart = { let wrapper = d3.create("div").attr("class", "vac-donate-chart"); //Set up svg bounds let svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //setup variables let color = d3.scaleOrdinal(d3.schemeTableau10); //Set circle pack function let bubble = d3.pack().size([width, height]).padding(1.5); //Convert dataset to hirarchy format let root = d3 .hierarchy(data_vac_by_type) .sum((d) => d["amount_of_vaccine"]) .sort((a, b) => b.value - a.value); //Execute circle pack function bubble(root); //Set node before drawing circle - aligning circle by its children (type of vaccine) let node = svg .selectAll("g") .data(root.children) .join("g") .attr("transform", (d) => `translate(${d.x},${d.y})`); //Draw circple pack node .append("circle") .attr("r", (d) => d.r) .style("fill", (d) => color(d.data)); //Addd text to the circles node .append("text") .style("text-anchor", "middle") .style("font-size", ".8em") .style("font-family", "sans-serif") .text((d) => `${d.data[0]}: ~${d3.format(".1s")(d.value)}`); return svg.node(); }35:T10f6,viz = { let wrapper = d3.create("div").attr("class", "chart"); let tooltip = wrapper .append("div") .attr("class", "tooltip-for-chart") .attr("id", "tooltip-vis-map") .html( `` ) .style("opacity", 0); let svg = wrapper.append("svg").attr("viewBox", [0, 0, width, height]); let colorCat = d3 .scaleOrdinal() .domain(["people_fully_vaccinated", "people_vaccinated"]) .range([color[1], color[2]]); let xAxisGenerator = d3.axisBottom().scale(xScale).tickValues(labelXAxis); let yAxisGenerator = d3.axisRight().scale(yScale).ticks(5); let xAxisDraw = svg .append("g") .attr("id", "xAxis") .call(xAxisGenerator) .style("transform", `translateY(${height - margin.bottom}px)`) .style("color", "#838383"); let yAxisDraw = svg .append("g") .attr("id", "yAxis") .call(yAxisGenerator) .style("transform", `translateX(${width - margin.right}px)`) .style("color", "#838383"); svg .append("g") .attr("id", "rect-col") .selectAll("g") .data(stackData) .join("g") .attr("id", (d) => `group-rect-${d.key}`) .attr("fill", (d) => colorCat(d.key)) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d, i) => xScale(d["data"]["date"])) .attr("y", (d) => yScale(+d[1])) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(+d[0] - +d[1]) - yScale(margin.bottom)); //Obtain dataIndex from xSale let indexLocation = []; xScale.domain().forEach((d) => { return indexLocation.push(xScale(d)); }); //Create Tooltip line let lineTooltip = svg .append("line") .attr("id", "line-tooltip") .attr("y1", height - margin.bottom) .attr("y2", margin.top) .attr("stroke", "#838383") .style("opacity", 0); svg .append("rect") .attr("id", "rect-tooltip") .attr("width", width - margin.right) .attr("height", height - margin.bottom - margin.top) .attr("fill", "black") .style("position", "absolute") .style("transform", `translateY(${margin.top}px)`) .style("opacity", 0) .on("mousemove", (e) => { let pointerLocation = d3.pointer(e); let clientMouseX = pointerLocation[0]; let clientMouseY = pointerLocation[1]; lineTooltip .style("opacity", 1) .attr("x1", clientMouseX) .attr("x2", clientMouseX); let dataIndexHighlight = d3.bisectCenter(indexLocation, clientMouseX); let dataForTooltip = data[dataIndexHighlight]; //Total vaccinated let tot_changed_vac = getCurrentDateData( dataForTooltip, "total_vaccinated" ).changed; //1 dose vaccinated let first_dose_changed_vac = getCurrentDateData( dataForTooltip, "people_vaccinated" ).changed; //2 dose vaccinated let second_dose_changed_vac = getCurrentDateData( dataForTooltip, "people_fully_vaccinated" ).changed; //Tooltip Info d3.select("#data-tooltip-date").html(`Date: ${dataForTooltip["date"]}`); d3.select("#data-tooltip-dose-tot").html( `People who received at least one dose: ${d3.format(",")( dataForTooltip["total_vaccinated"] )} (+${d3.format(",")(tot_changed_vac)})` ); d3.select("#data-tooltip-dose-1").html( `People vaccinated (1 dose): ${d3.format(",")( dataForTooltip["people_vaccinated"] )} (+${d3.format(",")(first_dose_changed_vac)})` ); d3.select("#data-tooltip-dose-2").html( `People fully vaccinated (2 doses): ${d3.format(",")( dataForTooltip["people_fully_vaccinated"] )} (+${d3.format(",")(second_dose_changed_vac)})` ); d3.select(".tooltip-for-chart") .style("opacity", 1) .style("left", `${50}px`) .style("top", `${50}px`); }) .on("mouseleave", (e, d) => { lineTooltip.style("opacity", 0); d3.selectAll(".tooltip-for-chart") .style("opacity", 0) .transition() .duration(0.2); }); return wrapper.node(); }36:T86e,barChartTotalPerDay = { let wrapper = d3.create("div").attr("class", "bar-chart-per-day"); //Set up svg bounds let svg = d3.create("svg").attr("viewBox", [0, 0, width, height_cul]); let key = "total_vaccinated"; let keyMA = "maTotal"; let datasetForLine = []; let dataset = data_diff; let maxNumOfYAxis = d3.max(dataset, (d) => +d[key]); //add data which excludes NAN dataset.map((d) => !isNaN(+d[keyMA]) ? datasetForLine.push({ date: d["date"], maTotal: +d[keyMA] }) : undefined ); //Set X Axis scale let xScale = d3 .scaleBand() .domain(dataset.map((d) => d["date"])) .range([30, width - margin.right]) .paddingInner(0.2) .paddingOuter(1); //Set Y Axis scale let yScale = d3 .scaleLinear() .domain([0, maxNumOfYAxis + maxNumOfYAxis * 0.1]) .range([height_cul - margin.bottom, margin.top]) .nice(); let xAxisGenerator = d3 .axisBottom() .scale(xScale) .tickValues(labelXAxisForBarChartDiff); let yAxisGenerator = d3.axisRight().scale(yScale).ticks(5); let xAxisDraw = svg .append("g") .attr("id", "xAxis-bar-per-day-total") .call(xAxisGenerator) .style("transform", `translateY(${height_cul - margin.bottom}px)`) .style("color", "#838383"); let yAxisDraw = svg .append("g") .attr("id", "yAxis-bar-per-day-total") .call(yAxisGenerator) .style("transform", `translateX(${width - margin.right}px)`) .style("color", "#838383"); //Draw rect elements svg .append("g") .attr("fill", "grey") .selectAll("rect") .data(dataset) .join("rect") .attr("x", (d) => xScale(d["date"])) .attr("y", (d) => yScale(+d[key] < 0 ? 0 : +d[key])) .attr("height", (d) => yScale(0) - yScale(+d[key] < 0 ? 0 : +d[key])) .attr("width", xScale.bandwidth()); // Draw the line svg .append("path") .datum(datasetForLine) .attr("fill", "none") .attr("stroke", colorLine) .attr("stroke-width", 1.5) .attr( "d", d3 .line() .x((d) => xScale(d["date"])) .y((d) => yScale(+d[keyMA])) ); return svg.node(); }37:T8a6,barChartOneDosePerDay = { let wrapper = d3.create("div").attr("class", "bar-chart-one-dose-per-day"); //Set up svg bounds let svg = d3.create("svg").attr("viewBox", [0, 0, width, height_cul]); let key = "people_vaccinated"; let keyMA = "maPeople_vaccinated"; let datasetForLine = []; let dataset = data_diff; let maxNumOfYAxis = d3.max(dataset, (d) => +d[key]); //add data which excludes NAN dataset.map((d) => !isNaN(+d[keyMA]) ? datasetForLine.push({ date: d["date"], maPeople_vaccinated: +d[keyMA] }) : undefined ); //Set X Axis scale let xScale = d3 .scaleBand() .domain(dataset.map((d) => d["date"])) .range([30, width - margin.right]) .paddingInner(0.2) .paddingOuter(1); //Set Y Axis scale let yScale = d3 .scaleLinear() .domain([0, maxNumOfYAxis + maxNumOfYAxis * 0.1]) .range([height_cul - margin.bottom, margin.top]) .nice(); let xAxisGenerator = d3 .axisBottom() .scale(xScale) .tickValues(labelXAxisForBarChartDiff); let yAxisGenerator = d3.axisRight().scale(yScale).ticks(5); let xAxisDraw = svg .append("g") .attr("id", "xAxis-bar-chart-one-dose-per-day") .call(xAxisGenerator) .style("transform", `translateY(${height_cul - margin.bottom}px)`) .style("color", "#838383"); let yAxisDraw = svg .append("g") .attr("id", "yAxis-bar-chart-one-dose-per-day") .call(yAxisGenerator) .style("transform", `translateX(${width - margin.right}px)`) .style("color", "#838383"); //Draw rect elements svg .append("g") .attr("fill", color[2]) .selectAll("rect") .data(dataset) .join("rect") .attr("x", (d) => xScale(d["date"])) .attr("y", (d) => yScale(+d[key] < 0 ? 0 : +d[key])) .attr("height", (d) => yScale(0) - yScale(+d[key] < 0 ? 0 : +d[key])) .attr("width", xScale.bandwidth()); // Draw the line svg .append("path") .datum(datasetForLine) .attr("fill", "none") .attr("stroke", colorLine) .attr("stroke-width", 1.5) .attr( "d", d3 .line() .x((d) => xScale(d["date"])) .y((d) => yScale(+d[keyMA])) ); return svg.node(); }38:T8bc,barChartTwoDosesPerDay = { let wrapper = d3.create("div").attr("class", "bar-chart-two-doses-per-day"); //Set up svg bounds let svg = d3.create("svg").attr("viewBox", [0, 0, width, height_cul]); let key = "people_fully_vaccinated"; let keyMA = "maPeople_fully_vaccinated"; let datasetForLine = []; let dataset = data_diff; let maxNumOfYAxis = d3.max(dataset, (d) => +d[key]); //add data which excludes NAN dataset.map((d) => !isNaN(+d[keyMA]) ? datasetForLine.push({ date: d["date"], maPeople_fully_vaccinated: +d[keyMA] }) : undefined ); //Set X Axis scale let xScale = d3 .scaleBand() .domain(dataset.map((d) => d["date"])) .range([30, width - margin.right]) .paddingInner(0.2) .paddingOuter(1); //Set Y Axis scale let yScale = d3 .scaleLinear() .domain([0, maxNumOfYAxis + maxNumOfYAxis * 0.1]) .range([height_cul - margin.bottom, margin.top]) .nice(); let xAxisGenerator = d3 .axisBottom() .scale(xScale) .tickValues(labelXAxisForBarChartDiff); let yAxisGenerator = d3.axisRight().scale(yScale).ticks(5); let xAxisDraw = svg .append("g") .attr("id", "xAxis-bar-chart-two-doses-per-day") .call(xAxisGenerator) .style("transform", `translateY(${height_cul - margin.bottom}px)`) .style("color", "#838383"); let yAxisDraw = svg .append("g") .attr("id", "yAxis-bar-chart-two-doses-per-day") .call(yAxisGenerator) .style("transform", `translateX(${width - margin.right}px)`) .style("color", "#838383"); //Draw rect elements svg .append("g") .attr("fill", color[1]) .selectAll("rect") .data(dataset) .join("rect") .attr("x", (d) => xScale(d["date"])) .attr("y", (d) => yScale(+d[key] < 0 ? 0 : +d[key])) .attr("height", (d) => yScale(0) - yScale(+d[key] < 0 ? 0 : +d[key])) .attr("width", xScale.bandwidth()); // Draw the line svg .append("path") .datum(datasetForLine) .attr("fill", "none") .attr("stroke", colorLine) .attr("stroke-width", 1.5) .attr( "d", d3 .line() .x((d) => xScale(d["date"])) .y((d) => yScale(+d[keyMA])) ); return svg.node(); }39:Te07,chart = { let wrapper = d3.create("div").attr("class", "chart-map"); //Set up svg bounds let svg = d3.create("svg").attr("viewBox", [0, 0, 975, 610]); //Width: 975; Height: 610 //Import data let data = sort_table_data.slice([1]); let data_province_index = data.map((d) => d["lable"]); //Legend color let color_two_dose = color[1]; let color_one_dose = color[2]; let color_grey = "#e0e0e0"; //Function for create spike let data_scale = d3.scaleLinear().domain([0, 1]).range([0, 50]); let spike = (length, width = 7) => `M${-width / 2},0L0,${-length}L${width / 2},0`; //Create spike legend const legend = svg .append("g") .attr("fill", "#777") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(data_scale.ticks(5).slice(1).reverse()) .join("g") .attr("transform", (d, i) => `translate(${950 - (i + 1) * 30},590)`); legend .append("path") .attr("fill", color_grey) .attr("fill-opacity", 0.3) .attr("stroke", color_grey) .attr("d", (d) => spike(data_scale(d))); legend.append("text").attr("dy", "1.3em").text(data_scale.tickFormat(1, "%")); //Draw paths of the provinces. let provinces_path = svg.append("g").attr("class", "provinces-path"); mapDraw.features.map((d) => { provinces_path .append("path") .datum(d) .attr("class", "map") .attr("fill", "#e0e0e0") .attr("d", pathGenerator); }); //Draw a line border for each province provinces_path .append("path") .datum(topojson.mesh(laoMap, laoMap.objects["LAO_ADM1"])) .attr("class", "mapBorder") .attr("stroke-line", "round") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("d", d3.geoPath().projection(projectionThis)) .style("pointer-events", "none"); //Draw spike elements of the provinces. let spike_provinces_one_dose = svg .append("g") .attr("class", "spike-provinces-one-dose"); let spike_provinces_two_doses = svg .append("g") .attr("class", "spike-provinces-two-doses"); mapDraw.features.forEach((d) => { //Find current variable let cur_pro = d["properties"]["Name"] === "Sékong" ? "Sekong" : d["properties"]["Name"]; //Search index of current variable let fil_data = data_province_index.findIndex((ele) => ele === cur_pro); //Data let pro_one_dose = data[fil_data]["oneDose"]; let pro_two_doses = data[fil_data]["twoDoses"]; spike_provinces_one_dose .append("path") .attr( "transform", `translate(${pathGenerator.centroid(d)[0] + 5}, ${ pathGenerator.centroid(d)[1] })` ) .attr( "d", spike(data_scale(pro_one_dose > 1 ? (pro_one_dose = 1) : pro_one_dose)) ) .attr("fill", color_one_dose) .attr("fill-opacity", 0.1) .attr("stroke", color_one_dose); spike_provinces_two_doses .append("path") .attr( "transform", `translate(${pathGenerator.centroid(d)[0]}, ${ pathGenerator.centroid(d)[1] })` ) .attr( "d", spike( data_scale(pro_two_doses > 1 ? (pro_two_doses = 1) : pro_two_doses) ) ) .attr("fill", color_two_dose) .attr("fill-opacity", 0.1) .attr("stroke", color_two_dose); }); //Create map area // svg // .append("path") // .datum(mapDraw) // .attr("class", "map") // .attr("fill", "black") // .attr("d", pathGenerator); return svg.node(); }3a:T1ae5,tile_province = { //Create DOM for SVG let wrapper = d3.create("div").attr("class", "tile-province"); //Set up svg bounds let svg = d3.create("svg").attr("viewBox", [0, 0, width, width]); let temp_var = d3.groups(data_pro, (d) => d["province_l"]).map((d) => d[0]); let columns = [0, 1, 2]; let rows = [0, 1, 2, 3, 4, 5, 6]; //Create matrix of rows and columns let create_matrix = (row, col, output_dataset) => { return row.forEach((d) => col.map((e) => output_dataset.push([d, e]))); }; //Create set for actual rect to draw let create_actual_set_of_rows_and_columns = (row, col, output_dataset) => { let temp_row = row.slice(); temp_row.pop(); create_matrix(temp_row, col, output_dataset); output_dataset.push([6, 1]); }; let total_set_for_axis = []; //Set of matrix for Axis let total_set_for_dataset = []; //Set of matrix for rect create_matrix(rows, columns, total_set_for_axis); create_actual_set_of_rows_and_columns(rows, columns, total_set_for_dataset); //---Create Matrix--- //Set X Axis scale let xScale = d3 .scaleBand() .domain(columns) .range([0, width]) .paddingInner(0.2) .paddingOuter(0.1); // //Set Y Axis scale let yScale = d3 .scaleBand() .domain(d3.reverse(rows)) .range([width - 30, 0]) .paddingInner(0.2) .paddingOuter(0.1); let xAxisGenerator = d3.axisBottom().scale(xScale); let yAxisGenerator = d3.axisRight().scale(yScale); // let xAxisDraw = svg // .append("g") // .attr("id", "xAxis-tile-pro") // .call(xAxisGenerator) // // .style("transform", `translateY(${width - margin.bottom}px)`) // .style("color", "#838383"); // let yAxisDraw = svg // .append("g") // .attr("id", "yAxis-tile-pro") // .call(yAxisGenerator) // // .style("transform", `translateX(${width - 30}px)`) // .style("color", "#838383"); //---Create Rect Session--- let pro_dataset = d3.groups(data_pro, (d) => d["province_l"]); pro_dataset.forEach((pro, i) => { let element = pro[0]; let index = i; let data = pro[1]; let rect = svg.append("g").attr("id", `group-rect-${i}`); //Create rect rect .append("rect") .datum(total_set_for_dataset[i]) .attr("x", (d) => xScale(d[1])) .attr("y", (d) => yScale(d[0])) .attr("fill", "#f2f2f2") .attr("stroke", "none") .attr("width", xScale.bandwidth()) .attr("height", yScale.bandwidth()); //Set scale for XAxis let maxNumOfYAxis = d3.max(data, (d) => +d["people_vaccinated"]); let xScale_rect = d3 .scalePoint() .domain(data.map((d) => d["date"])) .range([ xScale(total_set_for_dataset[i][1]), xScale.bandwidth() + xScale(total_set_for_dataset[i][1]) ]); let xAxisGenerator_rect = d3.axisBottom().scale(xScale_rect).tickValues([]); //Set scale for YAxis let yScale_rect = d3 .scaleLinear() .domain([0, maxNumOfYAxis]) .range([ yScale.bandwidth() + yScale(total_set_for_dataset[i][0]), yScale(total_set_for_dataset[i][0]) ]) .nice(); let yAxisGenerator_rect = d3 .axisRight() .scale(yScale_rect) .ticks(5) .tickFormat(d3.format("~s")); //Draw YAxis let yAxisDraw_rect = rect .append("g") .attr("id", `yAxis-rect-${i}`) .call(yAxisGenerator_rect) .style( "transform", `translateX(${ xScale.bandwidth() + xScale(total_set_for_dataset[i][1]) }px)` ) .style("color", "#838383"); // Draw the line - people vaccinated (1 dose) rect .append("path") .datum(data) .attr("fill", "none") .attr("stroke", color[2]) .attr( "d", d3 .line() .x((d) => xScale_rect(d["date"])) .y((d) => yScale_rect(+d["people_vaccinated"])) ); // Draw the line - people fully vaccinated (2 doses) rect .append("path") .datum(data) .attr("fill", "none") .attr("stroke", color[1]) .attr( "d", d3 .line() .x((d) => xScale_rect(d["date"])) .y((d) => yScale_rect(+d["people_fully_vaccinated"])) ); //Add text rect .append("text") .style("font-size", ".7em") .style("font-family", "sans-serif") .attr("fill", "#838383") .attr("y", yScale(total_set_for_dataset[i][0]) + 10) .attr("x", xScale(total_set_for_dataset[i][1])) .text(`${element}`); }); // svg // .selectAll("rect") // .data(total_set_for_dataset) // .join("rect") // .attr("x", (d) => xScale(d[1])) // .attr("y", (d) => yScale(d[0])) // .attr("fill", "#f2f2f2") // .attr("stroke", "none") // .attr("width", xScale.bandwidth()) // .attr("height", yScale.bandwidth()); // let maxNumOfYAxis = d3.max(vientiane_capital, (d) => +d["people_vaccinated"]); // let xScale_rect = d3 // .scalePoint() // .domain(vientiane_capital.map((d) => d["date"])) // .range([xScale(0), xScale.bandwidth() + xScale(0)]); // let yScale_rect = d3 // .scaleLinear() // .domain([0, maxNumOfYAxis + maxNumOfYAxis * 0.1]) // .range([yScale.bandwidth() + yScale(0), yScale(0)]); // let xAxisGenerator_rect = d3.axisBottom().scale(xScale_rect).tickValues([]); // let yAxisGenerator_rect = d3 // .axisRight() // .scale(yScale_rect) // .ticks(5) // .tickFormat(d3.format(".1s")); // // let xAxisDraw_rect = svg // // .append("g") // // .attr("id", "xAxis-tile-pro-rect") // // .call(xAxisGenerator_rect) // // .style("transform", `translateY(${yScale.bandwidth() + yScale(0)}px)`) // // .style("color", "#838383"); // let yAxisDraw_rect = svg // .append("g") // .attr("id", "yAxis-tile-pro-rect") // .call(yAxisGenerator_rect) // .style("transform", `translateX(${xScale.bandwidth() + xScale(0)}px)`) // .style("color", "#838383"); // // Draw the line // svg // .append("path") // .datum(vientiane_capital) // .attr("fill", "none") // .attr("stroke", color[2]) // .attr( // "d", // d3 // .line() // .x((d) => xScale_rect(d["date"])) // .y((d) => yScale_rect(+d["people_vaccinated"])) // ); // // Draw the line // svg // .append("path") // .datum(vientiane_capital) // .attr("fill", "none") // .attr("stroke", color[1]) // .attr( // "d", // d3 // .line() // .x((d) => xScale_rect(d["date"])) // .y((d) => yScale_rect(+d["people_fully_vaccinated"])) // ); // //Add text // svg // .append("text") // .style("font-size", ".7em") // .style("font-family", "sans-serif") // .text("Vientiance Capital") // .attr("y", yScale(0)) // .attr("x", xScale(0)); return svg.node(); }3b:T595,function table() { let init_table = d3.create("div").attr("class", "table-chart"); let table = init_table.append("table").attr("id", "table-area"); let table_title = [ "", "People receiving one dose", "", "People who are fully vaccinated", "" ]; table .append("tr") .selectAll("th") .data(table_title) .join("th") .style("width", "20px") .style("text-align", "right") .html((d) => d); sort_table_data.map((d) => { let row = table.datum(d).append("tr"); let title = row.append("td").html(d.lable); let numDose = d.oneDose; let one = row.append("td").html(d3.format([".1" + "%"])(numDose)); let oneBarBackground = row .append("td") .style("vertical-align", "middle") .append("div") .attr("class", "bar-wrap") .append("div") .attr("class", "bar-inner") .style("width", numDose >= 1 ? "100%" : `${numDose * 100}%`) .style("background-color", color[2]); let numDoses = d.twoDoses; let two = row.append("td").html(d3.format([".1" + "%"])(numDoses)); let twoBarBackground = row .append("td") .style("vertical-align", "middle") .append("div") .attr("class", "bar-wrap") .append("div") .attr("class", "bar-inner") .style("width", numDoses >= 1 ? "100%" : `${numDoses * 100}%`) .style("background-color", color[1]); }); return init_table.node(); }3c:T614,function province_line(dataset) { return Plot.plot({ width: width, height: height, marginRight: 200, marginLeft: 80, x: { type: "point", domain: dataset.map((d) => d["date"]), grid: true }, y: { domain: [0, d3.max(dataset, (d) => d["people_vaccinated"])], ticks: 5, grid: true, label: "↑ Number" }, marks: [ Plot.line(dataset, { x: "date", y: "people_vaccinated", stroke: color[2] }), Plot.line(dataset, { x: "date", y: "people_fully_vaccinated", stroke: color[1] }), Plot.text([dataset[dataset.length - 1]], { x: "date", y: "people_fully_vaccinated", text: (d) => [ "people fully vaccinated: " + `${d3.format(",")(d["people_fully_vaccinated"])}` ], textAnchor: "start", dx: "1em", dy: "0" }), Plot.text([dataset[dataset.length - 1]], { x: "date", y: "people_vaccinated", text: (d) => [ "people vaccinated: " + `${d3.format(",")(d["people_vaccinated"])}` ], textAnchor: "start", dx: "1em", dy: "0" }), Plot.dot([dataset[dataset.length - 1]], { x: "date", y: "people_vaccinated", fill: color[2], stroke: "white" }), Plot.dot([dataset[dataset.length - 1]], { x: "date", y: "people_fully_vaccinated", fill: color[1], stroke: "white" }) ] }); }3d:T64b,//Tooltip for Bar Chart section Viz1 rectMouseOverStack = (event, datum, xScale, yScale) => { let clientMouseX = d3.pointer(event)[0]; let clientMouseY = d3.pointer(event)[1]; //Total vaccinated let tot_cur_vac = getCurrentDateData(datum, "total_vaccinated").current; let tot_changed_vac = getCurrentDateData(datum, "total_vaccinated").changed; //1 dose vaccinated let first_dose_cur_vac = getCurrentDateData(datum, "people_vaccinated") .current; let first_dose_changed_vac = getCurrentDateData(datum, "people_vaccinated") .changed; //2 dose vaccinated let second_dose_cur_vac = getCurrentDateData(datum, "people_fully_vaccinated") .current; let second_dose_changed_vac = getCurrentDateData( datum, "people_fully_vaccinated" ).changed; d3.select("#data-tooltip-date").html(`Date: ${datum["data"]["date"]}`); d3.select("#data-tooltip-dose-tot").html( `People who received at least one dose: ${d3.format(",")( tot_cur_vac )} (+${d3.format(",")(tot_changed_vac)})` ); d3.select("#data-tooltip-dose-1").html( `People vaccinated (1 dose): ${d3.format(",")( first_dose_cur_vac )} (+${d3.format(",")(first_dose_changed_vac)})` ); d3.select("#data-tooltip-dose-2").html( `People fully vaccinated (2 doses): ${d3.format(",")( second_dose_cur_vac )} (+${d3.format(",")(second_dose_changed_vac)})` ); d3.select(".tooltip-for-chart") .style("opacity", 1) .style( "transform", `translate(` + `calc(-50% + ${clientMouseX}px),` + `calc(-100% + ${clientMouseY}px)` + `)` ); }3e:T473,html` `3f:[] 30:{"id":"dc61bd22491227ac","slug":"visualization-covid-19-vaccination-data-laos","title":"Visualization Covid-19 Vaccination Data - Laos","thumbnail":"726f811aef1b3e2be43d14ed4d9c00a3068f8fadd1ac6fce20c46ac981862e0a","access_level":"public","create_time":"$D2021-04-24T06:09:19.231Z","update_time":"$D2022-08-17T15:25:07.820Z","view_time":null,"first_public_time":"$D2021-04-24T16:01:59.833Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3018b7145a923605","login":"douangtavanh","name":"Douangtavanh Kongphaly","avatar_url":"https://avatars-next.observableusercontent.com/60ab1a97785893547cbab516f323284edf4040a54b237939540bbdcf0715f3f1","tier":"starter_2024"},"version":3631,"publish_version":3631,"role":null,"authored":false,"authors":[{"type":"individual","id":"b6fd38622cdc8db7","login":"douangtavanh","name":"Douangtavanh Kongphaly","avatar_url":"https://avatars-next.observableusercontent.com/bf59f6200519f0a141fe723961e8b217a8c0829b25b43fba872cf8e9f5a08878","tier":null}],"members":[{"type":"individual","id":"b6fd38622cdc8db7","login":"douangtavanh","name":"Douangtavanh Kongphaly","avatar_url":"https://avatars-next.observableusercontent.com/bf59f6200519f0a141fe723961e8b217a8c0829b25b43fba872cf8e9f5a08878","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visualization Covid-19 Vaccination Data - Laos","cells":[{"id":0,"value":"md`\n# Visualization Covid-19 Vaccination Data - Laos\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2094,"value":"## People Vaccinated Table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2043,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2098,"value":"## Total Vaccine Doses","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2103,"value":"\n \n \n \n \n \n \n \n \n \n \n \n

	Doses
Delivered/Received	${d3.format(\",\")(d3.sum(data_vac_by_orgs, d => d.value))}
Administered on ${lastIndexDataLength[\"date\"]}	${d3.format(\",\")(\n lastIndexDataLength[\"total_vaccinated\"]\n)}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":3510,"value":"## Vaccine Donation Timeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3335,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2852,"value":"## Total Vaccines donated by manufacturers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2679,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2138,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2134,"value":"## Overview","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1349,"value":"## Number of People who received at least one dose by day","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2657,"value":"The red line is 7 days average - calculated by rolling means method.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2438,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":895,"value":"## Number of people who vaccinated (1 dose) by day","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2653,"value":"The red line is 7 days average - calculated by rolling means method.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2620,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1306,"value":"## Number of people who fully vaccinated (2 doses) by day","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2649,"value":"The red line is 7 days average - calculated by rolling means method.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2625,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1242,"value":"## Map by province","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1377,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1857,"value":"## Percentage of Total Population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1892,"value":"viewof table_sort_input = Inputs.select(sort_input, {\n value: \"People who are fully vaccinated\",\n label: \"Sort by:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1718,"value":"table()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2143,"value":"## Trend by Province","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1220,"value":"viewof province = Inputs.select(province_dataset, {\n value: \"Central Hospitals\",\n label: \"Provinces\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1239,"value":"draw_pro_chart(province)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2929,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1960,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1964,"value":"## Table Data Prep","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1902,"value":"sort_input_key = ({\n \"People receiving one dose\": \"oneDose\",\n \"People who are fully vaccinated\": \"twoDoses\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1893,"value":"sort_input = [\"People receiving one dose\", \"People who are fully vaccinated\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1668,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1836,"value":"sort_table_data = cal_percentage(\n final_table_dataset,\n sort_input_key[table_sort_input]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2361,"value":"**Calculate percentage**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1828,"value":"//Calculate percentage\ncal_percentage = (data, userInput) => {\n let dataset = data;\n let final_data = [];\n dataset.map((d) =>\n final_data.push({\n lable: d.proLable,\n oneDose: d.oneDose / +pop_label.get(d.proLable)[0].value, //index = 2 => 12 or older\n twoDoses: d.twoDoses / +pop_label.get(d.proLable)[0].value //index = 2 => 12 or older\n })\n );\n let removed_national = final_data.slice(1, final_data.length);\n let sort_removed_national = removed_national\n .slice()\n .sort((a, b) => d3.descending(a[userInput], b[userInput]));\n\n return final_data.slice(0, 1).concat(sort_removed_national);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1800,"value":"final_table_dataset = mdInitTableDataset()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1796,"value":"// modify init table dataset\nfunction mdInitTableDataset() {\n let dataset = init_table_dataset.slice();\n dataset[0] = national_dataset_for_table;\n dataset[1] = adjusted_vientiane_capital_dataset_for_table;\n return dataset;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1766,"value":"adjusted_vientiane_capital_dataset_for_table = ({\n proLable: \"Vientiane Capital\",\n oneDose: sumVTEdataOneDose(),\n twoDoses: sumVTEdataTwoDose()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1784,"value":"function sumVTEdataTwoDose() {\n let vte = init_table_dataset.find((d) => d.proLable === \"Vientiane Capital\")\n .twoDoses;\n let central = init_table_dataset.find(\n (d) => d.proLable === \"Central Hospitals\"\n ).twoDoses;\n return vte + central;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1768,"value":"function sumVTEdataOneDose() {\n let vte = init_table_dataset.find((d) => d.proLable === \"Vientiane Capital\")\n .oneDose;\n let central = init_table_dataset.find(\n (d) => d.proLable === \"Central Hospitals\"\n ).oneDose;\n return vte + central;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1751,"value":"national_dataset_for_table = ({\n proLable: \"National\",\n oneDose: d3.sum(init_table_dataset, (d) => d.oneDose),\n twoDoses: d3.sum(init_table_dataset, (d) => d.twoDoses)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1737,"value":"init_table_dataset = latest_map_data[1].map((d) => {\n return {\n proLable: d[\"province_l\"],\n oneDose: +d[\"people_vaccinated\"],\n twoDoses: +d[\"people_fully_vaccinated\"]\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1360,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1968,"value":"## Bar Chart Overall","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1485,"value":"mapDraw.features.map((d) => d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1235,"value":"function draw_pro_chart(d) {\n let province_dataset = filter_pro_long(filter_data_pro_date, d);\n return province_line(province_dataset);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1223,"value":"province_dataset = filter_data_pro_date[0][1].map((d) => d[\"province_l\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1154,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1096,"value":"vientiane_capital[vientiane_capital.length - 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"rectMouseLeaveStack = (event, datum) => {\n d3.selectAll(\".tooltip-for-chart\")\n .style(\"opacity\", 0)\n .transition()\n .duration(0.2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":448,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"yScale = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => +d[\"total_vaccinated\"]) + 50000])\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"//Set up xScale\nxScale = d3\n .scaleBand()\n .domain(data.map((d) => d[\"date\"]))\n .range([30, width - margin.right])\n .paddingInner(0.2)\n .paddingOuter(0.3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"stackData = stack(data, (d) => +d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"stack = d3\n .stack()\n .keys([\"people_fully_vaccinated\", \"people_vaccinated\"])\n .order(d3.stackOrderNone)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":615,"value":"getCurrentDateData = (dataset, type) => {\n //Total vaccinated\n let date = dataset[\"date\"];\n let current = dataset[type];\n let pre =\n changedData(date).preIndex < 0 ? 0 : data[changedData(date).preIndex][type];\n let changed = changedData(date).preIndex < 0 ? 0 : +current - +pre;\n return { current, changed };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":590,"value":"//Function calculate changed\nchangedData = (data) => {\n let currentDate = data;\n let index = dateIndex.findIndex((d) => d == currentDate);\n let preIndex = index - 1;\n return { index, preIndex };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1380,"value":"## Map data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1439,"value":"sorted_map_data = final_map_data.map((d) => {\n return mapDataSort.set(+d[\"feature_id\"], +d[\"total\"]);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1440,"value":"mapDataSort = new Map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1422,"value":"colorMap = d3\n .scaleLinear()\n .domain([\n d3.min(final_map_data, (d) => d.total),\n d3.max(final_map_data, (d) => d.total) + final_map_data[0][\"total\"]\n ])\n .range([color[0], color[2]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1416,"value":"final_map_data = init_map_data.slice(1, 19)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1389,"value":"init_map_data = latest_map_data[1].map((d) => {\n let total = +d[\"people_vaccinated\"] + +d[\"people_fully_vaccinated\"];\n let dataset = {\n province_s: d[\"province_s\"],\n province_l: d[\"province_l\"],\n feature_id: d[\"feature_id\"],\n total: total\n };\n return dataset;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1384,"value":"//Latest data by province\nlatest_map_data = filter_data_pro_date[filter_data_pro_date.length - 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":740,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1179,"value":"## Provincial Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1209,"value":"luangnamtha = filter_pro(filter_data_pro_date, \"LNT\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1189,"value":"phongsaly = filter_pro(filter_data_pro_date, \"PHO\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1159,"value":"centre_hospital = filter_pro(filter_data_pro_date, \"CENTRE\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1015,"value":"vientiane_capital = filter_pro(filter_data_pro_date, \"VTE\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1229,"value":"function filter_pro_long(params, province) {\n let dataset = [];\n params.map((d) => {\n d[1].map((e) => {\n if (e[\"province_l\"] === province) {\n dataset.push({\n date: e[\"date\"],\n people_vaccinated: +e[\"people_vaccinated\"],\n people_fully_vaccinated: +e[\"people_fully_vaccinated\"]\n });\n }\n });\n });\n return dataset;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":998,"value":"function filter_pro(params, province) {\n let dataset = [];\n params.map((d) => {\n d[1].map((e) => {\n if (e[\"province_s\"] === province) {\n dataset.push({\n date: e[\"date\"],\n people_vaccinated: +e[\"people_vaccinated\"],\n people_fully_vaccinated: +e[\"people_fully_vaccinated\"]\n });\n }\n });\n });\n return dataset;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2034,"value":"labelXAxisProvinceChart = [\n dateIndex_pro[0],\n dateIndex_pro[d3.format(\"d\")(dateIndex_pro.length / 2)],\n dateIndex_pro[dateIndex_pro.length - 1]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":989,"value":"dateIndex_pro = filter_data_pro_date.map((d) => d[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":985,"value":"filter_data_pro_date = Array.from(d3.group(data_pro, (d) => d.date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1185,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1629,"value":"## Data Preparation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1638,"value":"province_pop_data = Array.from(pop_label, ([key, value]) => ({\n key,\n value\n})).slice(1, 19)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1655,"value":"pop_lable_index = Array.from(pop_label, ([key, value]) => key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1636,"value":"national_pop_data = pop_label.get(\"national\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1633,"value":"pop_label = d3.group(data_pop, (d) => d.level)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":591,"value":"dateIndex = data.map((d) => d.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":587,"value":"dataLength = data.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":669,"value":"lastIndexDataLength = data[dataLength - 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2532,"value":"**Label for X Axis of Bar Chart(Diff data)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2531,"value":"labelXAxisForBarChartDiff = [\n dateIndex[1],\n dateIndex[d3.format(\"d\")(dataLength / 2)],\n dateIndex[dataLength - 1]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":680,"value":"labelXAxis = [\n dateIndex[0],\n dateIndex[d3.format(\"d\")(dataLength / 2)],\n dateIndex[dataLength - 1]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2879,"value":"data_vac_by_orgs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2867,"value":"data_vac_by_orgs = {\n let init_data = d3.groups(data_vac_donate, (d) => d[\"support_organization\"]);\n let output_data = [];\n init_data.map((d) => {\n let temp_var = new Object();\n temp_var.key = d[0];\n temp_var.type = \n temp_var.value = d3.sum(d[1], (e) => e[\"amount_of_vaccine\"]);\n output_data.push(temp_var);\n });\n return output_data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2689,"value":"data_vac_by_type = {\n return d3.group(data_vac_donate, (d) => d[\"type_of_vaccine\"]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3493,"value":"data_vac_timeline = d3.csv(url_vaccine_donation_timeline)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2675,"value":"data_vac_donate = d3.csv(url_vaccine_donation)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1626,"value":"data_pop = d3.csv(url_pop)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":982,"value":"data_pro = d3.csv(url_pro)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2372,"value":"data_diff = d3.csv(url_diff)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"data = d3.csv(url)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3491,"value":"url_vaccine_donation_timeline = \"https://raw.githubusercontent.com/douangtavanh/covid19-data-visualization-laos/master/data/vaccine_donation_to_Laos_timeline.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2671,"value":"url_vaccine_donation = \"https://raw.githubusercontent.com/douangtavanh/covid19-data-visualization-laos/master/data/vaccine_donation_to_Laos.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1623,"value":"url_pop = \"https://raw.githubusercontent.com/douangtavanh/covid19-data-visualization-laos/master/data/population_forecast_2020_laos.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":980,"value":"url_pro = \"https://raw.githubusercontent.com/douangtavanh/covid19-data-visualization-laos/master/data/vaccination_data_laos_provincial.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2370,"value":"url_diff = \"https://raw.githubusercontent.com/douangtavanh/covid19-data-visualization-laos/master/data/vaccination_covid_19_Laos_adjusted_diff.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"url = \"https://raw.githubusercontent.com/douangtavanh/covid19-data-visualization-laos/master/data/vaccination_covid_19_Laos_adjusted.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2610,"value":"colorLine = \"#E91E63\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"color = [\"#edf8b1\", \"#7fcdbb\", \"#2c7fb8\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"margin = ({ top: 30, right: 60, bottom: 30, left: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":972,"value":"height_cul = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2861,"value":"import { StackedBarChart } from \"@d3/stacked-horizontal-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1368,"value":"import {\n topojson,\n laoMap,\n boundwidth,\n boundheight,\n mapDraw,\n projectionThis,\n pathGenerator\n} from \"@douangtavanh/poverty-map-by-headcount-2020-lao-pdr\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3f","stdlib":"1","titling":"auto"}} 31:"$30:body"