score:1
there's many possible implementations of this; here's an example.
given a csv of:
x,y,r,l
5,26,10,2
43,62,22,2
45,21,15,0
10,10,12,0
where x
and y
are position, r
is radius and l
is the index of another point to draw a line to.
<!doctype html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispedges;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
// standard d3 plot setup
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xaxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yaxis = d3.svg.axis()
.scale(y)
.orient("left");
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 + ")");
var color = d3.scale.category10();
// commenting out to play nice with stack overflow code editor
/*
d3.csv("data.csv", function(d){
return {
x: +d.x,
y: +d.y,
r: +d.r,
l: +d.l
}
}, function(error, data) {
*/
// this would be the data return from d3.csv
var data = [{"x":5,"y":26,"r":10,"l":2},{"x":43,"y":62,"r":22,"l":2},{"x":45,"y":21,"r":15,"l":0},{"x":10,"y":10,"r":12,"l":0}];
// standard axis stuff
x.domain([0, d3.max(data, function(d) { return d.x; })]);
y.domain([0, d3.max(data, function(d) { return d.y; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xaxis);
svg.append("g")
.attr("class", "y axis")
.call(yaxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
// draw a point g
var point = svg.selectall(".point")
.data(data)
.enter()
.append("g")
.attr("class", "point");
// add circle
point.append("circle")
.attr("cx", function(d) { return x(d.x); })
.attr("r", function(d) { return d.r; })
.attr("cy", function(d) { return y(d.y); })
.style("fill", function(d,i){ return color(i); })
// handle mouse events
// in this case we are going to show
// lines drawn to our mouse point
.on("mouseover",function(d, i){
d3.selectall(".lineto" + i)
.style("opacity", 1);
})
.on("mouseout",function(d, i){
d3.selectall(".lineto" + i)
.style("opacity", 0);
})
// add line and set opacity to invisible
point
.append("line")
.attr("x1", function(d) { return x(d.x); })
.attr("y1", function(d) { return y(d.y); })
.attr("x2", function(d) { return x(data[d.l].x); })
.attr("y2", function(d) { return y(data[d.l].y); })
.attr("class", function(d) { return "lineto" + d.l; })
.style("stroke", function(d,i){ return color(i); })
.style("stroke-width", 2)
.style("fill","none")
.style("opacity", 0);
//});
</script>
</body>
</html>
Source: stackoverflow.com
Related Query
- In a d3 scatterplot using data from a csv file, how do i draw lines connecting related points when the mouse is over a point?
- How to fetch data from json file to draw a dynamic graph by using d3.js
- How to update data on a page according to data from a CSV file instead of using fixed element data on the page?
- How to load data from a CSV file in D3 v5
- How to update elements of an HTML that the elements are created using data from a CSV file?
- display data from csv file into BarGraph using d3.js
- How to make a scatter plot from a CSV file using d3.js?
- D3.js using data from csv file to populate svg map
- how to transpose data from csv file in d3.js
- How to add labels to my scatterplot from data using d3.js
- How to create a multiseries line chart using data filtered from a csv file?
- How do I retrieve an array from a csv file in javascript using d3?
- How to plot data to map from csv file in D3.js
- getting and using data from CSV file d3 v5
- How should i access specific data from large JSON file using a search button?
- How to sort number columns from csv file read in using D3.js - columns read in as strings
- using variable to parse data with D3js when reading in from csv file
- How to extract data from a csv file and create a line chart from it in D3.js
- unable to read data from a CSV file using javascript
- how to plot data from JSON object on .svg file using D3.js
- Cannot import data from csv file in d3
- Can d3.js draw two scatterplots on the same graph using data from the same source?
- d3.js filter from csv file using multiple columns
- How to load data from an internal JSON array rather than from an external resource / file for a collapsible tree in d3.js?
- How do I read a CSV file into an array using d3js v5
- how to get data with tsv or csv to array in d3.js from a txt file?
- How would I import a single column CSV file into a pie chart using Javascript D3?
- How to use python pandas to get intersection of sets from a csv file
- How do I Bind Data from a .tsv to an SVG's paths using d3.js for a Choropleth Map
- Unable to reference d3.js data imported from a csv file with spaces in the header
More Query from same tag
- d3js using an attribute that is updated within the same callback
- Nested plot and line graph in d3
- Setting multiple img alt listeners with jquery/javascript
- How to zoom and translate to center of force directed graph in D3
- How to force the gravity of bubbles in D3.js
- Setting variable width on d3 tree nodes
- d3js - Stacked Bar Chart in Horizontal Axis - How do I set x so the bars are seperated?
- How to display country names on globe d3.js
- D3 oncontext menu , change node color selected
- React Native ART and D3: how to make the corners of d3.path rounded?
- Responsive iframe content: scale d3 to iframe size
- d3.js mouse events not working
- What does d3js.csv.get() do?
- d3.js binary tree with HTML as the nodes
- Changing SVG elements using d3
- D3.js v4 Force layout and fixed node anomaly
- How to display JSON data in form of different tree-like layouts?
- Need to connect two nodes of different circle packed layout in d3 and pack layout collapse/expand
- Selecting path, changing opacity based on legend mouseover
- Why are programmatically inserted SVG <tspan> elements not drawn, except with d3.js?
- How to make d3 concurrent transitions work?
- Forced layout using rectangles instead of circles
- d3js v5 + Topojson v3 Map not rendering
- (Flask, d3) Uncaught ReferenceError: d3 is not defined
- Placement of d3 brush resize groups
- How to transform and rotate the rectangles on partition layout in d3.js
- Long text in tipsy tooltips
- dc lineChart pop up datapoint info on click
- nvd3 Chart - xAxis label
- Using svg:image elements to import a image from the web or internal docs