Skip to content

Commit 0545e76

Browse files
nativelocationnativelocation
committed
Merge branch 'creating-element'
2 parents a84e8b0 + a394b1b commit 0545e76

File tree

15 files changed

+1642
-43
lines changed

15 files changed

+1642
-43
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"private": true,
55
"dependencies": {
66
"d3": "^5.9.0",
7+
"d3-line": "^0.0.1",
78
"prop-types": "^15.6.2",
89
"react": "^16.8.1",
910
"react-dom": "^16.8.1",

‎src/App.css‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,3 @@
1212
font-size: calc(10px + 2vmin);
1313
color: black;
1414
}
15-
16-
.bar--positive {
17-
fill: steelblue;
18-
}
19-
20-
.bar--negative {
21-
fill: darkorange;
22-
}
23-
24-
.axis text {
25-
font: 10px sans-serif;
26-
}
27-
28-
.axis path,
29-
.axis line {
30-
fill: none;
31-
stroke: #000;
32-
shape-rendering: crispEdges;
33-
}

‎src/App.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
import React, { Component } from 'react';
22

33
import HBarChart from './components/HBarChart';
4+
import RidgelineChart from './components/RidgelineChart';
5+
import AdditionalRidgelineChart from './components/AdditionalRidgelineChart';
6+
import SlopegraphChart from './components/SlopegraphChart';
7+
import DifferentChart from './components/DifferentChart';
48
import './App.css';
5-
import data from './data.tsv';
9+
import tdata from './data.tsv';
10+
import cdata from './data.csv';
11+
import sdata from './sdata.csv';
12+
import rdata from './ridgelineData.json';
613

714
class App extends Component {
815
render() {
916
return (
1017
<div className="App">
1118
<header className="App-header">
12-
<HBarChart data={data} />
19+
<HBarChart data={tdata} />
20+
<RidgelineChart data={cdata} />
21+
<SlopegraphChart data={sdata} />
22+
<AdditionalRidgelineChart data={rdata} />
23+
<DifferentChart />
1324
</header>
1425
</div>
1526
);

‎src/components/AdditionalRidgelineChart/index.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import * as d3 from 'd3';
4+
5+
class AdditionalRidgelineChart extends Component {
6+
componentDidMount() {
7+
if (this.props.data !== null)
8+
this.calculateChart();
9+
};
10+
11+
calculateChart = () => {
12+
const { data, width, height, margin } = this.props;
13+
const svgWidth = width - margin.left - margin.right;
14+
const svgHeight = height - margin.top - margin.bottom;
15+
16+
const svg = d3
17+
.select('#additionalridgelinechart_container')
18+
.append('svg')
19+
.attr('width', svgWidth + margin.left + margin.right)
20+
.attr('height', svgHeight + margin.top + margin.bottom)
21+
.append('g')
22+
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
23+
24+
const categories = Object.keys(data);
25+
26+
const x = d3
27+
.scaleLinear()
28+
.domain([-10, 140])
29+
.range([ 0, svgWidth ]);
30+
31+
svg
32+
.append('g')
33+
.attr('transform', 'translate(0,' + svgHeight + ')')
34+
.call(d3.axisBottom(x));
35+
36+
const y = d3
37+
.scaleLinear()
38+
.domain([0, 0.4])
39+
.range([ svgHeight, 0]);
40+
41+
const yName = d3
42+
.scaleBand()
43+
.domain(categories)
44+
.range([0, svgHeight])
45+
.paddingInner(1);
46+
47+
svg
48+
.append('g')
49+
.call(d3.axisLeft(yName));
50+
51+
const allDensity = categories.map(d => ({ key: d, density: data[d].density, lower_bound: data[d].lower_bound, upper_bound: data[d].upper_bound }));
52+
53+
allDensity.forEach(edata => {
54+
let nfirst = 0, nSecond = 0, nThird = 0;
55+
edata.density.forEach(densityData => {
56+
if (densityData[0] < edata.lower_bound) {
57+
nfirst = nfirst + 1;
58+
} else if (densityData[0] >= edata.lower_bound && densityData[0] < edata.upper_bound) {
59+
nSecond = nSecond + 1;
60+
} else {
61+
nThird = nThird + 1;
62+
}
63+
});
64+
const density_first = edata.density.slice(0, nfirst);
65+
const density_second = edata.density.slice(nfirst - 1, nfirst + nSecond);
66+
const density_third = edata.density.slice(nfirst + nSecond - 1, nfirst + nSecond + nThird);
67+
const data = [
68+
{ density: density_first, fillColor: '#7b7b7b', key: edata.key },
69+
{ density: density_second, fillColor: '#3131ff63', key: edata.key },
70+
{ density: density_third, fillColor: '#7b7b7b', key: edata.key }
71+
];
72+
svg.selectAll('areas')
73+
.data(data)
74+
.enter()
75+
.append('path')
76+
.attr('transform', d => 'translate(0,' + (yName(d.key) - svgHeight) + ')')
77+
.attr('stroke', '#7b7b7b')
78+
.attr('fill', d => d.fillColor)
79+
.attr('stroke-width', 1)
80+
.datum(d => d.density)
81+
.attr('d', d3.area()
82+
.curve(d3.curveBasis)
83+
.x(d => x(d[0]))
84+
.y0(height - 120)
85+
.y1(d => y(d[1]))
86+
);
87+
});
88+
}
89+
90+
render() {
91+
return (
92+
<div id="additionalridgelinechart_container" />
93+
);
94+
}
95+
}
96+
97+
AdditionalRidgelineChart.propTypes = {
98+
data: PropTypes.object ,
99+
width: PropTypes.number,
100+
height: PropTypes.number,
101+
margin: PropTypes.object,
102+
};
103+
104+
AdditionalRidgelineChart.defaultProps = {
105+
data: null,
106+
width: 1000,
107+
height: 600,
108+
margin: { top: 100, right: 5, bottom: 20, left: 100 },
109+
};
110+
111+
export default AdditionalRidgelineChart;

‎src/components/DifferentChart/index.js‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import * as d3 from 'd3';
4+
5+
class DifferentChart extends Component {
6+
componentDidMount() {
7+
// if (this.props.data !== null)
8+
this.calculateChart();
9+
};
10+
11+
calculateChart = () => {
12+
const { width, height, margin } = this.props;
13+
const svgWidth = width - margin.left - margin.right;
14+
const svgHeight = height - margin.top - margin.bottom;
15+
16+
const svg = d3
17+
.select('#differentchart_container')
18+
.append('svg')
19+
.attr('width', svgWidth + margin.left + margin.right)
20+
.attr('height', svgHeight + margin.top + margin.bottom)
21+
.append('g')
22+
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
23+
24+
// const categories = Object.keys(data);
25+
26+
// const x = d3
27+
// .scaleLinear()
28+
// .domain([-10, 140])
29+
// .range([ 0, svgWidth ]);
30+
31+
// svg
32+
// .append('g')
33+
// .attr('transform', 'translate(0,' + svgHeight + ')')
34+
// .call(d3.axisBottom(x));
35+
36+
// const y = d3
37+
// .scaleLinear()
38+
// .domain([0, 0.4])
39+
// .range([ svgHeight, 0]);
40+
41+
// const yName = d3
42+
// .scaleBand()
43+
// .domain(categories)
44+
// .range([0, svgHeight])
45+
// .paddingInner(1);
46+
47+
// svg
48+
// .append('g')
49+
// .call(d3.axisLeft(yName));
50+
51+
const initdata = [
52+
{date: '2011-10-01T00:00', value0: 63.4, value1: 62.7},
53+
{date: '2011-10-02T00:00', value0: 58, value1: 59.9},
54+
{date: '2011-10-03T00:00', value0: 53.3, value1: 59.1},
55+
{date: '2011-10-04T00:00', value0: 55.7, value1: 58.8},
56+
{date: '2011-10-05T00:00', value0: 64.2, value1: 58.7},
57+
{date: '2011-10-06T00:00', value0: 58.8, value1: 57},
58+
{date: '2011-10-07T00:00', value0: 57.9, value1: 56.7},
59+
{date: '2011-10-08T00:00', value0: 61.8, value1: 56.8},
60+
{date: '2011-10-09T00:00', value0: 69.3, value1: 56.7},
61+
{date: '2011-10-10T00:00', value0: 71.2, value1: 60.1},
62+
{date: '2011-10-11T00:00', value0: 68.7, value1: 61.1},
63+
{date: '2011-10-12T00:00', value0: 61.8, value1: 61.5},
64+
{date: '2011-10-13T00:00', value0: 63, value1: 64.3},
65+
{date: '2011-10-14T00:00', value0: 66.9, value1: 67.1},
66+
{date: '2011-10-15T00:00', value0: 61.7, value1: 64.6},
67+
{date: '2011-10-16T00:00', value0: 61.8, value1: 61.6},
68+
{date: '2011-10-17T00:00', value0: 62.8, value1: 61.1},
69+
{date: '2011-10-18T00:00', value0: 60.8, value1: 59.2},
70+
{date: '2011-10-19T00:00', value0: 62.1, value1: 58.9},
71+
{date: '2011-10-20T00:00', value0: 65.1, value1: 57.2},
72+
{date: '2011-10-21T00:00', value0: 55.6, value1: 56.4},
73+
{date: '2011-10-22T00:00', value0: 54.4, value1: 60.7},
74+
{date: '2011-10-23T00:00', value0: 54.4, value1: 65.1},
75+
{date: '2011-10-24T00:00', value0: 54.8, value1: 60.9},
76+
{date: '2011-10-25T00:00', value0: 57.9, value1: 56.1},
77+
{date: '2011-10-26T00:00', value0: 54.6, value1: 54.6},
78+
{date: '2011-10-27T00:00', value0: 54.4, value1: 56.1},
79+
{date: '2011-10-28T00:00', value0: 42.5, value1: 58.1},
80+
{date: '2011-10-29T00:00', value0: 40.9, value1: 57.5},
81+
{date: '2011-10-30T00:00', value0: 38.6, value1: 57.7},
82+
{date: '2011-10-31T00:00', value0: 44.2, value1: 55.1},
83+
{date: '2011-11-01T00:00', value0: 49.6, value1: 57.9},
84+
{date: '2011-11-02T00:00', value0: 47.2, value1: 64.6},
85+
{date: '2011-11-03T00:00', value0: 50.1, value1: 56.2},
86+
{date: '2011-11-04T00:00', value0: 50.1, value1: 50.5},
87+
{date: '2011-11-05T00:00', value0: 43.5, value1: 51.3},
88+
{date: '2011-11-06T00:00', value0: 43.8, value1: 52.6},
89+
{date: '2011-11-07T00:00', value0: 48.9, value1: 51.4},
90+
{date: '2011-11-08T00:00', value0: 55.5, value1: 50.6},
91+
{date: '2011-11-09T00:00', value0: 53.7, value1: 54.6},
92+
{date: '2011-11-10T00:00', value0: 57.7, value1: 55.6}
93+
];
94+
const data = initdata.map(d => ({
95+
date: new Date(d.date),
96+
value0: d.value0, // The primary value.
97+
value1: d.value1, // The secondary comparison value.
98+
}));
99+
data.y = "°F"
100+
const x = d3.scaleTime()
101+
.domain(d3.extent(data, d => d.date))
102+
.range([margin.left, width - margin.right])
103+
104+
const y = d3.scaleLinear()
105+
.domain([
106+
d3.min(data, d => Math.min(d.value0, d.value1)),
107+
d3.max(data, d => Math.max(d.value0, d.value1))
108+
]).nice(5)
109+
.range([height - margin.bottom, margin.top])
110+
111+
const xAxis = g => g
112+
.attr("transform", `translate(0,${height - margin.bottom})`)
113+
.call(d3.axisBottom(x)
114+
.ticks(width / 80)
115+
.tickSizeOuter(0))
116+
.call(g => g.select(".domain").remove())
117+
118+
const yAxis = g => g.append("g")
119+
.attr("transform", `translate(${margin.left},0)`)
120+
.call(d3.axisLeft(y))
121+
.call(g => g.select(".domain").remove())
122+
.call(g => g.select(".tick:last-of-type text").clone()
123+
.attr("x", 3)
124+
.attr("text-anchor", "start")
125+
.attr("font-weight", "bold")
126+
.text(data.y))
127+
128+
const colors = [
129+
"#91bfdb",
130+
"#fc8d59"
131+
];
132+
133+
const curve = d3.curveStep
134+
135+
const aboveUid = "above";
136+
const belowUid = "below";
137+
138+
svg.datum(data);
139+
140+
svg.append("g")
141+
.call(xAxis);
142+
143+
svg.append("g")
144+
.call(yAxis);
145+
146+
svg.append("clipPath")
147+
.attr("id", aboveUid)
148+
.append("path")
149+
.attr("d", d3.area()
150+
.curve(curve)
151+
.x(d => x(d.date))
152+
.y0(0)
153+
.y1(d => y(d.value1)));
154+
155+
svg.append("clipPath")
156+
.attr("id", belowUid)
157+
.append("path")
158+
.attr("d", d3.area()
159+
.curve(curve)
160+
.x(d => x(d.date))
161+
.y0(height)
162+
.y1(d => y(d.value1)));
163+
164+
svg.append("path")
165+
.attr("clip-path", aboveUid)
166+
.attr("fill", colors[1])
167+
.attr("d", d3.area()
168+
.curve(curve)
169+
.x(d => x(d.date))
170+
.y0(height)
171+
.y1(d => y(d.value0)));
172+
173+
svg.append("path")
174+
.attr("clip-path", belowUid)
175+
.attr("fill", colors[0])
176+
.attr("d", d3.area()
177+
.curve(curve)
178+
.x(d => x(d.date))
179+
.y0(0)
180+
.y1(d => y(d.value0)));
181+
182+
svg.append("path")
183+
.attr("fill", "none")
184+
.attr("stroke", "black")
185+
.attr("stroke-width", 1.5)
186+
.attr("stroke-linejoin", "round")
187+
.attr("stroke-linecap", "round")
188+
.attr("d", d3.line()
189+
.curve(curve)
190+
.x(d => x(d.date))
191+
.y(d => y(d.value0)));
192+
}
193+
194+
render() {
195+
return (
196+
<div id="differentchart_container" />
197+
);
198+
}
199+
}
200+
201+
DifferentChart.propTypes = {
202+
data: PropTypes.object ,
203+
width: PropTypes.number,
204+
height: PropTypes.number,
205+
margin: PropTypes.object,
206+
};
207+
208+
DifferentChart.defaultProps = {
209+
data: null,
210+
width: 1000,
211+
height: 600,
212+
margin: { top: 100, right: 5, bottom: 20, left: 100 },
213+
};
214+
215+
export default DifferentChart;

0 commit comments

Comments
 (0)