MouseOverHandlingYearStripe.rtf

{\rtf1\ansi\ansicpg1252\cocoartf2513
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 HelveticaNeue;\f1\fnil\fcharset0 Menlo-Regular;}
{\colortbl;\red255\green255\blue255;\red46\green45\blue42;\red255\green255\blue255;\red162\green70\blue22;
}
{\*\expandedcolortbl;;\cssrgb\c23529\c23137\c21569;\cssrgb\c100000\c100000\c100000;\cssrgb\c70196\c35294\c10588;
}
{\info
{\author Elisabeth Robson}}\margl1440\margr1440\vieww19520\viewh25200\viewkind0
\deftab720
\pard\pardeftab720\sl920\partightenfactor0

\f0\fs72 \cf2 \cb3 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 Do the Work: Add Mouse Over Handling to Display the Year of a Stripe\
\pard\pardeftab720\sa400\partightenfactor0

\fs36 \cf2 In this exercise, you'll add a mouse over event handler to display the year property for a stripe in the console.\cb1 \
\cb3 Each of our data points in the data array has two properties:\'a0
\f1 \cf4 \strokec4 year
\f0 \cf2 \strokec2 \'a0and\'a0
\f1 \cf4 \strokec4 avg
\f0 \cf2 \strokec2 . The\'a0
\f1 \cf4 \strokec4 avg
\f0 \cf2 \strokec2 \'a0property is the temperature anomaly for the year, and we're using that to choose a color by converting each\'a0
\f1 \cf4 \strokec4 avg
\f0 \cf2 \strokec2 \'a0property value into an index for the color array.\cb1 \
\cb3 The\'a0
\f1 \cf4 \strokec4 year
\f0 \cf2 \strokec2 \'a0property contains the year associated with each stripe. To display the year in the console when you mouse over a stripe in the page, you need to add an event handler to each rectangle object representing a stripe.\cb1 \
\cb3 D3 has an\'a0
\f1 \cf4 \strokec4 on()
\f0 \cf2 \strokec2 \'a0method to do just that. The first argument to\'a0
\f1 \cf4 \strokec4 on()
\f0 \cf2 \strokec2 \'a0is the type of the event you're handling; for a mouse over event, that is the string\'a0
\f1 \cf4 \strokec4 "mouseover"
\f0 \cf2 \strokec2 .\cb1 \
\cb3 The second argument is the handler function. Just like the functions we pass to\'a0
\f1 \cf4 \strokec4 attr()
\f0 \cf2 \strokec2 \'a0and\'a0
\f1 \cf4 \strokec4 style()
\f0 \cf2 \strokec2 , the first argument of the handler function is the data point we're working on. In the body of the function, you can handle the event; in our case, we simply want to display the year property value of the data point in the console.\cb1 \
\cb3 See if you can write this code. Add the event handler by chaining the\'a0
\f1 \cf4 \strokec4 on()
\f0 \cf2 \strokec2 \'a0method call to the end of the current method chain we have to create and style the rectangles.\cb1 \
}