From fe9c0f5b93caf8128f13d5f7a279e311d23c86b5 Mon Sep 17 00:00:00 2001 From: Koba Khitalishvili Date: Thu, 16 Feb 2023 01:12:00 -0500 Subject: [PATCH 1/2] added js cdn include to examples --- Gemfile.lock | 58 ++--- _config.yml | 7 + _data/examples.json | 286 ++++++++++++++++++++++++ _includes/cdn-js-links.html | 3 + examples/adjustable-threshold.html | 12 +- examples/align-axes.html | 13 +- examples/area.html | 16 +- examples/background-drawing.html | 15 +- examples/bar-colors.html | 17 +- examples/bar-extra-line.html | 13 +- examples/bar-single-select.html | 13 +- examples/bar.html | 14 +- examples/boxplot-basic.html | 12 +- examples/boxplot-enhanced.html | 13 +- examples/boxplot-render-data.html | 12 +- examples/boxplot-time.html | 12 +- examples/brush-ordinal-dynamic.html | 28 ++- examples/brush-ordinal.html | 12 +- examples/cap-and-sort-differently.html | 10 +- examples/cbox-menu.html | 12 +- examples/click-limit-on-histogram.html | 13 +- examples/color-swatch.html | 8 + examples/compare-unfiltered.html | 15 +- examples/complex-reduce.html | 13 +- examples/composite-bar-line.html | 12 +- examples/composite-brush-multi-dim.html | 13 +- 26 files changed, 532 insertions(+), 120 deletions(-) create mode 100644 _data/examples.json create mode 100644 _includes/cdn-js-links.html diff --git a/Gemfile.lock b/Gemfile.lock index 2a85da5..9eea5c8 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ GEM remote: https://rubygems.org/ specs: - activesupport (6.0.6) + activesupport (6.0.6.1) concurrent-ruby (~> 1.0, >= 1.0.2) i18n (>= 0.7, < 2) minitest (~> 5.1) @@ -14,30 +14,30 @@ GEM execjs coffee-script-source (1.11.1) colorator (1.1.0) - commonmarker (0.23.5) - concurrent-ruby (1.1.10) + commonmarker (0.23.8) + concurrent-ruby (1.2.0) dnsruby (1.61.9) simpleidn (~> 0.1) em-websocket (0.5.3) eventmachine (>= 0.12.9) http_parser.rb (~> 0) - ethon (0.15.0) + ethon (0.16.0) ffi (>= 1.15.0) eventmachine (1.2.7) execjs (2.8.1) - faraday (2.5.2) + faraday (2.7.4) faraday-net_http (>= 2.0, < 3.1) ruby2_keywords (>= 0.0.4) - faraday-net_http (3.0.0) + faraday-net_http (3.0.2) ffi (1.15.5) forwardable-extended (2.6.0) gemoji (3.0.1) - github-pages (227) + github-pages (228) github-pages-health-check (= 1.17.9) - jekyll (= 3.9.2) + jekyll (= 3.9.3) jekyll-avatar (= 0.7.0) jekyll-coffeescript (= 1.1.1) - jekyll-commonmark-ghpages (= 0.2.0) + jekyll-commonmark-ghpages (= 0.4.0) jekyll-default-layout (= 0.1.4) jekyll-feed (= 0.15.1) jekyll-gist (= 1.5.0) @@ -71,7 +71,7 @@ GEM jemoji (= 0.12.0) kramdown (= 2.3.2) kramdown-parser-gfm (= 1.1.0) - liquid (= 4.0.3) + liquid (= 4.0.4) mercenary (~> 0.3) minima (= 2.5.1) nokogiri (>= 1.13.6, < 2.0) @@ -83,17 +83,17 @@ GEM octokit (~> 4.0) public_suffix (>= 3.0, < 5.0) typhoeus (~> 1.3) - html-pipeline (2.14.2) + html-pipeline (2.14.3) activesupport (>= 2) nokogiri (>= 1.4) http_parser.rb (0.8.0) - i18n (0.9.5) + i18n (1.12.0) concurrent-ruby (~> 1.0) - jekyll (3.9.2) + jekyll (3.9.3) addressable (~> 2.4) colorator (~> 1.0) em-websocket (~> 0.5) - i18n (~> 0.7) + i18n (>= 0.7, < 2) jekyll-sass-converter (~> 1.0) jekyll-watch (~> 2.0) kramdown (>= 1.17, < 3) @@ -109,11 +109,11 @@ GEM coffee-script-source (~> 1.11.1) jekyll-commonmark (1.4.0) commonmarker (~> 0.22) - jekyll-commonmark-ghpages (0.2.0) - commonmarker (~> 0.23.4) + jekyll-commonmark-ghpages (0.4.0) + commonmarker (~> 0.23.7) jekyll (~> 3.9.0) jekyll-commonmark (~> 1.4.0) - rouge (>= 2.0, < 4.0) + rouge (>= 2.0, < 5.0) jekyll-default-layout (0.1.4) jekyll (~> 3.0) jekyll-feed (0.15.1) @@ -201,8 +201,8 @@ GEM rexml kramdown-parser-gfm (1.1.0) kramdown (~> 2.0) - liquid (4.0.3) - listen (3.7.1) + liquid (4.0.4) + listen (3.8.0) rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) mercenary (0.3.6) @@ -210,8 +210,10 @@ GEM jekyll (>= 3.5, < 5.0) jekyll-feed (~> 0.9) jekyll-seo-tag (~> 2.1) - minitest (5.16.3) - nokogiri (1.13.8-x86_64-linux) + minitest (5.17.0) + nokogiri (1.13.10-arm64-darwin) + racc (~> 1.4) + nokogiri (1.13.10-x86_64-darwin) racc (~> 1.4) octokit (4.25.1) faraday (>= 1, < 3) @@ -219,7 +221,7 @@ GEM pathutil (0.16.2) forwardable-extended (~> 2.6) public_suffix (4.0.7) - racc (1.6.0) + racc (1.6.2) rb-fsevent (0.11.2) rb-inotify (0.10.1) ffi (~> 1.0) @@ -243,20 +245,20 @@ GEM thread_safe (0.3.6) typhoeus (1.4.0) ethon (>= 0.9.0) - tzinfo (1.2.10) + tzinfo (1.2.11) thread_safe (~> 0.1) - tzinfo-data (1.2022.3) + tzinfo-data (1.2022.7) tzinfo (>= 1.0.0) unf (0.1.4) unf_ext unf_ext (0.0.8.2) unicode-display_width (1.8.0) wdm (0.1.1) - webrick (1.7.0) - zeitwerk (2.6.0) + webrick (1.8.1) + zeitwerk (2.6.7) PLATFORMS - x86_64-linux + universal-darwin-21 DEPENDENCIES github-pages @@ -270,4 +272,4 @@ DEPENDENCIES webrick (~> 1.7) BUNDLED WITH - 2.3.7 + 2.3.22 diff --git a/_config.yml b/_config.yml index 3c3d409..e2f36af 100644 --- a/_config.yml +++ b/_config.yml @@ -19,6 +19,11 @@ description: >- # this means to ignore newlines until "baseurl:" dc.js. baseurl: "" # the subpath of your site, e.g. /blog url: "" # the base hostname & protocol for your site, e.g. http://example.com +cdn: + js: + dc: "https://cdn.jsdelivr.net/gh/dc-js/dc-js.github.io/js/dc.min.js" + crossfilter: "https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.4/crossfilter.min.js" + d3: "https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js" # Build settings markdown: kramdown @@ -37,3 +42,5 @@ theme: minima # - vendor/cache/ # - vendor/gems/ # - vendor/ruby/ + + diff --git a/_data/examples.json b/_data/examples.json new file mode 100644 index 0000000..1010912 --- /dev/null +++ b/_data/examples.json @@ -0,0 +1,286 @@ +[ + { + "example-name": "adjustable-threshold", + "difficulty-level": "intermediate" + }, + { + "example-name": "align-axes", + "difficulty-level": "intermediate" + }, + { + "example-name": "area", + "difficulty-level": "beginner" + }, + { + "example-name": "background-drawing", + "difficulty-level": "intermediate" + }, + { + "example-name": "bar-extra-line", + "difficulty-level": "beginner" + }, + { + "example-name": "bar-single-select", + "difficulty-level": "beginner" + }, + { + "example-name": "bar", + "difficulty-level": "beginner" + }, + { + "example-name": "boxplot-basic", + "difficulty-level": "intermediate" + }, + { + "example-name": "boxplot-enhanced", + "difficulty-level": "ninja" + }, + { + "example-name": "boxplot-render-data", + "difficulty-level": "intermediate" + }, + { + "example-name": "boxplot-time", + "difficulty-level": "intermediate" + }, + { + "example-name": "brush-ordinal", + "difficulty-level": "intermediate" + }, + { + "example-name": "cap-and-sort-differently", + "difficulty-level": "beginner" + }, + { + "example-name": "cbox-menu", + "difficulty-level": "ninja" + }, + { + "example-name": "click-limit-on-histogram", + "difficulty-level": "beginner" + }, + { + "example-name": "color-swatch", + "difficulty-level": "ninja" + }, + { + "example-name": "compare-unfiltered", + "difficulty-level": "ninja" + }, + { + "example-name": "complex-reduce", + "difficulty-level": "intermediate" + }, + { + "example-name": "composite-bar-line", + "difficulty-level": "intermediate" + }, + { + "example-name": "composite-brush-multi-dim", + "difficulty-level": "ninja" + }, + { + "example-name": "composite", + "difficulty-level": "beginner" + }, + { + "example-name": "current-filters", + "difficulty-level": "ninja" + }, + { + "example-name": "download-table", + "difficulty-level": "intermediate" + }, + { + "example-name": "filter-stacks", + "difficulty-level": "intermediate" + }, + { + "example-name": "filtering-removing", + "difficulty-level": "beginner" + }, + { + "example-name": "filtering", + "difficulty-level": "beginner" + }, + { + "example-name": "focus-dynamic-data", + "difficulty-level": "intermediate" + }, + { + "example-name": "focus-dynamic-interval", + "difficulty-level": "ninja" + }, + { + "example-name": "focus-ordinal-bar", + "difficulty-level": "ninja" + }, + { + "example-name": "heat", + "difficulty-level": "beginner" + }, + { + "example-name": "heatmap-filtering", + "difficulty-level": "intermediate" + }, + { + "example-name": "horizon-chart", + "difficulty-level": "ninja" + }, + { + "example-name": "html-legend", + "difficulty-level": "beginner" + }, + { + "example-name": "line", + "difficulty-level": "beginner" + }, + { + "example-name": "linked-filter", + "difficulty-level": "beginner" + }, + { + "example-name": "multi-focus", + "difficulty-level": "beginner" + }, + { + "example-name": "multi-scatter", + "difficulty-level": "beginner" + }, + { + "example-name": "number", + "difficulty-level": "ninja" + }, + { + "example-name": "ordinal-bar", + "difficulty-level": "beginner" + }, + { + "example-name": "ordinal-line", + "difficulty-level": "beginner" + }, + { + "example-name": "pareto-chart", + "difficulty-level": "intermediate" + }, + { + "example-name": "pie-external-labels", + "difficulty-level": "beginner" + }, + { + "example-name": "pie", + "difficulty-level": "beginner" + }, + { + "example-name": "range-series", + "difficulty-level": "intermediate" + }, + { + "example-name": "regression", + "difficulty-level": "ninja" + }, + { + "example-name": "replacing-data", + "difficulty-level": "ninja" + }, + { + "example-name": "right-axis", + "difficulty-level": "intermediate" + }, + { + "example-name": "row-targets", + "difficulty-level": "beginner" + }, + { + "example-name": "row-top-axis", + "difficulty-level": "beginner" + }, + { + "example-name": "row-vertical-line", + "difficulty-level": "beginner" + }, + { + "example-name": "row", + "difficulty-level": "beginner" + }, + { + "example-name": "scatter-brushing", + "difficulty-level": "intermediate" + }, + { + "example-name": "scatter-canvas-brushing", + "difficulty-level": "intermediate" + }, + { + "example-name": "scatter-canvas-large", + "difficulty-level": "intermediate" + }, + { + "example-name": "scatter-series", + "difficulty-level": "intermediate" + }, + { + "example-name": "scatter-svg-large", + "difficulty-level": "intermediate" + }, + { + "example-name": "scatter", + "difficulty-level": "beginner" + }, + { + "example-name": "select", + "difficulty-level": "intermediate" + }, + { + "example-name": "series", + "difficulty-level": "intermediate" + }, + { + "example-name": "sparkline", + "difficulty-level": "beginner" + }, + { + "example-name": "splom", + "difficulty-level": "ninja" + }, + { + "example-name": "stacked-bar", + "difficulty-level": "beginner" + }, + { + "example-name": "sunburst-cat", + "difficulty-level": "beginner" + }, + { + "example-name": "sunburst-equal-radii", + "difficulty-level": "beginner" + }, + { + "example-name": "sunburst-with-value-accessor", + "difficulty-level": "intermediate" + }, + { + "example-name": "sunburst", + "difficulty-level": "intermediate" + }, + { + "example-name": "switching-time-intervals", + "difficulty-level": "ninja" + }, + { + "example-name": "table-on-aggregated-data", + "difficulty-level": "intermediate" + }, + { + "example-name": "table-pagination", + "difficulty-level": "intermediate" + }, + { + "example-name": "text-filter-widget", + "difficulty-level": "intermediate" + }, + { + "example-name": "time-intervals", + "difficulty-level": "intermediate" + } +] \ No newline at end of file diff --git a/_includes/cdn-js-links.html b/_includes/cdn-js-links.html new file mode 100644 index 0000000..d288fde --- /dev/null +++ b/_includes/cdn-js-links.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/examples/adjustable-threshold.html b/examples/adjustable-threshold.html index 4d2b190..1e58ba8 100644 --- a/examples/adjustable-threshold.html +++ b/examples/adjustable-threshold.html @@ -1,3 +1,6 @@ +--- +--- + @@ -10,9 +13,10 @@ integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous" /> - - - + + + + {% include cdn-js-links.html %} @@ -40,7 +44,7 @@
- + + + {% include cdn-js-links.html %} + - - - +
@@ -96,7 +100,6 @@
- + + {% include cdn-js-links.html %} + +
- - - - + + + + {% include cdn-js-links.html %} + + +
@@ -22,10 +31,8 @@ - - - - + + + {% include cdn-js-links.html %} +
- + +
- - - + + {% include cdn-js-links.html %} +
@@ -23,10 +30,8 @@ values, but this example is here to tide folks over until that happens.

- - - - + + + + {% include cdn-js-links.html %}
@@ -26,10 +32,7 @@
- - - - + + + {% include cdn-js-links.html %}
- - - - + + {% include cdn-js-links.html %}
@@ -14,10 +20,8 @@
- - - - + + + + {% include cdn-js-links.html %} + +
@@ -54,10 +63,6 @@
Enhanced

- - - - + + {% include cdn-js-links.html %} +
@@ -30,10 +37,7 @@
dataOpacity = 0.4
dataWidthPortion = 0.1
- - - - + + + {% include cdn-js-links.html %} +
@@ -19,10 +27,6 @@
- - - - + + {% include cdn-js-links.html %} + +
- + +

This example demonstrates brushing on an ordinal bar chart, by mapping the values to integers and specifying a linear scale. The data is sorted by descending value in one fake group, and then another fake group provides the integer/ordinal mapping.

- - - + + + + +
+

Examples of using dc.js

+

An attempt to present a simple example of each chart type.

+

Also see transitions – resizing – zoom.

+

Contributions welcome. + Source + here.

+ + {% assign grouped_links = site.data.examples | group_by: "difficulty-level" | sort: "name" %} + {% for group in grouped_links %} +

{{ group.name }}

+ + + {% tablerow link in group.items cols:4 %} + {{ link["example-name"] }} + {% endtablerow %} + +
+ {% endfor %} + + + +
+ + + \ No newline at end of file