1

I have created a scatter plot using d3.js version 3. I want to create an input box and whatever value i will pass in that, it should change the position of horizontal line according to that value.

var yScale = d3.scale.linear()
  .range([0 + margin.top, height - margin.bottom])
  .domain([0, 100]);
var lineChartY = yScale(100 - 60);


var x = d3.scale.linear()
  .range([0, width]);

var y = d3.scale.linear()
  .range([height, 0]);

var y1 = d3.scale.linear()
  .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

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

var y1Axis = d3.svg.axis()
  .scale(y1)
  .orient("right");

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 + ")");


d3.tsv("data.tsv", function(error, data) {
  if (error) throw error;

  data.forEach(function(d) {

    d.WTP = +d.WTP;
  });

  svg.append('line')
    .style('stroke', 'black')
    .style('stroke-width', '2px')
    .attr('x1', 40)
    .attr('y1', lineChartY)
    .attr('x2', 880)
    .attr('y2', lineChartY)
    .attr("transform", "translate(-40,0)")

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)

});

Link of my work http://plnkr.co/edit/skDaqPISgXARZyLoFAnb?p=preview.

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
Ankit Sinha
  • 13
  • 4

1 Answers1

0

The data set you are using is stored on the server. There are two ways I can think of resolving this issue:

  1. Adding Back End code - Have a form that submits to some sort of back end (php, perl, NodeJS) and manipulates the file then reloads the page.

  2. You take your data set and format it into a javascript array. This is probably the easiest way, however, none of the data will be saved once the page is reloaded.

There are a few other ways to do it that I can think of, however, they all require a fair extent of work. If it is for a personal project, I would probably just create my own script that manipulates the data file. If it will be used by others, I would suggest a redesign of some sort.

I would probably place the data in (insert your choice of database) and manipulate the data set that way. Consider the scope of the project and who is accessing it.

Seanland
  • 136
  • 6