109 |
229 | )
230 | }
231 | }
232 |
233 | export function Emmys() {
234 | const width = 960,
235 | height = 500,
236 | margin = { top: 30, right: 130, bottom: 50, left: 340 }
237 |
238 | const x = scaleLinear()
239 | .range([margin.left, width - margin.right])
240 | .domain([2013, 2017])
241 | const y = scaleLinear().range([height - margin.bottom, margin.top])
242 | const networkLines = yearNetwork.networkLines
243 |
244 | y.domain([0, Math.max(...networkLines.map(d => d.max))])
245 | let lineGen = line()
246 | .x(function(d) {
247 | return x(d.year)
248 | })
249 | .y(function(d) {
250 | return y(d.value)
251 | })
252 |
253 | const colors = {
254 | HBO: "black",
255 | Netflix: "#D32F2F",
256 | NBC: "#ffc107",
257 | "FX Networks": "#0097a7",
258 | ABC: "#00BFA5",
259 | CBS: "#00BCD4",
260 | FOX: "#3f51b5",
261 | Showtime: "#C5CAE9",
262 | AMC: "#D32F2F",
263 | PBS: "#B39DDB",
264 | Amazon: "#ffc107",
265 | "Nat Geo": "#ff9800",
266 | Hulu: "#00BFA5"
267 | }
268 | const highlight = ["HBO", "Netflix"]
269 |
270 | const lines = networkLines
271 | .sort((a, b) => a.total - b.total)
272 | .map(d => (
273 | Basic Circle Callouts
110 | 111 | Explore in CodePen 112 | 113 | 128 |
129 | {`
130 |
131 | const margin = { top: 20, right: 20, bottom: 30, left: 50 },
132 | height = 500 - margin.top - margin.bottom
133 | let width = 860 - margin.left - margin.right
134 |
135 | const x = scaleTime().range([0, width])
136 | const y = scaleLinear().range([height, 0])
137 |
138 | const valueline = line()
139 | .x(d => x(d.date))
140 | .y(d => y(d.close))
141 |
142 | stock.forEach(function(d) {
143 | d.date = new Date(d.date)
144 | d.close = +d.close
145 | })
146 |
147 | x.domain(extent(stock, d => d.date))
148 | y.domain([0, max(stock, d => d.close)])
149 |
150 | //Add annotations
151 | const labels = [
152 | {
153 | data: { date: "9-Apr-12", close: 636.23 },
154 | dy: 37,
155 | dx: -142
156 | },
157 | {
158 | data: { date: "26-Feb-08", close: 119.15 },
159 | dy: -137,
160 | dx: 0,
161 | note: { align: "middle" }
162 | },
163 | {
164 | data: { date: "18-Sep-09", close: 185.02 },
165 | dy: 37,
166 | dx: 42
167 | }
168 | ].map(l => {
169 | l.x = x(new Date(l.data.date))
170 | l.y = y(l.data.close)
171 | l.note = Object.assign({}, l.note, {
172 | title: \`Close: \${l.data.close}\`,
173 | label: \`\${l.data.date}\`
174 | })
175 | l.subject = { radius: 4 }
176 |
177 | return l
178 | })
179 |
180 | const annotations = labels.map((a, i) => (
181 |
182 |
198 | this.setState({
199 | hover: i
200 | })}
201 | onMouseOut={() =>
202 | this.setState({
203 | hover: null
204 | })}
205 | />
206 |
207 | ))
208 |
209 | return (
210 |
225 | )
226 | `}
227 |
228 |
367 |
368 | Explore in CodePen
369 |
370 |
393 | )
394 | }
395 |
--------------------------------------------------------------------------------
/src/docs/Icons.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | import React from "react"
3 | /* eslint-enable no-unused-vars */
4 |
5 | export function DonutIcon() {
6 | return (
7 |
371 |
387 |
392 |
388 | Netflix Challenges HBO at
389 | the 2017 Emmys
390 |
391 | 27 | # {text} 28 |
29 | ) 30 | } 31 | 32 | export const Code = ({ children }) => { 33 | return ( 34 |35 |37 | ) 38 | } 39 | 40 | export function Introduction() { 41 | return ( 42 |{dedent(children)} 36 |
45 | Annotations{" "} 46 | 47 | establish context, and direct our users to insights and anomalies 48 | 49 | . I made d3-annotation{" "} 50 | to tackle this problem, however most of our apps are built in React. The 51 | design is heavily based on d3-annotation, with{" "} 52 | a few differences, two new annotation types, 53 | and easy to compose annotations. 54 |
55 | 56 |57 | Use react-annotation with built-in annotation types, or extend it to 58 | make custom annotations. It is made for SVG. 59 |
60 |61 | Contact me through the{" "} 62 | github repo{" "} 63 | or twitter. 64 |
65 |Using NPM
74 |You can add the react-annotation as a node module by running:
75 |{"npm i react-annotation -S"}
76 | If you're new to using React, I suggest using{" "}
77 |
78 | react-create-app
79 | {" "}
80 | to start your project.
81 | 
90 |
91 | They are the foundational blocks of this library. Explore the UI below to understand the built-in types.
92 | `
93 |
94 | return (
95 |
207 | In react-annotation it is easy to add custom elements to an
208 | annotation. All annotations are composable with the different subjects,
209 | connectors, and notes.
210 |
238 | {`
239 | import { Annotation, SubjectCircle, ConnectorElbow, ConnectorEndDot,
240 | Note } from 'react-annotation'
241 |
242 | const x = 100
243 | const y = 50
244 |
245 | //You can customize just by using the same
246 | //values you would pass to annotation
247 | const circle = (
248 | {
269 | console.log(props, state, event)
270 | }
271 | }}
272 | >
273 |
276 |
278 |
279 | //Two custom elements added to this annotation
280 | `}
285 |
286 |