I have a gnuplot data file:
Requested_width,Requested_depth,Requested_word,Name,N,M,Cycle_time,Clk2Q,Area,Total_Area
24,512,24,R1F512X24M8P24,1,1,1.9820,,7446.102,7446
24,512,24,R1F512X24M4P24,1,1,1.9937,,6757.0596,6757
....
I want to scatter plot columns 7 and 9 (this I can do!), then I want the name in column 4 to appear when I mouse over a data point. I think it will be too cluttered to have all labels present at all times.
This is completely possible in gnuplot4.7 (the current development branch), but not in previous versions -- The following works just fine when input from an interactive prompt:
set term wxt
set termoption enhanced
set datafile sep ','
plot 'test.dat' u 7:9:4 w labels hypertext point pt 7
If you put it in a script, you need to invoke gnuplot as gnuplot -persist script.gp.
Just use hypertext and specify the correct terminal, you can make hypertext works.
1) You need to use hypertext as describe in GNUPlot manual link, page 122:
set label at 0,0 "Plot origin" hypertext point pt 1
plot 'data' using 1:2:0 with labels hypertext point pt 7 \
title 'mouse over point to see its order in data set'
2) There are currently 3 terms that support hypertext: canvas(HTML5), svg, and wxt.
Let's take canvas as an example, on page 182 of the manual, there is an example show you how to use canvas:
set term canvas name 'fishplot'
set output 'fishplot.js'
And a minimal HTML file:
<html>
<head>
<script src="canvastext.js"></script>
<script src="gnuplot_common.js"></script>
</head>
<body onload="fishplot();">
<script src="fishplot.js"></script>
<canvas id="fishplot" width=600 height=400>
<div id="err_msg">No support for HTML 5 canvas element</div>
</canvas>
</body>
</html>
Related
I have a simple Dimple chart similar to the basic example at:
http://dimplejs.org/examples_viewer.html?id=bars_vertical
The x axis shows dates. Question: how to display the label in eg. red color if the date matches today ?
I tried unsuccesfully:
- to add tags but this is a no-go since svg's text does not support html
- to change the class name through Dimple or d3.js but no success
Probably the result can be achieved by directly accessing the DOM node and changing the CSS fill style but is there a mode elegant method ?
I have two div on html page having id container1 and container2 i have created svg for each div and each svg contain circle, Now i want to connect two circle
Is it possible to connect two circle from two svg file on same page (cx,cy of both circle should genrate automatically)
My code snnipet..
Html
<div id="container1 " style="width:900px;height:800px;border:solid;"></div>
<div id="container2 " style="width:900px;height:100px;border:solid; margin-top: 25px;"></div>
created svg for container1 ,container2 using below code
var svg = d3.select("#"+id).append("svg")
.attr("width", $("#"+id).css("width"))
.attr("height",$("#"+id).css("height"));
and draw circle for each container using force layout
Now I want to connect these two circle using line
How is it possible ???
For your general question "how is it possible?", here is a general approach to get you started:
Super-impose a third, mostly transparent SVG over the whole page using absolute positioning. Draw the line inside this SVG.
Use .getScreenCTM() (get screen cumulative transformation matrix) to calculate the position of each circle on the page.
Use the same function to figure out the transformation from the screen to your overlay SVG, and multiply one screen CTM by the inverse of the other to get the net transformation so you can figure the start and end coordinates of your lines from the coordinates of your circles.
Add a listener to the web page as a whole for any re-layout events, and re-do the calculations above as necessary.
If all of that sounds too confusing, you might want to come up with an alternate web page design that puts all the graphics in one SVG. Or one which allows for a different way to indicate that elements are connected (same colour, or hover over one causes highlight on the other).
P.S. You might be able to use .getTransformToElement() to replace steps 2 and 3, but you'll want to test that out thoroughly. I've never tried using it to find the transformation between elements in different SVGs on the same web page.
I'm trying to convert a shapefile of mexican municipalities into a topojson and displaying it using d3.js using this tutorial http://bost.ocks.org/mike/map/#converting-data. I've managed to convert it but I can't manage to display it. Any help will be greatly appreciated.
This is my workflow so far:
1) Download and unzip the shapefile
wget http://mapserver.inegi.org.mx/MGN/mgm2010v5_0a.zip
unzip mgm2010v5_0a.zip
2) Converting to JSON, reprojecting to lat-long and subsetting the shapefile
ogr2ogr -f GeoJSON -t_srs EPSG:4326 -where "CVE_ENT IN ('09')" df.json Municipios_2010_5A.shp
3) Converting to topojson
topojson --id-property OID -p name=OID -p name -o df2.json df.json
4) And creating the html code
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* CSS goes here. */
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 1160;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("df2.json", function(error, df2) {
svg.append("path")
.datum(topojson.feature(df2, df2.objects.df))
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
});
</script>
If I run the html I just get a blank page. Any ideas about what I might be doing wrong?
The simplest option, if you aren’t particular about the projection, is to just use the projection provided by the shapefile (Lambert Conformal Conic). Use topojson’s --width and --height command-line flags to rescale the projected shapefile to a reasonable size. For example, if you want something 960px wide, you could say:
topojson --width=960 --margin 20 --simplify=.1 -o mx.json -- municipalities.shp
(This also simplifies in screen coordinates, conveniently.)
A full example with a Makefile is at bl.ocks.org/9265467:
If, on the other hand, you want to specify your own projection, then it’s reasonable to use ogr2ogr to undo the projection, and then define a projection in the browser. But in that case, you’ll want to specify the projection parameters appropriately. For example, to recreate the same projection in the browser, you can say:
var projection = d3.geo.conicConformal()
.rotate([102, 0])
.center([0, 24])
.parallels([17.5, 29.5])
.scale(1850)
.translate([width / 2, height / 2]);
(Fiddle with the center and scale as you like to fit your desired viewport.) This alternative approach is demonstrated at bl.ocks.org/9265674:
I generally prefer using projected coordinates (the first approach, above), as they are faster to render and simplification is more efficient. On the other hand, if you want to change the projection dynamically — admittedly unlikely with such a complex shapefile — then projecting in the browser is the way to go. And projecting in the browser is nice during development because it’s easier to change the parameters and reload.
I'm building a basic dashboard for internal use. I've little experience with D3 / SVG etc so please excuse me if this is obvious:
Aim
I have a time series of values, one value per date for a full year. Inspired by the example on the dc.js wesbite, I'm displaying a 'mini' bar plot of the entire series, and allowing the user to select a range which in turn sets the limits of the axis scale range of a 'large' line plot.
By default (on page load / refreshAll()) I've set the limits of the large line plot to be the most recent 60 days.
The user is encouraged to set their desired range using the mini plot at the bottom, and when they do, the 'grab handles' appear and the chosen range is highlighted on the mini plot, for example:
My issue
On page load / refreshAll(), the grab handles and range highlighting aren't shown on the mini plot, for example:
Question
Is there a way I can set the grab handles to appear upon page load?
Here is how i do it by using crossfilter and dc.js. You can get the last x days by doing something like:
xrange = d3.extent(data, function(d) { return d.date; });
last60 = [d3.time.day.offset(xrange[1], -60), d3.time.day.offset(xrange[1], 1)]
Assuming you have a date in your data. Do this after reading the data with d3, but before feeding it into crossfilter.
Then for the bottom chart (mini plot) simply set the filter property to:
.filter(last60)
And also set the xrange for the top chart to the same range:
.x(d3.time.scale().domain(last60))
Something like this might also work for setting the xrange, but i havent had any success with that:
topchart.focus(bottomchart.filter())
(using Raphael_2.01, WindowsXP, Firefox12.0)
Hello folks,
I can't load and display a SVG data by "raphael-svg-import" :(
I've made a SVG shape data by "Adobe FlashCS5" and "Adobe Wallaby" and checked it by Inkscape-ver0.46.
The shape is blue-gradient ball. Please see http://kie.nu/af2 .
With the sample of https://github.com/wout/raphael-svg-import , I wrote the html and Raphael code:
window.onload = function () {
paper = Raphael(0, 0, 800, 600);
paper.importSVG(SVG_data);// <======================= (* **)
}
The svg code can be viewed at http://pastebin.com/Dz1N8iiz or http://jsfiddle.net/crazytonyi/ucWUh/
When I ran the sample code of "raphael-svg-import"(Purple paint on a rectangle), it succeeded. But using above SVG data, Firefox doesn't show anything :(
What Should I do ?
Thanks.
Crane#Japan
I guess that the function "importSVG()" can't take the argument which includes gradation parameters.
I've checked several SVG codes. When they have path and simple paint information, "importSVG()" can ran normally.
But one of them includes color gradation parameters, no shape appears.
So I think when we want to draw gradation shapes we must use the Raphael's gradient settings.
(for example: “r(0.25, 0.75)#fff-#000”)