diff --git a/data/elements.csv b/data/elements.csv new file mode 100644 index 0000000..7b6af88 --- /dev/null +++ b/data/elements.csv @@ -0,0 +1,104 @@ +Element,Number,Symbol,Weight,Boil,Melt,Density Vapour,Fusion,Group,Period +Hydrogen,1,H,1.01,20.46,13.96,71,0.45,1,1 +Helium,2,He,4,4.26,3.46,126,0.08,18,1 +Lithium,3,Li,6.94,1603.16,453.66,530,136.01,1,2 +Beryllium,4,Be,9.01,3043.16,1550.16,1850,309.46,2,2 +Boron,5,B,10.81,2303.16,2340,536.01,22.19,13,2 +Carbon,6,C,12.01,5103.16,4000.16,2260,719.01,14,2 +Nitrogen,7,N,14.01,77.36,63.16,810,2.79,15,2 +Oxygen,8,O,16,90.16,54.36,1140,3.41,16,2 +Fluorine,9,F,19,84.96,53.56,1505,3.16,17,2 +Neon,10,Ne,20.18,27.16,24.56,1200,1.77,18,2 +Sodium,11,Na,22.99,1165.16,370.96,970,101.01,1,3 +Magnesium,12,Mg,24.31,1380.16,923.16,1740,136.17,2,3 +Aluminum,13,Al,26.98,2723.16,933.16,2700,284.34,13,3 +Silicon,14,Si,28.09,2953.16,1683.16,2330,170.02,14,3 +Phosphorus,15,P,30.98,,,,,15,3 +Sulfur,16,S,32.06,717.76,392.16,2070,12.6,16,3 +Chlorine,17,Cl,35.45,238.46,172.16,1560,10.22,17,3 +Argon,18,Ar,39.95,87.36,83.76,1400,6.53,18,3 +Potassium,19,K,39.1,1033.16,336.86,860,79.15,1,4 +Calcium,20,Ca,40.08,1713.16,1111.16,1550,153.85,2,4 +Scandium,21,Sc,44.96,3003.16,1812.16,3000,339.2,3,4 +Titanium,22,Ti,47.9,3533.16,1941.16,4510,445.98,4,4 +Vanadium,23,V,50.94,3723.16,2173.16,6100,443.89,5,4 +Chromium,24,Cr,52,2938.16,2148.16,7190,305.57,6,4 +Manganese,25,Mn,54.94,2423.16,1518.16,7430,224.87,7,4 +Iron,26,Fe,55.85,3273.16,1809.16,7860,354.27,8,4 +Cobalt,27,Co,58.93,3173.16,1768.16,8900,389.45,9,4 +Nickel,28,Ni,58.71,3003.16,1726.16,8900,381.07,10,4 +Copper,29,Cu,63.54,2868.16,1356.16,8960,304.86,11,4 +Zinc,30,Zn,65.37,1179.16,692.66,7140,114.74,12,4 +Gallium,31,Ga,69.72,2510.16,302.96,5910,,13,4 +Germanium,32,Ge,72.59,3103.16,1210.56,5320,284.76,14,4 +Arsenic,33,As,74.99,886.16,1090.16,5720,32.45,15,4 +Selenium,34,Se,78.96,958.16,490.16,4790,13.99,16,4 +Bromine,35,Br,79.91,331.16,265.96,3120,14.99,17,4 +Krypton,36,Kr,83.8,121.16,115.86,2600,9.05,18,4 +Rubidium,37,Rb,85.47,961.16,312.06,1530,75.8,1,5 +Strontium,38,Sr,87.62,1653.16,1041.16,2600,141.54,2,5 +Yttrium,39,Y,88.91,,,,,3,5 +Zirconium,40,Zr,91.22,3853.16,2125.16,6490,502.51,4,5 +Niobium,41,Nb,92.91,3573.16,2741.16,8400,,5,5 +Molybdenum,42,Mo,95.94,5833.16,2883.16,10200,536.01,6,5 +Technetium,43,Tc,96.91,,,,,7,5 +Ruthenium,44,Ru,101.07,5173.16,2773.16,12200,619.77,8,5 +Rhodium,45,Rh,102.9,4773.16,2239.16,12400,531.83,9,5 +Palladium,46,Pd,106.4,4253.16,1825.16,12000,376.88,10,5 +Silver,47,Ag,107.87,2483.16,1233.96,10500,254.19,11,5 +Cadmium,48,Cd,112.4,1038.16,594.06,8650,100.08,12,5 +Indium,49,In,114.82,2273.16,429.36,7310,224.87,13,5 +Tin,50,Sn,118.69,2543.16,505.06,7300,293.13,14,5 +Antimony,51,Sb,121.75,1653.16,903.66,6620,195.14,15,5 +Tellurium,52,Te,127.6,,,,,16,5 +Iodine,53,I,126.9,456.16,386.86,4940,21.78,17,5 +Xenon,54,Xe,131.3,165.16,161.26,3060,12.65,18,5 +Cesium,55,Cs,132.9,963.16,301.86,1900,68.26,1,6 +Barium,56,Ba,137.34,1913.16,987.16,3500,149.5,2,6 +Lanthanum,57,La,138.91,3743.16,1193.16,6170,402.01,,6 +Cerium,58,Ce,140.12,3741.16,1068.16,6670,397.82,,6 +Praseodymium,59,Pr,140.91,3400.16,1208.16,6770,330.82,,6 +Neodymium,60,Nd,144.24,3300.16,1297.16,7000,288.94,,6 +Promethium,61,Pm,144.91,,,,,,6 +Samarium,62,Sm,150.35,2173.16,1345.16,7540,192.63,,6 +Europium,63,Eu,151.96,1712.16,1099.16,5260,175.88,,6 +Gadolinium,64,Gd,157.25,3273.16,1585.16,7890,301.51,,6 +Terbium,65,Tb,158.92,3073.16,1629.16,8270,293.13,,6 +Dysprosium,66,Dy,162.5,2873.16,1680.16,8540,280.57,,6 +Holmium,67,Ho,164.93,2873.16,1734.16,8800,280.57,,6 +Erbium,68,Er,167.26,3173.16,1770.16,9050,280.57,,6 +Thulium,69,Tm,168.93,2000.16,1818.16,9330,247.07,,6 +Ytterbium,70,Yb,173.04,1700.16,1097.16,6980,159.13,,6 +Lutetium,71,Lu,174.97,3600.16,1925.16,9840,376.88,3,6 +Hafnium,72,Hf,178.49,5673.16,2495.16,13100,649.08,4,6 +Tantalum,73,Ta,180.95,5698.16,3269.16,16600,753.77,5,6 +Wolfram,74,W,183.85,6203.16,3683.16,19300,774.71,6,6 +Rhenium,75,Re,186.2,6173.16,3453.16,21000,636.52,7,6 +Osmium,76,Os,190.2,5773.16,3273.16,22600,678.39,8,6 +Iridium,77,Ir,192.22,,,,,9,6 +Platinum,78,Pt,195.09,4803.16,2042.16,21400,510.89,10,6 +Gold,79,Au,196.97,3243.16,1336.16,19300,342.55,11,6 +Mercury,80,Hg,200.59,630.16,234.76,13600,58.21,12,6 +Thallium,81,Tl,204.37,1730.16,576.16,11850,162.48,13,6 +Lead,82,Pb,207.19,1998.16,600.56,11400,176.72,14,6 +Bismuth,83,Bi,208.98,1833.16,544.46,9800,178.81,15,6 +Polonium,84,Po,208.98,,,,,16,6 +Astatine,85,At,209.99,,,,,17,6 +Radon,86,Rn,222.02,,,,,18,6 +Francium,87,Fr,223.02,,,,,1,7 +Radium,88,Ra,226,,973.16,5000,114.74,2,7 +Actinium,89,Ac,227.03,,,,,,7 +Thorium,90,Th,232.04,4123.16,2023.16,11700,,,7 +Protactinium,91,Pa,231.04,,,,,,7 +Uranium,92,U,238.03,4091.16,1405.16,19070,460.64,,7 +Neptunium,93,Np,237,,910.16,19500,394.89,,7 +Plutonium,94,Pu,242,3508.16,913.16,,365.16,,7 +Americium,95,Am,243.06,,,,,,7 +Curium,96,Cm,247.07,,,,,,7 +Berkelium,97,Bk,247.07,,,,,,7 +Californium,98,Cf,251.08,,,,,,7 +Einsteinium,99,Es,254.09,,,,,,7 +Fermium,100,Fm,257.1,,,,,,7 +Mendelevium,101,Md,257.1,,,,,,7 +Nobelium,102,No,255.09,,,,,,7 +Lawrencium,103,Lr,256.1,,,,,3,7 \ No newline at end of file diff --git a/examples/0013-query-overview/index.html b/examples/0013-query-overview/index.html index 39dc657..6dd4533 100644 --- a/examples/0013-query-overview/index.html +++ b/examples/0013-query-overview/index.html @@ -21,7 +21,7 @@

Code

<script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js"></script> -<script src="https://cdn.rawgit.com/RhoInc/query-overview/master/build/queryOverview.js"></script> +<script src="https://cdn.rawgit.com/RhoInc/query-overview/0285d7f0d6f3f06fe4c8b01730050ab7c8034b68/build/queryOverview.js"></script> <link rel="stylesheet" href="https://cdn.rawgit.com/RhoInc/Webcharts/master/css/webcharts.css"> @@ -34,9 +34,9 @@

Code

<script defer> var settings = {}; -var queryOverview = queryOverview(".chart", settings); +var chart = queryOverview(".chart", settings); d3.csv("../../data/queries/queries.csv", function(error, data) { - queryOverview.init(data); + chart.init(data); }); </script> diff --git a/examples/0014-webcharts-visual-tests/README.md b/examples/0014-webcharts-visual-tests/README.md new file mode 100644 index 0000000..9219ad8 --- /dev/null +++ b/examples/0014-webcharts-visual-tests/README.md @@ -0,0 +1,19 @@ +**Title:** Webcharts Visual Test Sheet + +**Languages:** javascript + +**Libraries:** webcharts + +**Description:** A series of simple charts showing webcharts functionality. Used for demos and for testing new releases. + +**Tags:** interactive, graphics, testing + +**Data:** ../../data/queries/elements.csv + +**Code:** webchartsTests.js + +**Results:** example.html + +[comment]: <> (---END OF HEADER---) + + This example demonstrates the functionality of the [webcharts](https://github.com/RhoInc/webcharts) charting framework and serves as a Visual Test sheet. Inspired by [this](https://planet-os.github.io/ui-components/datahub-ui/example/index.html) nice implementation from [datahub-ui](https://medium.com/planet-os/insights-from-designing-datahub-ui-in-d3-js-d8f0f5da0b82). diff --git a/examples/0014-webcharts-visual-tests/example.html b/examples/0014-webcharts-visual-tests/example.html new file mode 100644 index 0000000..e906b8f --- /dev/null +++ b/examples/0014-webcharts-visual-tests/example.html @@ -0,0 +1,20 @@ + +Web Codebook - Explorer + + + + + + + + + + + + + + + + + + diff --git a/examples/0014-webcharts-visual-tests/index.css b/examples/0014-webcharts-visual-tests/index.css new file mode 100644 index 0000000..e82b705 --- /dev/null +++ b/examples/0014-webcharts-visual-tests/index.css @@ -0,0 +1,36 @@ +body{ + background:#bbb +} + +div.testWrap{ + border:2px solid black; + background:white; + padding:1em; + margin:1em 5em 1em 5em; +} + +div.testWrap .chart svg{ + border:1px dotted #444; + margin:1em; + padding:1em; + +} + +div.testWrap .chart, div.testWrap .notes{ + display:inline-block; +} + +div.testWrap .notes{ + width:250px; + vertical-align:top; + margin:1em; +} + +div.testWrap h2{ + margin-top:0 +} + + +.hidden{ + display:none +} diff --git a/examples/0014-webcharts-visual-tests/testConfig.js b/examples/0014-webcharts-visual-tests/testConfig.js new file mode 100644 index 0000000..dd37e43 --- /dev/null +++ b/examples/0014-webcharts-visual-tests/testConfig.js @@ -0,0 +1,125 @@ +var testConfig = [ + { + label: 'Testing Axis Types - linear vs. linear', + notes: '', + settings: { + max_width:500, + x: { + column: 'Melt', + type: 'linear', + label: 'Melting Point (K)' + }, + y: { + column: 'Boil', + type: 'linear', + label: 'Boiling Point (K)' + }, + marks: [ + { + type: 'circle', + per: ['Element'] + } + ] + }, + dataPath: '../../data/elements.csv' + }, + { + label: 'Testing Axis Types - linear vs. ordinal', + notes:'', + settings: { + max_width:500, + x: { + column: 'Period', + type: 'ordinal', + label: 'Period' + }, + y: { + column: 'Boil', + type: 'linear', + label: 'Boiling Point (K)' + }, + marks: [ + { + type: 'circle', + per: ['Element'] + } + ] + }, + dataPath: '../../data/elements.csv' + }, + { + label: 'Testing Axis Types - ordinal vs. ordinal', + notes:'Opacity set to identify overlapping points. As shown, ordinal axis treat missing values as just another level to be plotted. (e.g. `group=""` or `group=" "`)', + settings: { + max_width:500, + x: { + column: 'Period', + type: 'ordinal', + label: 'Period' + }, + y: { + column: 'Group', + type: 'ordinal', + label: 'Group' + }, + marks: [ + { + type: 'circle', + per: ['Element'], + attributes:{"fill-opacity":0.2,"stroke-opacity":1} + } + ] + }, + dataPath: '../../data/elements.csv' + }, + { + label: 'Testing Axis Types - log vs. log', + notes: 'log axes are buggy as of 1.7.1.', + settings: { + max_width:500, + x: { + column: 'Melt', + type: 'log', + label: 'Melting Point (K)' + }, + y: { + column: 'Boil', + type: 'log', + label: 'Boiling Point (K)' + }, + marks: [ + { + type: 'circle', + per: ['Element'] + } + ] + }, + dataPath: '../../data/elements.csv' + }, + { + label: 'Testing Axis Types - date vs. linear ', + notes: 'This charts shows the number of records at each given date. Note that no `y.column` is specified; instead, marks.summarizeY specifies a simple calculation.', + settings: { + max_width:500, + x: { + column: 'Query Open Date', + type: 'time', + format:'%y-%m' + }, + y: { + type:'linear', + label:'count', + domain:[0] + }, + date_format:"%Y-%m-%d", + marks: [ + { + type: 'circle', + per: ['Query Open Date'], + summarizeY:'count' + } + ] + }, + dataPath: '../../data/queries/queries.csv' + } +]; diff --git a/examples/0014-webcharts-visual-tests/webchartsTests.js b/examples/0014-webcharts-visual-tests/webchartsTests.js new file mode 100644 index 0000000..6197ce5 --- /dev/null +++ b/examples/0014-webcharts-visual-tests/webchartsTests.js @@ -0,0 +1,94 @@ +function renderTest(d) { + console.log("rendering test"+d.index+" - "+d.label) + console.log(this) + //draw title + d3.select(this).append('h2').text(function(d) { + return d.label; + }); + + //render chart + var chartWrap = d3.select(this).append('div').attr('class', 'chart'); + + //show notes (if any) + var notes = d3.select(this) + .append('div') + .attr("class","notes") + notes.append("div").html("Data: ") + .append("a") + .attr("href",function(d){return d.dataPath}) + .text(function(d){return d.dataPath}) + + notes.append("div").html(function(d){return d.notes ? "Notes: "+d.notes : "" }) + + + + //show settings + var settingsWrap = d3 + .select(this) + .append('div') + .attr("class",'code test' + d.index) + + var settingsHead = settingsWrap.append("a") + .style({"color":"blue","text-decoration":"underline"}) + .text("+ Settings") + .on("click",function(){ + var wrap = this.parentNode + var code = d3.select(wrap).select("pre") + var status = code.classed("hidden") + code.classed("hidden",!status) + d3.select(this).text(status?"- Settings":"+ Settings") + }) + + var code = settingsWrap + .append("pre") + .attr("class","hidden") + .append("code") + .attr('class', "hljs") + .html(JSON.stringify(d.settings, null, " ").trim()); + + hljs.highlightBlock(code.node()); + + var thisChart = webCharts.createChart('div.test' + d.index + ' .chart', d.settings); + console.log(thisChart) + thisChart.init(d.raw); +} + +testConfig.forEach(function(d,i){d.index = i}) +var chartDivs = d3 + .select('body') + .selectAll('div.testWrap') + .data(testConfig) + .enter() + .append('div') + .attr('class', function(d) { + return 'testWrap test' + d.index; + }) + + + +//get all test data sets (once each) +var dataPaths = d3 + .set( + testConfig.map(function(d) { + return d.dataPath; + }) + ) + .values() + .map(function(d){return {"path":d}}); + +console.log(dataPaths) +//load the data and render the chart +dataPaths.forEach(function(file) { + d3.csv(file.path, function(error, data) { + file.raw = data; + + chartDivs + .filter(function(chart){ + if(chart.dataPath == file.path){ + chart.raw = file.raw + } + return chart.dataPath == file.path + }) + .each(renderTest) + }); +}); diff --git a/util/web/data/dataFiles.js b/util/web/data/dataFiles.js index d46f07b..1e91849 100644 --- a/util/web/data/dataFiles.js +++ b/util/web/data/dataFiles.js @@ -15,6 +15,38 @@ var dataFiles = [ rows: 78, cols: 2 }, + { + local_path: "/Users/jwildfire/Sites/github/viz-library/data/elements.csv", + filename: "elements.csv", + ext: "csv", + rel_path: "./elements.csv", + rows: 103, + cols: 10 + }, + { + local_path: "/Users/jwildfire/Sites/github/viz-library/data/queries/fields.csv", + filename: "fields.csv", + ext: "csv", + rel_path: "./queries/fields.csv", + rows: 55, + cols: 3 + }, + { + local_path: "/Users/jwildfire/Sites/github/viz-library/data/queries/forms.csv", + filename: "forms.csv", + ext: "csv", + rel_path: "./queries/forms.csv", + rows: 11, + cols: 2 + }, + { + local_path: "/Users/jwildfire/Sites/github/viz-library/data/queries/queries.csv", + filename: "queries.csv", + ext: "csv", + rel_path: "./queries/queries.csv", + rows: 5000, + cols: 11 + }, { local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData/ADAE.csv", filename: "ADAE.csv", @@ -95,30 +127,6 @@ var dataFiles = [ rows: 27, cols: 7 }, - { - local_path: "/Users/jwildfire/Sites/github/viz-library/data/queries/fields.csv", - filename: "fields.csv", - ext: "csv", - rel_path: "./queries/fields.csv", - rows: 55, - cols: 3 - }, - { - local_path: "/Users/jwildfire/Sites/github/viz-library/data/queries/forms.csv", - filename: "forms.csv", - ext: "csv", - rel_path: "./queries/forms.csv", - rows: 11, - cols: 2 - }, - { - local_path: "/Users/jwildfire/Sites/github/viz-library/data/queries/queries.csv", - filename: "queries.csv", - ext: "csv", - rel_path: "./queries/queries.csv", - rows: 5000, - cols: 11 - }, { local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData-queries/ADAE.csv", filename: "ADAE.csv", diff --git a/util/web/data/examples.js b/util/web/data/examples.js index 7d6420a..2abcd63 100644 --- a/util/web/data/examples.js +++ b/util/web/data/examples.js @@ -431,5 +431,38 @@ var examples = [ tags: "interactive, queries", langages: ["javascript"], makeIndex: true + }, + { + dir: "0014-webcharts-visual-tests", + files: [ + "README.md", + "example.html", + "index.css", + "index.html", + "screenshot.png", + "testConfig.js", + "thumb.png", + "webchartsTests.js" + ], + paths: { + root: "./examples/0014-webcharts-visual-tests/", + readme: "README.md", + index: "index.html", + thumb: "thumb.png", + data: "../../data/queries/elements.csv", + code: "webchartsTests.js", + example: "example.html" + }, + readme: {}, + title: "Webcharts Visual Test Sheet", + languages: "javascript", + libraries: ["webcharts"], + description: "A series of simple charts showing webcharts functionality. Used for demos and for testing new releases.", + data: "../../data/queries/elements.csv", + code: "webchartsTests.js", + results: "example.html", + tags: "interactive, graphics, testing", + langages: ["javascript"], + makeIndex: true } ];