Skip to content

Commit 1003608

Browse files
kum-deepakkum-deepak
committed
- Making example responsive
- Remove redundant examples - Making examples listing responsive - Re-categorizing examples - Better use of Jekyll variables - Ability to add additional content in the <head>, for example, CSS
1 parent 0a08267 commit 1003608

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+4924
-6386
lines changed

‎_data/examples.json

+5-9
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
},
5858
{
5959
"example-name": "click-limit-on-histogram",
60-
"difficulty-level": "beginner"
60+
"difficulty-level": "ninja"
6161
},
6262
{
6363
"example-name": "color-swatch",
@@ -73,7 +73,7 @@
7373
},
7474
{
7575
"example-name": "composite-bar-line",
76-
"difficulty-level": "intermediate"
76+
"difficulty-level": "beginner"
7777
},
7878
{
7979
"example-name": "composite-brush-multi-dim",
@@ -189,15 +189,15 @@
189189
},
190190
{
191191
"example-name": "row-targets",
192-
"difficulty-level": "beginner"
192+
"difficulty-level": "ninja"
193193
},
194194
{
195195
"example-name": "row-top-axis",
196196
"difficulty-level": "beginner"
197197
},
198198
{
199199
"example-name": "row-vertical-line",
200-
"difficulty-level": "beginner"
200+
"difficulty-level": "intermediate"
201201
},
202202
{
203203
"example-name": "row",
@@ -207,10 +207,6 @@
207207
"example-name": "scatter-brushing",
208208
"difficulty-level": "intermediate"
209209
},
210-
{
211-
"example-name": "scatter-canvas-brushing",
212-
"difficulty-level": "intermediate"
213-
},
214210
{
215211
"example-name": "scatter-canvas-large",
216212
"difficulty-level": "intermediate"
@@ -283,4 +279,4 @@
283279
"example-name": "time-intervals",
284280
"difficulty-level": "intermediate"
285281
}
286-
]
282+
]

‎_includes/examples-header.html

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
{% assign url_parts = page.url | split: "/" %}
2-
{% assign dir = url_parts[-2] %}
3-
{% assign filename = url_parts[-1] %}
4-
51
<nav class="navbar navbar-expand-sm bg-body-tertiary rounded" aria-label="navbar">
62
<div class="container-fluid">
73
<a class="navbar-brand" href="/">
@@ -14,10 +10,10 @@
1410
<div class="collapse navbar-collapse" id="navbar-top">
1511
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
1612
<li class="nav-item">
17-
<a class="nav-link" href=".">all {{ dir }}</a>
13+
<a class="nav-link" href=".">all {{ page.dir | remove: '/' }}</a>
1814
</li>
1915
<li class="nav-item">
20-
<a class="nav-link" href="https://github.com/dc-js/dc-js.github.io/blob/master/{{ dir }}/{{ filename }}">source</a>
16+
<a class="nav-link" href="https://github.com/dc-js/dc-js.github.io/blob/master/{{ page.path }}">source</a>
2117
</li>
2218
</ul>
2319
<span class="navbar-text small" id="versions"></span>

‎_includes/examples-index-header.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<nav class="navbar navbar-expand-sm bg-body-tertiary rounded" aria-label="navbar">
2+
<div class="container-fluid">
3+
<a class="navbar-brand" href="/">
4+
<img src="../dc.logo.png" width="30" height="30" class="d-inline-block align-top" alt="dc logo">
5+
</a>
6+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-top" aria-controls="navbar-top" aria-expanded="false" aria-label="Toggle navigation">
7+
<span class="navbar-toggler-icon"></span>
8+
</button>
9+
10+
<div class="collapse navbar-collapse" id="navbar-top">
11+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
12+
<li class="nav-item">
13+
<a class="nav-link" href="https://github.com/dc-js/dc.js/blob/master/CONTRIBUTING.md">contribute</a>
14+
</li>
15+
<li class="nav-item">
16+
<a class="nav-link" href="https://github.com/dc-js/dc-js.github.io/tree/master/examples">sources</a>
17+
</li>
18+
</ul>
19+
<span class="navbar-text small" id="versions"></span>
20+
</div>
21+
</div>
22+
</nav>
23+
24+
<script type="application/javascript">
25+
document.addEventListener("DOMContentLoaded", () => {
26+
d3.select('#versions').text(`dc.js: ${dc.version}`);
27+
});
28+
</script>
29+

‎_layouts/example.html

+7-8
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,17 @@
44
<!DOCTYPE html>
55
<html lang="en">
66
<head>
7-
<title>dc.js - Line Chart Example</title>
7+
<title>dc.js Example - {{ page.title }}</title>
88
<meta charset="UTF-8" />
9-
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
1010
{% include cdn-css-links.html %}
11+
<link rel="stylesheet" href="../css/examples.css" />
12+
{{ page.additional_head }}
1113
</head>
1214
<body>
13-
<div class="container">
14-
{% include examples-header.html %}
15-
16-
{% include cdn-js-links.html %}
17-
18-
{{ content }}
15+
{% include examples-header.html %}
16+
<div class="container-fluid">
17+
{% include cdn-js-links.html %} {{ content }}
1918
</div>
2019
</body>
2120
</html>

‎css/examples.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
body {
2+
margin-bottom: 20px;
3+
}
4+
5+
a {
6+
text-decoration: none;
7+
}
8+
9+
/* This will allow the reset filter to be show above the chart without
10+
impacting charts size */
11+
.chart-with-reset {
12+
margin-top: 25px;
13+
}
14+
.chart-with-reset .reset {
15+
margin-top: -25px;
16+
}
17+
18+
.chart-title {
19+
padding-top: 30px;
20+
padding-bottom: 20px;
21+
text-align: center;
22+
}
23+
24+
/* fixing max width for charts */
25+
.max-width-1000 {
26+
max-width: 1000px;
27+
}
28+
.max-width-800 {
29+
max-width: 800px;
30+
}
31+
.max-width-500 {
32+
max-width: 500px;
33+
}
34+
.max-width-360 {
35+
max-width: 360px;
36+
}

0 commit comments

Comments
 (0)