Graphics Reference
In-Depth Information
}
}
return
matrix;
}
Visualize the Data
Now that all of the data processing functions are defined, it's time to put
them together in the
onLoad
function you defined earlier and create a
function to visualize the data.
function
onLoad(imports, countries) {
// pare down the countries to import reporters only
// and sort them radially based on geography
countries =
sortCountries(reportingCountries(imports, countries));
// reformat imports into a matrix of data
imports = createMatrix(imports, countries);
// build the visualization
visualize(imports, countries);
}
function
visualize(matrix, countries) {
// [TO DO: construct the visualization!]
}
The first step in constructing the chord visualization is to add an SVG
element to the DOM with a root group anchored at the center. In this simple
web page example, the SVG element is appended directly to the body. The
next step is to compute the chord layout. Layouts encapsulate much of the
complex form-specific graphical construction. Sorting the exports for each
country and layering chords in order of size will provide some additional
clarity.
function
visualize(imports, countries) {
var
width = 720,
height = 720;
