WordPress.org
Get WordPress

Plugin Directory

Changeset 709779


Ignore:
Timestamp:
05/08/2013 08:38:57 AM (13 years ago)
Author:
thmufl
Message:

World Map added

Location:
ipu-chart
Files:
17 added
9 edited
1 copied

Legend:

Unmodified
Added
Removed

  • ipu-chart/tags/0.5/css/ipu-chart.css

    r705521 r709779  
    1717
    1818.chart svg {
    19   //border: 2px solid red;
     19//  border: 2px solid red;
    2020  font: 0.8em sans-serif;
     21}
     22
     23/* Map chart definitions */
     24
     25.ISO-3166-1 {
     26    //color: transparent;
     27    font-size: 0.8em;
     28}
     29
     30.stroke {
     31  fill: none;
     32  stroke: dimgray;
     33  stroke-width: 0.5px;
     34}
     35
     36.fill {
     37  fill: #fff;
     38}
     39
     40.graticule {
     41  fill: none;
     42  stroke: #777;
     43  stroke-width: .5px;
     44  stroke-opacity: .5;
     45}
     46
     47.land {
     48  fill: #222;
     49}
     50
     51.boundary {
     52  fill: none;
     53  stroke: #fff;
     54  stroke-width: .5px;
    2155}
    2256

  • ipu-chart/tags/0.5/ipu-chart.php

    r708090 r709779  
    22/*
    33    Plugin Name: IPU-Chart
    4     Plugin URI: https://www.ipublia.com/ipu-chart
    5     Description: Creates SVG based charts out of your comma or tab separated data. Currently supports bar, pie, donut, line and scatter charts.
     4    Plugin URI: https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/
     5    Description: Creates SVG based charts out of your comma or tab separated data. Currently supports bar, pie, donut, line, scatter and world map charts.
    66    Author: ipublia, Thomas Müller Flury
    7     Version: 0.4.1
     7    Version: 0.5
    88    Author URI: https://www.ipublia.com/author/thmufl/
    99    Text Domain: ipuchart
    … …  
    129129// Add plug-in's scripts to the header of the pages
    130130function ipu_add_custom_scripts() {   
    131     wp_register_script('custom-script-d3', plugins_url( '/js/d3/d3.v3.min.js', __FILE__ ));
     131    wp_register_script('custom-script-d3', plugins_url( '/js/d3/d3.v3.min.js', __FILE__ ));
     132    wp_register_script('custom-script-queue', plugins_url( '/js/d3/queue.v1.min.js', __FILE__ ));
     133    wp_register_script('custom-script-d3-geo-projection', plugins_url( '/js/d3/d3.geo.projection.v0.min.js', __FILE__ ));
     134    wp_register_script('custom-script-topojson', plugins_url( '/js/d3/topojson.v0.min.js', __FILE__ ));
    132135    wp_register_script('custom-script-ipuc', plugins_url( '/js/ipu-chart.js', __FILE__ )); 
    133136 
    134     wp_enqueue_script('custom-script-d3');
     137    wp_enqueue_script('custom-script-d3');
     138    wp_enqueue_script('custom-script-queue');
     139    wp_enqueue_script('custom-script-d3-geo-projection');
     140    wp_enqueue_script('custom-script-topojson');
    135141    wp_enqueue_script('custom-script-ipuc'); 
    136142}

  • ipu-chart/tags/0.5/js/ipu-chart.js

    r708090 r709779  
    66    touch_device = window.Touch ? true : false,
    77    svgSupport = window.SVGSVGElement ? true : false,
     8    pluginPath = getPluginPath(),
    89    defaultOpacity = 0.7,
    910    tooltip;
     11
     12function getPluginPath() {
     13    var scripts = document.getElementsByTagName('script');
     14    var path = '';
     15    if(scripts && scripts.length>0) {
     16        for(var i in scripts) {
     17            if(scripts[i].src && scripts[i].src.indexOf("js/ipu-chart.js") > 0) {
     18                file =  scripts[i].src;
     19                path = file.substring(0, file.indexOf("js/ipu-chart.js"));
     20                break;
     21            }
     22        }
     23    }
     24    return path;
     25};
    1026
    1127function toArray(l) {
    … …  
    1733}
    1834
     35var dateFormat = d3.time.format("%d-%b-%Y");
     36var numberFormat = d3.format("n");
     37   
     38function isNumber(n) {
     39    return !isNaN(parseFloat(n)) && isFinite(n);
     40}
     41
    1942function parserFor(format) {
    2043    format = format.trim();
     44    if(format == "n" || format == "number") return parseFloat;
    2145    if(format == "i" || format == "integer") return parseInt;
    2246    if(format == "f" || format == "float") return parseFloat;
    … …  
    96120    var svg = figure.append("svg");
    97121   
    98     svg.append("g")
    99         .attr("class", "meta")
    100         .append("title").text(title)
    101         .append("description").text(description);
     122    var meta = svg.append("g")
     123        .attr("class", "meta");
     124       
     125    meta.append("title").text(title);
     126    meta.append("description").text(description);
     127    meta.append("a")
     128        .attr("href", "https://www.ipublia.com/products/ipu-chart-svg-chart-library/")
     129        .text(version + " (IPU448032107)");
    102130       
    103131    figure.append("figcaption").text(title);   
    … …  
    141169                   
    142170        console.log("PLUGIN: "
    143                     + "\n\t" + version);
    144                    
     171                    + "\n\tversion: " + version
     172                    + "\n\tpath: " + getPluginPath());
    145173                   
    146174        console.log("CALL RENDER CHART: "
    … …  
    179207    color = toArray(color);
    180208    animate = toArray(animate);
    181    
     209       
    182210    if(animate[0] == "slow") animate = ["5000", "linear"];
    183211    else if(animate[0] == "medium") animate = ["2000", "linear"];
    … …  
    233261   
    234262    data = parseData(data, category, value, format, debug);
    235 
     263   
    236264    if(type.toLowerCase().trim() == "bar")
    237265        renderBar(figure, data, category, value, format, color, sort, interpolate, animate, debug);
    … …  
    252280        renderScatter(figure, data, category, value, format, color, sort, interpolate, animate, debug);
    253281       
     282    else if(type.toLowerCase().trim() == "map.world.countries")
     283        renderMapWorldCountries(figure, data, category, value, format, color, sort, interpolate, animate, debug);
     284       
    254285    else if(type.toLowerCase().trim() == "table")
    255286        renderTable(figure, data, category, value, debug);
    … …  
    259290}
    260291
     292function renderMapWorldCountries(figure, data, category, value, format, color, sort, interpolate, animate, debug) {
     293    if(debug) console.log("START RENDER WORLD MAP COUNTRIES");
     294   
     295    var color = d3.scale.log()
     296        .domain(d3.extent(data, function(d) { return d[value[0]] }))
     297        .range([color[0], color[1]]);
     298               
     299    var svg = figure.select("svg");
     300    var g = svg.select("g.main");
     301
     302    var margin = {top: 1, right: 1, bottom: 1, left: 1},
     303        width = parseInt(svg.attr("width")) - margin.left - margin.right,
     304        height = parseInt(svg.attr("height")) - margin.top - margin.bottom,
     305        centered;
     306   
     307    var projection = d3.geo.kavrayskiy7()
     308        .scale(105)
     309        .translate([width / 2, height / 2])
     310        .precision(.1);
     311
     312    var path = d3.geo.path()
     313        .projection(projection);
     314
     315    var graticule = d3.geo.graticule();
     316
     317    g.append("defs").append("path")
     318        .datum({type: "Sphere"})
     319        .attr("id", "sphere")
     320        .attr("d", path);
     321
     322    g.append("use")
     323        .attr("class", "stroke")
     324        .attr("xlink:href", "#sphere");
     325
     326    g.append("use")
     327        .attr("class", "fill")
     328        .attr("xlink:href", "#sphere");
     329
     330    g.append("path")
     331        .datum(graticule)
     332        .attr("class", "graticule")
     333        .attr("d", path);
     334 
     335    queue()
     336        .defer(d3.json, pluginPath + "raw/world-110m.json")
     337        .defer(d3.tsv, pluginPath + "raw/world-ISO-3166-1-numeric.tsv")
     338        .await(ready);
     339 
     340    function ready(error, world, names) {
     341        var globe = {type: "Sphere"},
     342        land = topojson.object(world, world.objects.land),
     343        countries = topojson.object(world, world.objects.countries).geometries,
     344        borders = topojson.mesh(world, world.objects.countries, function(a, b) { return a.id !== b.id; });
     345       
     346        countries = countries.filter(function(d) {
     347            return names.some(function(n) {
     348                if (d.id == n["ISO-3166-1"]) return d.name = n.name;
     349            });
     350        }).sort(function(a, b) {
     351            return a.name.localeCompare(b.name);
     352        });
     353 
     354
     355        data.forEach(function(d, i) {
     356            countries.forEach(function(c, j) {
     357                if (c.id == d["ISO-3166-1"]) {
     358                    value.forEach(function(v, k) {
     359                        c[v] = d[v];
     360                    });             
     361                    return;
     362                }
     363            });
     364        });
     365   
     366        g.selectAll(".country")
     367            .data(countries)
     368            .enter().insert("path", ".graticule")
     369            .attr("class", "country")
     370            .attr("d", path)
     371            .style("fill", function(d, i) { return d[value[0]] ? color(d[value[0]]) : "gray"; })
     372            .style("opacity", defaultOpacity);
     373
     374        g.insert("path", ".graticule")
     375            .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
     376            .attr("class", "boundary")
     377            .attr("d", path);
     378                       
     379        if(touch_device) {
     380            g.selectAll(".country")
     381                .on("touchstart", showTooltip);
     382        } else {
     383            g.selectAll(".country")
     384                .on("mouseover", showTooltip)
     385                .on("mousemove", moveTooltip)
     386                .on("mouseout", hideTooltip)
     387                .on("click", zoom);
     388        }
     389       
     390        function zoom(d) {
     391            var x, y, k;
     392 
     393            if (d && centered !== d) {
     394                var centroid = path.centroid(d);
     395                x = centroid[0];
     396                y = centroid[1];
     397                k = 4;
     398                centered = d;
     399            } else {
     400                x = width / 2;
     401                y = height / 2;
     402                k = 1;
     403                centered = null;
     404            }
     405
     406            g.selectAll(".country")
     407                .classed("active", centered && function(d) { return d === centered; });
     408
     409            g.transition()
     410                .duration(1000)
     411                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
     412                .style("stroke-width", 1.5 / k + "px");
     413        }
     414           
     415        if(debug) { console.log("END RENDER WORLD MAP COUNTRIES") };
     416    };
     417}
     418   
    261419function renderScatter(figure, data, category, value, format, color, sort, interpolate, animate, debug) {
    262420    if(debug) { console.log("START RENDER SCATTER"); }
    … …  
    803961        .enter()
    804962        .append("td")
    805             .text(function(d) { return d.value; });
     963            .text(function(d) { return isNumber(d.value) ? numberFormat(d.value) : d.value; });
    806964
    807965    if(debug) { console.log("END RENDER TABLE"); } 
    … …  
    8531011        .enter()
    8541012        .append("td")
    855             .text(function(d) { return d.value; });
     1013            .text(function(d) { return isNumber(d.value) ? numberFormat(d.value) : d.value; });
    8561014           
    8571015    if(debug) { console.log("END RENDER TABLE (deprecated)"); }
    … …  
    8751033        .duration(100)
    8761034        .style("opacity", defaultOpacity);
     1035       
     1036    d3.selectAll(".country").transition()
     1037        .duration(100)
     1038        .style("opacity", defaultOpacity);
    8771039                   
    8781040    d3.select(this).transition()
    … …  
    8801042        .delay(100)
    8811043        .style("opacity", 1.0);
    882    
    883     var dateFormat = d3.time.format("%d-%b-%Y %X");
    884            
     1044       
    8851045    tooltip.html(function() {
    8861046        var str = "";
    … …  
    8901050                if(val instanceof Date) {
    8911051                    val = dateFormat(val);
     1052                } else if(isNumber(val)) {
     1053                    val = numberFormat(val);
    8921054                }
    8931055                str += "<span class='label'>" + e + "</span>" + val + "<br/>";         
    8941056            }
    895         } else {               
     1057        } else {
    8961058            for(var e in d) {
    8971059                var val = d[e];
    8981060                if(val instanceof Date) {
    8991061                    val = dateFormat(val);
    900                 }           
    901                 str += "<span class='label'>" + e + "</span>" + val + "<br/>";         
     1062                } else if(isNumber(val)) {
     1063                    val = numberFormat(val);
     1064                }                   
     1065                if(d.type == "Polygon" || d.type == "MultiPolygon") {
     1066                    if(e == 'id') {
     1067                        str += "<span class='ISO-3166-1'>" + val + "</span><br/>";
     1068                    } else if(e != 'type' && e != 'coordinates') {
     1069                        str += "<span class='label'>" + e + "</span>" + val + "<br/>";
     1070                    }
     1071                } else {
     1072                    str += "<span class='label'>" + e + "</span>" + val + "<br/>";
     1073                }
    9021074            }
    9031075        }
    … …  
    9471119        .style("opacity", defaultOpacity);
    9481120       
     1121    d3.selectAll(".country").transition()
     1122        .duration(200)
     1123        .style("opacity", defaultOpacity);
     1124       
    9491125    tooltip.transition()
    9501126        .duration(200)

  • ipu-chart/tags/0.5/readme.txt

    r708153 r709779  
    11=== Plugin Name ===
    22Contributors: thmufl
    3 Tags: chart, diagram, svg, csv, excel, numbers, bar chart, pie chart, line chart, donut chart, scatter chart, animation, quotes
     3Tags: chart, bar chart, pie chart, line chart, donut chart, scatter chart, world map, map, countries, animation, quotes, diagram, csv, tsv, excel, numbers, svg, d3, d3js
    44Requires at least: 3.0.1
    55Tested up to: 3.5.1
    6 Stable tag: 0.4.1
     6Stable tag: 0.5
    77License: GPLv2 or later
    88License URI: http://www.gnu.org/licenses/gpl-2.0.html
    99
    10 Creates SVG based, animated bar, pie, donut, line and scatter charts out of your data. A powerful, easy to use shortcode.
     10Creates SVG based, animated bar, pie, donut, line, scatter and word map charts out of your data. A powerful, easy to use shortcode.
    1111
    1212== Description ==
    1313
    14 IPU-Chart is an easy to use shortcode that creates SVG based bar, pie, donut, line and scatter charts out of your csv (comma separated) or tsv (tab separated) data.
     14IPU-Chart is an easy to use shortcode that creates SVG based bar, pie, donut, line, scatter and world map charts out of your csv (comma separated) or tsv (tab separated) data.
    1515
    1616The plugin allows you to load the data to display as a chart from a remote service that delivers csv or tsv formatted data. You can also export you data from favorite spreadsheet application (Excel, Numbers, Open Office) and display it as a chart in your blog or page.
    … …  
    1818IPU-Chart is based on [SVG](http://www.w3.org/TR/SVG/) and [D3](http://d3js.org/). It works perfectly on large computer screens as well as on tablets and smaller mobile screens. For browsers that do not support SVG an alternative image can be set.
    1919
    20 The styling of all chart types can be done precisely and easily with css. 
     20The styling of all chart types can be done precisely and easily with css.
    2121
    2222= Features =
    2323
    24 * Create bar, pie, donut, line and scatter charts
     24* Create bar, pie, donut, line, scatter charts and world map charts
    2525* Enter the csv/tsv data directy in you blog or page
    2626* Load the csv/tsv data from a remote location
    … …  
    2828* Style the charts with css
    2929* Tooltip for chart details (see screenshots)
    30 * Animated bar charts
     30* Animated world map and bar charts
    3131* Define colors and number formats of the chart
    3232* Create an additional table view of the data
    3333
    3434= Usage =
     35
     36*Read our blog [Create a World Map in WordPress](https://www.ipublia.com/create-a-world-map-in-wordpress/ "Create a World Map in WordPress") for a short introduction of the new world map chart.*
    3537
    3638First, define your data. You can create it immediately in WordPress or copy and paste it from an export of your favourite spreadsheet application. Example:
    … …  
    4547</pre>
    4648
    47 Second, define the chart. Reference the csv (or tsv). Set the chart type and the category and value column. Define the format (string, integer, float or date) of the category and value columns. Enter a title and a description for the chart:
     49Second, define the chart. Reference the csv (or tsv). Set the chart type and the category and value column. Define the format (string, number, integer, float or date) of the category and value columns. Enter a title and a description for the chart:
    4850
    4951<pre>
    … …  
    5254       category='Country'
    5355       value='Population'
    54        format='string, float'
     56       format='string, number'
    5557       title='Top five most populous countries of the world...'
    5658       description='The top five most populous countries of the world...'
    5759       animate='medium']
    5860</pre>
     61
     62**Important:** Please enter the attributes in one line without the linefeeds (otherwise WordPress will not understand the shortcode). The linefeeds in the example are for legibility only.
    5963
    6064But the data can of course also be requested by url:
    … …  
    6569       category='Date'
    6670       value='Sales ($)'
    67        format='dd.mm.yy, float'
     71       format='dd.mm.yy, number'
    6872       color='green'
    6973       title='Sales of the week']
    … …  
    1061105. Line chart
    1071116. Interpolated line chart
    108 7. Scatter chart (simple)
     1127. Scatter chart
    1091138. Line chart with an alternative layout
     1149. World map chart
    110115
    111116== Changelog ==
    … …  
    145150* [tsv] shortcode added
    146151
     152= 0.5 =
     153* World Map chart type (map.world.countries) added
     154* number (n) as format added
     155* Improvements in formatting numbers
     156
    147157== Upgrade Notice ==
    148158
    … …  
    168178* Tables can now be defined with [chart type="table" ...]. The columns to display can now be choosen with the 'category' and 'value' attributes.
    169179* The [table] shortcode is still supported but deprecated.
     180
     181= 0.5 =
     182* World Map chart type (map.world.countries) added
     183* number (n) as format added
     184* Improvements in formatting numbers

  • ipu-chart/trunk/css/ipu-chart.css

    r705521 r709779  
    1717
    1818.chart svg {
    19   //border: 2px solid red;
     19//  border: 2px solid red;
    2020  font: 0.8em sans-serif;
     21}
     22
     23/* Map chart definitions */
     24
     25.ISO-3166-1 {
     26    //color: transparent;
     27    font-size: 0.8em;
     28}
     29
     30.stroke {
     31  fill: none;
     32  stroke: dimgray;
     33  stroke-width: 0.5px;
     34}
     35
     36.fill {
     37  fill: #fff;
     38}
     39
     40.graticule {
     41  fill: none;
     42  stroke: #777;
     43  stroke-width: .5px;
     44  stroke-opacity: .5;
     45}
     46
     47.land {
     48  fill: #222;
     49}
     50
     51.boundary {
     52  fill: none;
     53  stroke: #fff;
     54  stroke-width: .5px;
    2155}
    2256

  • ipu-chart/trunk/ipu-chart.php

    r708090 r709779  
    22/*
    33    Plugin Name: IPU-Chart
    4     Plugin URI: https://www.ipublia.com/ipu-chart
    5     Description: Creates SVG based charts out of your comma or tab separated data. Currently supports bar, pie, donut, line and scatter charts.
     4    Plugin URI: https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/
     5    Description: Creates SVG based charts out of your comma or tab separated data. Currently supports bar, pie, donut, line, scatter and world map charts.
    66    Author: ipublia, Thomas Müller Flury
    7     Version: 0.4.1
     7    Version: 0.5
    88    Author URI: https://www.ipublia.com/author/thmufl/
    99    Text Domain: ipuchart
    … …  
    129129// Add plug-in's scripts to the header of the pages
    130130function ipu_add_custom_scripts() {   
    131     wp_register_script('custom-script-d3', plugins_url( '/js/d3/d3.v3.min.js', __FILE__ ));
     131    wp_register_script('custom-script-d3', plugins_url( '/js/d3/d3.v3.min.js', __FILE__ ));
     132    wp_register_script('custom-script-queue', plugins_url( '/js/d3/queue.v1.min.js', __FILE__ ));
     133    wp_register_script('custom-script-d3-geo-projection', plugins_url( '/js/d3/d3.geo.projection.v0.min.js', __FILE__ ));
     134    wp_register_script('custom-script-topojson', plugins_url( '/js/d3/topojson.v0.min.js', __FILE__ ));
    132135    wp_register_script('custom-script-ipuc', plugins_url( '/js/ipu-chart.js', __FILE__ )); 
    133136 
    134     wp_enqueue_script('custom-script-d3');
     137    wp_enqueue_script('custom-script-d3');
     138    wp_enqueue_script('custom-script-queue');
     139    wp_enqueue_script('custom-script-d3-geo-projection');
     140    wp_enqueue_script('custom-script-topojson');
    135141    wp_enqueue_script('custom-script-ipuc'); 
    136142}

  • ipu-chart/trunk/js/ipu-chart.js

    r708090 r709779  
    66    touch_device = window.Touch ? true : false,
    77    svgSupport = window.SVGSVGElement ? true : false,
     8    pluginPath = getPluginPath(),
    89    defaultOpacity = 0.7,
    910    tooltip;
     11
     12function getPluginPath() {
     13    var scripts = document.getElementsByTagName('script');
     14    var path = '';
     15    if(scripts && scripts.length>0) {
     16        for(var i in scripts) {
     17            if(scripts[i].src && scripts[i].src.indexOf("js/ipu-chart.js") > 0) {
     18                file =  scripts[i].src;
     19                path = file.substring(0, file.indexOf("js/ipu-chart.js"));
     20                break;
     21            }
     22        }
     23    }
     24    return path;
     25};
    1026
    1127function toArray(l) {
    … …  
    1733}
    1834
     35var dateFormat = d3.time.format("%d-%b-%Y");
     36var numberFormat = d3.format("n");
     37   
     38function isNumber(n) {
     39    return !isNaN(parseFloat(n)) && isFinite(n);
     40}
     41
    1942function parserFor(format) {
    2043    format = format.trim();
     44    if(format == "n" || format == "number") return parseFloat;
    2145    if(format == "i" || format == "integer") return parseInt;
    2246    if(format == "f" || format == "float") return parseFloat;
    … …  
    96120    var svg = figure.append("svg");
    97121   
    98     svg.append("g")
    99         .attr("class", "meta")
    100         .append("title").text(title)
    101         .append("description").text(description);
     122    var meta = svg.append("g")
     123        .attr("class", "meta");
     124       
     125    meta.append("title").text(title);
     126    meta.append("description").text(description);
     127    meta.append("a")
     128        .attr("href", "https://www.ipublia.com/products/ipu-chart-svg-chart-library/")
     129        .text(version + " (IPU448032107)");
    102130       
    103131    figure.append("figcaption").text(title);   
    … …  
    141169                   
    142170        console.log("PLUGIN: "
    143                     + "\n\t" + version);
    144                    
     171                    + "\n\tversion: " + version
     172                    + "\n\tpath: " + getPluginPath());
    145173                   
    146174        console.log("CALL RENDER CHART: "
    … …  
    179207    color = toArray(color);
    180208    animate = toArray(animate);
    181    
     209       
    182210    if(animate[0] == "slow") animate = ["5000", "linear"];
    183211    else if(animate[0] == "medium") animate = ["2000", "linear"];
    … …  
    233261   
    234262    data = parseData(data, category, value, format, debug);
    235 
     263   
    236264    if(type.toLowerCase().trim() == "bar")
    237265        renderBar(figure, data, category, value, format, color, sort, interpolate, animate, debug);
    … …  
    252280        renderScatter(figure, data, category, value, format, color, sort, interpolate, animate, debug);
    253281       
     282    else if(type.toLowerCase().trim() == "map.world.countries")
     283        renderMapWorldCountries(figure, data, category, value, format, color, sort, interpolate, animate, debug);
     284       
    254285    else if(type.toLowerCase().trim() == "table")
    255286        renderTable(figure, data, category, value, debug);
    … …  
    259290}
    260291
     292function renderMapWorldCountries(figure, data, category, value, format, color, sort, interpolate, animate, debug) {
     293    if(debug) console.log("START RENDER WORLD MAP COUNTRIES");
     294   
     295    var color = d3.scale.log()
     296        .domain(d3.extent(data, function(d) { return d[value[0]] }))
     297        .range([color[0], color[1]]);
     298               
     299    var svg = figure.select("svg");
     300    var g = svg.select("g.main");
     301
     302    var margin = {top: 1, right: 1, bottom: 1, left: 1},
     303        width = parseInt(svg.attr("width")) - margin.left - margin.right,
     304        height = parseInt(svg.attr("height")) - margin.top - margin.bottom,
     305        centered;
     306   
     307    var projection = d3.geo.kavrayskiy7()
     308        .scale(105)
     309        .translate([width / 2, height / 2])
     310        .precision(.1);
     311
     312    var path = d3.geo.path()
     313        .projection(projection);
     314
     315    var graticule = d3.geo.graticule();
     316
     317    g.append("defs").append("path")
     318        .datum({type: "Sphere"})
     319        .attr("id", "sphere")
     320        .attr("d", path);
     321
     322    g.append("use")
     323        .attr("class", "stroke")
     324        .attr("xlink:href", "#sphere");
     325
     326    g.append("use")
     327        .attr("class", "fill")
     328        .attr("xlink:href", "#sphere");
     329
     330    g.append("path")
     331        .datum(graticule)
     332        .attr("class", "graticule")
     333        .attr("d", path);
     334 
     335    queue()
     336        .defer(d3.json, pluginPath + "raw/world-110m.json")
     337        .defer(d3.tsv, pluginPath + "raw/world-ISO-3166-1-numeric.tsv")
     338        .await(ready);
     339 
     340    function ready(error, world, names) {
     341        var globe = {type: "Sphere"},
     342        land = topojson.object(world, world.objects.land),
     343        countries = topojson.object(world, world.objects.countries).geometries,
     344        borders = topojson.mesh(world, world.objects.countries, function(a, b) { return a.id !== b.id; });
     345       
     346        countries = countries.filter(function(d) {
     347            return names.some(function(n) {
     348                if (d.id == n["ISO-3166-1"]) return d.name = n.name;
     349            });
     350        }).sort(function(a, b) {
     351            return a.name.localeCompare(b.name);
     352        });
     353 
     354
     355        data.forEach(function(d, i) {
     356            countries.forEach(function(c, j) {
     357                if (c.id == d["ISO-3166-1"]) {
     358                    value.forEach(function(v, k) {
     359                        c[v] = d[v];
     360                    });             
     361                    return;
     362                }
     363            });
     364        });
     365   
     366        g.selectAll(".country")
     367            .data(countries)
     368            .enter().insert("path", ".graticule")
     369            .attr("class", "country")
     370            .attr("d", path)
     371            .style("fill", function(d, i) { return d[value[0]] ? color(d[value[0]]) : "gray"; })
     372            .style("opacity", defaultOpacity);
     373
     374        g.insert("path", ".graticule")
     375            .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
     376            .attr("class", "boundary")
     377            .attr("d", path);
     378                       
     379        if(touch_device) {
     380            g.selectAll(".country")
     381                .on("touchstart", showTooltip);
     382        } else {
     383            g.selectAll(".country")
     384                .on("mouseover", showTooltip)
     385                .on("mousemove", moveTooltip)
     386                .on("mouseout", hideTooltip)
     387                .on("click", zoom);
     388        }
     389       
     390        function zoom(d) {
     391            var x, y, k;
     392 
     393            if (d && centered !== d) {
     394                var centroid = path.centroid(d);
     395                x = centroid[0];
     396                y = centroid[1];
     397                k = 4;
     398                centered = d;
     399            } else {
     400                x = width / 2;
     401                y = height / 2;
     402                k = 1;
     403                centered = null;
     404            }
     405
     406            g.selectAll(".country")
     407                .classed("active", centered && function(d) { return d === centered; });
     408
     409            g.transition()
     410                .duration(1000)
     411                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
     412                .style("stroke-width", 1.5 / k + "px");
     413        }
     414           
     415        if(debug) { console.log("END RENDER WORLD MAP COUNTRIES") };
     416    };
     417}
     418   
    261419function renderScatter(figure, data, category, value, format, color, sort, interpolate, animate, debug) {
    262420    if(debug) { console.log("START RENDER SCATTER"); }
    … …  
    803961        .enter()
    804962        .append("td")
    805             .text(function(d) { return d.value; });
     963            .text(function(d) { return isNumber(d.value) ? numberFormat(d.value) : d.value; });
    806964
    807965    if(debug) { console.log("END RENDER TABLE"); } 
    … …  
    8531011        .enter()
    8541012        .append("td")
    855             .text(function(d) { return d.value; });
     1013            .text(function(d) { return isNumber(d.value) ? numberFormat(d.value) : d.value; });
    8561014           
    8571015    if(debug) { console.log("END RENDER TABLE (deprecated)"); }
    … …  
    8751033        .duration(100)
    8761034        .style("opacity", defaultOpacity);
     1035       
     1036    d3.selectAll(".country").transition()
     1037        .duration(100)
     1038        .style("opacity", defaultOpacity);
    8771039                   
    8781040    d3.select(this).transition()
    … …  
    8801042        .delay(100)
    8811043        .style("opacity", 1.0);
    882    
    883     var dateFormat = d3.time.format("%d-%b-%Y %X");
    884            
     1044       
    8851045    tooltip.html(function() {
    8861046        var str = "";
    … …  
    8901050                if(val instanceof Date) {
    8911051                    val = dateFormat(val);
     1052                } else if(isNumber(val)) {
     1053                    val = numberFormat(val);
    8921054                }
    8931055                str += "<span class='label'>" + e + "</span>" + val + "<br/>";         
    8941056            }
    895         } else {               
     1057        } else {
    8961058            for(var e in d) {
    8971059                var val = d[e];
    8981060                if(val instanceof Date) {
    8991061                    val = dateFormat(val);
    900                 }           
    901                 str += "<span class='label'>" + e + "</span>" + val + "<br/>";         
     1062                } else if(isNumber(val)) {
     1063                    val = numberFormat(val);
     1064                }                   
     1065                if(d.type == "Polygon" || d.type == "MultiPolygon") {
     1066                    if(e == 'id') {
     1067                        str += "<span class='ISO-3166-1'>" + val + "</span><br/>";
     1068                    } else if(e != 'type' && e != 'coordinates') {
     1069                        str += "<span class='label'>" + e + "</span>" + val + "<br/>";
     1070                    }
     1071                } else {
     1072                    str += "<span class='label'>" + e + "</span>" + val + "<br/>";
     1073                }
    9021074            }
    9031075        }
    … …  
    9471119        .style("opacity", defaultOpacity);
    9481120       
     1121    d3.selectAll(".country").transition()
     1122        .duration(200)
     1123        .style("opacity", defaultOpacity);
     1124       
    9491125    tooltip.transition()
    9501126        .duration(200)

  • ipu-chart/trunk/readme.txt

    r708153 r709779  
    11=== Plugin Name ===
    22Contributors: thmufl
    3 Tags: chart, diagram, svg, csv, excel, numbers, bar chart, pie chart, line chart, donut chart, scatter chart, animation, quotes
     3Tags: chart, bar chart, pie chart, line chart, donut chart, scatter chart, world map, map, countries, animation, quotes, diagram, csv, tsv, excel, numbers, svg, d3, d3js
    44Requires at least: 3.0.1
    55Tested up to: 3.5.1
    6 Stable tag: 0.4.1
     6Stable tag: 0.5
    77License: GPLv2 or later
    88License URI: http://www.gnu.org/licenses/gpl-2.0.html
    99
    10 Creates SVG based, animated bar, pie, donut, line and scatter charts out of your data. A powerful, easy to use shortcode.
     10Creates SVG based, animated bar, pie, donut, line, scatter and word map charts out of your data. A powerful, easy to use shortcode.
    1111
    1212== Description ==
    1313
    14 IPU-Chart is an easy to use shortcode that creates SVG based bar, pie, donut, line and scatter charts out of your csv (comma separated) or tsv (tab separated) data.
     14IPU-Chart is an easy to use shortcode that creates SVG based bar, pie, donut, line, scatter and world map charts out of your csv (comma separated) or tsv (tab separated) data.
    1515
    1616The plugin allows you to load the data to display as a chart from a remote service that delivers csv or tsv formatted data. You can also export you data from favorite spreadsheet application (Excel, Numbers, Open Office) and display it as a chart in your blog or page.
    … …  
    1818IPU-Chart is based on [SVG](http://www.w3.org/TR/SVG/) and [D3](http://d3js.org/). It works perfectly on large computer screens as well as on tablets and smaller mobile screens. For browsers that do not support SVG an alternative image can be set.
    1919
    20 The styling of all chart types can be done precisely and easily with css. 
     20The styling of all chart types can be done precisely and easily with css.
    2121
    2222= Features =
    2323
    24 * Create bar, pie, donut, line and scatter charts
     24* Create bar, pie, donut, line, scatter charts and world map charts
    2525* Enter the csv/tsv data directy in you blog or page
    2626* Load the csv/tsv data from a remote location
    … …  
    2828* Style the charts with css
    2929* Tooltip for chart details (see screenshots)
    30 * Animated bar charts
     30* Animated world map and bar charts
    3131* Define colors and number formats of the chart
    3232* Create an additional table view of the data
    3333
    3434= Usage =
     35
     36*Read our blog [Create a World Map in WordPress](https://www.ipublia.com/create-a-world-map-in-wordpress/ "Create a World Map in WordPress") for a short introduction of the new world map chart.*
    3537
    3638First, define your data. You can create it immediately in WordPress or copy and paste it from an export of your favourite spreadsheet application. Example:
    … …  
    4547</pre>
    4648
    47 Second, define the chart. Reference the csv (or tsv). Set the chart type and the category and value column. Define the format (string, integer, float or date) of the category and value columns. Enter a title and a description for the chart:
     49Second, define the chart. Reference the csv (or tsv). Set the chart type and the category and value column. Define the format (string, number, integer, float or date) of the category and value columns. Enter a title and a description for the chart:
    4850
    4951<pre>
    … …  
    5254       category='Country'
    5355       value='Population'
    54        format='string, float'
     56       format='string, number'
    5557       title='Top five most populous countries of the world...'
    5658       description='The top five most populous countries of the world...'
    5759       animate='medium']
    5860</pre>
     61
     62**Important:** Please enter the attributes in one line without the linefeeds (otherwise WordPress will not understand the shortcode). The linefeeds in the example are for legibility only.
    5963
    6064But the data can of course also be requested by url:
    … …  
    6569       category='Date'
    6670       value='Sales ($)'
    67        format='dd.mm.yy, float'
     71       format='dd.mm.yy, number'
    6872       color='green'
    6973       title='Sales of the week']
    … …  
    1061105. Line chart
    1071116. Interpolated line chart
    108 7. Scatter chart (simple)
     1127. Scatter chart
    1091138. Line chart with an alternative layout
     1149. World map chart
    110115
    111116== Changelog ==
    … …  
    145150* [tsv] shortcode added
    146151
     152= 0.5 =
     153* World Map chart type (map.world.countries) added
     154* number (n) as format added
     155* Improvements in formatting numbers
     156
    147157== Upgrade Notice ==
    148158
    … …  
    168178* Tables can now be defined with [chart type="table" ...]. The columns to display can now be choosen with the 'category' and 'value' attributes.
    169179* The [table] shortcode is still supported but deprecated.
     180
     181= 0.5 =
     182* World Map chart type (map.world.countries) added
     183* number (n) as format added
     184* Improvements in formatting numbers
Note: See TracChangeset for help on using the changeset viewer.