Graphics Reference
In-Depth Information
h1
{
font
:
30px Myriad Pro
;
font-weight
:
normal
;
text-align
:
center
;
}
</
style
>
</
head
>
<body>
<
h1
>Global Trade Flow, 2010 ($USD)</
h1
>
<
script
src
=
"worldtrade.js"
></
script
>
</
body
>
</
html
>
You will come back to this page later to add styles for the visualization you
are about to make. Create the
worldtrade.js
file and open it for editing.
d3.js
includes a basic utility function for reading from CSV files using
asynchronous Ajax requests. A supplied callback is invoked on completion.
When the first file completes, load the second, and when that completes,
invoke your main processing function with both results.
// worldtrade.js
d3.csv(
'imports.csv'
,
function
(imports) {
d3.csv(
'countries.csv'
,
function
(countries) {
onLoad(imports, countries);
});
});
function
onLoad(imports, countries) {
// [TO DO: process data here]
}
Process and Model the Data
The first processing step is to merge the country and import data and sort
the countries geographically. Start by creating a function to reduce the list
of countries to only those referenced in the import data:
function
reportingCountries(imports, allCountries) {
var
i;
