ref: https://info.uniswap.org/#/
So I am trying to figure out how to make the createChart(...).addAreaSeries have a smooth line? And bring the labels from x-axis closer to the margin. I am look into Uniswap source code, however there is no hints.
lightweight-charts doesn't support smoothing lines yet (and probably won't).
As I can see from the picture and the page your referred there is no lightweight-charts, it is some other library (which uses SVG instead of canvas). Probably they use lightweight-charts somewhere else.
Related
I was wondering if there is a way of defining custom images as data-point.
For a LineGraph there is a pointSize property which sets the size of data points. (Not surprisingly).
This property can also be overridden with the series property in which you can also define a custom color.
Nonetheless, I can't see anything that would allow custom markers.
To make my question absolutely clear:
This is what I am going for: Image with an example
Two ideal solutions
Setting a property to a datapoint with class name and defining a picture for this class name in css. (to me it seems impossible since these are SVG graphics)
Adding an extra column with data-marker image source.
Although these seem perfect in theory I have no idea how to go about implementing them.
A less perfect solution could be extracting point position from SVG and using JavaScript to dynamically position divs with images (this seems very unelegant and prone to bugs)
Alternatively please recommend a js charting library that would be free and had support for such functionality.
Edit:
In the meantime I found a very good and quite inexpensive (60$ per website license) library that covers this functionality : Highcharts library But the original question is still open.
I'm trying to create line graphs like the one in the image below.
It needs to have a very light weight(in kb), and needs to have points that I could hover(for a tooltip about that point, like in the image). I don't need pie charts or anything like that, just line graphs like above.
I'm just not sure how to go about it best, I don't know canvas, and i'm assuming that might be pretty complex trying to do what I need with canvas. I know jQuery decently well.
I'm wondering: Is there a very light weight framework/plugin that would allow me to do just the bare essentials like in the image? If not, how would you suggest going about this with jQuery?
All I need are the lines drawn, with points that I could trigger a hover on, I can take care of the tooltip and all that, i'm just trying to figure out how to draw all the lines the match up with the grid, and get the little circle elements in the right position.
Thanks so much.
ps: light weight to me is not more than a few kb, because I want them to be interactive(not just a static image), but i'm not going to have so many of them that I need a huge jquery plugin, just something small.
Also: I'm trying to make it so it's responsive, and shrinks to fit a phones screen.
SVG sounds just like what you are looking for. You can use a library such as JQuery SVG or Raphael (based on Prototype.js) to make it easier.
Google Chart API is very solid and easy to use. Here is an example of a simple Line Chart
http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
You can also Interact with the charts you create:
https://google-developers.appspot.com/chart/interactive/docs/basic_interactivity
https://google-developers.appspot.com/chart/interactive/docs/events
I don't know how lightweight you could possibly get to do what you want, for that kind of thing I would normally use flot.
If you are not planning any manipulation on the graphs. Use a PHP library called pChart
Check out Google Charts. It looks like the perfect thing. It doesn't use flash, so it's smaller than some, and it has tooltips. As a bonus, you can use live data on the web.
Is it possible to create a smooth animated magnifying effect (similar to the dock on Mac OS X) when hovering over nodes in a force-directed graph visualization using the D3 or GraphGL libraries?
The nodes would need to expand and displace the others around it, while maintaining the force-directed layout.
If someone could fork this to demonstrate, that would be great! Thanks
note, this is different from a simple zoom as in this question
Great question. To answer it, I implemented a D3 plugin for fisheye distortion. It's roughly based on previous work in Flare and Sigma.js, which are in turn based on the work of Sarkar and Brown, "Graphical Fisheye Views of Graphs", CHI'92.
Here's a quick demo with the Misérables dataset. View source for the code. I'll do a writeup later today when I have time.
Note: this uses a static force layout; the layout is computed on startup and doesn't change. I think this is probably what you want in conjunction with fisheye distortion, or else the distortion will compete with your ability to move nodes around dynamically. But in theory it's possible to combine them, if that's what you want.
It'd be amazing if you could do this with pure CSS, but unfortunately it looks like attributes for various SVG elements (ie, circles) aren't reachable via CSS. Specifically 'radius', but I think this is true for a whole slew of SVG element properties.
But its not super hard to do via d3. Here is my example jsfiddle. Basically you do the following:
Use transitions (see Tutorial #2 to learn how to use these). Basically do a d3element.transition().delay(300).attr(...) to make the changes happen.
To keep the 'blown up' circles from overlapping the best I could figure out to do was to modify the force layout's charge setting. Increasing the repulsive forces when circles are larger.
Hopefully thats what you are looking for...
Pure css can do this if you accept it.
.app{
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
-transition-property:-transform;
-webkit-transition-duration:.15s;
-moz-transition-duration:.15s;
-transition-duration:.15s;
}
.app:hover{
-webkit-transform:scaleX(1.2) scaleY(1.2);
-moz-transform:scaleX(1.2) scaleY(1.2);
-transform:scaleX(1.2) scaleY(1.2);
}
It's used on my home page tuoxie.me
I'm wondering how to go about marking up and coding hover effects for a map similar to this image.
When each district (or section) is moused over/touched/clicked I need to change the colour of it without affecting any other section. The boundaries on each section must be representative of the image and shouldn't be squares. The solution can't use canvas since the site I'm working on has to be usable in older browsers (I'm gutted, personally.)
Ideally I want to do this with CSS without using too much JavaScript or loads of images. Has anyone done this before?
Edit: I know people are suggesting the <area> tag, but AFAIK, it doesn't accept the :hover pseudo class.
Edit 2: I might use this: http://www.netzgesta.de/mapper/
Another self answer...
A few months ago I came across a library called Raphael JS - http://raphaeljs.com/. For those of you unfamiliar with it, it's an SVG DOM library first and foremost. If you know a thing or two about SVG, you'll know that IE doesn't support it, but it does support VML. Raphael caters for this as well. Awesome, right?
Anyway, I ended up saving the AI file for the map as an SVG file and importing the paths into a JSON block, basically doing the same thing as this code: http://raphaeljs.com/australia.html
The only issue I came across:
I wanted the map background to be transparent. Setting fill to transparent whilst allowing the section to accept mouseover worked in Firefox, but in IE, it failed. I instead opted for filling the path with white, then setting the opacity to 0.01. After that I duplicated the path and didn't fill it to create the border.
You can use HTML <area> Tag
If you use jQuery you can use the maphilight plugin. documented at http://davidlynch.org/projects/maphilight/docs/ and available from github at https://github.com/kemayo/maphilight
I see what the problem here is: making let's say a world map the usual way is quite a load. If I get it right, what you want is to have a territory map image and put hover effects making hover area match country borders exactly. SVG can be used for the map (the drawing part is already done) but the problem is how to generate HTML area map using SVG map coordinates. There's a solution (I've tried it, looks good at least with the demo provided) which translates SVG into Raphael (generates the coords) using PHP. But again you need raphael.js for that... well if you change your mind: https://github.com/atirip/svg2raphael. And if you're not familiar with Raphael it will take a time to get used to it, documentation is not so good -for me-.
Edit: I can confirm that translation from SVG->rapahel.js works but SVG files needs some tweaks. For what I see in the example SVG provided in svg2raphael the files were made with Adobe Illustrator. I've tried with SVG (plain) from Inkscape and it didn't work properly, but I could manage to fix the issues, for example:
svg2raphael won't translate Inkscape generated <path style="fill:#ff0000" ...></path> (will set fill="none"!!! so the result is invisible, but will translate correctly <path fill="#ff0000" ...></path> Seems like it will ignore everything inside style="".
svg2raphael misreads the alignments from Inkscape SVG, so you need to either move the illustration inside Inkscape or edit the SVG file with text editor and change the M value to M0,0.
svg2raphael can translate multiple svg elements, but looks at the main tag which Inkscape generates to align groups of illustrations, sometimes the whole illustration moves away from the render area and you see nothing. Hope this helps!
Edit 2: You can use Inkscape's style="" for creating CSS rules to apply to the SVG, that works great ang keeps style outside SVG/Raphael!
I am looking for some JavaScript plugin (preferably jQuery) to be able to scroll through an image, in the same way that Google Maps works.
I can make the image draggable but then I see the whole image while dragging even if the parent div is overflow:hidden.
Any help would be greatly appreciated!
(I'm super late to this now dead party, but hey, I found this page via a search so...)
Scrollview plugin suggested by mooware didn't work for me.
However Dragscrollable did:
http://plugins.jquery.com/project/Dragscrollable
Try out the demonstration
I may be a little late to the party, but I was just looking for the same thing. What I stumbled upon is scrollview for jquery, it works perfect and does exactly this google maps-like drag-to-scroll for overflowed divs.
Check out the Google Maps Image Cutter It can take any image or digital photo and cut it into tiles which are displayed on a Google Map. Might be a quick way to do what you need...
You could use the google maps api...they allow for you to use it with custom images. And you can choose if the controls show up or not.
EDIT: Found a decent tutorial on how to do this.
http://mapki.com/wiki/Add_Your_Own_Custom_Map
For a good description of the underlying technology have a look at Chapter 4 (if I recall correctly) of the Pragmatic Programmers' book Pragmatic Ajax.
You'll see how the image slicing and dicing works under the covers. And the zooming.
This has less to do with javascript and more to do with the CSS coding.
Try a few experiments with just HTML and CSS to get the image to clip properly, then add the javascript to move it around.
If you can't get it to clip with HTML, or move with the javascript post the simplest demonstration of the problem here for us to debug.
Without the code we're shooting in the dark.
Google Maps uses images sliced into blocks which are dynamically loaded as the user pans in different directions. The Google Maps Image Cutter Paul Dixon mentions is the tool you want for this.
If you just want to pan one large image, rather than have the additional complexity of slicing the image up into blocks, then instead of using the CSS overflow property, you should use the clip property. This is supported on all browsers worth thinking about, down to IE4 if I remember correctly.
One point to note: the CSS2.1 spec shows examples with the rect values separated by commas. However this isn't supported by IE6 (perhaps not IE7, either). However all other browsers understand the version without commas. So instead of
clip: rect(5px, 40px, 45px, 5px);
you should use
clip: rect(5px 40px 45px 5px);
for compatibility.
You need a container <div> set to position:relative around the <img> element, which you then set to position: absolute.
So the basic technique is to update the top and left values as the user drags, use these together with the defined width and height of the view onto the image to create the appropriate rect() string, and update the top, left, and clip properties of the <img> element's style property.
Don't do what I did and leave out the "px" after the values in the rect() string. It took me ages to realise why it wasn't working :-)