Results for tag: SVG
After building a bunch of D3 map demos, I wanted to combine them all into a Map building tool, a Map Creator based on GeoJSON or TopoJSON with many design features, editing capabilities, and proper export to SVG or PNG. It started out as an enhancement to this GeoJSON and TopoJSON Visualizer and D3 Map Starter Template. I wanted to finally use dat.GUI as a visual controller for map creation. I added some preselected maps of the world, individual countries, and even states as well as the ability to add your own map data. You can change the map projection, resize the map container, and control various design elements from colors, opacity, stroke, and even textures via Textures.js.
You also have some powerful editing capabilities: ability to remove individual objects from the map and ability to merge objects together. The best thing is that you can edit the shape of any object by clicking on it and and zooming in. This exposes small green circles on object borders that can be dragged around and the drag event changes the object shape by automatically editing the SVG path data. My previous examples on working with SVG graphics helped in adding this feature. The final image can be saved as SVG or PNG using code from the Save SVG as PNG article. Finally, I integrated SimpleModal which has a textarea where you can add points (latitude, longitude, and location name) that get added as markers on the map.
Read more
Here is an update to the 1000 D3 examples compilation and in addition to many more d3 examples, the list is now sorted alphabetically. Most of the D3 examples in this list come from this excel list but I also added some updates and my examples to push the list over 2K. Examples are really helpful when doing any kind of development so I am hoping that this big list of D3 examples will be a valuable resource. Bookmark and share with others. Here is the huge list of D3 demos:
Read more
SVG is awesome but sometimes you want to convert it into an image format like a JPG or PNG. If you created some chart or graph with D3.js, you might want to offer the option of saving that graph in an image format. Looking around, I landed on this Save SVG as PNG article and while it provides a good solutions to the problem, I wanted to expand on it and provide some other options. First of all, I want to go through an example where you are creating something in D3 and then want to make this conversion using a button and a JavaScript function. I think you could provide 3 types of image files: an SVG converted to a dataurl and inserted into an image tag (this is still technically SVG), a SVG converted into a PNG using HTML5 CANVAS and inserting that base64 data into an IMG tag, and finally, converting the SVG into a PNG binary data and loading that into a blob url so that you can provide an actual filename inside of an IMG tag.
Read more
I was really impressed with Leaflet and UTFgrid but I wondered how hard would it be to allow the end user to highlight countries on mouse hover and zoom into a specific country on mouse click. I did that in my D3 World Map Example by leveraging GeoJSON but Leaflet.js creates a world map using image tiles. Of course, you could load the GeoJSON code as a layer in Leaflet and then use that data to identify countries on mouse over and zoom into the bounds of that country area on click. It’s actually really simple and here is how to do it.
Read more
Final Demo: Direct Flights World Map
Update:
Many countries do not have direct flights. Recently, there has been a lot of talk about Edward Snowden not having a direct flight from Russia to Venezuela. I have updated the routes map to capture the fastest flights in between countries where a direct flight does not exist and for such two countries, the result shows all possible flights with one connection. Here are the possible flights for Edward Snowden from Russia to Venezuela.
Direct Flights with Connections
I like to travel and the problem I have with Kayak, Momondo, and other travel search solutions is that they want me to give them a specific source location and destination location. They do have a radius search but my trips don’t really have specific locations, I want to know all my options and all I care about is price. Usually, I am interested in exploring some country, I intent on seeing various cities in that country and don’t really care which city I fly into or fly out of. I also don’t really want to be limited to a radius in the origin city, it’s not a big deal to drive from Los Angeles to San Diego or Boston to New York if it results in a cheaper direct flight.
What I really want is more information about airlines and their routes. I want to see all the direct flights in between countries, inside a country, and from specific airports. I don’t know why this thing does not exist but when I build my OpenLayers demo, I realized that OpenFlights has airline routes information. So, today I am going to use that data file to create an interactive world map in D3 and let you select two countries which will show you all the direct flights between those 2 countries. You can also click on an airport and get all direct flights from that airport. Clicking on a single country will give you all direct flights from that country to the world and clicking twice on a country will give you all the direct flights within a country.
Read more
Final Demo: US Ski Resorts on PolyMaps
PolyMaps is a free JavaScript library for making dynamic maps using tiled vector data in spherical mercator projection. In other words you get a full-fledged slippy maps (image tiles, pan, zoom, etc) library that works with SVG. This is very similar to my geo example with D3, but D3 is more of a visualization library with geographical capabilities while PolyMaps is more focused on just mapping. PolyMaps has nice documentation and examples, and it was a breeze to create a simple map.
Now, lets add some data. I have mentioned GeoCommons before, but I wanted to show how easy it is to find and visualize some interesting data sets from GeoCommons. You could just upload some data to GeoCommons and let them create a map for you but we are going to browse the website for uploaded geo data and make our own map. PolyMaps uses GeoJSON and GeoCommons allows you to transform their data sets into various formats so lets get started.
Read more
Need a jVectorMap for a specific country? Get it here
The title of the post might be a bit misleading as I want to talk about how to understand and modify maps for jVectorMap rather than create maps. There is some interest on creating different versions of the original world map and not necessarily a new rendering and projection. In my last post on converting jVectorMap to JQVMap I had few requests for continent maps. So, I opened the JavaScript file that has the map data and realized that the code there is basically built on SVG paths. This is actually well documented and a link there takes you to a pretty good explanation of how SVG paths work. So, today, I will create some continents from the data we already have and talk a little about SVG and geo projection.
Read more
In my last post, I dived into OpenLayers and created a demo that uses different data sets, layers, and tooltips. Today, I am creating something very similar but serving a different purpose: visually comparing something with different data sets of geographical points. That sounds confusing, but I am referring to a concept like airports and grabbing data about airport locations from various sources and visualizing the differences between the sources. You can just look at the size of the data source and determine that it is larger and has more airports but plotting geo locations on a map and seeing it with your eyes can bring more insight.
Read more
After making some D3 examples I wanted to take a look at Raphael. If you are interested in comparing D3.js to Raphael.js, there are some good posts about this on Quora and StackOverflow, but I wanted to just create a simple example of drawing a world map and visualizing all the county capitals. When I looked at the Raphael World Map example, I also realized that I could use their JavaScript function to build a nice geographic coordinate converter which is often useful when plotting geo coords that contain degrees, minutes, and seconds. So, let’s get started.
Read more
Often times, you find the data that you need in a format that you don’t want. Perhaps, you are looking for GeoJSON but the data is in a ShapeFile, or you need an SVG format but you can only find a bitmap image. Maybe you need to convert an SVG to JSON, or CSV to TSV, or something else. Either way, converters are really useful to convert the same data to a format that integrates with your application and I wanted to start a collection of different kinds of great data converters that I have found online. Recently, I have even wrote my own converter and some of that work has inspired this post.
Read more
