随机应变 ABCD: Always Be Coding and … : хороший
Which apps do you use?
facebook, youtube, facebook messenger, instagram, facetime, snapchat, google maps, pandora maps, pandora radio, twitter, google
“the network” to refer to the internet—the global system of interconnected computer networks that many of us interact with everyday.
Data <-http-> Data
protocol
– a way of communicating
– standard operating procedure
– the rules for communication
Getting Data with HTTP
-> http get request
function plot_points(data){
var nested = d3.nest()
.key(function(d){
return d['date'].getUTCFullYear();
})
.rollup(function(leaves){
debugger;
d3.sum(leaves)
});
.entries(data);
};
EDA:
-insights
-erroneous values
-structure
-yourself
Sketching:
-visual layout
-visual encodings
-others
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style></style>
<script type="text/javascript">
function draw(geo_data){
"use strict";
var margin = 75,
width = 1920 - 75;
height = 1000 - margin;
var svg = d3.select("body")
.append("svg")
.attr("width",width + margin)
.attr("height", height + margin)
.append("g")
.attr('class', 'map');
};
</head>
<body>
<script type="text/javascript">
/*
Use D3 (not dimple.js) to load the TSV file
and pass the contents of it to the draw function
*/
d3.tsv("world_cup.tsv", draw);
</script>
</body>
</html>
Excel, RAW, GNIs
-> dimple.js
-> D3.js
-> canvas, WebGL, SVG
data(data), enter(), append(‘rect’)
Sketching: interactive process of designing a visualization
often not a “right” answer
do not know a priori how data will interact with aesthetic
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<script type="text/javascript">
function draw(data) {
/*
D3.js setup code
*/
"use strict";
var margin = 75,
width = 1400 - margin,
height = 600 - margin;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append('g')
.attr('class','chart');
/*
Dimple.js Chart construction code
*/
var myChart = new dimple.chart(svg, data);
var x = myChart.addTimeAxis("x", "year");
myChart.addMeasureAxis("y", "attendance");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();
};
</script>
</head>
<body>
<script type="text/javascript">
/*
Use D3 (not dimple.js) to load the TSV file
and pass the contents of it to the draw function
*/
d3.tsv("world_cup.tsv", draw);
</script>
</body>
</html>
Visual Encoding Recap
-noun, verb, adjectives
POS:Sentences::VisualEncoding:charts
A chart is a graphical representation of data, in which the data is represented by symbol
Such as bars in a bar chart, lines in a line chart, or slices in a pie chart.
Box plot, Small Multiple
Client-Server Model
d3js.org:80
request <-> response
AJAX
data.json
function draw(data){
var width = 420;
barHeight = 20;
var x = d3.scale.linear()
.range([0, width]);
var chart = d3.select(".chart")
.attr("width", width);
x.domain([0, d3.max(data, function(d){ return d.value; })]);
chart.attr("height", barHeight * data.length);
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i){ return "translate(0," + i * barHeight + ")"});
bar.append("rect")
.attr("width", function(d) { return x(d.value); })
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return x(d.value) - 3;})
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d.value: }):
}
d3.selectAll(‘h1’)
-> Array[2]
d3.select(‘.main-title’).text(‘Gapminder World: China’);
d3.select(‘.navbar-brand.logo’);
d3.select(‘#header-log img’).attr(‘alt’, ‘logo’);
d3.select(‘#header-logo img’).attr(‘src’,’./assets/***.white.png’);
d3.select(‘.main’).html(null);
.domain([15, 90])
.range([250 0])
y = mx + b
d3.scale.linear().domain([15, 90]).range([250, 0]);
var x = d3.scale.log().domain([250, 100000]).range([0, 600]);
var r = d3.scale.sqrt().domain([52070, 1380000000]).range([10, 50]);
mdn svg element
https://developer.mozilla.org/ja/docs/Web/SVG/Element
svg.append(‘circle’).attr(‘fill’,’red’).attr(‘r’,r(13800000000)).attr(‘cx’, x(13330)).attr(‘cy’,y(77));
document.getElementById(“examples”);
document.querySelector(‘.main’);
document
#document
core tochnology
css, html, javascript, svg
data driven documents
Arrays(d3-array)
var data = [
{name: "Alice", value: 2},
{name: "Bob", value: 3},
{name: "Carol", value: 1},
{name: "Dwayne", value: 5},
];
d3: html, css, javascript, svg
5+7;
12
function say_hello(){
return "Hello World!";
}
undefined
say_hello
function say_hello(){
return "Hello World!";
}
say_hello();
"Hello World!"