Answers.Body: <p>It seems like you are already on the right track. The code you provided fetches the protein data from the JSON file and generates a scatter plot with D3.js based on two properties: <code>length</code> and <code>nr_modifications</code>.</p>
  <p>To add an interactive hover event, you can add a tooltip to your scatterplot. The tooltip will display additional information when you hover over each dot.</p>
  <p>Below is an example of how you can add a tooltip:</p>
  <p>First, add a <code>&lt;div&gt;</code> element in your HTML that will be used as the tooltip:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;tooltip&quot; style=&quot;position: absolute; opacity: 0;&quot;&gt;
      &lt;p&gt;&lt;strong&gt;Protein:&lt;/strong&gt; &lt;span id=&quot;protein&quot;&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;p&gt;&lt;strong&gt;Modifications:&lt;/strong&gt; &lt;span id=&quot;modifications&quot;&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;p&gt;&lt;strong&gt;Length:&lt;/strong&gt; &lt;span id=&quot;length&quot;&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Then, in your script, add the code to handle the mouseover and mouseout events for each circle:</p>
  <pre class="lang-javascript prettyprint-override"><code>{#each data.proteins as datapoint}
      &lt;circle
          cx={xScale(datapoint.length)}
          cy={yScale(datapoint.nr_modifications)}
          class:human={datapoint.species === 'human'}
          r=&quot;20&quot;
          on:mouseover=&quot;{(e) =&gt; handleMouseover(e, datapoint)}&quot;
          on:mouseout=&quot;{(e) =&gt; handleMouseout(e)}&quot;
      /&gt;
  {/each}
  </code></pre>
  <p>Define the <code>handleMouseover</code> and <code>handleMouseout</code> functions in your script. These functions will show and hide the tooltip respectively. For the <code>handleMouseover</code> function, it also updates the tooltip content with the protein data:</p>
  <pre class="lang-javascript prettyprint-override"><code>&lt;script&gt;
      // ... your existing code ...
  
      const handleMouseover = (event, datapoint) =&gt; {
          // Update the tooltip content
          document.getElementById('protein').textContent = datapoint.symbol;
          document.getElementById('modifications').textContent = datapoint.nr_modifications;
          document.getElementById('length').textContent = datapoint.length;
  
          // Show the tooltip
          document.getElementById('tooltip').style.opacity = 1;
  
          // Position the tooltip
          document.getElementById('tooltip').style.left = event.pageX + 'px';
          document.getElementById('tooltip').style.top = event.pageY + 'px';
      };
  
      const handleMouseout = () =&gt; {
          // Hide the tooltip
          document.getElementById('tooltip').style.opacity = 0;
      };
  &lt;/script&gt;
  </code></pre>
  <p>In standard HTML or JavaScript, the {#each} syntax and usage of {} for expressions and variable binding won't work as they are specific to Svelte. Same applies to the usage of on:mouseover and on:mouseout. In standard HTML or JavaScript, we use onmouseover and onmouseout.</p>
  <p>Here are some things which I haven't checked, but you might want to consider looking at:</p>
  <ul>
  <li>It looks like you are trying to load JSON data from an external
  source, but the function fetchProteins() is never called and its
  result (the promise returned) is not being awaited. The way it's
  structured now, Proteins in the returned object will hold a Promise,
  not the actual data.</li>
  <li>The code assumes that the returned JSON data is an array stored in
  data.proteins, but the provided JSON example suggests that the data
  structure might be different. It doesn't show any 'proteins' key in
  the JSON. The code needs to align with the actual structure of the
  returned JSON data. <code>data.proteins</code> implies that <code>data</code> is an object and <code>proteins</code> is a property of that object containing an array.</li>
  <li>In your SVG transform attribute, you are using braces {} though the correct syntax for a
  translate transformation in SVG is translate(x,y).</li>
  </ul>
  <p>You might want to try looking at the following changes:</p>
  <pre class="lang-js prettyprint-override"><code>export const load = ({ fetch }) =&gt; {
    const fetchProteins = async () =&gt; {
      const res = await fetch('https:address/assets/ptm.json')
      const data = await res.json()
      return data
    }
  
    return {
      Proteins: fetchProteins
    }
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>  $: xScale = scaleLinear()
          .domain(extent(data.map((d) =&gt; d.length)))
          .range([0, 800 - (margin * 2)]);
      
      $: yScale = scaleLinear()
          .domain(extent(data.map((d) =&gt; d.nr_modifications)))
          .range([0, 400 - (margin * 2)]);
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;g transform=&quot;translate({margin}px, {margin}px)&quot;&gt;
          {#each data as datapoint}
              &lt;circle
                  cx={xScale(datapoint.length)}
                  cy={yScale(datapoint.nr_modifications)}
                  class=&quot;{datapoint.species === 'human' ? 'human' : ''}&quot;
                  r=&quot;20&quot;
              /&gt;
          {/each}
          &lt;!-- The rest of your code --&gt;
  &lt;/g&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-05-23T08:21:23.300Z
Answers.LastActivityDate: 2023-05-23T08:21:23.300Z
Answers.UserDisplayName: BigMistake
Body: <p>I have a json file of protein data of mouse and human like</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;name&quot;: &quot;P04202&quot;,
      &quot;full_name&quot;: &quot;Transforming growth factor beta-1 proprotein&quot;,
      &quot;symbol&quot;: &quot;TGFB1_MOUSE&quot;,
      &quot;length&quot;: 390,
      &quot;species&quot;: &quot;mouse&quot;,
      &quot;function&quot;: &quot;Transforming growth factor beta-1 proprotein: Precursor of the Latency-associated peptide (LAP) and Transforming growth factor beta-1 (TGF-beta-1) chains, which constitute the regulatory and active subunit of TGF-beta-1, respectively.&quot;,
      &quot;nr_modifications&quot;: 2821,
      &quot;residues&quot;: [
          {
              &quot;pos&quot;: 1,
              &quot;residue&quot;: &quot;M&quot;,
              &quot;modifications&quot;: []
          },
          {
              &quot;pos&quot;: 2,
              &quot;residue&quot;: &quot;P&quot;,
              &quot;modifications&quot;: []
          },
          ...
          {
              &quot;pos&quot;: 60,
              &quot;residue&quot;: &quot;A&quot;,
              &quot;modifications&quot;: [
                  {
                      &quot;mod&quot;: &quot;[127] Fluoro&quot;,
                      &quot;type&quot;: &quot;Chemical derivative&quot;,
                      &quot;prob&quot;: 1
                  },
                  {
                      &quot;mod&quot;: &quot;[53] HNE&quot;,
                      &quot;type&quot;: &quot;Post-translational&quot;,
                      &quot;prob&quot;: 0.25
                  }
              ]
          },
          ...
          ]
  }
  </code></pre>
  <p>How do I create a scatter plot [![enter image description here][1]][1]</p>
  <p>Thanks for any idea</p>
  <p>So far I gathered a code to fetch the data from an online json</p>
  <pre class="lang-js prettyprint-override"><code>export const load = ({ fetch }) =&gt; {
    const fetchProteins = async () =&gt; {
      const res = await fetch('https:address/assets/ptm.json')
      const data = await res.json()
      return data
    }
  
    return {
      Proteins: fetchProteins()
    }
  }
  </code></pre>
  <p>This code generates a scatter plot but I will need to hover around the dots</p>
  <pre><code>script&gt;
      import { extent } from 'd3-array';
      import { scaleLinear } from 'd3-scale';
      export let data = [];
  
      const margin = 30;
  
      $: xScale = scaleLinear()
          .domain(extent(data.proteins.map((d) =&gt; d.length)))
          .range([0, 800 - (margin * 2)]);
      
      $: yScale = scaleLinear()
          .domain(extent(data.proteins.map((d) =&gt; d.nr_modifications)))
          .range([0, 400 - (margin * 2)]);
  &lt;/script&gt;
    
    
  &lt;svg width=&quot;800&quot; height=&quot;400&quot;&gt;
      &lt;g transform=&quot;translate({margin}, {margin})&quot;&gt;
          {#each data.proteins as datapoint}
              &lt;circle
                  cx={xScale(datapoint.length)}
                  cy={yScale(datapoint.nr_modifications)}
                  class:human={datapoint.species === 'human'}
                  r=&quot;20&quot;
              /&gt;
          {/each}
          &lt;circle
                  cx={10}
                  cy={10}
                  class=&quot;human&quot;
                  r=&quot;10&quot;
              /&gt;
              &lt;circle
              cx={10}
              cy={40}
              class=&quot;mouse&quot;
              r=&quot;10&quot;
          /&gt;
            
      &lt;/g&gt;
  &lt;/svg&gt;
  
  &lt;style&gt;
      svg {
          border: 1px;
          border-style: solid;
      }
      circle {
          fill: steelblue;
          fill-opacity: 0.5;
      }
      .human {
          fill: red;
      }
  &lt;/style&gt;
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2023-05-11T14:58:36.523Z
Comments.Text: What did you try so far?
Comments.UserDisplayName: user438383
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2023-05-11T15:03:32.733Z
Comments.Text: I gathered a code to fetch the data from an online json
Comments.UserDisplayName: Zizogolu
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2023-05-11T16:57:24.930Z
Comments.Text: "fetch data from online JSON" is basically downloading a file and maybe subsetting it. What else have you tried in actually generating the plot?
Comments.UserDisplayName: Ram RS
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2023-05-12T08:07:39.380Z
Comments.Text: Yesterday I accomplished to plot a scatter chart but I will need to deploy hover around the dots
Comments.UserDisplayName: Zizogolu
Tags: <proteins><graphs><json>
Title: Creating a scatterplot by a json data in js
ThreadText: # Creating a scatterplot by a json data in js
  
  (Asked by: username_0 on 2023-05-11)
  
  I have a json file of protein data of mouse and human like
  
  ```json
  {
      "name": "P04202",
      "full_name": "Transforming growth factor beta-1 proprotein",
      "symbol": "TGFB1_MOUSE",
      "length": 390,
      "species": "mouse",
      "function": "Transforming growth factor beta-1 proprotein: Precursor of the Latency-associated peptide (LAP) and Transforming growth factor beta-1 (TGF-beta-1) chains, which constitute the regulatory and active subunit of TGF-beta-1, respectively.",
      "nr_modifications": 2821,
      "residues": [
          {
              "pos": 1,
              "residue": "M",
              "modifications": []
          },
          {
              "pos": 2,
              "residue": "P",
              "modifications": []
          },
          ...
          {
              "pos": 60,
              "residue": "A",
              "modifications": [
                  {
                      "mod": "[127] Fluoro",
                      "type": "Chemical derivative",
                      "prob": 1
                  },
                  {
                      "mod": "[53] HNE",
                      "type": "Post-translational",
                      "prob": 0.25
                  }
              ]
          },
          ...
          ]
  }
  
  ```
  
  How do I create a scatter plot [![enter image description here][1]][1]
  
  Thanks for any idea
  
  So far I gathered a code to fetch the data from an online json
  
  ```js
  export const load = ({ fetch }) => {
    const fetchProteins = async () => {
      const res = await fetch('https:address/assets/ptm.json')
      const data = await res.json()
      return data
    }
  
    return {
      Proteins: fetchProteins()
    }
  }
  
  ```
  
  This code generates a scatter plot but I will need to hover around the dots
  
  ```
  script>
      import { extent } from 'd3-array';
      import { scaleLinear } from 'd3-scale';
      export let data = [];
  
      const margin = 30;
  
      $: xScale = scaleLinear()
          .domain(extent(data.proteins.map((d) => d.length)))
          .range([0, 800 - (margin * 2)]);
      
      $: yScale = scaleLinear()
          .domain(extent(data.proteins.map((d) => d.nr_modifications)))
          .range([0, 400 - (margin * 2)]);
  </script>
    
    
  <svg width="800" height="400">
      <g transform="translate({margin}, {margin})">
          {#each data.proteins as datapoint}
              <circle
                  cx={xScale(datapoint.length)}
                  cy={yScale(datapoint.nr_modifications)}
                  class:human={datapoint.species === 'human'}
                  r="20"
              />
          {/each}
          <circle
                  cx={10}
                  cy={10}
                  class="human"
                  r="10"
              />
              <circle
              cx={10}
              cy={40}
              class="mouse"
              r="10"
          />
            
      </g>
  </svg>
  
  <style>
      svg {
          border: 1px;
          border-style: solid;
      }
      circle {
          fill: steelblue;
          fill-opacity: 0.5;
      }
      .human {
          fill: red;
      }
  </style>
  
  ```
  
  **Tags:** proteins, graphs, json
  
  > **Comments:**
  > **username_1**: What did you try so far?  
  > **username_0**: I gathered a code to fetch the data from an online json  
  > **username_2**: "fetch data from online JSON" is basically downloading a file and maybe subsetting it. What else have you tried in actually generating the plot?  
  > **username_0**: Yesterday I accomplished to plot a scatter chart but I will need to deploy hover around the dots  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_3 on 2023-05-23. Score: 3 | Accepted answer
  
  It seems like you are already on the right track. The code you provided fetches the protein data from the JSON file and generates a scatter plot with D3.js based on two properties: `length` and `nr_modifications`.
  
  To add an interactive hover event, you can add a tooltip to your scatterplot. The tooltip will display additional information when you hover over each dot.
  
  Below is an example of how you can add a tooltip:
  
  First, add a `<div>` element in your HTML that will be used as the tooltip:
  
  ```html
  <div id="tooltip" style="position: absolute; opacity: 0;">
      <p><strong>Protein:</strong> <span id="protein"></span></p>
      <p><strong>Modifications:</strong> <span id="modifications"></span></p>
      <p><strong>Length:</strong> <span id="length"></span></p>
  </div>
  
  ```
  
  Then, in your script, add the code to handle the mouseover and mouseout events for each circle:
  
  ```javascript
  {#each data.proteins as datapoint}
      <circle
          cx={xScale(datapoint.length)}
          cy={yScale(datapoint.nr_modifications)}
          class:human={datapoint.species === 'human'}
          r="20"
          on:mouseover="{(e) => handleMouseover(e, datapoint)}"
          on:mouseout="{(e) => handleMouseout(e)}"
      />
  {/each}
  
  ```
  
  Define the `handleMouseover` and `handleMouseout` functions in your script. These functions will show and hide the tooltip respectively. For the `handleMouseover` function, it also updates the tooltip content with the protein data:
  
  ```javascript
  <script>
      // ... your existing code ...
  
      const handleMouseover = (event, datapoint) => {
          // Update the tooltip content
          document.getElementById('protein').textContent = datapoint.symbol;
          document.getElementById('modifications').textContent = datapoint.nr_modifications;
          document.getElementById('length').textContent = datapoint.length;
  
          // Show the tooltip
          document.getElementById('tooltip').style.opacity = 1;
  
          // Position the tooltip
          document.getElementById('tooltip').style.left = event.pageX + 'px';
          document.getElementById('tooltip').style.top = event.pageY + 'px';
      };
  
      const handleMouseout = () => {
          // Hide the tooltip
          document.getElementById('tooltip').style.opacity = 0;
      };
  </script>
  
  ```
  
  In standard HTML or JavaScript, the {#each} syntax and usage of {} for expressions and variable binding won't work as they are specific to Svelte. Same applies to the usage of on:mouseover and on:mouseout. In standard HTML or JavaScript, we use onmouseover and onmouseout.
  
  Here are some things which I haven't checked, but you might want to consider looking at:
  
  * It looks like you are trying to load JSON data from an external
    source, but the function fetchProteins() is never called and its
    result (the promise returned) is not being awaited. The way it's
    structured now, Proteins in the returned object will hold a Promise,
    not the actual data.
  * The code assumes that the returned JSON data is an array stored in
    data.proteins, but the provided JSON example suggests that the data
    structure might be different. It doesn't show any 'proteins' key in
    the JSON. The code needs to align with the actual structure of the
    returned JSON data. `data.proteins` implies that `data` is an object and `proteins` is a property of that object containing an array.
  * In your SVG transform attribute, you are using braces {} though the correct syntax for a
    translate transformation in SVG is translate(x,y).
  
  You might want to try looking at the following changes:
  
  ```js
  export const load = ({ fetch }) => {
    const fetchProteins = async () => {
      const res = await fetch('https:address/assets/ptm.json')
      const data = await res.json()
      return data
    }
  
    return {
      Proteins: fetchProteins
    }
  }
  
  ```
  
  ```js
    $: xScale = scaleLinear()
          .domain(extent(data.map((d) => d.length)))
          .range([0, 800 - (margin * 2)]);
      
      $: yScale = scaleLinear()
          .domain(extent(data.map((d) => d.nr_modifications)))
          .range([0, 400 - (margin * 2)]);
  
  ```
  
  ```html
  <g transform="translate({margin}px, {margin}px)">
          {#each data as datapoint}
              <circle
                  cx={xScale(datapoint.length)}
                  cy={yScale(datapoint.nr_modifications)}
                  class="{datapoint.species === 'human' ? 'human' : ''}"
                  r="20"
              />
          {/each}
          <!-- The rest of your code -->
  </g>
  
  ```
  
  
  ---
  
  