Graphics Reference
In-Depth Information
Before displaying, add some CSS styling to
index.html
. Reduce the
opacity of the country arcs and assign the font for the labels. Specify the fill
and outline stroke for the chords just added.
<!-- D3 styling -->
<
style
>
.group
path
{
fill-opacity
:
.5
;
}
svg
{
font
:
11px Myriad Pro
;
}
.chord
{
fill-opacity
:
.9
;
}
path
.chord
{
stroke
:
#000
;
stroke-width
:
.25px
;
}
Interactive Details on Demand
The resulting visualization should now look exactly like the trade diagram
represented in
Figure 12-7
.
As a final step, add a few basic interactions.
Before returning to
worldtrade.js
, add a style to
index.html
for a
circle that will not be visible but that, when hovered over, will hide any
contained path with the fade CSS class applied.
#circle
circle
{
fill
:
none
;
pointer-events
:
all
;
}
#circle:hover
path
.fade {
display
:
none
;
}
</
style
>
