Fatal编程技术网
  • d3.js/
  • D3.js 悲惨世界共现

D3.js 悲惨世界共现

d3.js

D3.js 悲惨世界共现,d3.js,D3.js,请有人解释一下随机共现矩阵中的组、源、值和目标，以及它们是如何相互关联的 如果通过一个例子来解释，那将非常有帮助 我用5个字符尝试了现有示例，但无法链接源、目标和值 此外，如果有人尝试过标准示例“miserables.json”以外的其他输入数据（json数据），请分享，以便我能够更好地理解如何放置数据并查看可视化效果 提前感谢我也对这项任务感兴趣，以下是我的想法。首先，我使用Python（）创建了json，它将被输入到可视化中。json应具有以下形式： { "nodes": [

请有人解释一下随机共现矩阵中的
组
、
源
、
值
和
目标
，以及它们是如何相互关联的

  • 如果通过一个例子来解释，那将非常有帮助
我用5个字符尝试了现有示例，但无法链接源、目标和值

此外，如果有人尝试过标准示例“miserables.json”以外的其他输入数据（json数据），请分享，以便我能够更好地理解如何放置数据并查看可视化效果

提前感谢

我也对这项任务感兴趣，以下是我的想法。首先，我使用Python（）创建了json，它将被输入到可视化中。json应具有以下形式：

{ "nodes": [
            {"name":node_name, "group":node_group},
            {"name":another_node_name, "group":another_node_group}, ...
],
  "links":[
            {"source"link_source, "target":link_target, "value":link_value,
            {"source"another_link_source, "target":another_link_target, "value":another_link_value}, ...
]
}
然后，只需将应用程序指向json文件。我使用Python的Flask库创建了一个简单的服务器，可以为我的json文件提供服务：

#!flask/bin/python
from flask import Flask, jsonify, request, Response
from flask.ext.cors import CORS
import json

application = Flask(__name__)

# Utilize CORS to allow cross-origin API requests
cors = CORS(application)

#############################
# Network Visualization App #
#############################

@application.route('/api/json/<request>', methods=['GET'])
def parse_json_request(request):
    with open("json/" + request, 'r') as json_in:
        cooccurrence_json = json.load(json_in)
        return jsonify(cooccurrence_json)

@application.errorhandler(404)
def page_not_found(e):
    return "Sorry, the page you requested could not be found."  

if __name__ == '__main__':
    application.run(debug=True)

#！烧瓶/箱/蟒蛇
从烧瓶导入烧瓶，jsonify，请求，响应
从flask.ext.cors导入cors
导入json
应用=烧瓶（名称）
#利用CORS允许跨源API请求
cors=cors（应用程序）
#############################
#网络可视化应用程序#
#############################
@application.route（'/api/json/'，methods=['GET']）
def parse_json_请求（请求）：
将open（“json/”+request，'r'）作为json_放入：
cooccurrence\u json=json.load（json\u in）
返回jsonify（cooccurrence\u json）
@application.errorhandler（404）
未找到def页面（e）：
return“抱歉，找不到您请求的页面。”
如果uuuu name uuuuuu='\uuuuuuu main\uuuuuuu'：
application.run（debug=True）
然后，我将服务器和json上传到Amazon Web Services，用于部署应用程序，并以以下方式修改javascript代码：

<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<title>Dramatic Co-occurrence</title>
<style>
    @import url(../style.css?aea6f0a);
    d3_plot {
        font-size: 80%;
    }

    body.svg {
        margin-left: 0px;
    }

    .background {
        fill: #eee;
    }

    line {
        stroke: #fff;
    }

    text.active {
        fill: red;
    }
</style>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>


<header>
</header>

<h1>Character Co-occurrence in Shakespearean Drama</h1>

<aside style="margin-top:20px;">
    <p>Play:
        <select id="selected_json">
            <option value='"http://tdm-api-dev.elasticbeanstalk.com/api/json/king_henry_the_fifth.json"'>Henry VIII</option>
            <option value='"http://tdm-api-dev.elasticbeanstalk.com/api/json/romeo_and_juliet.json"'>Romeo and Juliet</option>
            <option value='"http://tdm-api-dev.elasticbeanstalk.com/api/json/hamlet.json"'>Hamlet</option>
        </select>

    <i>      </i>

    Order:
        <select id="order">
            <option value="name">by Name</option>
            <option value="count">by Frequency</option>
            <option value="group">by Cluster</option>
        </select>



        <p>This application visualizes the degree to which characters in Shakespeare's plays appear together.

            <p>Each colored cell represents two characters that appeared in the same scene, and darker cells indicate characters that co-occurred more frequently.

                <p>Use the drop-down menus to select a different play, reorder the matrix, and explore the data.

                    <p>Built with data from ProQuest's Chadwyck Healey <a href="http://www.proquest.com/products-services/literature_online.html">Literature Online Collections</a>.
</aside>

<d3_plot></d3_plot>

<script>

    function select_json(new_json) {

    var margin = {
            top: 120,
            right: 0,
            bottom: 10,
            left: 160
        },
        width = 800,
        height = 800;

    var x = d3.scale.ordinal().rangeBands([0, width]),
        z = d3.scale.linear().domain([0, 4]).clamp(true),
        c = d3.scale.category10().domain(d3.range(10));

    var svg = d3.select("d3_plot").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .style("margin-left", "0px")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    

        // Based on the user-selected input text above, make the appropriate api call and retrieve the json 
        d3.json(new_json, function(miserables) {

            console.log(new_json)

            var matrix = [],
                nodes = miserables.nodes,
                n = nodes.length;

            // Compute index per node.
            nodes.forEach(function(node, i) {
                node.index = i;
                node.count = 0;
                matrix[i] = d3.range(n).map(function(j) {
                    return {
                        x: j,
                        y: i,
                        z: 0
                    };
                });
            });

            // Convert links to matrix; count character occurrences.
            miserables.links.forEach(function(link) {
                matrix[link.source][link.target].z += link.value;
                matrix[link.target][link.source].z += link.value;
                matrix[link.source][link.source].z += link.value;
                matrix[link.target][link.target].z += link.value;
                nodes[link.source].count += link.value;
                nodes[link.target].count += link.value;
            });

            // Precompute the orders.
            var orders = {
                name: d3.range(n).sort(function(a, b) {
                    return d3.ascending(nodes[a].name, nodes[b].name);
                }),
                count: d3.range(n).sort(function(a, b) {
                    return nodes[b].count - nodes[a].count;
                }),
                group: d3.range(n).sort(function(a, b) {
                    return nodes[b].group - nodes[a].group;
                })
            };

            // The default sort order.
            x.domain(orders.name);

            svg.append("rect")
                .attr("class", "background")
                .attr("width", width)
                .attr("height", height);

            var row = svg.selectAll(".row")
                .data(matrix)
                .enter().append("g")
                .attr("class", "row")
                .attr("transform", function(d, i) {
                    return "translate(0," + x(i) + ")";
                })
                .each(row);

            row.append("line")
                .attr("x2", width);

            row.append("text")
                .attr("x", -6)
                .attr("y", x.rangeBand() / 2)
                .attr("dy", ".32em")
                .attr("text-anchor", "end")
                .text(function(d, i) {
                    return nodes[i].name;
                });

            var column = svg.selectAll(".column")
                .data(matrix)
                .enter().append("g")
                .attr("class", "column")
                .attr("transform", function(d, i) {
                    return "translate(" + x(i) + ")rotate(-90)";
                });

            column.append("line")
                .attr("x1", -width);

            column.append("text")
                .attr("x", 6)
                .attr("y", x.rangeBand() / 2)
                .attr("dy", ".32em")
                .attr("text-anchor", "start")
                .text(function(d, i) {
                    return nodes[i].name;
                });

            function row(row) {
                var cell = d3.select(this).selectAll(".cell")
                    .data(row.filter(function(d) {
                        return d.z;
                    }))
                    .enter().append("rect")
                    .attr("class", "cell")
                    .attr("x", function(d) {
                        return x(d.x);
                    })
                    .attr("width", x.rangeBand())
                    .attr("height", x.rangeBand())
                    .style("fill-opacity", function(d) {
                        return z(d.z);
                    })
                    .style("fill", function(d) {
                        return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group) : null;
                    })
                    .on("mouseover", mouseover)
                    .on("mouseout", mouseout);
            }

            function mouseover(p) {
                d3.selectAll(".row text").classed("active", function(d, i) {
                    return i == p.y;
                });
                d3.selectAll(".column text").classed("active", function(d, i) {
                    return i == p.x;
                });
            }

            function mouseout() {
                d3.selectAll("text").classed("active", false);
            }

            d3.select("#order").on("change", function() {
                clearTimeout(timeout);
                order(this.value);
            });

            function order(value) {
                x.domain(orders[value]);

                var t = svg.transition().duration(2500);

                t.selectAll(".row")
                    .delay(function(d, i) {
                        return x(i) * 4;
                    })
                    .attr("transform", function(d, i) {
                        return "translate(0," + x(i) + ")";
                    })
                    .selectAll(".cell")
                    .delay(function(d) {
                        return x(d.x) * 4;
                    })
                    .attr("x", function(d) {
                        return x(d.x);
                    });

                t.selectAll(".column")
                    .delay(function(d, i) {
                        return x(i) * 4;
                    })
                    .attr("transform", function(d, i) {
                        return "translate(" + x(i) + ")rotate(-90)";
                    });
            }

            var timeout = setTimeout(function() {
                order("group");
                d3.select("#order").property("selectedIndex", 2).node().focus();
            }, 5000);
        });


    }

    // set initial json selection
    select_json("http://tdm-api-dev.elasticbeanstalk.com/api/json/king_henry_the_fifth.json");

    // handle on click event
    d3.select('#selected_json').on('change', function() {

            // erase old image
            d3.select("svg").remove(); 

            var new_json = eval(d3.select(this).property('value'));
            select_json(new_json);
        });
</script>

  [1]: http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/create-deploy-python-flask.html


戏剧共现
@导入url（../style.css？aea6f0a）；
d3_图{
字号：80%；
}
body.svg{
左边距：0px；
}
.背景{
填充：#eee；
}
线{
冲程：#fff；
}
text.active{
填充物：红色；
}
莎士比亚戏剧中的人物共现
.
函数select_json（新_json）{
var保证金={
排名：120，
右:0,，
底部：10，
左：160
},
宽度=800，
高度=800；
var x=d3.scale.ordinal（）.rangeBands（[0，宽度]），
z=d3.scale.linear（），
c=d3.scale.category10（）.domain（d3.range（10））；
var svg=d3。选择（“d3_图”）。追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.style（“左边距”、“0px”）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//根据上面用户选择的输入文本，进行适当的api调用并检索json
d3.json（新的_-json，函数（可怜虫）{
log（新的_json）
var矩阵=[]，
节点=可怜虫。节点，
n=节点长度；
//计算每个节点的索引。
forEach（函数（node，i）{
node.index=i；
node.count=0；
矩阵[i]=d3.范围（n）.映射（函数（j）{
返回{
x:j，
y:我，
z:0
};
});
});
//将链接转换为矩阵；计算字符出现次数。
悲惨世界。链接。forEach（函数（链接）{
矩阵[link.source][link.target].z+=link.value；
矩阵[link.target][link.source].z+=link.value；
矩阵[link.source][link.source].z+=link.value；
矩阵[link.target][link.target].z+=link.value；
节点[link.source].count+=link.value；
节点[link.target].count+=link.value；
});
//预先计算订单。
风险值订单={
名称：d3.范围（n）.排序（函数（a，b）{
返回d3.ascending（节点[a].name，节点[b].name）；
}),
计数：d3.范围（n）.排序（函数（a，b）{
返回节点[b]。计数-节点[a]。计数；
}),
组：d3.范围（n）.排序（函数（a，b）{
返回节点[b]。组-节点[a]。组；
})
};
//默认的排序顺序。
x、 域名（orders.name）；
svg.append（“rect”）
.attr（“类别”、“背景”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var row=svg.selectAll（“.row”）
.数据（矩阵）
.enter（）.append（“g”）
.attr（“类”、“行”）
.attr（“转换”，函数（d，i）{
返回“translate（0），+x（i）+”）；
})
.每排；
行。追加（“行”）
.attr（“x2”，宽度）；
行。追加（“文本”）
.attr（“x”，-6）
.attr（“y”，x.rangeBand（）/2）
.attr（“dy”，“.32em”）
.attr（“文本锚定”、“结束”）
.文本（功能（d，i）{
返回节点[i]。名称；
});
var column=svg.selectAll（“.column”）
.数据（矩阵）
.enter（）.append（“g”）
.attr（“类”、“列”）
.attr（“转换”，函数（d，i）{
返回“平移（“+x（i）+”）旋转（-90）”；
});
列。追加（“行”）
.attr（“x1”，宽度）；
列。追加（“文本”）
.attr（“