Skip to content

Commit 0f7958d

Browse files
kum-deepakkum-deepak
committed
Updating to Jekyll
1 parent 1003608 commit 0f7958d

File tree

1 file changed

+122
-151
lines changed

1 file changed

+122
-151
lines changed

‎examples/color-swatch.html

Lines changed: 122 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,125 @@
11
---
2+
layout: example
3+
title: Minimal Chart - Color Swatch
24
---
35

4-
<!DOCTYPE html>
5-
<html lang="en">
6-
<head>
7-
<title>dc.js - Color Swatch Example</title>
8-
<meta charset="UTF-8" />
9-
<link
10-
rel="stylesheet"
11-
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
12-
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
13-
crossorigin="anonymous"
14-
/>
15-
<!-- <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /> -->
16-
<link rel="stylesheet" type="text/css" href="../css/dc.css" />
17-
18-
<script type="text/javascript" src="header.js"></script>
19-
20-
{% include cdn-js-links.html %}
21-
22-
</head>
23-
<body>
24-
<div class="container">
25-
<div id="header"></div>
26-
27-
<p style="clear: left">
28-
Example of creating a simple external chart and attaching it to the
29-
dc.js chart registry.
30-
</p>
31-
32-
<p>
33-
The color swatch widget is not supposed to be useful, just the most
34-
minimal example. It watches a groupAll value and maps it to a color
35-
using a color scale.
36-
</p>
37-
38-
<div id="swatch"></div>
39-
<div id="bar"></div>
40-
41-
<script type="text/javascript" src="header.js"></script>
42-
<script type="text/javascript" src="../js/d3.js"></script>
43-
<script type="text/javascript" src="../js/crossfilter.js"></script>
44-
<script type="text/javascript" src="../js/dc.js"></script>
45-
<script type="text/javascript">
46-
class ColorSwatch {
47-
constructor(parent, chartGroup) {
48-
this._groupAll = null;
49-
this._colorScale = null;
50-
this._duration = 500;
51-
this._root = d3.select(parent);
52-
chartGroup.register(this);
53-
this._rect = null;
54-
}
55-
56-
// initialization functions for user
57-
58-
groupAll(groupAll) {
59-
if (!arguments.length) {
60-
return this._groupAll;
61-
}
62-
this._groupAll = groupAll;
63-
return this;
64-
}
65-
66-
colorScale(scale) {
67-
if (!arguments.length) {
68-
return this._colorScale;
69-
}
70-
this._colorScale = scale;
71-
return this;
72-
}
73-
74-
// interface for dc.js chart registry
75-
76-
render() {
77-
const width = 200,
78-
height = 200;
79-
const svg = this._root
80-
.selectAll('svg')
81-
.data([0])
82-
.join('svg')
83-
.attr('width', width)
84-
.attr('height', height);
85-
this._rect = svg
86-
.selectAll('rect.swatch')
87-
.data([0])
88-
.join('rect')
89-
.attr('class', 'swatch')
90-
.attr('width', width)
91-
.attr('height', height);
92-
this.redraw();
93-
}
94-
95-
redraw() {
96-
this._rect
97-
.transition()
98-
.duration(this._duration)
99-
.attr('fill', this._colorScale(this._groupAll.value()));
100-
}
101-
}
102-
103-
const chartGroup = new dc.ChartGroup();
104-
const swatch = new ColorSwatch('#swatch', chartGroup),
105-
bar = new dc.BarChart('#bar', chartGroup);
106-
107-
d3.csv('morley.csv').then(experiments => {
108-
experiments.forEach(x => {
109-
x.Speed = +x.Speed;
110-
});
111-
112-
const cf = crossfilter(experiments),
113-
groupAllSpeed = cf.groupAll().reduceSum(d => d.Speed);
114-
115-
swatch
116-
.groupAll(groupAllSpeed)
117-
.colorScale(
118-
d3.scaleSequential(
119-
[0, groupAllSpeed.value()],
120-
d3.interpolateRdYlGn
121-
)
122-
);
123-
124-
const runDimension = cf.dimension(d => +d.Run),
125-
speedSumGroup = runDimension
126-
.group()
127-
.reduceSum(d => (d.Speed * d.Run) / 1000);
128-
129-
bar
130-
.configure({
131-
width: 768,
132-
height: 480,
133-
})
134-
.dataProvider(
135-
new dc.CFMultiAdapter({
136-
dimension: runDimension,
137-
layers: [
138-
{
139-
group: speedSumGroup,
140-
},
141-
],
142-
})
143-
)
144-
.configure({
145-
renderLabel: true,
146-
})
147-
.x(d3.scaleLinear().domain([6, 20]));
148-
149-
chartGroup.renderAll();
150-
});
151-
</script>
152-
</div>
153-
</body>
154-
</html>
6+
<div class="d-flex flex-column align-items-center text-center max-width-1000" style="margin: auto">
7+
<p>
8+
Example of creating a simple external chart and attaching it to the dc.js
9+
chart registry.
10+
</p>
11+
12+
<p>
13+
The color swatch widget is not supposed to be useful, just a minimal
14+
example. It watches a groupAll value and maps it to a color using a color
15+
scale.
16+
</p>
17+
18+
<div id="swatch"></div>
19+
<div
20+
id="bar"
21+
class="ratio ratio-4x3"
22+
style="min-width: 360px; max-width: 800px; margin: auto"
23+
></div>
24+
</div>
25+
26+
<script type="text/javascript">
27+
class ColorSwatch {
28+
constructor(parent, chartGroup) {
29+
this._groupAll = null;
30+
this._colorScale = null;
31+
this._duration = 500;
32+
this._root = d3.select(parent);
33+
chartGroup.register(this);
34+
this._rect = null;
35+
}
36+
37+
// initialization functions for user
38+
39+
groupAll(groupAll) {
40+
if (!arguments.length) {
41+
return this._groupAll;
42+
}
43+
this._groupAll = groupAll;
44+
return this;
45+
}
46+
47+
colorScale(scale) {
48+
if (!arguments.length) {
49+
return this._colorScale;
50+
}
51+
this._colorScale = scale;
52+
return this;
53+
}
54+
55+
// interface for dc.js chart registry
56+
57+
render() {
58+
const width = 200,
59+
height = 200;
60+
const svg = this._root
61+
.selectAll('svg')
62+
.data([0])
63+
.join('svg')
64+
.attr('width', width)
65+
.attr('height', height);
66+
this._rect = svg
67+
.selectAll('rect.swatch')
68+
.data([0])
69+
.join('rect')
70+
.attr('class', 'swatch')
71+
.attr('width', width)
72+
.attr('height', height);
73+
this.redraw();
74+
}
75+
76+
redraw() {
77+
this._rect
78+
.transition()
79+
.duration(this._duration)
80+
.attr('fill', this._colorScale(this._groupAll.value()));
81+
}
82+
}
83+
84+
const chartGroup = new dc.ChartGroup();
85+
const swatch = new ColorSwatch('#swatch', chartGroup),
86+
bar = new dc.BarChart('#bar', chartGroup);
87+
88+
d3.csv('morley.csv').then(experiments => {
89+
experiments.forEach(x => {
90+
x.Speed = +x.Speed;
91+
});
92+
93+
const cf = crossfilter(experiments),
94+
groupAllSpeed = cf.groupAll().reduceSum(d => d.Speed);
95+
96+
swatch
97+
.groupAll(groupAllSpeed)
98+
.colorScale(
99+
d3.scaleSequential([0, groupAllSpeed.value()], d3.interpolateRdYlGn)
100+
);
101+
102+
const runDimension = cf.dimension(d => +d.Run),
103+
speedSumGroup = runDimension
104+
.group()
105+
.reduceSum(d => (d.Speed * d.Run) / 1000);
106+
107+
bar
108+
.dataProvider(
109+
new dc.CFMultiAdapter({
110+
dimension: runDimension,
111+
layers: [
112+
{
113+
group: speedSumGroup,
114+
},
115+
],
116+
})
117+
)
118+
.configure({
119+
renderLabel: true,
120+
})
121+
.x(d3.scaleLinear().domain([6, 20]));
122+
123+
chartGroup.renderAll();
124+
});
125+
</script>

0 commit comments

Comments
 (0)