Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="root"></div>
              
            
!

CSS

              
                .image>svg {
  border: solid 0.5px #ccc;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  user-select: none;
}
.center{
  text-align: center;
  user-select: none;
}
.text{
  margin:10px;
  border: 1px solid #aaa;
  text-align: center;
  word-break: normal;
  padding: 20px 40px;
  user-select: none;
}
.finger{
  cursor: pointer;
  
}
.arrow{
  cursor: default;
  user-select: none;
}
.bbb{
  display:table;
  user-select: none;
}
.box{
  display:table-cell;
  user-select: none;
}

              
            
!

JS

              
                      const color = {gender : ["男性","女性","その他"],
                     year : ["20~39","40~59","60~"],
                     study : ["全くない","一年未満","1年から3年","4年から5年","6年から10年","11年以上"]  
                    }
      class SonChart extends React.Component {
        constructor (props) {
          super(props)
          this.state = {
            colors : "gender",
            PC : "PC1",
            bPC : "PC2",
            BW : "best",
            bBW : "best",
            selectId: null,
            show:[],
            show1:[],
            show2:[],
            genderJudge:[true,true,true],
            yearJudge:[true,true,true],
            studyJudge:[true,true,true,true,true,true]  
          }
        }

        render () {
          const iris = this.props.data
          const respondent = this.props.data
          const scatterPlotMargin = 50
          const scatterPlotSize = 350
          const parallelPlotMargin = -50
          /*const width = 2200  //画面の横の大きさ
            const height = 200  //画面の縦の大きさ*/
          const pcOpacity = 0.3
          const lightPcOpacity = 0.04
          const deepPcOpacity = 1
          const pcStrokeWidth = 1
          const changedStrokeWidth = 2
          const lineInterval = 0.05
          const min = 150  //a_平行座標の描画範囲の最小
          const max = 300    //a_平行座標の描画範囲の最大
          const bmin = 450   //b_平行座標の描画範囲の最小
          const bmax = 600   //b_平行座標の描画範囲の最大
          const names = iris.scatterPlot.filter((name,i)=>{
            if(this.state.colors==="gender"){
              return (
                this.state.genderJudge[0] && name.gender === "男性" || 
                this.state.genderJudge[1] && name.gender === "女性" ||
                this.state.genderJudge[2] && name.gender === "その他" )
            }
            if(this.state.colors==="year"){
              return(
                this.state.yearJudge[0] && name.year === "20~39" || 
                this.state.yearJudge[1] && name.year === "40~59" ||
                this.state.yearJudge[2] && name.year === "60~" )
            }
            if(this.state.colors==="study"){
              return(
                this.state.studyJudge[0] && name.study == "全くない" || 
                this.state.studyJudge[1] && name.study == "一年未満" ||
                this.state.studyJudge[2] && name.study == "1年から3年" ||
                this.state.studyJudge[3] && name.study == "4年から5年" || 
                this.state.studyJudge[4] && name.study == "6年から10年" ||
                this.state.studyJudge[5] && name.study == "11年以上" )
            }})

          const xScale = d3.scaleLinear()
          .domain(d3.extent(iris.scatterPlot, (item) => +item[this.state.PC]))//描写する内容の幅、[最小値、最大値]
          .range([0,scatterPlotSize])//画面の幅?
          .nice() 

          const yScale = d3.scaleLinear()
          .domain(d3.extent(iris.scatterPlot, (item) => +item[this.state.bPC]))
          .range([scatterPlotSize,0])
          .nice()

          const yScale_b0 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.PC].best[0].label]))
          .range([max,min])
          .nice() 

          const yScale_b1 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.PC].best[1].label]))
          .range([max,min])
          .nice() 

          const yScale_b2 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.PC].best[2].label]))
          .range([max,min])
          .nice() 

          const yScale_b3 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.PC].best[3].label]))
          .range([max,min])
          .nice() 

          const yScale_b4 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.PC].best[4].label]))
          .range([max,min])
          .nice() 

          const yScale_w0 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.PC].worst[0].label]))
          .range([max,min])
          .nice() 

          const yScale_w1 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.PC].worst[1].label]))
          .range([max,min])
          .nice() 

          const yScale_w2 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.PC].worst[2].label]))
          .range([max,min])
          .nice() 

          const yScale_w3 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.PC].worst[3].label]))
          .range([max,min])
          .nice() 

          const yScale_w4 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.PC].worst[4].label]))
          .range([max,min])
          .nice() 

          const xScale_b0 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.bPC].best[0].label]))
          .range([bmax,bmin])
          .nice() 

          const xScale_b1 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.bPC].best[1].label]))
          .range([bmax,bmin])
          .nice() 

          const xScale_b2 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.bPC].best[2].label]))
          .range([bmax,bmin])
          .nice() 

          const xScale_b3 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.bPC].best[3].label]))
          .range([bmax,bmin])
          .nice() 

          const xScale_b4 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.bPC].best[4].label]))
          .range([bmax,bmin])
          .nice() 

          const xScale_w0 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.bPC].worst[0].label]))
          .range([bmax,bmin])
          .nice() 

          const xScale_w1 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.bPC].worst[1].label]))
          .range([bmax,bmin])
          .nice() 

          const xScale_w2 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.bPC].worst[2].label]))
          .range([bmax,bmin])
          .nice() 

          const xScale_w3 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.bPC].worst[3].label]))
          .range([bmax,bmin])
          .nice() 

          const xScale_w4 = d3.scaleLinear()
          .domain(d3.extent(respondent.parallel,(item)=>item[respondent.bwBar[this.state.bPC].worst[4].label]))
          .range([bmax,bmin])
          .nice()

          const colorScale = d3.scaleOrdinal(d3.schemeCategory10)
          const type = [colorScale("男性"),colorScale("女性"),colorScale("その他"),colorScale("20~39"),colorScale("40~59"),colorScale("60~"),colorScale("全くない"),colorScale("一年未満"),colorScale("1年から3年"),colorScale("4年から5年"),colorScale("6年から10年"),colorScale("11年以上")]
          const colorScale2 = d3.scaleOrdinal(d3.schemeCategory10)
          const colorScale3 = d3.scaleOrdinal(d3.schemeCategory10)
          //const ContributionRate = this.props.data
          const height = 700
          const length = iris.contribution.length
          const width = length*1.8
          const xScale_CR = d3.scaleLinear()
          .domain([0,2])
          .range([140,width])
          .nice()
          const yScale_CR = d3.scaleLinear()
          .domain([0,1])
          .range([height,50])      
          .nice()
          //const colorScale = d3.scaleOrdinal(d3.schemeCategory10)
          const a = 1.8/(iris.contribution.length+1)    

          return <div >
            <div className="columns">
              <div className="column"><label className="label">X軸</label>
                <div className="select is-fullwidth">
                  <select name="select" id="select" onChange={(x)=>{this.setState({PC:x.target.value})}}>
                    <option value="PC1">PC1</option>
                    <option value="PC2">PC2</option>
                    <option value="PC3">PC3</option>
                    <option value="PC4">PC4</option>
                    <option value="PC5">PC5</option>
                    <option value="PC6">PC6</option>
                    <option value="PC7">PC7</option>
                    <option value="PC8">PC8</option>
                    <option value="PC9">PC9</option>
                    <option value="PC10">PC10</option>
                    <option value="PC11">PC11</option>
                    <option value="PC12">PC12</option>
                    <option value="PC13">PC13</option>
                    <option value="PC14">PC14</option>
                    <option value="PC15">PC15</option>
                    <option value="PC16">PC16</option>
                    <option value="PC17">PC17</option>
                    <option value="PC18">PC18</option>
                    <option value="PC19">PC19</option>
                    <option value="PC20">PC20</option>
                    <option value="PC21">PC21</option>
                    <option value="PC22">PC22</option>
                    <option value="PC23">PC23</option>
                    <option value="PC24">PC24</option>
                    <option value="PC25">PC25</option>
                    <option value="PC26">PC26</option>
                    <option value="PC27">PC27</option>
                    <option value="PC28">PC28</option>
                    <option value="PC29">PC29</option>
                    <option value="PC30">PC30</option>
                    <option value="PC31">PC31</option>
                    <option value="PC32">PC32</option>
                    <option value="PC33">PC33</option>
                    <option value="PC34">PC34</option>
                    <option value="PC35">PC35</option>
                    <option value="PC36">PC36</option>
                    <option value="PC37">PC37</option>
                    <option value="PC38">PC38</option>
                    <option value="PC39">PC39</option>
                    <option value="PC40">PC40</option>
                    <option value="PC41">PC41</option>
                    <option value="PC42">PC42</option>
                    <option value="PC43">PC43</option>
                    <option value="PC44">PC44</option>
                    <option value="PC45">PC45</option>
                    <option value="PC46">PC46</option>
                    <option value="PC47">PC47</option>
                    <option value="PC48">PC48</option>
                    <option value="PC49">PC49</option>
                    <option value="PC50">PC50</option>
                    <option value="PC51">PC51</option>
                    <option value="PC52">PC52</option>
                    <option value="PC53">PC53</option>
                    <option value="PC54">PC54</option>
                    <option value="PC55">PC55</option>
                    <option value="PC56">PC56</option>
                    <option value="PC57">PC57</option>
                    <option value="PC58">PC58</option>
                    <option value="PC59">PC59</option>
                    <option value="PC60">PC60</option>
                    <option value="PC61">PC61</option>
                    <option value="PC62">PC62</option>
                    <option value="PC63">PC63</option>
                    <option value="PC64">PC64</option>
                    <option value="PC65">PC65</option>
                    <option value="PC66">PC66</option>
                    <option value="PC67">PC67</option>
                    <option value="PC68">PC68</option>
                    <option value="PC69">PC69</option>
                    <option value="PC70">PC70</option>
                    <option value="PC71">PC71</option>
                    <option value="PC72">PC72</option>
                    <option value="PC73">PC73</option>
                    <option value="PC74">PC74</option>
                    <option value="PC75">PC75</option>
                    <option value="PC76">PC76</option>
                    <option value="PC77">PC77</option>
                    <option value="PC78">PC78</option>
                    <option value="PC79">PC79</option>
                    <option value="PC80">PC80</option>
                    <option value="PC81">PC81</option>
                    <option value="PC82">PC82</option>
                    <option value="PC83">PC83</option>
                    <option value="PC84">PC84</option>
                    <option value="PC85">PC85</option>
                    <option value="PC86">PC86</option>
                    <option value="PC87">PC87</option>
                    <option value="PC88">PC88</option>
                    <option value="PC89">PC89</option>
                    <option value="PC90">PC90</option>
                    <option value="PC91">PC91</option>
                    <option value="PC92">PC92</option>
                    <option value="PC93">PC93</option>
                    <option value="PC94">PC94</option>
                    <option value="PC95">PC95</option>
                    <option value="PC96">PC96</option>
                    <option value="PC97">PC97</option>
                    <option value="PC98">PC98</option>
                    <option value="PC99">PC99</option>
                    <option value="PC100">PC100</option>
                    <option value="PC101">PC101</option>
                    <option value="PC102">PC102</option>
                    <option value="PC103">PC103</option>
                    <option value="PC104">PC104</option>
                    <option value="PC105">PC105</option>
                    <option value="PC106">PC106</option>
                    <option value="PC107">PC107</option>
                    <option value="PC108">PC108</option>
                    <option value="PC109">PC109</option>
                    <option value="PC110">PC110</option>
                    <option value="PC111">PC111</option>
                    <option value="PC112">PC112</option>
                    <option value="PC113">PC113</option>
                    <option value="PC114">PC114</option>
                    <option value="PC115">PC115</option>
                    <option value="PC116">PC116</option>
                    <option value="PC117">PC117</option>
                    <option value="PC118">PC118</option>
                    <option value="PC119">PC119</option>
                    <option value="PC120">PC120</option>
                    <option value="PC121">PC121</option>
                    <option value="PC122">PC122</option>
                    <option value="PC123">PC123</option>
                    <option value="PC124">PC124</option>
                    <option value="PC125">PC125</option>
                    <option value="PC126">PC126</option>
                    <option value="PC127">PC127</option>
                    <option value="PC128">PC128</option>
                    <option value="PC129">PC129</option>
                    <option value="PC130">PC130</option>
                    <option value="PC131">PC131</option>
                    <option value="PC132">PC132</option>
                    <option value="PC133">PC133</option>
                    <option value="PC134">PC134</option>
                    <option value="PC135">PC135</option>
                    <option value="PC136">PC136</option>
                    <option value="PC137">PC137</option>
                    <option value="PC138">PC138</option>
                    <option value="PC139">PC139</option>
                    <option value="PC140">PC140</option>
                    <option value="PC141">PC141</option>
                    <option value="PC142">PC142</option>
                    <option value="PC143">PC143</option>
                    <option value="PC144">PC144</option>
                    <option value="PC145">PC145</option>
                    <option value="PC146">PC146</option>
                    <option value="PC147">PC147</option>
                    <option value="PC148">PC148</option>
                    <option value="PC149">PC149</option>
                    <option value="PC150">PC150</option>
                    <option value="PC151">PC151</option>
                    <option value="PC152">PC152</option>
                    <option value="PC153">PC153</option>
                    <option value="PC154">PC154</option>
                    <option value="PC155">PC155</option>
                    <option value="PC156">PC156</option>
                    <option value="PC157">PC157</option>
                    <option value="PC158">PC158</option>
                    <option value="PC159">PC159</option>
                    <option value="PC160">PC160</option>
                    <option value="PC161">PC161</option>
                    <option value="PC162">PC162</option>
                    <option value="PC163">PC163</option>
                    <option value="PC164">PC164</option>
                    <option value="PC165">PC165</option>
                    <option value="PC166">PC166</option>
                    <option value="PC167">PC167</option>
                    <option value="PC168">PC168</option>
                    <option value="PC169">PC169</option>
                    <option value="PC170">PC170</option>
                    <option value="PC171">PC171</option>
                    <option value="PC172">PC172</option>
                    <option value="PC173">PC173</option>
                    <option value="PC174">PC174</option>
                    <option value="PC175">PC175</option>
                    <option value="PC176">PC176</option>
                    <option value="PC177">PC177</option>
                    <option value="PC178">PC178</option>
                    <option value="PC179">PC179</option>
                    <option value="PC180">PC180</option>
                    <option value="PC181">PC181</option>
                    <option value="PC182">PC182</option>
                    <option value="PC183">PC183</option>
                    <option value="PC184">PC184</option>
                    <option value="PC185">PC185</option>
                    <option value="PC186">PC186</option>
                  </select>
                </div>
              </div>
              <div className="column"><label className="label">Y軸</label>

                <div className="select is-fullwidth">
                  <select name="select" id="select" defaultValue="PC2" onChange={(x)=>{this.setState({bPC:x.target.value})}}>
                    <option value="PC1">PC1</option>
                    <option value="PC2">PC2</option>
                    <option value="PC3">PC3</option>
                    <option value="PC4">PC4</option>
                    <option value="PC5">PC5</option>
                    <option value="PC6">PC6</option>
                    <option value="PC7">PC7</option>
                    <option value="PC8">PC8</option>
                    <option value="PC9">PC9</option>
                    <option value="PC10">PC10</option>
                    <option value="PC11">PC11</option>
                    <option value="PC12">PC12</option>
                    <option value="PC13">PC13</option>
                    <option value="PC14">PC14</option>
                    <option value="PC15">PC15</option>
                    <option value="PC16">PC16</option>
                    <option value="PC17">PC17</option>
                    <option value="PC18">PC18</option>
                    <option value="PC19">PC19</option>
                    <option value="PC20">PC20</option>
                    <option value="PC21">PC21</option>
                    <option value="PC22">PC22</option>
                    <option value="PC23">PC23</option>
                    <option value="PC24">PC24</option>
                    <option value="PC25">PC25</option>
                    <option value="PC26">PC26</option>
                    <option value="PC27">PC27</option>
                    <option value="PC28">PC28</option>
                    <option value="PC29">PC29</option>
                    <option value="PC30">PC30</option>
                    <option value="PC31">PC31</option>
                    <option value="PC32">PC32</option>
                    <option value="PC33">PC33</option>
                    <option value="PC34">PC34</option>
                    <option value="PC35">PC35</option>
                    <option value="PC36">PC36</option>
                    <option value="PC37">PC37</option>
                    <option value="PC38">PC38</option>
                    <option value="PC39">PC39</option>
                    <option value="PC40">PC40</option>
                    <option value="PC41">PC41</option>
                    <option value="PC42">PC42</option>
                    <option value="PC43">PC43</option>
                    <option value="PC44">PC44</option>
                    <option value="PC45">PC45</option>
                    <option value="PC46">PC46</option>
                    <option value="PC47">PC47</option>
                    <option value="PC48">PC48</option>
                    <option value="PC49">PC49</option>
                    <option value="PC50">PC50</option>
                    <option value="PC51">PC51</option>
                    <option value="PC52">PC52</option>
                    <option value="PC53">PC53</option>
                    <option value="PC54">PC54</option>
                    <option value="PC55">PC55</option>
                    <option value="PC56">PC56</option>
                    <option value="PC57">PC57</option>
                    <option value="PC58">PC58</option>
                    <option value="PC59">PC59</option>
                    <option value="PC60">PC60</option>
                    <option value="PC61">PC61</option>
                    <option value="PC62">PC62</option>
                    <option value="PC63">PC63</option>
                    <option value="PC64">PC64</option>
                    <option value="PC65">PC65</option>
                    <option value="PC66">PC66</option>
                    <option value="PC67">PC67</option>
                    <option value="PC68">PC68</option>
                    <option value="PC69">PC69</option>
                    <option value="PC70">PC70</option>
                    <option value="PC71">PC71</option>
                    <option value="PC72">PC72</option>
                    <option value="PC73">PC73</option>
                    <option value="PC74">PC74</option>
                    <option value="PC75">PC75</option>
                    <option value="PC76">PC76</option>
                    <option value="PC77">PC77</option>
                    <option value="PC78">PC78</option>
                    <option value="PC79">PC79</option>
                    <option value="PC80">PC80</option>
                    <option value="PC81">PC81</option>
                    <option value="PC82">PC82</option>
                    <option value="PC83">PC83</option>
                    <option value="PC84">PC84</option>
                    <option value="PC85">PC85</option>
                    <option value="PC86">PC86</option>
                    <option value="PC87">PC87</option>
                    <option value="PC88">PC88</option>
                    <option value="PC89">PC89</option>
                    <option value="PC90">PC90</option>
                    <option value="PC91">PC91</option>
                    <option value="PC92">PC92</option>
                    <option value="PC93">PC93</option>
                    <option value="PC94">PC94</option>
                    <option value="PC95">PC95</option>
                    <option value="PC96">PC96</option>
                    <option value="PC97">PC97</option>
                    <option value="PC98">PC98</option>
                    <option value="PC99">PC99</option>
                    <option value="PC100">PC100</option>
                    <option value="PC101">PC101</option>
                    <option value="PC102">PC102</option>
                    <option value="PC103">PC103</option>
                    <option value="PC104">PC104</option>
                    <option value="PC105">PC105</option>
                    <option value="PC106">PC106</option>
                    <option value="PC107">PC107</option>
                    <option value="PC108">PC108</option>
                    <option value="PC109">PC109</option>
                    <option value="PC110">PC110</option>
                    <option value="PC111">PC111</option>
                    <option value="PC112">PC112</option>
                    <option value="PC113">PC113</option>
                    <option value="PC114">PC114</option>
                    <option value="PC115">PC115</option>
                    <option value="PC116">PC116</option>
                    <option value="PC117">PC117</option>
                    <option value="PC118">PC118</option>
                    <option value="PC119">PC119</option>
                    <option value="PC120">PC120</option>
                    <option value="PC121">PC121</option>
                    <option value="PC122">PC122</option>
                    <option value="PC123">PC123</option>
                    <option value="PC124">PC124</option>
                    <option value="PC125">PC125</option>
                    <option value="PC126">PC126</option>
                    <option value="PC127">PC127</option>
                    <option value="PC128">PC128</option>
                    <option value="PC129">PC129</option>
                    <option value="PC130">PC130</option>
                    <option value="PC131">PC131</option>
                    <option value="PC132">PC132</option>
                    <option value="PC133">PC133</option>
                    <option value="PC134">PC134</option>
                    <option value="PC135">PC135</option>
                    <option value="PC136">PC136</option>
                    <option value="PC137">PC137</option>
                    <option value="PC138">PC138</option>
                    <option value="PC139">PC139</option>
                    <option value="PC140">PC140</option>
                    <option value="PC141">PC141</option>
                    <option value="PC142">PC142</option>
                    <option value="PC143">PC143</option>
                    <option value="PC144">PC144</option>
                    <option value="PC145">PC145</option>
                    <option value="PC146">PC146</option>
                    <option value="PC147">PC147</option>
                    <option value="PC148">PC148</option>
                    <option value="PC149">PC149</option>
                    <option value="PC150">PC150</option>
                    <option value="PC151">PC151</option>
                    <option value="PC152">PC152</option>
                    <option value="PC153">PC153</option>
                    <option value="PC154">PC154</option>
                    <option value="PC155">PC155</option>
                    <option value="PC156">PC156</option>
                    <option value="PC157">PC157</option>
                    <option value="PC158">PC158</option>
                    <option value="PC159">PC159</option>
                    <option value="PC160">PC160</option>
                    <option value="PC161">PC161</option>
                    <option value="PC162">PC162</option>
                    <option value="PC163">PC163</option>
                    <option value="PC164">PC164</option>
                    <option value="PC165">PC165</option>
                    <option value="PC166">PC166</option>
                    <option value="PC167">PC167</option>
                    <option value="PC168">PC168</option>
                    <option value="PC169">PC169</option>
                    <option value="PC170">PC170</option>
                    <option value="PC171">PC171</option>
                    <option value="PC172">PC172</option>
                    <option value="PC173">PC173</option>
                    <option value="PC174">PC174</option>
                    <option value="PC175">PC175</option>
                    <option value="PC176">PC176</option>
                    <option value="PC177">PC177</option>
                    <option value="PC178">PC178</option>
                    <option value="PC179">PC179</option>
                    <option value="PC180">PC180</option>
                    <option value="PC181">PC181</option>
                    <option value="PC182">PC182</option>
                    <option value="PC183">PC183</option>
                    <option value="PC184">PC184</option>
                    <option value="PC185">PC185</option>
                    <option value="PC186">PC186</option>
                  </select>
                </div>

              </div>
              <div className="column"><label className="label">種類分け</label>
                <div className="select is-fullwidth">
                  <select name="select" id="select" onChange={(x)=>{this.setState({colors:x.target.value})}}>

                    <option value="gender">性別</option>
                    <option value="year">年齢</option>
                    <option value="study">研究年月</option>
                  </select>
                </div>
              </div>
              <div className="column"><label className="label">色分け上</label>
                <div className="select is-fullwidth">
                  <select name="select" id="select" onChange={(x)=>{this.setState({BW:x.target.value})}}>

                    <option value="best">positive</option>
                    <option value="worst">negative</option>
                  </select>
                </div>
              </div>
              <div className="column"><label className="label">色分け下</label>
                <div className="select is-fullwidth">
                  <select  name="select" id="select" onChange={(x)=>{this.setState({bBW:x.target.value})}}>

                    <option value="best">positive</option>
                    <option value="worst">negative</option>
                  </select>
                </div>
              </div>
            </div>

            <div >
              <div >
                <svg width={2500} height={410}>
                  <g transform = {`translate(${scatterPlotMargin},${scatterPlotMargin-30})`}>
                    <line x1='0' y1='0' x2={scatterPlotSize} y2='0' stroke='black'/>
                    <line x1='0' y1={yScale(0)} x2={scatterPlotSize} y2={yScale(0)} stroke='black'/>
                    <line x1='0' y1={scatterPlotSize} x2={scatterPlotSize} y2={scatterPlotSize} stroke='black'/>

                    <line x1='0' y1='0' x2='0' y2={scatterPlotSize} stroke='black'/>
                    <line x1={xScale(0)} y1='0' x2={xScale(0)} y2={scatterPlotSize} stroke='black'/>
                    <line x1={scatterPlotSize} y1='0' x2={scatterPlotSize} y2={scatterPlotSize} stroke='black'/>

                    <g transform ={`rotate(-90)`}>
                      <text x={-(350/2)} y='-25' textAnchor='middle' >{this.state.bPC}</text>
                    </g>
                    <g>
                      <text x={350/2} y={390} textAnchor='middle'>{this.state.PC}</text>
                    </g>
                    <g transform ={`translate(100,100)rotate(-90)`}>
                      <text x={15} y={390} textAnchor='middle'>{this.state.PC}</text>
                    </g>
                    <g transform ={`translate(100,100)rotate(-90)`}>
                      <text x={-185} y={390} textAnchor='middle'>{this.state.bPC}</text>
                    </g>
                    {
                      xScale.ticks().map((xx,i) => {
                        return <g  >
                          <line x1={xScale(xx)} y1={350} x2={xScale(xx)} y2={355} stroke='black' />
                          <text x={xScale(xx)} y={370} textAnchor='middle'>{xx}</text>    
                        </g>
                      })
                    }
                    {
                      yScale.ticks().map((yy,i) => {
                        return <g>
                          <line x1='0' y1={yScale(yy)} x2='-5' y2={yScale(yy)} stroke='black' />
                          <text x='-10' y={yScale(yy)+5} textAnchor='end'>{yy}</text>
                        </g>
                      })
                    }
                    {
                      names.map((v,i) => {
                        return <g key={v.id} onClick={()=>{
                            this.setState({
                              selectId:v.id, 
                              show:v[this.state.colors]+" : ("+(+v[this.state.PC]).toFixed(2)+" , "+(+v[this.state.bPC]).toFixed(2)+")"

                            })
                            //this.setState({
                            //this.state.selectId === v.id ? selectId:null : selectId:v.id
                            //show:v[this.state.colors]+" : ("+(+v[this.state.PC]).toFixed(2)+" , "+(+v[this.state.bPC]).toFixed(2)+")"

                          }}>
                          <circle  
                            transform={`translate(${xScale(v[this.state.PC])},${yScale(v[this.state.bPC])})`}
                            fill = {colorScale(v[this.state.colors])}
                            r="3"
                            style={{transition: 'transform 2s'}}
                            >
                            <title>{(+v[this.state.PC]).toFixed(2)} , {(+v[this.state.bPC]).toFixed(2)}</title>
                          </circle>
                        </g>
                      })
                    }
                    {
                      color[this.state.colors].map((s,j) => {
                        return <g key={j} class = "finger" onClick={()=>{
                            // if (this.state.colors === "gender") {
                            //   const newGenderJudge = Array.from(this.state.genderJudge)
                            //   newGenderJudge[j] = !newGenderJudge[j]
                            //   this.setState({ genderJudge: newGenderJudge })
                            // } else if (this.state.color === "year") {
                            //   const newYearJudge = Array.from(this.state.yearJudge)
                            //   newYearJudge[j] = !newYearJudge[j]
                            //   this.setState({ yearJudge: newYearJudge })
                            // } else {
                            //   const newStudyJudge = Array.from(this.state.studyJudge)
                            //   newStudyJudge[j] = !newStudyJudge[j]
                            //   this.setState({ studyJudge: newStudyJudge })
                            // }

                            const visible = this.state.genderJudge.map((w,k)=>{
                              return w
                            })
                            if(this.state.colors==="gender"){
                              visible[j] = !visible[j]
                            }


                            const visible2 = this.state.yearJudge.map((x,l)=>{
                              return x
                            })
                            if(this.state.colors==="year"){
                              visible2[j] = !visible2[j]
                            }


                            const visible3 = this.state.studyJudge.map((y,m)=>{
                              return y
                            })
                            if(this.state.colors==="study"){
                              visible3[j] = !visible3[j]
                            }

                            this.setState({genderJudge:visible,yearJudge:visible2,studyJudge:visible3})

                          }

                                                                   }>
                          <rect x={360} y={j*50} width='10' height='10' fill={colorScale(s)}
                            />
                          <text x={385} y={j*50+10}>{color[this.state.colors][j]}</text>
                        </g>
                      })
                    }
                    <g  class = "finger" onClick={()=>{
                        this.setState({
                          selectId:null
                        })
                      }}>
                      <text x={385} y={300}>reset</text>
                    </g>
                  </g>
                  
                  <g transform = {`translate(${parallelPlotMargin},${parallelPlotMargin-30})`}>
                    {
                      respondent.bwBar[this.state.PC].best.map((v, i) => {  
                        return<g key={i} class = "arrow" onClick={()=>{
                            this.setState({show1:"(上)positive"+(i+1)+" : "+respondent.question[v.label]})
                          }}>
                          <line x1={80*(i+2)+440} y1={min-50} x2={80*(i+2)+440} y2={max+0.05*respondent.parallel.length-50} stroke='black' />
                          <title>{respondent.question[v.label]}</title>
                          <text x={80*(i+2)+440} y={min-55} textAnchor='middle'>positive{i+1}</text>           
                        </g>
                      })
                    }
                    {
                      respondent.bwBar[this.state.PC].worst.map((vv, ii) => {  
                        return<g key={ii} class = "arrow" onClick={()=>{
                            this.setState({show1:"negative"+(ii+1)+" : "+respondent.question[vv.label]})
                          }}>>
                          <line x1={80*(ii+7)+440} y1={min-50} x2={80*(ii+7)+440} y2={max+0.05*respondent.parallel.length-50} stroke='black'/>
                          <title>{respondent.question[vv.label]}</title>
                          <text x={80*(11-ii)+440} y={min-55} textAnchor='middle'>negative{1+ii}</text>
                        </g>
                      })
                    }
                    {
                      respondent.bwBar[this.state.bPC].best.map((bv, bi) => {  
                        return<g key={bi} class = "arrow" onClick={()=>{
                            this.setState({show2:"(下)positive"+(bi+1)+" : "+respondent.question[bv.label]})
                          }}>>           
                          <line x1={80*(bi+2)+440} y1={bmin-150} x2={80*(bi+2)+440} y2={bmax+0.05*respondent.parallel.length-150} stroke='black' />
                          <title>{respondent.question[bv.label]}</title>
                          <text x={80*(bi+2)+440} y={bmin-155} textAnchor='middle'>positive{bi+1}</text>
                        </g>
                      })
                    }
                    {
                      respondent.bwBar[this.state.bPC].worst.map((bvv, bii) => {  
                        return<g key={bii} class = "arrow" onClick={()=>{
                            this.setState({show2:"negative"+(bii+1)+" : "+respondent.question[bvv.label]})
                          }}>>          
                          <line x1={80*(bii+7)+440} y1={bmin-150} x2={80*(bii+7)+440} y2={bmax+0.05*respondent.parallel.length-150} stroke='black'/>
                          <title>{respondent.question[bvv.label]}</title>
                          <text x={80*(11-bii)+440} y={bmin-155} textAnchor='middle'>negative{1+bii}</text>
                        </g>
                      })     
                    }
                    {
                      respondent.parallel.map((w,j) => {            
                        const path = d3.path()
                        path.moveTo(600, yScale_b0(w[respondent.bwBar[this.state.PC].best[0].label])+lineInterval*j-50)
                        path.lineTo(680, yScale_b1(w[respondent.bwBar[this.state.PC].best[1].label])+lineInterval*j-50)
                        path.lineTo(760, yScale_b2(w[respondent.bwBar[this.state.PC].best[2].label])+lineInterval*j-50)
                        path.lineTo(840, yScale_b3(w[respondent.bwBar[this.state.PC].best[3].label])+lineInterval*j-50)
                        path.lineTo(920, yScale_b4(w[respondent.bwBar[this.state.PC].best[4].label])+lineInterval*j-50)
                        path.lineTo(1000, yScale_w4(w[respondent.bwBar[this.state.PC].worst[4].label])+lineInterval*j-50)
                        return <path 
                                 key={j} 
                                 d={path.toString()} 
                                 stroke={colorScale2(w[respondent.bwBar[this.state.PC][this.state.BW][0].label])} 
                                 strokeWidth = {this.state.selectId === w.id  ? changedStrokeWidth : pcStrokeWidth}
                                 opacity =  {this.state.selectId === null ? pcOpacity
                          : this.state.selectId === w.id  ? deepPcOpacity : lightPcOpacity }
                                 fill='none'
                                 />
                      })
                    } 


                    {
                      respondent.parallel.map((ww,jj) => {           
                        const path = d3.path()            
                        path.moveTo(1320, yScale_w0(ww[respondent.bwBar[this.state.PC].worst[0].label])+lineInterval*jj-50)
                        path.lineTo(1240, yScale_w1(ww[respondent.bwBar[this.state.PC].worst[1].label])+lineInterval*jj-50)
                        path.lineTo(1160, yScale_w2(ww[respondent.bwBar[this.state.PC].worst[2].label])+lineInterval*jj-50)
                        path.lineTo(1080, yScale_w3(ww[respondent.bwBar[this.state.PC].worst[3].label])+lineInterval*jj-50)
                        path.lineTo(1000, yScale_w4(ww[respondent.bwBar[this.state.PC].worst[4].label])+lineInterval*jj-50)
                        return <path 
                                 key={jj} 
                                 d={path.toString()} 
                                 stroke={colorScale2(ww[respondent.bwBar[this.state.PC][this.state.BW][0].label])} 
                                 strokeWidth = {this.state.selectId === ww.id  ? changedStrokeWidth : pcStrokeWidth}
                                 opacity =  {this.state.selectId === null ? pcOpacity
                          : this.state.selectId === ww.id  ? deepPcOpacity : lightPcOpacity }
                                 fill='none'/>         
                      })
                    }
                    {
                      respondent.parallel.map((bw,bj) => {           
                        const path = d3.path()     
                        path.moveTo(600, xScale_b0(bw[respondent.bwBar[this.state.bPC].best[0].label])+lineInterval*bj-150)
                        path.lineTo(680, xScale_b1(bw[respondent.bwBar[this.state.bPC].best[1].label])+lineInterval*bj-150)
                        path.lineTo(760, xScale_b2(bw[respondent.bwBar[this.state.bPC].best[2].label])+lineInterval*bj-150)
                        path.lineTo(840, xScale_b3(bw[respondent.bwBar[this.state.bPC].best[3].label])+lineInterval*bj-150)
                        path.lineTo(920, xScale_b4(bw[respondent.bwBar[this.state.bPC].best[4].label])+lineInterval*bj-150)
                        path.lineTo(1000, xScale_w4(bw[respondent.bwBar[this.state.bPC].worst[4].label])+lineInterval*bj-150)
                        return <path 
                                 key={bj} 
                                 d={path.toString()} 
                                 stroke={colorScale3(bw[respondent.bwBar[this.state.bPC][this.state.bBW][0].label])} 
                                 strokeWidth = {this.state.selectId === bw.id  ? changedStrokeWidth : pcStrokeWidth}
                                 opacity =  {this.state.selectId === null ? pcOpacity
                          : this.state.selectId === bw.id  ? deepPcOpacity : lightPcOpacity }
                                 fill='none'/>            
                      })
                    } 
                    {
                      respondent.parallel.map((bww,bjj) => {            
                        const path = d3.path()
                        path.moveTo(1320, xScale_w0(bww[respondent.bwBar[this.state.bPC].worst[0].label])+lineInterval*bjj-150)
                        path.lineTo(1240, xScale_w1(bww[respondent.bwBar[this.state.bPC].worst[1].label])+lineInterval*bjj-150)
                        path.lineTo(1160, xScale_w2(bww[respondent.bwBar[this.state.bPC].worst[2].label])+lineInterval*bjj-150)
                        path.lineTo(1080, xScale_w3(bww[respondent.bwBar[this.state.bPC].worst[3].label])+lineInterval*bjj-150)
                        path.lineTo(1000, xScale_w4(bww[respondent.bwBar[this.state.bPC].worst[4].label])+lineInterval*bjj-150)           
                        return <path 
                                 key={bjj} 
                                 d={path.toString()} 
                                 stroke={colorScale3(bww[respondent.bwBar[this.state.bPC][this.state.bBW][0].label])} 
                                 strokeWidth = {this.state.selectId === bww.id  ? changedStrokeWidth : pcStrokeWidth}
                                 opacity =  {this.state.selectId === null ? pcOpacity
                          : this.state.selectId === bww.id  ? deepPcOpacity : lightPcOpacity } 
                                 fill='none'/>           
                      })
                    } 

                  </g>
                </svg>
                <div className='center'>information</div>
                <div className='text'>
                  {this.state.selectId != null &&
                    <p>{iris.scatterPlot[this.state.selectId][this.state.colors]}:({(+iris.scatterPlot[this.state.selectId][this.state.PC]).toFixed(2)},{(+iris.scatterPlot[this.state.selectId][this.state.bPC]).toFixed(2)})</p>}
                  <p>{this.state.show1}</p>
                  <p>{this.state.show2}</p>
                </div>
              </div>
            </div> 
          </div>
        }
      }



      class SoonChart extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            ranking: "PC1",
            show1:[],
            show2:[]
          };
        }
        render(){
          const ranker = this.props.data

          const width = 1000
          const height = 350
          const h = 40

          const rScale = d3.scaleLinear()
          .domain([0,2])
          .range([0,width+100])
          .nice()

          return<div>
            <div><h3>Positive Top5 & Negative Top5</h3></div>
            <div>
              <select name="select" id="select" onChange={(x)=>{this.setState({ranking:x.target.value})}}>
                <option value="PC1">PC1</option>
                <option value="PC2">PC2</option>
                <option value="PC3">PC3</option>
                <option value="PC4">PC4</option>
                <option value="PC5">PC5</option>
                <option value="PC6">PC6</option>
                <option value="PC7">PC7</option>
                <option value="PC8">PC8</option>
                <option value="PC9">PC9</option>
                <option value="PC10">PC10</option>
                <option value="PC11">PC11</option>
                <option value="PC12">PC12</option>
                <option value="PC13">PC13</option>
                <option value="PC14">PC14</option>
                <option value="PC15">PC15</option>
                <option value="PC16">PC16</option>
                <option value="PC17">PC17</option>
                <option value="PC18">PC18</option>
                <option value="PC19">PC19</option>
                <option value="PC20">PC20</option>
                <option value="PC21">PC21</option>
                <option value="PC22">PC22</option>
                <option value="PC23">PC23</option>
                <option value="PC24">PC24</option>
                <option value="PC25">PC25</option>
                <option value="PC26">PC26</option>
                <option value="PC27">PC27</option>
                <option value="PC28">PC28</option>
                <option value="PC29">PC29</option>
                <option value="PC30">PC30</option>
                <option value="PC31">PC31</option>
                <option value="PC32">PC32</option>
                <option value="PC33">PC33</option>
                <option value="PC34">PC34</option>
                <option value="PC35">PC35</option>
                <option value="PC36">PC36</option>
                <option value="PC37">PC37</option>
                <option value="PC38">PC38</option>
                <option value="PC39">PC39</option>
                <option value="PC40">PC40</option>
                <option value="PC41">PC41</option>
                <option value="PC42">PC42</option>
                <option value="PC43">PC43</option>
                <option value="PC44">PC44</option>
                <option value="PC45">PC45</option>
                <option value="PC46">PC46</option>
                <option value="PC47">PC47</option>
                <option value="PC48">PC48</option>
                <option value="PC49">PC49</option>
                <option value="PC50">PC50</option>
                <option value="PC51">PC51</option>
                <option value="PC52">PC52</option>
                <option value="PC53">PC53</option>
                <option value="PC54">PC54</option>
                <option value="PC55">PC55</option>
                <option value="PC56">PC56</option>
                <option value="PC57">PC57</option>
                <option value="PC58">PC58</option>
                <option value="PC59">PC59</option>
                <option value="PC60">PC60</option>
                <option value="PC61">PC61</option>
                <option value="PC62">PC62</option>
                <option value="PC63">PC63</option>
                <option value="PC64">PC64</option>
                <option value="PC65">PC65</option>
                <option value="PC66">PC66</option>
                <option value="PC67">PC67</option>
                <option value="PC68">PC68</option>
                <option value="PC69">PC69</option>
                <option value="PC70">PC70</option>
                <option value="PC71">PC71</option>
                <option value="PC72">PC72</option>
                <option value="PC73">PC73</option>
                <option value="PC74">PC74</option>
                <option value="PC75">PC75</option>
                <option value="PC76">PC76</option>
                <option value="PC77">PC77</option>
                <option value="PC78">PC78</option>
                <option value="PC79">PC79</option>
                <option value="PC80">PC80</option>
                <option value="PC81">PC81</option>
                <option value="PC82">PC82</option>
                <option value="PC83">PC83</option>
                <option value="PC84">PC84</option>
                <option value="PC85">PC85</option>
                <option value="PC86">PC86</option>
                <option value="PC87">PC87</option>
                <option value="PC88">PC88</option>
                <option value="PC89">PC89</option>
                <option value="PC90">PC90</option>
                <option value="PC91">PC91</option>
                <option value="PC92">PC92</option>
                <option value="PC93">PC93</option>
                <option value="PC94">PC94</option>
                <option value="PC95">PC95</option>
                <option value="PC96">PC96</option>
                <option value="PC97">PC97</option>
                <option value="PC98">PC98</option>
                <option value="PC99">PC99</option>
                <option value="PC100">PC100</option>
                <option value="PC101">PC101</option>
                <option value="PC102">PC102</option>
                <option value="PC103">PC103</option>
                <option value="PC104">PC104</option>
                <option value="PC105">PC105</option>
                <option value="PC106">PC106</option>
                <option value="PC107">PC107</option>
                <option value="PC108">PC108</option>
                <option value="PC109">PC109</option>
                <option value="PC110">PC110</option>
                <option value="PC111">PC111</option>
                <option value="PC112">PC112</option>
                <option value="PC113">PC113</option>
                <option value="PC114">PC114</option>
                <option value="PC115">PC115</option>
                <option value="PC116">PC116</option>
                <option value="PC117">PC117</option>
                <option value="PC118">PC118</option>
                <option value="PC119">PC119</option>
                <option value="PC120">PC120</option>
                <option value="PC121">PC121</option>
                <option value="PC122">PC122</option>
                <option value="PC123">PC123</option>
                <option value="PC124">PC124</option>
                <option value="PC125">PC125</option>
                <option value="PC126">PC126</option>
                <option value="PC127">PC127</option>
                <option value="PC128">PC128</option>
                <option value="PC129">PC129</option>
                <option value="PC130">PC130</option>
                <option value="PC131">PC131</option>
                <option value="PC132">PC132</option>
                <option value="PC133">PC133</option>
                <option value="PC134">PC134</option>
                <option value="PC135">PC135</option>
                <option value="PC136">PC136</option>
                <option value="PC137">PC137</option>
                <option value="PC138">PC138</option>
                <option value="PC139">PC139</option>
                <option value="PC140">PC140</option>
                <option value="PC141">PC141</option>
                <option value="PC142">PC142</option>
                <option value="PC143">PC143</option>
                <option value="PC144">PC144</option>
                <option value="PC145">PC145</option>
                <option value="PC146">PC146</option>
                <option value="PC147">PC147</option>
                <option value="PC148">PC148</option>
                <option value="PC149">PC149</option>
                <option value="PC150">PC150</option>
                <option value="PC151">PC151</option>
                <option value="PC152">PC152</option>
                <option value="PC153">PC153</option>
                <option value="PC154">PC154</option>
                <option value="PC155">PC155</option>
                <option value="PC156">PC156</option>
                <option value="PC157">PC157</option>
                <option value="PC158">PC158</option>
                <option value="PC159">PC159</option>
                <option value="PC160">PC160</option>
                <option value="PC161">PC161</option>
                <option value="PC162">PC162</option>
                <option value="PC163">PC163</option>
                <option value="PC164">PC164</option>
                <option value="PC165">PC165</option>
                <option value="PC166">PC166</option>
                <option value="PC167">PC167</option>
                <option value="PC168">PC168</option>
                <option value="PC169">PC169</option>
                <option value="PC170">PC170</option>
                <option value="PC171">PC171</option>
                <option value="PC172">PC172</option>
                <option value="PC173">PC173</option>
                <option value="PC174">PC174</option>
                <option value="PC175">PC175</option>
                <option value="PC176">PC176</option>
                <option value="PC177">PC177</option>
                <option value="PC178">PC178</option>
                <option value="PC179">PC179</option>
                <option value="PC180">PC180</option>
                <option value="PC181">PC181</option>
                <option value="PC182">PC182</option>
                <option value="PC183">PC183</option>
                <option value="PC184">PC184</option>
                <option value="PC185">PC185</option>
                <option value="PC186">PC186</option>
              </select>
            </div>
            <div>
              <svg width={width} height={height}>
                <line x1="600" y1="30" x2="600" y2={600-270} stroke="black"/>
                <line x1="200" y1="30" x2="200" y2={600-270} stroke="black"/>
                {
                  ranker.bwBar[this.state.ranking].best.map((v, i) => {
                    return(
                      <g onClick={()=>{
                          this.setState({show1:"positive"+(i+1)+" "+ranker.question[(+v.label)]+" : "+(+v.value).toFixed(3)})
                        }}>
                        <rect x="600" y={60*(i+1)-h/2} width={rScale(v.value)} height={h} fill="#FFBBFF">
                          <title>{ranker.question[(+v.label)]}</title>
                        </rect>
                        <text x="602" y={68+60*i} fontSize="20" fill = "black">{(+v.value).toFixed(3)}</text>
                      </g>
                    )
                  })
                }
                {
                  ranker.bwBar[this.state.ranking].worst.map((v, i) => {
                    return(
                      <g onClick={()=>{
                          this.setState({show2:"negative"+(i+1)+" "+ranker.question[(+v.label)]+" : "+(+v.value).toFixed(3)})
                        }}>
                        <rect x="200" y={60*(i+1)-h/2} width={-1*rScale(v.value)} height={h} fill="#BBFFFF">
                          <title>{ranker.question[(+v.label)]}</title>
                        </rect>
                        <text x="202" y={68+60*i} fontSize="20" fill = "black">{(+v.value).toFixed(3)}</text>
                      </g>
                    )
                  })
                }
              </svg>
              <div className='center'>information</div>
              <div className='text'>
                <p>{this.state.show1}</p>
                <p>{this.state.show2}</p>
              </div>
            </div>
          </div>
        }
      }
      class MOTIChart extends React.Component {
        constructor (props) {
          super(props)
          this.state = {
            ranking : 'PC1',
            show:[]
          }
        } 
        render () {
          const ContributionRate = this.props.data
          const height = 700
          const length = ContributionRate.contribution.length
          const width = length*1.8
          const xScale = d3.scaleLinear()
          .domain([0,2])
          .range([140,width])
          .nice()
          const yScale = d3.scaleLinear()
          .domain([0,1])
          .range([height,50])      
          .nice()
          const colorScale = d3.scaleOrdinal(d3.schemeCategory10)
          const a = width/length/(ContributionRate.contribution.length+1)    
          return <div>
            <div><h3>Cumulative Contribution Rate</h3></div>
            <div>


              <svg width={width+1000} height={height/2+50}>
                <g transform={`translate(${0},${0})`}>
                  <line x1='35'y1="26"x2="35"y2={height/2}stroke='black'/>
                  <line x1={width+844.3}y1="25"x2={width+844.3}y2={height/2}stroke="black"/>
                  {
                    yScale.ticks().map((v, i) => {
                      return <g key={i}>
                        <line x1='35' y1={yScale(v)/2} x2={width+843.3} y2={yScale(v)/2} stroke='black' />
                        <text x="10" y={yScale(v)/2} fill='black'textAnchor='middle'>{v}</text>
                      </g>
                    })
                  }
                  {
                    ContributionRate.contribution.map((v,i)=>{  
                      return<g key={i} onClick={()=>{
                          this.setState({show:v.name+" "+"ContributionRate : "+v.value})
                        }}>
                        <rect x={width/length*(i+1)+(i*10.74)+42.8} y={(yScale(v.value))/2} width={a+10} height={height/2-((yScale(v.value)))/2} fill={colorScale(0)}>
                          <title>{v.name+"\n"+"ContributionRate : "+v.value}</title>
                        </rect>           
                        {i % 20 === 0 ? 
                          <text x={width/length*(i+1)+(i*10.74)+32} y={height/2+20} font-size="15" fill='black'textAncor="middle" >{v.name}</text> : null}

                      </g>
                    })
                  }
                </g>
              </svg>
              <div className='center'>information</div>
              <div className='text'>
                <p>{this.state.show}</p>
              </div>

            </div>
          </div>
        }
      }

      class MOTTHIChart extends React.Component {
        constructor (props) {
          super(props)
          this.state = {
            ranking : 'PC1',
            show:[]
          }
        }

        render () {
          const eigenValue=this.props.data

          const height = 700
          const length = eigenValue.scree.length
          const width = length*1.8
          const xScale = d3.scaleLinear()
          .domain([0,2])
          .range([140,width])
          .nice()
          const yScale = d3.scaleLinear()
          .domain([0,d3.max(eigenValue.scree.map((series)=>d3.max(series.value)))])
          .range([height,50])      
          .nice()
          const colorScale = d3.scaleOrdinal(d3.schemeCategory10)
          const a = width/length/(eigenValue.scree.length+1)
          return <div>
            <div><h3>Scree Graph</h3></div>
            <div><svg width={width+1000} height={height/2+50}>
              <line x1='150'y1="25"x2="150"y2={height/2}stroke='black'/>
              {
                yScale.ticks().map((v, i) => {
                  return <g key={i}>
                    <line x1='150' y1={yScale(v)/2} x2={width+844.3} y2={yScale(v)/2} stroke='black' />
                    <text x="125" y={yScale(v)/2} fill='black'textAnchor='middle'>{v}</text>
                  </g>
                })
              }
              {
                eigenValue.scree.map((v,i)=>{
                  return<g key={i} onClick={()=>{
                      this.setState({show:v.name+" "+"eigenValue : "+v.value})
                    }}>
                    <rect x={width/length*(i+1)+(i*3.74)+148.8} y={(yScale(v.value))/2} width={a+3} height={height/2-(yScale(v.value))/2} fill={colorScale(0)}>
                      <title>{v.name+"\n"+"eigenValue : "+v.value}</title>
                    </rect>
                    {i % 20 === 0 ? 
                      <text x={width/length*(i+1)+(i*3.74)+138} y={height/2+20} font-size="15" fill='black'textAncor="middle" >{v.name}</text> : null}
                  </g>
                })
              }


              </svg>
              <div className='center'>information</div>
              <div className='text'>
                <p>{this.state.show}</p>
              </div>
            </div>
          </div>
        }
      }
      class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            data: null
          };
        }

        componentDidMount() {
          const url =
                "https://raw.githubusercontent.com/syukugo/Son-s_son/master/climax.json";
          // const url = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2004014/oripara.json'
          // const url = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2004014/qiita.json'
          window
            .fetch(url)
            .then(response => response.json())
            .then((data)=>{
            data.scatterPlot.forEach((name,number)=>{
              name.id = number       
            })
            data.parallel.forEach((item,index)=>{
              item.id = index
            })
            this.setState({ data })
          })
        }

        render() {
          const { data } = this.state;
          return (
            <>
              <section className="section">
                <div className="container">
                  <div className="content has-text-centered">
                    <h3>2019年度尾上ゼミ 情報科学研究</h3>
                    <h1>放射線が及ぼす生体影響に関するアンケートの多変量可視化</h1>
                    <h2>目的</h2>
                    <p align="left">2018年に研費基盤研究B「放射線生体影響に関する物理学、疫学、生物学の認識文化の比較分析」(<a href="http://radi.rirc.kyoto-u.ac.jp/sci/">http://radi.rirc.kyoto-u.ac.jp/sci/</a>)にて放射線が及ぼす生体影響および分野間コミュニケーションについての認識についてのアンケートが実施された。<br />しかし、本アンケートでは可視化手法として円グラフと棒グラフを採用しており、得ることが出来る情報は最低限の集計結果のみである。<br />そこで本研究の目的は上記のアンケートデータに対し、多変量データの可視化手法を適用し、複数の質問に対する回答の相関関係を調べることでより深く結果から分かることを読み取る事である。
                    </p>
                    <h2>データの説明</h2>
                    <p align="left">使用したアンケートデータは、文系理系を問わない559人の研究者・科学者を対象に、回答者の年齢、性別、専門分野等の質問に始まり、他分野の研究者・科学者との交流人数、福島原発事故以前・以後の放射線医療に対する意識、福島原発事故直後・現在の福島県産の農作物に対する意識や放射線にまつわる知識の有無等を問われたものである。全39個の質問項目のカテゴリデータを数量化し、その際に、名義尺度の質問項目はダミー変数を用いてYESまたはNOで表した。その結果合計186個の数値変数が可視化対象となった。</p>
                    <p align="left">順序尺度:多段階評価の否定的な選択肢の側から順に、「良い(2)、どちらでもない(1)、悪い(0)」というように数値を振ることで数量化を行っている。</p>
                    <p align="left">名義尺度:「所属は文系か理系か」という質問項目に対し、「所属は文系か Yes(1) or No(0)」「所属は理系か Yes(1) or No(0)」という質問方法に置き換えて数量化を行っている。</p>
                    
                   
                    <h2>可視化手法</h2>
                    <p align="left">本研究では、複数の質問の相関関係を調べることに重きを置いているため可視化手法として散布図と平行座標プロットを用いた。その際に、データ全体の情報を読み取りやすくするため、事前に主成分分析という分析手法を行うツール「Easy PCA」(<a href="http://hoxom-hist.appspot.com/pca.html">http://hoxom-hist.appspot.com/pca.html</a>)を用いてアンケートデータ中の186個の可視化対象項目に主成分分析を行っている。<br />標本数559件の回答をユーザーがプルダウンで指定した2つの主成分を軸をとして散布図で表示する。その際に選択したそれぞれの主成分に関して回答者ごとの回答を平行座標プロットで表示する。また、プルダウンで指定した主成分の因子負荷量を棒グラフで表示する。<br />本研究では意味付けのために1つ1つの主成分に対し、186個もの要素を確認することは労力と時間の観点から現実性に欠け、また、確認する要素が少なすぎる場合、主成分の意味を見出すことが困難になると考えたため、因子負荷量の正の値と負の値のそれぞれの絶対値を上位5つずつ取り、平行座標プロットの座標軸と因子負荷量の棒グラフに用いている。<br /></p>
                    <p align="left">主成分分析:主成分分析とは主成分(PC : principal component)と呼ばれる合成変数を生成し、多次元データの次元数を要約することで、データの情報を可能な限り損なうことなく、理解しやすい形に変化させる分析手法のひとつである。元々のデータ上の変数が10個ある場合、主成分も第1から第10まで生成される。
                    </p>
                    
                    <p align="left">
                      平行座標プロット:平行座標プロットとは多次元データを構成する各変数を表す座標軸を平行に並べ、各軸の変数値を線分でつなぐことによって全変数の中で各個体の辿った値を一画面で読み取ることが可能になる可視化手法のひとつである。2変数間の正の相関が強くなると線分は平行に近くなり、逆に負の相関が強くなると座標軸の中心で線分が交差する。
                    </p>
                    <p align="left">因子負荷量:主成分分析によって生成された主成分は複数の変数の要素を持っており、そのままでは適切な意味を持たないため、ユーザー自身が意味づけをする必要がある。その際に1つ1つの主成分に対し、強く寄与している変数を見るための相関係数が因子負荷量である。<br />因子負荷量が絶対値1に近いほど、その変数が主成分に強く寄与していると言える。
                    </p>
                    <div style={{ margin: "2em" }}>
                      {data == null ? "loading" : <SonChart data={data} />}
                      <p align="left">散布図:プルダウンを散布図上部に3つ設置している。X軸・Y軸と表示されている下部のプルダウンで、散布図上でX軸・Y軸として表示する主成分をそれぞれ指定し、種類分けと表示されている下部のプルダウンで、散布図の配色を決める項目を指定することでユーザが選択した散布図を表示する。<br />また、グラフの右側に表示されている色のラベルをクリックすることで、その色と同色の点を削除する。
                      </p><p align="left">平行座標プロット:散布図に用いている2つの主成分の平行座標プロットを表示する(上部の平行座標プロットはX軸、下部の平行座標プロットはY軸とリンクしている)。用いている10本の変数は表示している主成分の因子負荷量の正の値と負の値のそれぞれの絶対値を上位5つずつ取得したものである。また、プルダウンを平行座標プロット上部に2つ設置しており、色分け上と表示されている下部のプルダウンで、上部の平行座標プロットの開始位置を指定し、色分け下と表示されている下部のプルダウンで、下部の平行座標プロットの開始位置を指定する。positiveは左側から、negativeは右側から開始することを示している。<br />また、標本に関しても散布図とリンクしており、散布図上でクリックした点が示しているアンケート回答者を平行座標プロット上で強調表示することが可能である。
                      </p>
                      <h2>可視化結果</h2>
                      <p align="left">
                        主成分分析_散布図に関して、種類分けと表示されている下部のプルダウンで項目を研究年月に指定して第1主成分を調べると、正の方向に放射線について11年以上研究している回答者が多く、逆に負の方向に放射線についての研究経験が全くない回答者が多く見られた。また、第2主成分を同じように調べても負の方向に放射線についての研究経験が全くない回答者が多く見られた。<br />平行座標プロットに関して、第1主成分の他の変数に比べ、negative1(震災以後の放射線診断の抵抗度)とnegative2(震災以前の放射線診断の抵抗度)、negative4(震災以前の放射線治療の抵抗度)とnegative5(震災以後の放射線治療の抵抗度)の回答状況に正の相関が見られた。<br /> また、強い負の相関(5段階評価の中で2段階以上変化)が見られた回答者の回答を複数確認した結果、震災前後で放射線診断の抵抗度が増した回答者は放射線治療の抵抗度も増し、放射線診断の抵抗度が減少した回答者は放射線治療の抵抗度も減少していた回答者が多くいた。 <br />併せて、福島原発事故以前以後で放射線治療・放射線診断に対する抵抗度が大きく変化している回答者は放射線にまつわる資格を取得していないと回答していることが多く、また、福島原発事故以前以後で放射線治療と放射線診断に対する抵抗度が大きく変化している回答者は自身の業務・研究で放射線にまつわる装置を使用していないと回答していることが多いことも見られた。
                      </p>
                      
                      {data == null ? "" : <SoonChart data={data} />}
                      <p align="left">因子負荷量_棒グラフ:プルダウンで指定した主成分の因子負荷量の一部を棒グラフとして表示する。今回は意味付けの労力と時間の観点から因子負荷量の正の値と負の値のそれぞれの絶対値を上位5つずつを用いて可視化を行った。各変数の全ラベルを常時表示する場合、ラベル同士の文字が重なり合い非常に見づらくなるため、マウスカーソルを合わせた場合のみ表示する。</p>
                      <h2>可視化結果</h2>
                      <p align="left">因子負荷量_棒グラフに関して、表示されている5つの第1主成分の負の因子負荷量のうち、4つが放射線治療・放射線診断の抵抗度にまつわる変数であり、また、表示されている5つの第2主成分の正の因子負荷量のうち、すべてが他分野との交流にまつわる変数であった。
                      </p>
                      
                    </div>
                    <h2>考察</h2>
                    <p align="left">因子負荷量_棒グラフから得られた結果より、第1主成分に関しては負の方向にいくほど放射線にまつわる治療・診断に対し抵抗度が高いという意味づけが可能である。また、第2主成分に関しても、正の方向にいくほどに他分野の人との交流を積極的に行っているという意味づけが考えられる。<br />上記の考察と合わせて散布図の可視化結果を見ることで、第1主成分が放射線にまつわる治療・診断への抵抗度を表しているとすると、正の方向に放射線研究に長く携わっている回答者が多く、負の方向に研究の経験が全くない回答者が多く分布していることから、長く放射線研究に携わっている研究者ほど放射線の医療への使用が安全であると考えていることが考えられる。同じように第2主成分が他分野の人との交流度を表しているとすると、負の方向に放射線研究の経験がない回答者が多く分布していることから、放射線研究の経験が全くない回答者の多くが他分野の人との交流があまりないことが考えられる。<br />平行座標プロットより得られた2つの結果より、この2つの共通点は福島原発事故以前以後に放射線医療に対する抵抗度が変化した回答者は、資格の不所持や研究内での装置の使用をしていない点より放射線に対する知識をあまり持たないと考えられることである。従って、知識がないからこそ福島原発事故を機に放射線についての勉強をしたため、その前後で意識が大きく変化したと考えられる。</p>
                  </div>
                </div>
              </section>
              <footer className="footer">
                <div className="content has-text-centered">
                  <p>&copy;2019 孫, 宮本, 山本</p>
                </div>
              </footer>
              </>
          );
        }
      }

      class Root extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            error: null
          };
        }

        static getDerivedStateFromError(error) {
          return { error };
        }

        componentDidCatch(error, info) {
          console.error(error.toString());
        }

        render() {
          const { error } = this.state;
          if (error != null) {
            return (
              <div className="hero is-danger is-fullheight">
                <div class="hero-body">
                  <div class="container">
                    <h1 class="title">{error.toString()}</h1>
                  </div>
                </div>
              </div>
            );
          }
          return <App />;
        }
      }

      ReactDOM.render(<Root />, document.getElementById("root"));

              
            
!
999px

Console