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.
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:
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.
Final Demo: Direct Flights World Map
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.
Final Demo: US Ski Resorts on PolyMaps
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.
Need a jVectorMap for a specific country? Get it here
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.
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.