class MyVisualization extends React.Component {
// Initialize state using a class property
// ref: https://daveceddia.com/where-initialize-state-react/
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Field_declarations
state = {
tooltipState: {
top: 0,
left: 0,
fields: []
}
};
updateTooltipState(tooltipState) {
this.setState({
tooltipState
});
}
render() {
return (
<div className="chart">
<MyChart
books={ this.props.books }
updateTooltipState={ newState => this.updateTooltipState(newState) } />
<MyToolTip
left={ this.state.tooltipState.left }
top={ this.state.tooltipState.top }
fields={ this.state.tooltipState.fields } />
</div>
);
}
}
class MyChart extends React.Component {
shouldComponentUpdate(nextProps) {
return (this.props.books !== nextProps.books);
}
render() {
// layout constants
const w = 700;
const h = 400;
const padding = 40;
const data = this.props.books;
// create scale functions
const xScale = d3.scaleLinear()
.domain([d3.min(data, d => d.year) - 5, d3.max(data, d => d.year) + 5])
.range([padding * 2, w - padding]);
const yScale = d3.scaleLinear()
.domain([3.2, 4.8])
.range([h - padding, padding]);
const zScale = d3.scaleSqrt()
.domain([0, d3.max(data, d => d.count)])
.range([3, 10]);
// define X axis
const xAxis = d3.axisBottom(xScale).tickFormat(d3.format(""));
// define Y axis
const yAxis = d3.axisLeft(yScale);
// create SVG element
const svgNode = ReactFauxDOM.createElement("svg");
const svg = d3.select(svgNode)
.attr("width", w)
.attr("height", h);
// create the datapoints as circles
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => xScale(d.year) )
.attr("cy", d => yScale(d.rating) )
.attr("r", d => zScale(d.count) )
.on("mouseover", d => {
this.props.updateTooltipState({
left: xScale(d.year) + zScale(d.count),
top: yScale(d.rating) + zScale(d.count),
fields: [
`Title: ${ d.title }`,
`Author: ${ d.author }`,
`Year: ${ d.year }`,
`Rating: ${ d.rating ? d.rating.toFixed(1) : "N/A" }`,
`No. of Ratings: ${ d.count ? d.count.toLocaleString() : "N/A" }`
]
});
})
.on("mouseout", () => {
this.props.updateTooltipState({
fields: []
});
});
// create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", `translate(0,${h - padding})`)
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
// create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", `translate(${padding * 2},0)`)
.call(yAxis);
// text label for the x axis
svg.append("text")
.attr("transform", "translate(" + (padding * 2 + 20) + "," + (h - padding - 8) + ")")
.classed("axis-label", true)
.style("text-anchor", "left")
.text("Year Published");
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", padding)
.attr("x", 0 - h / 3 + 15)
.classed("axis-label", true)
.style("text-anchor", "middle")
.text("Goodreads Rating");
// create the chart title
svg.append("text")
.text("Year Published vs Goodreads Rating")
.attr("x", w/2 + padding)
.attr("y", padding/2 + 4)
.attr("text-anchor", "middle")
.classed("title", true);
return svgNode.toReact();
}
}
const MyToolTip = props => (
<div
className="tooltip"
style={ {
display: props.fields.length ? "block" : "none",
top: `${props.top}px`,
left: `${props.left}px`
} }
>
{ props.fields.map( (field, index) => <p key={ index }>{ field }</p> ) }
</div>
);
const BookList = [
{
"title": "1984",
"author": "George Orwell",
"year": 1949,
"rating": 4.17,
"count": 2531706
},
{
"title": "A Brief History of Time",
"author": "Stephen Hawking",
"year": 1988,
"rating": 4.16,
"count": 233282
},
{
"title": "A Heartbreaking Work of Staggering Genius",
"author": "Dave Eggers",
"year": 2000,
"rating": 3.68,
"count": 158583
},
{
"title": "A Long Way Gone: Memoirs of a Boy Soldier",
"author": "Ishmael Beah",
"year": 2007,
"rating": 4.15,
"count": 146681
},
{
"title": "The Bad Beginning: Or, Orphans! (A Series of Unfortunate Events, Book 1)",
"author": "Lemony Snicket",
"year": 1999,
"rating": 3.92,
"count": 341309
},
{
"title": "A Wrinkle in Time",
"author": "Madeleine L'Engle",
"year": 1962,
"rating": 4.01,
"count": 856209
},
{
"title": "Selected Stories, 1968-1994",
"author": "Alice Munro",
"year": 1985,
"rating": 4.29,
"count": 6099
},
{
"title": "Alice's Adventures in Wonderland",
"author": "Lewis Carroll",
"year": 1871,
"rating": 4.07,
"count": 417565
},
{
"title": "All the President's Men",
"author": "Bob Woodward",
"year": 1974,
"rating": 4.19,
"count": 41351
},
{
"title": "Angela's Ashes: A Memoir",
"author": "Frank McCourt",
"year": 1996,
"rating": 4.09,
"count": 479188
},
{
"title": "Are You There God? It's Me, Margaret.",
"author": "Judy Blume",
"year": 1970,
"rating": 3.9,
"count": 173112
},
{
"title": "Bel Canto",
"author": "Ann Patchett",
"year": 2001,
"rating": 3.93,
"count": 220435
},
{
"title": "Beloved",
"author": "Toni Morrison",
"year": 1987,
"rating": 3.8,
"count": 275327
},
{
"title": "Born to Run: A Hidden Tribe, Superathletes, and the Greatest Race the World Has Never Seen",
"author": "Christopher McDougall",
"year": 2009,
"rating": 4.28,
"count": 141899
},
{
"title": "Breath, Eyes, Memory",
"author": "Edwidge Danticat",
"year": 1994,
"rating": 3.87,
"count": 25101
},
{
"title": "Catch-22",
"author": "Joseph Heller",
"year": 1961,
"rating": 3.98,
"count": 652076
},
{
"title": "Charlie and the Chocolate Factory",
"author": "Roald Dahl",
"year": 1964,
"rating": 4.12,
"count": 567372
},
{
"title": "Charlotte's Web",
"author": "E. B White",
"year": 1952,
"rating": 4.16,
"count": 1233816
},
{
"title": "Cutting for Stone",
"author": "Abraham Verghese",
"year": 2009,
"rating": 4.29,
"count": 314729
},
{
"title": "Daring Greatly: How the Courage to Be Vulnerable Transforms the Way We Live, Love, Parent, and Lead",
"author": "Brené Brown",
"year": 2012,
"rating": 4.26,
"count": 81361
},
{
"title": "Diary of a Wimpy Kid, Book 1",
"author": "Jeff Kinney",
"year": 2004,
"rating": 3.97,
"count": 326698
},
{
"title": "Dune (Dune Chronicles, Book 1)",
"author": "Frank Herbert",
"year": 1965,
"rating": 4.21,
"count": 605443
},
{
"title": "Fahrenheit 451",
"author": "Ray Bradbury",
"year": 1953,
"rating": 3.98,
"count": 1380043
},
{
"title": "Fear and Loathing in Las Vegas",
"author": "Hunter S. Thompson",
"year": 1971,
"rating": 4.08,
"count": 269442
},
{
"title": "Gone Girl",
"author": "Gillian Flynn",
"year": 2012,
"rating": 4.06,
"count": 1931109
},
{
"title": "Goodnight Moon",
"author": "Margaret Wise Brown",
"year": 1947,
"rating": 4.27,
"count": 270319
},
{
"title": "Great Expectations",
"author": "Charles Dickens",
"year": 1861,
"rating": 3.76,
"count": 576912
},
{
"title": "Guns, Germs, and Steel: The Fates of Human Societies",
"author": "Jared Diamond Ph.D.",
"year": 1997,
"rating": 4.02,
"count": 228679
},
{
"title": "Harry Potter and the Sorcerer's Stone",
"author": "J.K. Rowling",
"year": 1997,
"rating": 4.46,
"count": 5812339
},
{
"title": "In Cold Blood",
"author": "Truman Capote",
"year": 1965,
"rating": 4.07,
"count": 458092
},
{
"title": "Interpreter of Maladies",
"author": "Jhumpa Lahiri",
"year": 1999,
"rating": 4.14,
"count": 144089
},
{
"title": "Invisible Man",
"author": "Ralph Ellison",
"year": 1952,
"rating": 3.85,
"count": 141599
},
{
"title": "Jimmy Corrigan: The Smartest Kid on Earth",
"author": "Chris Ware",
"year": 2000,
"rating": 4.09,
"count": 20474
},
{
"title": "Kitchen Confidential: Adventures in the Culinary Underbelly",
"author": "Anthony Bourdain",
"year": 2000,
"rating": 4.05,
"count": 183781
},
{
"title": "Life After Life: A Novel",
"author": "Kate Atkinson",
"year": 2013,
"rating": 3.75,
"count": 178403
},
{
"title": "Little House on the Prairie",
"author": "Laura Ingalls Wilder",
"year": 1935,
"rating": 4.19,
"count": 230850
},
{
"title": "Lolita",
"author": "Vladimir Nabokov",
"year": 1955,
"rating": 3.89,
"count": 579688
},
{
"title": "Love in the Time of Cholera",
"author": "Gabriel Garcia Marquez",
"year": 1985,
"rating": 3.9,
"count": 357459
},
{
"title": "Love Medicine",
"author": "Louise Erdrich",
"year": 1984,
"rating": 3.99,
"count": 19183
},
{
"title": "Man's Search for Meaning",
"author": "Viktor E. Frankl",
"year": 1946,
"rating": 4.35,
"count": 272833
},
{
"title": "Me Talk Pretty One Day",
"author": "David Sedaris",
"year": 2000,
"rating": 3.98,
"count": 563887
},
{
"title": "Middlesex: A Novel",
"author": "Jeffrey Eugenides",
"year": 2002,
"rating": 3.99,
"count": 546243
},
{
"title": "Midnight's Children: A Novel",
"author": "Salman Rushdie",
"year": 1981,
"rating": 3.99,
"count": 93890
},
{
"title": "Moneyball: The Art of Winning an Unfair Game",
"author": "Michael Lewis",
"year": 2003,
"rating": 4.26,
"count": 83464
},
{
"title": "Of Human Bondage",
"author": "W. Somerset Maugham",
"year": 1915,
"rating": 4.13,
"count": 42550
},
{
"title": "On the Road",
"author": "Jack Kerouac",
"year": 1955,
"rating": 3.63,
"count": 307114
},
{
"title": "Out of Africa",
"author": "Isak Dinesen",
"year": 1937,
"rating": 3.96,
"count": 29894
},
{
"title": "Persepolis: The Story of a Childhood",
"author": "Marjane Satrapi",
"year": 2000,
"rating": 4.24,
"count": 137072
},
{
"title": "Portnoy's Complaint",
"author": "Philip Roth",
"year": 1969,
"rating": 3.7,
"count": 49829
},
{
"title": "Pride and Prejudice",
"author": "Jane Austen",
"year": 1813,
"rating": 4.25,
"count": 2529846
},
{
"title": "Silent Spring",
"author": "Rachel Carson",
"year": 1962,
"rating": 3.96,
"count": 29232
},
{
"title": "Slaughterhouse-Five: A Novel",
"author": "Kurt Vonnegut",
"year": 1969,
"rating": 4.07,
"count": 1001236
},
{
"title": "Team of Rivals: The Political Genius of Abraham Lincoln",
"author": "Doris Kearns Goodwin",
"year": 2005,
"rating": 4.28,
"count": 129677
},
{
"title": "The Age of Innocence",
"author": "Edith Wharton",
"year": 1920,
"rating": 3.94,
"count": 127023
},
{
"title": "The Amazing Adventures of Kavalier & Clay",
"author": "Michael Chabon",
"year": 2000,
"rating": 4.17,
"count": 171107
},
{
"title": "The Autobiography of Malcolm X: As Told to Alex Haley",
"author": "Malcolm X",
"year": 1965,
"rating": 4.3,
"count": 161494
},
{
"title": "The Book Thief",
"author": "Markus Zusak",
"year": 2005,
"rating": 4.37,
"count": 1543461
},
{
"title": "The Brief Wondrous Life of Oscar Wao",
"author": "Junot Díaz",
"year": 2007,
"rating": 3.9,
"count": 208370
},
{
"title": "The Catcher in the Rye",
"author": "J. D. Salinger",
"year": 1951,
"rating": 3.8,
"count": 2396991
},
{
"title": "The Color of Water: A Black Man's Tribute to His White Mother",
"author": "James McBride",
"year": 1996,
"rating": 4.08,
"count": 93067
},
{
"title": "The Corrections: A Novel",
"author": "Jonathan Franzen",
"year": 2001,
"rating": 3.79,
"count": 143779
},
{
"title": "The Devil in the White City: Murder, Magic, and Madness at the Fair That Changed America",
"author": "Erik Larson",
"year": 2003,
"rating": 3.99,
"count": 430671
},
{
"title": "The Diary of a Young Girl",
"author": "Anne Frank",
"year": 1947,
"rating": 4.12,
"count": 2354593
},
{
"title": "The Fault in Our Stars",
"author": "John Green",
"year": 2012,
"rating": 4.24,
"count": 2978312
},
{
"title": "The Giver",
"author": "Lois Lowry",
"year": 1993,
"rating": 4.12,
"count": 1505362
},
{
"title": "The Golden Compass: His Dark Materials",
"author": "Philip Pullman",
"year": 1995,
"rating": 3.96,
"count": 1120433
},
{
"title": "The Great Gatsby",
"author": "F. Scott Fitzgerald",
"year": 1925,
"rating": 3.91,
"count": 3232869
},
{
"title": "The Handmaid's Tale",
"author": "Margaret Atwood",
"year": 1985,
"rating": 4.09,
"count": 1036544
},
{
"title": "The House at Pooh Corner (Winnie-the-Pooh)",
"author": "A. A. Milne",
"year": 1928,
"rating": 4.36,
"count": 74855
},
{
"title": "The Hunger Games (Book 1)",
"author": "Suzanne Collins",
"year": 2008,
"rating": 4.33,
"count": 5656493
},
{
"title": "The Immortal Life of Henrietta Lacks",
"author": "Rebecca Skloot",
"year": 2010,
"rating": 4.05,
"count": 493440
},
{
"title": "The Liars' Club: A Memoir",
"author": "Mary Karr",
"year": 1995,
"rating": 3.93,
"count": 53750
},
{
"title": "The Lightning Thief (Percy Jackson and the Olympians, Book 1)",
"author": "Rick Riordan",
"year": 2005,
"rating": 4.24,
"count": 1672993
},
{
"title": "The Little Prince",
"author": "Antoine de Saint-Exupéry",
"year": 1943,
"rating": 4.3,
"count": 1073842
},
{
"title": "The Long Goodbye",
"author": "Raymond Chandler",
"year": 1953,
"rating": 4.22,
"count": 28321
},
{
"title": "The Looming Tower: Al-Qaeda and the Road to 9/11",
"author": "Lawrence Wright",
"year": 2006,
"rating": 4.39,
"count": 19140
},
{
"title": "The Lord of the Rings",
"author": "J.R.R. Tolkien",
"year": 1955,
"rating": 4.49,
"count": 492790
},
{
"title": "The Man Who Mistook His Wife For A Hat: And Other Clinical Tales",
"author": "Oliver Sacks",
"year": 1985,
"rating": 4.05,
"count": 137959
},
{
"title": "The Omnivore's Dilemma: A Natural History of Four Meals",
"author": "Michael Pollan",
"year": 2006,
"rating": 4.18,
"count": 165092
},
{
"title": "The Phantom Tollbooth 50th Anniversary Edition",
"author": "Norton Juster",
"year": 1961,
"rating": 4.21,
"count": 212756
},
{
"title": "The Poisonwood Bible: A Novel",
"author": "Barbara Kingsolver",
"year": 1998,
"rating": 4.05,
"count": 607132
},
{
"title": "The Power Broker: Robert Moses and the Fall of New York",
"author": "Robert A. Caro",
"year": 1974,
"rating": 4.5,
"count": 9804
},
{
"title": "The Right Stuff",
"author": "Tom Wolfe",
"year": 1979,
"rating": 4.24,
"count": 38018
},
{
"title": "The Road",
"author": "Cormac McCarthy",
"year": 2006,
"rating": 3.96,
"count": 629667
},
{
"title": "The Secret History",
"author": "Donna Tartt",
"year": 1992,
"rating": 4.09,
"count": 235213
},
{
"title": "The Shining",
"author": "Stephen King",
"year": 1977,
"rating": 4.2,
"count": 948931
},
{
"title": "The Stranger",
"author": "Albert Camus",
"year": 1942,
"rating": 3.97,
"count": 578179
},
{
"title": "The Sun Also Rises",
"author": "Ernest Hemingway",
"year": 1926,
"rating": 3.82,
"count": 333651
},
{
"title": "The Things They Carried",
"author": "Tim O'Brien",
"year": 1990,
"rating": 4.13,
"count": 223058
},
{
"title": "The Very Hungry Caterpillar",
"author": "Eric Carle",
"year": 1969,
"rating": 4.29,
"count": 345341
},
{
"title": "The Wind in the Willows",
"author": "Kenneth Grahame",
"year": 1908,
"rating": 3.99,
"count": 159894
},
{
"title": "The Wind-Up Bird Chronicle: A Novel",
"author": "Haruki Murakami",
"year": 1994,
"rating": 4.17,
"count": 185656
},
{
"title": "The World According to Garp: A Novel",
"author": "John Irving",
"year": 1978,
"rating": 4.08,
"count": 190961
},
{
"title": "The Year of Magical Thinking",
"author": "Joan Didion",
"year": 2005,
"rating": 3.88,
"count": 118314
},
{
"title": "Things Fall Apart",
"author": "Chinua Achebe",
"year": 1958,
"rating": 3.64,
"count": 247724
},
{
"title": "To Kill a Mockingbird",
"author": "Harper Lee",
"year": 1960,
"rating": 4.27,
"count": 3858402
},
{
"title": "Unbroken: A World War II Story of Survival, Resilience, and Redemption",
"author": "Laura Hillenbrand",
"year": 2010,
"rating": 4.38,
"count": 642857
},
{
"title": "Valley of the Dolls",
"author": "Jacqueline Susann",
"year": 1966,
"rating": 3.73,
"count": 43804
},
{
"title": "Where the Sidewalk Ends: The Poems and Drawings of Shel Silverstein",
"author": "Shel Silverstein",
"year": 1974,
"rating": 4.3,
"count": 1094862
},
{
"title": "Where the Wild Things Are",
"author": "Maurice Sendak",
"year": 1963,
"rating": 4.22,
"count": 720959
}
];
ReactDOM.render(
<MyVisualization books={ BookList } />,
document.getElementById("root")
);
!
