<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>

CC BY-SA 4.0
2023-05-23T08:21:23.300Z
2023-05-23T08:21:23.300Z
BigMistake
<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>

CC BY-SA 4.0
2023-05-11T14:58:36.523Z
What did you try so far?
user438383
CC BY-SA 4.0
2023-05-11T15:03:32.733Z
I gathered a code to fetch the data from an online json
Zizogolu
CC BY-SA 4.0
2023-05-11T16:57:24.930Z
"fetch data from online JSON" is basically downloading a file and maybe subsetting it. What else have you tried in actually generating the plot?
Ram RS
CC BY-SA 4.0
2023-05-12T08:07:39.380Z
Yesterday I accomplished to plot a scatter chart but I will need to deploy hover around the dots
Zizogolu
<proteins><graphs><json>
Creating a scatterplot by a json data in js
# 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
{
    "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
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)]);

  
  

    
        {#each data.proteins as datapoint}
            
        {/each}

**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  element in your HTML that will be used as the tooltip:

    Protein: 
    Modifications: 
    Length: 


Then, in your script, add the code to handle the mouseover and mouseout events for each circle:
{#each data.proteins as datapoint}
    
{/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:


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:
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
  }
}

  $: 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)]);


        {#each data as datapoint}
            
        {/each}


---

