From 6ed4b010fc6597c128e9e4624053197bbf88a27b Mon Sep 17 00:00:00 2001 From: samussiah Date: Mon, 18 Dec 2017 10:44:53 -0500 Subject: [PATCH] update version of query-overview --- examples/0013-query-overview/example.html | 2 +- util/web/build/vizLibrary.js | 204 +++++++--------------- util/web/data/dataFiles.js | 94 +++++----- 3 files changed, 108 insertions(+), 192 deletions(-) diff --git a/examples/0013-query-overview/example.html b/examples/0013-query-overview/example.html index 2a9f42b..d596e4e 100644 --- a/examples/0013-query-overview/example.html +++ b/examples/0013-query-overview/example.html @@ -4,7 +4,7 @@ - + diff --git a/util/web/build/vizLibrary.js b/util/web/build/vizLibrary.js index d7de924..becb9b5 100644 --- a/util/web/build/vizLibrary.js +++ b/util/web/build/vizLibrary.js @@ -1,5 +1,5 @@ -var vizLibrary = (function() { - "use strict"; +var vizLibrary = function () { + 'use strict'; /* ----------------------------------------------------- Takes a meta data and an array of properties for which @@ -10,54 +10,37 @@ var vizLibrary = (function() { function buildFilters(meta, measures, parentElement) { console.log(examples); - measures = measures.map(function(m) { + measures = measures.map(function (m) { console.log(m.length); return m.length ? { colName: m, label: m } : m; }); - var wraps = d3 - .select(parentElement) - .selectAll("div.controlWrap") - .data(measures) - .enter() - .append("div") - .attr("class", "controlWrap"); + var wraps = d3.select(parentElement).selectAll("div.controlWrap").data(measures).enter().append("div").attr("class", "controlWrap"); //create the select for the filter - wraps - .append("div") - .attr("class", "controlLabel") - .text(d => d.label.charAt(0).toUpperCase() + d.label.slice(1)); + wraps.append("div").attr("class", "controlLabel").text(d => d.label.charAt(0).toUpperCase() + d.label.slice(1)); var selects = wraps.append("select"); - selects - .selectAll("option") - .data(function(d) { - // gets a list of values for the measure - var measureName = d.colName; - var valueArrays = meta.map(metaRow => metaRow[measureName]); - var allValues = [].concat.apply([], valueArrays); - var uniqueValues = d3.set(allValues).values(); - return d3.merge([["All"], uniqueValues]); - }) - .enter() - .append("option") - .text(d => d); + selects.selectAll("option").data(function (d) { + // gets a list of values for the measure + var measureName = d.colName; + var valueArrays = meta.map(metaRow => metaRow[measureName]); + var allValues = [].concat.apply([], valueArrays); + var uniqueValues = d3.set(allValues).values(); + return d3.merge([["All"], uniqueValues]); + }).enter().append("option").text(d => d); //add event listener for the filters - selects.on("change", function(d) { + selects.on("change", function (d) { var elements = d3.selectAll("div.media-tile"); elements.classed("hidden", false); - selects.each(function(e) { + selects.each(function (e) { var value = this.value; var measure = e.colName; console.log(value + "=" + measure); - if (value != "All") - elements - .filter(function(d) { - return d[measure].indexOf(value) == -1; - }) - .classed("hidden", true); + if (value != "All") elements.filter(function (d) { + return d[measure].indexOf(value) == -1; + }).classed("hidden", true); }); }); } @@ -95,34 +78,18 @@ var vizLibrary = (function() { function buildExampleList(meta, parentElement) { var parentDiv = d3.select(parentElement); var wrap = parentDiv.append("div").attr("class", "media-list"); - var items = wrap - .selectAll("div") - .data(meta) - .enter() - .append("div") - .attr("class", "media-tile"); + var items = wrap.selectAll("div").data(meta).enter().append("div").attr("class", "media-tile"); //append image - items - .append("a") - .attr("href", d => "./examples/" + d.dir) - .append("img") - .attr({ - width: 300, - height: 200, - alt: d => d.id, - src: d => "./examples/" + d.dir + "/thumb.png" - }); + items.append("a").attr("href", d => "./examples/" + d.dir).append("img").attr({ + width: 300, + height: 200, + alt: d => d.id, + src: d => "./examples/" + d.dir + "/thumb.png" + }); //append text title - items - .append("a") - .attr("class", "text-wrap") - .attr("href", d => d.url) - .append("p") - .append("span") - .attr("class", "media-title") - .text(d => d.title); + items.append("a").attr("class", "text-wrap").attr("href", d => d.url).append("p").append("span").attr("class", "media-title").text(d => d.title); } function dataPreview(dataFiles) { @@ -131,73 +98,42 @@ var vizLibrary = (function() { var tbody = myFiles.append("tbody"); var rows = tbody.selectAll("tr").data(dataFiles).enter().append("tr"); - rows - .append("td") - .text(function(d) { - return d.filename; - }) - .attr("title", function(d) { - return d.rel_path; - }) - .style("cursor", "help"); + rows.append("td").text(function (d) { + return d.filename; + }).attr("title", function (d) { + return d.rel_path; + }).style("cursor", "help"); - rows.append("td").append("small").text(function(d) { + rows.append("td").append("small").text(function (d) { return " " + d.rows + " Rows x " + d.cols + " Cols"; }); - rows - .append("td") - .html("🔍") - .attr("title", "Preview the data") - .style("cursor", "pointer") - .on("click", function(d) { - rows.classed("selected", false); - rows - .filter(function(e) { - return e == d; - }) - .classed("selected", true); - var label = d3 - .select(".data-preview") - .select("strong") - .text("First 10 rows of " + d.rel_path); + rows.append("td").html("🔍").attr("title", "Preview the data").style("cursor", "pointer").on("click", function (d) { + rows.classed("selected", false); + rows.filter(function (e) { + return e == d; + }).classed("selected", true); + var label = d3.select(".data-preview").select("strong").text("First 10 rows of " + d.rel_path); - label.append("button").text("Clear Preview").on("click", function() { - rows.classed("selected", false); - d3 - .select(".data-preview") - .select("strong") - .html("Click 🔍 to preview a data set"); - d3 - .select(".data-preview") - .select(".data-table") - .selectAll("*") - .remove(); - }); + label.append("button").text("Clear Preview").on("click", function () { + rows.classed("selected", false); + d3.select(".data-preview").select("strong").html("Click 🔍 to preview a data set"); + d3.select(".data-preview").select(".data-table").selectAll("*").remove(); + }); - d3.csv(d.rel_path, function(error, data) { - var sub = data.filter(function(d, i) { - return i < 10; - }); - d3 - .select(".data-preview") - .select(".data-table") - .selectAll("*") - .remove(); - var preview = webCharts.createTable(".data-preview .data-table", {}); - preview.init(sub); + d3.csv(d.rel_path, function (error, data) { + var sub = data.filter(function (d, i) { + return i < 10; }); + d3.select(".data-preview").select(".data-table").selectAll("*").remove(); + var preview = webCharts.createTable(".data-preview .data-table", {}); + preview.init(sub); }); + }); - rows - .append("td") - .append("a") - .attr("href", function(d) { - return d.rel_path; - }) - .html("↓") - .attr("title", "Download the data") - .style("cursor", "pointer"); + rows.append("td").append("a").attr("href", function (d) { + return d.rel_path; + }).html("↓").attr("title", "Download the data").style("cursor", "pointer"); } function buildGistList(meta, parentElement) { @@ -206,12 +142,7 @@ var vizLibrary = (function() { var items = list.selectAll("li").data(meta).enter().append("li"); //id - items - .append("a") - .attr("href", d => "./bin/gists/" + d.id) - .text( - d => (d.description ? d.description : "") - ); + items.append("a").attr("href", d => "./bin/gists/" + d.id).text(d => d.description ? d.description : ""); //owner items.append("small").text(d => " " + d.owner.login); @@ -220,12 +151,7 @@ var vizLibrary = (function() { function buildPubList(meta, parentElement) { var parentDiv = d3.select(parentElement); var list = parentDiv.append("ul").attr("class", "pubs"); - var items = list - .selectAll("li") - .data(meta) - .enter() - .append("li") - .attr("class", "pub"); + var items = list.selectAll("li").data(meta).enter().append("li").attr("class", "pub"); //thumb items.append("img").attr("src", d => "./pubs/img/" + d.thumbnail); @@ -247,20 +173,9 @@ var vizLibrary = (function() { return string.charAt(0).toUpperCase() + string.slice(1); } var taglist = wraps.append("ul").attr("class", "tags"); - taglist - .selectAll("li") - .data(d => d.links) - .enter() - .append("li") - .append("a") - .attr( - "href", - d => (d.href.indexOf("http") > -1 ? d.href : "./pubs/" + d.href) - ) - .attr("class", d => d.type) - .html(function(d) { - return d.type == "github" ? d.type : cap1(d.type); - }); + taglist.selectAll("li").data(d => d.links).enter().append("li").append("a").attr("href", d => d.href.indexOf("http") > -1 ? d.href : "./pubs/" + d.href).attr("class", d => d.type).html(function (d) { + return d.type == "github" ? d.type : cap1(d.type); + }); } var index = { @@ -272,4 +187,5 @@ var vizLibrary = (function() { }; return index; -})(); +}(); + diff --git a/util/web/data/dataFiles.js b/util/web/data/dataFiles.js index a633382..a67fd87 100644 --- a/util/web/data/dataFiles.js +++ b/util/web/data/dataFiles.js @@ -15,22 +15,6 @@ var dataFiles = [ rows: 578, cols: 5 }, - { - local_path: "F:/GitHub/viz-library/data/discrete_scores.csv", - filename: "discrete_scores.csv", - ext: "csv", - rel_path: "./data/discrete_scores.csv", - rows: 78, - cols: 2 - }, - { - local_path: "F:/GitHub/viz-library/data/elements.csv", - filename: "elements.csv", - ext: "csv", - rel_path: "./data/elements.csv", - rows: 103, - cols: 10 - }, { local_path: "F:/GitHub/viz-library/data/climate_data.csv", filename: "climate_data.csv", @@ -39,6 +23,14 @@ var dataFiles = [ rows: 95, cols: 10 }, + { + local_path: "F:/GitHub/viz-library/data/discrete_scores.csv", + filename: "discrete_scores.csv", + ext: "csv", + rel_path: "./data/discrete_scores.csv", + rows: 78, + cols: 2 + }, { local_path: "F:/GitHub/viz-library/data/hys_law.csv", filename: "hys_law.csv", @@ -55,6 +47,22 @@ var dataFiles = [ rows: 150, cols: 5 }, + { + local_path: "F:/GitHub/viz-library/data/elements.csv", + filename: "elements.csv", + ext: "csv", + rel_path: "./data/elements.csv", + rows: 103, + cols: 10 + }, + { + local_path: "F:/GitHub/viz-library/data/queries/queries.csv", + filename: "queries.csv", + ext: "csv", + rel_path: "./data/queries/queries.csv", + rows: 5000, + cols: 11 + }, { local_path: "F:/GitHub/viz-library/data/queries/forms.csv", filename: "forms.csv", @@ -71,14 +79,6 @@ var dataFiles = [ rows: 55, cols: 3 }, - { - local_path: "F:/GitHub/viz-library/data/queries/queries.csv", - filename: "queries.csv", - ext: "csv", - rel_path: "./data/queries/queries.csv", - rows: 5000, - cols: 11 - }, { local_path: "F:/GitHub/viz-library/data/safetyData-queries/ADAE.csv", filename: "ADAE.csv", @@ -103,6 +103,14 @@ var dataFiles = [ rows: 392, cols: 23 }, + { + local_path: "F:/GitHub/viz-library/data/safetyData/ADTIMELINES.csv", + filename: "ADTIMELINES.csv", + ext: "csv", + rel_path: "./data/safetyData/ADTIMELINES.csv", + rows: 1067, + cols: 17 + }, { local_path: "F:/GitHub/viz-library/data/safetyData/ADBDS.csv", filename: "ADBDS.csv", @@ -120,12 +128,12 @@ var dataFiles = [ cols: 21 }, { - local_path: "F:/GitHub/viz-library/data/safetyData/ADTIMELINES.csv", - filename: "ADTIMELINES.csv", + local_path: "F:/GitHub/viz-library/data/safetyData/SDTM/AE.csv", + filename: "AE.csv", ext: "csv", - rel_path: "./data/safetyData/ADTIMELINES.csv", - rows: 1067, - cols: 17 + rel_path: "./data/safetyData/SDTM/AE.csv", + rows: 356, + cols: 15 }, { local_path: "F:/GitHub/viz-library/data/safetyData/SDTM/CM.csv", @@ -135,14 +143,6 @@ var dataFiles = [ rows: 291, cols: 13 }, - { - local_path: "F:/GitHub/viz-library/data/safetyData/SDTM/LB.csv", - filename: "LB.csv", - ext: "csv", - rel_path: "./data/safetyData/SDTM/LB.csv", - rows: 17280, - cols: 11 - }, { local_path: "F:/GitHub/viz-library/data/safetyData/SDTM/DM.csv", filename: "DM.csv", @@ -152,12 +152,12 @@ var dataFiles = [ cols: 9 }, { - local_path: "F:/GitHub/viz-library/data/safetyData/SDTM/SV.csv", - filename: "SV.csv", + local_path: "F:/GitHub/viz-library/data/safetyData/SDTM/LB.csv", + filename: "LB.csv", ext: "csv", - rel_path: "./data/safetyData/SDTM/SV.csv", - rows: 1080, - cols: 5 + rel_path: "./data/safetyData/SDTM/LB.csv", + rows: 17280, + cols: 11 }, { local_path: "F:/GitHub/viz-library/data/safetyData/SDTM/VS.csv", @@ -168,12 +168,12 @@ var dataFiles = [ cols: 11 }, { - local_path: "F:/GitHub/viz-library/data/safetyData/SDTM/AE.csv", - filename: "AE.csv", + local_path: "F:/GitHub/viz-library/data/safetyData/SDTM/SV.csv", + filename: "SV.csv", ext: "csv", - rel_path: "./data/safetyData/SDTM/AE.csv", - rows: 356, - cols: 15 + rel_path: "./data/safetyData/SDTM/SV.csv", + rows: 1080, + cols: 5 }, { local_path: "F:/GitHub/viz-library/data/safetyData/raw/adverseEvents.csv",