Skip to main content

How to remove annotation and why the arrow points to different area not this circle?

I am learning the D3 library. And I met two questions:

  1. why the arrow points to a different area, not this circle? 2. How to remove annotation when mouse out?

We can see the arrow points to another area, not the red circle. And I am struggling with how to remove annotation after the mouse is out.

Needs help. ;>

enter image description here

    function stringToNumber(data){ //convert "string" to "number"
      data.Year = +data.Year;
      data.Inflation = +data.Inflation;
      data.IntentionalHomicides = +data.IntentionalHomicides;
      data.LifeExpectancy= +data.LifeExpectancy;
      data.Population = +data.Population;
      data.SuicideMortality = +data.SuicideMortality;
      data.Unemployment = +data.Unemployment;
      data.HDI = +data.HDI;


  }
<html>
<script src="123123.js"></script>    

<script src = "https://unpkg.com/topojson@3.0.2/dist/topojson.js"></script>
<body>
    <script src = "https://unpkg.com/d3@5.6.0/dist/d3.min.js"></script>
    <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
    
    <form>
    <select id="ddlViewBy">
      <option value="1">test1</option>
      <option value="2" selected="selected">test2</option>
      <option value="3">test3</option>
    </select>
    <div>
        <svg id="SVG"></svg>
    </div>
  </form>
</body>

<script>
var e = document.getElementById("ddlViewBy");
function show(){
  var as = document.forms[0].ddlViewBy.value;
  var strUser = e.options[e.selectedIndex].value;
  a = parseInt(as);
  console.log(typeof(a));
  return a;
}
e=show();
console.log(e);



const height = screen.height;
const width = screen.width;
const csvData = d3.csv("https://raw.githubusercontent.com/ZiZi1noob/UIUC416-DataVis-FinalProject/main/fixedData11.csv");
var sortedObjectArray = [];
var getYear = 1998;


csvData.then(function(data){
  data.forEach(function(data){   // calls a function once for each element in an array, in order
      stringToNumber(data);
      if (data["Year"] == getYear){
          sortedObjectArray.push(data);} //filter by country and leave the targeted data with specific country
      });
      console.log(sortedObjectArray);
      bubbleChart(sortedObjectArray);
    });



function bubbleChart(data){
  //scaleLog()
  let xScale = d3.scaleLinear()
                    .domain([40,100])
                    .range([0,width*0.5]);
  let yScale = d3.scaleLinear()
  //reverse range instead of domain
                    .domain([5000000,130000000])
                    .range([height*0.5,0]);

    svg =d3.select("svg")
        .attr("height", height*0.8)
        .attr("width",width*0.8)
        .append("g")
        .attr("transform", "translate(100,0)")
        .selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("fill", "lightblue")
        .attr("cy", function(data,i){return xScale(data.LifeExpectancy)})
        .attr("cx", function(data,i){return yScale(data.Population)})
        .attr("r", function(data){return data.HDI*10});

    let yAxis =d3.axisLeft(yScale)
        .tickFormat(d3.format("~s"));

    let xAxis = d3.axisBottom(xScale)
        .tickFormat(d3.format("~s"));

    d3.select("svg").append("g")
        .attr("transform", "translate(100,100)")
        .call(yAxis);

    d3.select("svg")
    .append("g")
    .attr("transform", "translate(100,640)")
    .call(xAxis);
 
    d3.selectAll("circle")  //add anotation
        .on("mouseover", function(data){
            console.log("cx",this.getAttribute("cx"));
            console.log("cy",this.getAttribute("cy"));
            let dotCX = this.getAttribute("cx");
            let dotCY = this.getAttribute("cy");
            let dotPop = data.Population;
            let dotLifeEp = data.LifeExpectancy;
            let dotHDI =data.HDI;
            let dotCty = data.Country;

            //let annotations =AnotationBubble(dotCX,dotCY,dotPop,dotLifeEp,dotHDI);
            
            let makeAnnotations = d3.annotation()
                    //.annotations(annotations);
                    .annotations(AnotationBubble(dotCX,dotCY,dotPop,dotLifeEp,dotHDI,dotCty));
            d3.select("#SVG")
            .append("g")
                .style("font-size", 25)
                .style("font-weight", "bold")
                .call(makeAnnotations);

            d3.select(this)
                .transition()
                .attr("fill","red")
                .delay(function(d,i){return 100*i;})
                .duration(1000)
                .attr("r", function(d){return d.HDI*35});
            })
        .on("mouseout", function(data)
        {   console.log("out works");

                d3.select(this)
                .transition()
                .delay(function(d,i){return 100*i;})
                .duration(1000)
                .attr("r", function(d){return d.HDI});

                //d3.select(this).remove();
        }
            );       

    
}
function AnotationBubble(dotCX,dotCY,dotPop,dotLifeEp,dotHDI,dotCty){    // Add annotation to the chart
    const annotations = [
        {
            note: {
                title: (dotLifeEp,dotPop,dotHDI),
                label: dotCty,
            },
    
            connector: {
                end: "arrow",        // none, or arrow or dot
                type: "line",       // Line or curve
                endScale: 2,
                lineType : "horizontal",
                },
            color: ["red"],
            x: dotCX,
            y: dotCY,
            dy: 50,
            dx: 50,
            type: d3.annotationCalloutElbow,
            //subject: { radius: 20, radiusPadding: 10 },
        }]
        return annotations;
    }


</script>
  </html>
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Labels:

Comments

Post a Comment

Popular posts from this blog

Confusion between commands.Bot and discord.Client | Which one should I use?

Whenever you look at YouTube tutorials or code from this website there is a real variation. Some developers use client = discord.Client(intents=intents) while the others use bot = commands.Bot(command_prefix="something", intents=intents) . Now I know slightly about the difference but I get errors from different places from my code when I use either of them and its confusing. Especially since there has a few changes over the years in discord.py it is hard to find the real difference. I tried sticking to discord.Client then I found that there are more features in commands.Bot . Then I found errors when using commands.Bot . An example of this is: When I try to use commands.Bot client = commands.Bot(command_prefix=">",intents=intents) async def load(): for filename in os.listdir("./Cogs"): if filename.endswith(".py"): client.load_extension(f"Cogs.{filename[:-3]}") The above doesnt giveany response from my Cogs ...
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...
Post a Comment
Read more