datamaps/README.md at master · markmarkoh/datamaps Building Great Web Maps: A D3.js Tutorial Data Driven Documents, or D3.js, is “a JavaScript library for manipulating documents based on data”. Or to put it more simply, D3.js is a data visualization library. It was developed by Mike Bostock with the idea of bridging the gap between static display of data, and interactive and animated data visualizations. D3 is a powerful library with a ton of uses. In this tutorial, I’ll discuss one particularly compelling application of D3: map making. What is D3 used for? D3.js can bind any arbitrary data to a Document Object Model (DOM), and then, through the use of JavaScript, CSS, HTML and SVG, apply transformations to the document that are driven by that data. At its simplest, D3.js can be used to manipulate a DOM. <! The strength of D3.js, however, is in its data visualization ability. D3 for Maps and Geographic Data Visualization But D3.js can be used for much more than just DOM manipulation, or to draw charts. Geographic Data for D3 Map Libraries: Google Maps and Leaflet.js Raster Maps
Interactive Map with d3.js - TNODA This is an interactive map. Please click United States, Japan or their states/prefectures to see zoom animation. 1 Gather Geo Data d3.js doesn't come with geo data, so let's get country, state/province and city data first. 2 Shapefile GeoJSON Topojson Once you download and unzip them, you can find a bunch of files with different file extensions. Install GDAL To convert a shapefile into GeoJSON, we'll use a command line tool, ogr2ogr in Geospatial Data Abstraction Library - GDAL. > brew install gdal Install Topojson Another CLI tool that we use will use is topojson, which converts GeoJSON to Topojson. > npm install -g topojson 3 Convert Files Let's start with the countries shapefile. > ogr2ogr -f GeoJSON countries.json ne_10m_admin_0_countries_lakes.shp This will create GeoJSON file called "countries.json" from the shapefile. Exclude Antarctica For this demo, we don't really need Antarctica (sorry, no offense). Pick attributes 4 Simplify Files A. B. 5 Create State Topojson 6 Create City Topojson
Raphaël—JavaScript Library SVG Animations Using CSS and Snap.svg Today I wanted to share with you the ease of animation in SVG with the tools we have available to us today. SVG is still one of those subjects that can scare away a lot of developers, but I'm here to show you hopefully just how easy it can be. While doing my usual search on the internet for inspiration, I came across this great post on From Up North. As you can see, there are some beautiful illustrations by Miguel Sousa aka Heymikel, Snack Studio, Martín Feijoó & Sara Enríquez. As soon as I saw the animations, the first thing that came to mind was how these could be made into SVG animations to be used freely on the internet. Let's get to it There are a few different implementations, some with the focus more on the Snap.svg side of things, then also combining both Snap.svg and CSS animations. Preparation The first part of any SVG project should be spent optimising your SVG's, hopefully in your case you have either created them yourself or will have a nice SVG supplied by your design team.
Browserify Chartist - Simple responsive charts You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included. Highly customizable responsive charts Facts about Chartist The following facts should give you an overview why to choose Chartists as your front-end chart generator: Simple handling while using convention over configurationGreat flexibility while using clear separation of concerns (Style with CSS & control with JS)Usage of SVG (Yes! These projects and wrapper libraries are known to me right now that either use Chartist.js or wrap them into a library for usage in a framework. Cross-browser support Note that CSS3 animations on SVG CSS attributes are not supported on all browsers and the appearance may vary.
Understanding the four layers of JavaScript OOP JavaScript OOP is baffling: on one hand, there is a simple core, on the other hand, there are some really weird things going on. I’ve been pondering for a long time how to explain it well and I think the best way to do so is via four layers: single objects, prototype chains, constructors, constructor inheritance. The first two layers are JavaScript’s simple OOP core, layers 3 and 4 are where the complications start. I’ve explained the four OOP layers in an O’Reilly webcast: Video on YouTube (starts later to avoid duplicated content at the beginning)SlidesFull webcast (requires Flash, but the audience’s comments in the chat are interesting) Additional material: “In defense of JavaScript’s constructors” explains my – conservative – recommendation of constructors“JavaScript’s ‘this’: how it works, where it can trip you up”Chapter “Objects and Inheritance” in the online version of “Speaking JavaScript”