change lines into scatter plot in d3.js

Question

I am learning d3.js. In the example below, it draws a lines, but I want to know know to make it scatter plot, so that I can apply the method into my project. So far, after the clicking the button, the first line disappears and the second line shows up. I want to make the first scatter plot disappear and second scatter plot shows up.
I think it has something to do with

var valueline = d3.svg.line()

but my change does not work. Any suggestion? Thank you in advance.

http://bl.ocks.org/d3noob/7030f35b72de721622b8

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>

<script src="https://d3js.org/d3.v4.min.js"></script>
<body>


<div id="option">
    <input name="updateButton" 
           type="button" 
           value="Update" 
           onclick="updateData()" />
</div>

<!-- load the d3.js library -->    
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
//var x = d3.scaleTime().range([0, width]);
//var y = d3.scaleLinear().range([height, 0]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
/*
var xAxis = d3.axisBottom().scale(x).ticks(5);

var yAxis = d3.axisLeft().scale(y).ticks(5)
*/
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);



// Define the line
//var valueline = d3.line()
//var valueline = d3.line()
//var valueline = d3.line()
var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

// Adds the svg canvas
var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("data.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

    // Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(data));

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

});

// ** Update data section (Called from the onclick)
function updateData() {

    // Get the data again
    d3.csv("data-alt.csv", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
        });

        // Scale the range of the data again 
        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.close; })]);

    // Select the section we want to apply our changes to
    var svg = d3.select("body").transition();

    // Make the changes
        svg.select(".line")   // change the line
            .duration(750)
            .attr("d", valueline(data));
        svg.select(".x.axis") // change the x axis
            .duration(750)
            .call(xAxis);
        svg.select(".y.axis") // change the y axis
            .duration(750)
            .call(yAxis);

    });
}

</script>
</body>




data-alt.csv#

date,close
10-May-12,99.55
8-May-12,76.86
6-May-12,67.62
4-May-12,64.48
2-May-12,60.98
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,90.28
23-Apr-12,106.70
20-Apr-12,94.98
19-Apr-12,85.44
18-Apr-12,73.34
17-Apr-12,53.70
16-Apr-12,50.13
13-Apr-12,65.23
12-Apr-12,62.77
11-Apr-12,66.20
10-Apr-12,68.44
9-Apr-12,66.23
5-Apr-12,63.68
4-Apr-12,64.31
3-Apr-12,69.32
2-Apr-12,61.63
data.csv#

date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98

Answer 1

If you want to change that line chart into a scatter plot you'll have to drop the line, of course.

That being said, you have to append circles here. Since all the data points correspond to just one line but, on the other hand, each data point corresponds to one circle in the scatter plot, you're gonna need an "enter" selection:

var circles = svg.selectAll("darwin")
    .data(data)
    .enter()
    .append("circle");

circles.attr("cx", function(d) {
        return x(d.date)
    })
    .attr("cy", function(d) {
        return y(d.close)
    })
    .attr("r", 5)
    .attr("fill", "steelblue");

Here is the updated bl.ocks: http://bl.ocks.org/anonymous/683c5f24a4982a899af7b2eec7cbb562

change lines into scatter plot in d3.js

Question

1 answers

solution1
3 ACCPTED 2017-05-19 03:31:51

change lines into scatter plot in d3.js

Question

1 answers

solution1 3 ACCPTED 2017-05-19 03:31:51

solution1
3 ACCPTED 2017-05-19 03:31:51