"D3.js Practice Tutorial Special article" Pornhub released D3-based netizens watch adult video time-length distribution interactive map

Learning D3.js (hereinafter referred to as D3) also has a period of time, run D3 do a few projects. I found that Chinese D3 tutorials very few, foreign materials but require a certain degree of English reading ability (recommended site: Http://bl.ocks.org/mbostock), so the germination of writing a D3 practical use of the idea of a series of articles, now began to pay action. In the series, I will use D3+HTML5 canvas to achieve some practical effects (such as statistical results display, map data display, etc.), I hope we can learn to communicate with you.

Code I posted on git.cschina.com, you can clone to local run, address is: Http://git.oschina.net/0604hx/d3lesson

The runtime is Java 7+,tomcat 7.0.47+ (WebSocket is needed later, so javaee7 with Tomcat 7+), the IDE is IntelliJ idea 13, and the project view uses Freemarker.

This is the D3 practice of the special article, the code is not written by me, is copied from the Pornhub website, has been simplified, beautified, and added some comments.

I saw a microblog in the morning:

I think a lot of people will know Pornhub, this is one of the world's three major pornographic sites, content is quite rich yo. Cough, off the topic ...

The map mentioned in the microblog is a d3.js application, so I want to look at the specific code. But Pornhub in the country is inaccessible (even search this keyword can not ....) ), so use VPN login, you can access the Pornhub website, wow, there are many resources ah! This site is not the wall is really no justice! I take back the heart, after all, I am not to see the film, I am to learn the technology Ah!

I found an interactive map with the following URL: http://www.pornhub.com/infographic/longest

From the map, you can see the average length of adult videos viewed by netizens around the world. At the same time, you can switch to the United States map. In addition to the country view, you can also go to the city level, this will be on the map to mark the world's major cities, when the mouse moved to the city icon can see the city name and watch the length of data. The map can be scaled down.

Read the code, JS file on two:

Data.min.js is data (includes country-level, city-level data)

Main.js is a map and interactive.

Usa.json is the Geojson data for the United States

World.json is the world map data

For everyone to see the effect, I deployed the map to the D3lesson project, and interested friends can export the project and run it in Git.

Through this example, you can learn to map the switch, zoom, small icons in the large map zoom is the processing method (because the map enlarged, the icon will be enlarged, so that, not beautiful) and so on.

The specific code can be viewed in git (I have annotated), here is the main way to describe the plot:

var m,//svg object R,//Drop map G set U,//Coordinate converter n,//patha,//zoom element e;//map block data var o, l;      Draw Map Function J () {o = $ ("#map"). width ();     Get the geodetic width L = $ ("#map"). Height (); Get the geodetic height D3.json ($ ("body"). Data ("Base-url") + C.mapscope + ". Json", function (w) {m = D3.select (            "#map"). Append ("SVG"). attr ("width", O). attr ("height", l);            $ ("#map"). CSS ("background", C.mapoptions[c.mapdisplaymode].mapbackgroundcolor). CSS ("cursor", "move");            r = M.append ("G");            if (C.mapscope = = "World") {u = d3.geo.mercator (). Translate ([0, 0]). Scale (1). Rotate ([-11.5, 0]) } else {u = D3.geo.albersUsa (). Translate ([0, 0]). Scale (1)} e = Topojson.feature ( W, w.objects[(C.mapscope = = "World")?            "Collection": "USA"]);            E.features = E.features.filter (function (x) {return x.id!== 11;            });      var g = R.selectall (". Country"). Data (E.features);      n = D3.geo.path (). Projection (u);       Q (); Complete the displacement of the map, otherwise the page does not show the if (C.mapdisplaymode = = "Cities") {R.append ("path") of the map. Datum (Topojson.merge (W, w.objects[(C.mapscope = = "World")? "Collection": "USA"].geometries.filter (function (x) {return x.id!==)). attr ("Class "," DropShadow "). attr (" D "," N "). Style (" Fill "," #5e8fa7 "). attr (" width ", O). attr (" height ", l). attr (" Transform ","            Translate (0,5)} g.enter (). Append ("path"). attr ("Class", "Country"). attr ("D", N). attr ("id",            function (y, x) {return "C" + y.id}); D3.selectall ("Path.country"). attr ("Class", "Country")//color the map block, the z-parameter of the function, which is the data object of the corresponding element (assigned by the data () function that was previously called). Style ("Fill ", function (z) {if (C.mapdisplaymode = =" Countries ") {//or for a specific length of time, data structure in data.min.jsvar y = MAPTIMEDATA[C.MAPSCOPE][C.MAPD   Isplaymode][z.id].t;var x = d (y); Judging the color level return x} else {return c.mapoptions[c.mapdisplaymode].mapitemscolor}}). Style ("Stroke-width", 1). Style ("Stroke", c.mapoptions[c.mapdisplaymode].strokecolor);         P ();            Tips for creating Qtip * * The 3 lines of code is to set the SVG wheel magnification effect */d3.behavior.zoom ();            A = D3.behavior.zoom (). Scaleextent ([C.minzoomlevel, C.maxzoomlevel]). On ("Zoom", k);    M.call (a). Call (A.event)}); }

Here are a few more:

"D3.js Practice Tutorial Special article" Pornhub released D3-based netizens watch adult video time-length distribution interactive map