Draw scatter plot graph with d3

Draw scatter plot graph with d3

I have this and I need to see a graph of the genre scatter plot. I know I'm a bit dumb, but I do not know how to play it well yet, no. One of the axes still appears if executed. This code is given by the teacher to correct us, I already got some things, but I do not understand any of this.

I have this and I need to see a graph of the genre scatter plot. I know I'm a bit dumb, but I do not know how to play it well yet, no. One of the axes still appears if executed. This code is given by the teacher to correct us, I already got some things, but I do not understand any of this.

var margin = {top: 20, right: 10, bottom: 100, left: 40};
        var width = 700 - margin.right - margin.left;
        var height = 500 - margin.top - margin.bottom;

    // o g para agrupar objetos juntos, agrupar as barras
    var svg = d3.select('body')
        .append('svg')
        .attr({"width" : width + margin.right + margin.left,
            "height" : height + margin.top + margin.bottom
        });
        //.append("g")
        //.attr("transform", "translate(" + margin.left +"," + margin.right + ")");

    //definição da posição do eixo xx e yy
    var x_scale =  d3.scaleLinear()
        .range([0, width])
        .domain([0, width]);

    var y_scale = d3.scaleLinear()
        .range([height, 0])
        .domain([height, 0]);

    //axis, definição do conteudo dos eixos
    var x_axis = d3.axisBottom(x_scale);

    d3.select("svg")
        .append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height - margin) + ")")
        .call(x_axis);

    var y_axis = d3.axisLeft(y_scale);

    d3.select("svg")
        .append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + margin + ", 0)")
        .call(y_axis);



    var years = [];
    var suicides = [];

    var taxaAno = new Object();
    var taxaAno = {};

    d3.csv("master.csv", function(error,data){
        if(error) console.log("Erro no ficheiro csv");

        data.forEach(function(d){
            years = +d.year;
            suicides = +d.suicides_no;

            if (taxaAno[years]==null){
                taxaAno[years] = suicides;
            }
            else{
                taxaAno[years] += suicides;
            }               
        });

        console.log(taxaAno);

    });

    var circles = svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                return x_scale(taxaAno[years]);
            })
            .attr("cy", function (d) {
                return y_scale(taxaAno[suicides]);
            })
            .attr("r", function (d) {
                return 10;
        });

        var line = d3.line()
            .x(function (){ return x_scale(taxaAno[years])})
            .y(function (){ return y_scale(taxaAno[suicides])
        });

        d3.select("svg")
            .append("path")
            .attr("d", line(data))
            .attr("class", "line_death");

        d3.select("svg")
            .append("text")
            .text("Anos")
            .attr("x", (width / 2) - margin)
            .attr("y", height - margin / 3);

        d3.select("svg")
            .append("text")
            .text("N. de suicidios")
            .attr("x", 0)
            .attr("y", 0)
            .attr("transform", "rotate (90, 0, 0) translate(100, -10)");

body { margin: 0; font-family: Arial, Helvetica, sans-serif; }

.topnav { overflow: hidden; background-color: #333; }

.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }

.topnav a:hover { background-color: #ddd; color: black; }

.topnav a.active { background-color: #4CAF50; color: white; }

IMG.displayed { display: block; margin-left: auto; margin-right: auto }

h1 { color: #069; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>

</style>

</head> <body>

<div class="topnav"> <a class="active" href="index.html">Home</a> <a href="mapa.html">Mapa</a> <a href="evolucaoAno.html">Evolucaoo por ano</a> <!-- <a href="about">About</a> --> </div>

<body><br><br> <!-- <IMG class="displayed" src="home.png" alt="some text" width=600 height=400> -->

<h1 style="text-align: center">Taxa de suicidio por ano</h1> <script src="http://d3js.org/d3.v4.js"></script>

&lt;script&gt;


&lt;/script&gt;

</body> </html>


With this code I want to see a graph of the genre scatter plot with a line joining the points.

html javascript

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown. W will build a Responsive Website with HTML, CSS, and JavaScript

Render HTML with Vanilla JavaScript and lit-html

Sometimes you need to render HTML elements on a web page. And like Goldilocks' search for "just right", you have to try a few techniques before you find the right one. Using a framework may be too hard. Using pure HTML and the DOM API may be too soft. What you need is something in the middle that is just right. Is lit-html "just right"? Let's find out.

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

How to Retrieve full Profile of LinkedIn User using Javascript

I am trying to retrieve the full profile (especially job history and educational qualifications) of a linkedin user via the Javascript (Fetch LinkedIn Data Using JavaScript)

How to add CSS & Javascript to your HTML

How to add CSS & Javascript to your HTML - In this video, we create a starter template and link external CSS and Javascript files into our HTML file. We also look into what a CDN is and general boiler...