From 9d3952d65f92765f5cdd25ddb13924fcc9633f3b Mon Sep 17 00:00:00 2001 From: drabelpdx Date: Mon, 17 Apr 2017 12:32:53 -0700 Subject: [PATCH 1/6] Intial working files --- src/BubbleChart/App.css | 24 ++ src/BubbleChart/BubbleChart.js | 47 ++++ src/BubbleChart/components/BubbleChart.js | 17 ++ src/BubbleChart/components/Bubbles.js | 146 ++++++++++ src/BubbleChart/components/GroupingPicker.css | 22 ++ src/BubbleChart/components/GroupingPicker.js | 22 ++ src/BubbleChart/components/Tooltip.css | 23 ++ src/BubbleChart/components/Tooltip.js | 92 +++++++ src/BubbleChart/components/YearsTitles.js | 30 ++ src/BubbleChart/constants.js | 10 + src/BubbleChart/gates_money.csv | 256 ++++++++++++++++++ src/BubbleChart/utils.js | 48 ++++ src/index.js | 1 + stories/BubbleChart.story.js | 70 +++++ stories/index.js | 2 + 15 files changed, 810 insertions(+) create mode 100644 src/BubbleChart/App.css create mode 100644 src/BubbleChart/BubbleChart.js create mode 100644 src/BubbleChart/components/BubbleChart.js create mode 100644 src/BubbleChart/components/Bubbles.js create mode 100644 src/BubbleChart/components/GroupingPicker.css create mode 100644 src/BubbleChart/components/GroupingPicker.js create mode 100644 src/BubbleChart/components/Tooltip.css create mode 100644 src/BubbleChart/components/Tooltip.js create mode 100644 src/BubbleChart/components/YearsTitles.js create mode 100644 src/BubbleChart/constants.js create mode 100644 src/BubbleChart/gates_money.csv create mode 100644 src/BubbleChart/utils.js create mode 100644 stories/BubbleChart.story.js diff --git a/src/BubbleChart/App.css b/src/BubbleChart/App.css new file mode 100644 index 00000000..15adfdc7 --- /dev/null +++ b/src/BubbleChart/App.css @@ -0,0 +1,24 @@ +.App { + text-align: center; +} + +.App-logo { + animation: App-logo-spin infinite 20s linear; + height: 80px; +} + +.App-header { + background-color: #222; + height: 150px; + padding: 20px; + color: white; +} + +.App-intro { + font-size: large; +} + +@keyframes App-logo-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} diff --git a/src/BubbleChart/BubbleChart.js b/src/BubbleChart/BubbleChart.js new file mode 100644 index 00000000..1c837902 --- /dev/null +++ b/src/BubbleChart/BubbleChart.js @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; +import * as d3 from 'd3'; +import './App.css'; +import BubbleChart from './components/BubbleChart'; +import Bubbles from './components/Bubbles'; +import YearsTitles from './components/YearsTitles'; +import GroupingPicker from './components/GroupingPicker'; +import { createNodes } from './utils'; +import { width, height, center, yearCenters } from './constants'; + +export default class App extends Component { + state = { + data: [], + grouping: 'all', + } + + componentWillMount() { + const data = this.props.data; + if (!data) return; + this.setState({ + data: createNodes(data), + }); + } + + onGroupingChanged = (newGrouping) => { + this.setState({ + grouping: newGrouping, + }); + } + + render() { + const { data, grouping } = this.state; + + return ( +
+ + + + { + grouping === 'year' && + + } + +
+ ); + } +} diff --git a/src/BubbleChart/components/BubbleChart.js b/src/BubbleChart/components/BubbleChart.js new file mode 100644 index 00000000..b826a8f4 --- /dev/null +++ b/src/BubbleChart/components/BubbleChart.js @@ -0,0 +1,17 @@ +import React, { PropTypes } from 'react' + +export default function BubbleChart({ width, height, children }) { + return ( + + { + children + } + + ) +} + +BubbleChart.propTypes = { + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + children: PropTypes.node, +} diff --git a/src/BubbleChart/components/Bubbles.js b/src/BubbleChart/components/Bubbles.js new file mode 100644 index 00000000..71ab1681 --- /dev/null +++ b/src/BubbleChart/components/Bubbles.js @@ -0,0 +1,146 @@ +import React, { PropTypes } from 'react'; +import * as d3 from 'd3'; +import { fillColor } from '../utils'; +import tooltip from './Tooltip'; + +export default class Bubbles extends React.Component { + constructor(props) { + super(props); + const { forceStrength, center } = props; + this.simulation = d3.forceSimulation() + .velocityDecay(0.2) + .force('x', d3.forceX().strength(forceStrength).x(center.x)) + .force('y', d3.forceY().strength(forceStrength).y(center.y)) + .force('charge', d3.forceManyBody().strength(this.charge.bind(this))) + .on('tick', this.ticked.bind(this)) + .stop(); + } + + state = { + g: null, + } + + componentWillReceiveProps(nextProps) { + if (nextProps.data !== this.props.data) { + this.renderBubbles(nextProps.data); + } + if (nextProps.groupByYear !== this.props.groupByYear) { + this.regroupBubbles(nextProps.groupByYear); + } + } + + shouldComponentUpdate() { + // we will handle moving the nodes on our own with d3.js + // make React ignore this component + return false; + } + + onRef = (ref) => { + this.setState({ g: d3.select(ref) }, () => this.renderBubbles(this.props.data)); + } + + ticked() { + this.state.g.selectAll('.bubble') + .attr('cx', d => d.x) + .attr('cy', d => d.y); + } + + charge(d) { + return -this.props.forceStrength * (d.radius ** 2.0); + } + + regroupBubbles = (groupByYear) => { + const { forceStrength, yearCenters, center } = this.props; + if (groupByYear) { + this.simulation.force('x', d3.forceX().strength(forceStrength).x(d => yearCenters[d.year].x)) + .force('y', d3.forceY().strength(forceStrength).y(d => yearCenters[d.year].y)); + } else { + this.simulation.force('x', d3.forceX().strength(forceStrength).x(center.x)) + .force('y', d3.forceY().strength(forceStrength).y(center.y)); + } + this.simulation.alpha(1).restart(); + } + + renderBubbles(data) { + const bubbles = this.state.g.selectAll('.bubble').data(data, d => d.id); + + // Exit + bubbles.exit().remove(); + + // Enter + const bubblesE = bubbles.enter().append('circle') + .classed('bubble', true) + .attr('r', 0) + .attr('cx', d => d.x) + .attr('cy', d => d.y) + .attr('fill', d => fillColor(d.group)) + .attr('stroke', d => d3.rgb(fillColor(d.group)).darker()) + .attr('stroke-width', 2) + .on('mouseover', showDetail) // eslint-disable-line + .on('mouseout', hideDetail) // eslint-disable-line + + bubblesE.transition().duration(2000).attr('r', d => d.radius).on('end', () => { + this.simulation.nodes(data) + .alpha(1) + .restart(); + }); + } + + render() { + return ( + + ); + } +} + +Bubbles.propTypes = { + center: PropTypes.shape({ + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + }), + forceStrength: PropTypes.number.isRequired, + groupByYear: PropTypes.bool.isRequired, + yearCenters: PropTypes.objectOf(PropTypes.shape({ + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + }).isRequired).isRequired, + data: PropTypes.arrayOf(PropTypes.shape({ + x: PropTypes.number.isRequired, + id: PropTypes.string.isRequired, + radius: PropTypes.number.isRequired, + value: PropTypes.number.isRequired, + name: PropTypes.string.isRequired, + })), +}; + +/* +* Function called on mouseover to display the +* details of a bubble in the tooltip. +*/ +export function showDetail(d) { + // change outline to indicate hover state. + d3.select(this).attr('stroke', 'black'); + + const content = `Title: ${ + d.name + }
` + + `Amount: $${ + d.value + }
` + + `Year: ${ + d.year + }`; + + tooltip.showTooltip(content, d3.event); +} + +/* +* Hides tooltip +*/ +export function hideDetail(d) { + // reset outline + d3.select(this) + .attr('stroke', d3.rgb(fillColor(d.group)).darker()); + + tooltip.hideTooltip(); +} diff --git a/src/BubbleChart/components/GroupingPicker.css b/src/BubbleChart/components/GroupingPicker.css new file mode 100644 index 00000000..207d289d --- /dev/null +++ b/src/BubbleChart/components/GroupingPicker.css @@ -0,0 +1,22 @@ +.GroupingPicker { + display: flex; + justify-content: flex-start; + padding: 10px; +} + +.button { + min-width: 130px; + padding: 4px 5px; + cursor: pointer; + text-align: center; + font-size: 13px; + background: white; + border: 1px solid #e0e0e0; + text-decoration: none; + margin: 0 5px; +} + +.active { + background: black; + color: white; +} diff --git a/src/BubbleChart/components/GroupingPicker.js b/src/BubbleChart/components/GroupingPicker.js new file mode 100644 index 00000000..12c2c24e --- /dev/null +++ b/src/BubbleChart/components/GroupingPicker.js @@ -0,0 +1,22 @@ +import React, { PropTypes } from 'react'; +import './GroupingPicker.css'; + +export default class GroupingPicker extends React.Component { + onBtnClick = (event) => { + this.props.onChanged(event.target.name); + } + render() { + const { active } = this.props; + return ( +
+ + +
+ ); + } +} + +GroupingPicker.propTypes = { + onChanged: PropTypes.func.isRequired, + active: PropTypes.oneOf(['all', 'year']).isRequired, +}; diff --git a/src/BubbleChart/components/Tooltip.css b/src/BubbleChart/components/Tooltip.css new file mode 100644 index 00000000..ff998ab3 --- /dev/null +++ b/src/BubbleChart/components/Tooltip.css @@ -0,0 +1,23 @@ +.tooltip { + position: absolute; + top: 100px; + left: 100px; + -moz-border-radius:5px; + border-radius: 5px; + border: 2px solid #000; + background: #fff; + opacity: .9; + color: black; + padding: 10px; + width: 300px; + font-size: 12px; + z-index: 10; +} + +.tooltip .title { + font-size: 13px; +} + +.tooltip .name { + font-weight:bold; +} diff --git a/src/BubbleChart/components/Tooltip.js b/src/BubbleChart/components/Tooltip.js new file mode 100644 index 00000000..6cc7e5ce --- /dev/null +++ b/src/BubbleChart/components/Tooltip.js @@ -0,0 +1,92 @@ +/* eslint-disable */ +import * as d3 from 'd3' +import './Tooltip.css' + +/* + * Creates tooltip with provided id that + * floats on top of visualization. + * Most styling is expected to come from CSS + * so check out bubble_chart.css for more details. + */ +function floatingTooltip(tooltipId, width) { + // Local variable to hold tooltip div for + // manipulation in other functions. + const tt = d3.select('body') + .append('div') + .attr('class', 'tooltip') + .attr('id', tooltipId) + .style('pointer-events', 'none') + + // Set a width if it is provided. + if (width) { + tt.style('width', width) + } + + // Initially it is hidden. + hideTooltip() + + /* + * Display tooltip with provided content. + * + * content is expected to be HTML string. + * + * event is d3.event for positioning. + */ + function showTooltip(content, event) { + tt.style('opacity', 1.0) + .html(content) + + updatePosition(event) + } + + /* + * Hide the tooltip div. + */ + function hideTooltip() { + tt.style('opacity', 0.0) + } + + /* + * Figure out where to place the tooltip + * based on d3 mouse event. + */ + function updatePosition(event) { + const xOffset = 20 + const yOffset = 10 + + const ttw = tt.style('width') + const tth = tt.style('height') + + const wscrY = window.scrollY + const wscrX = window.scrollX + + const curX = (document.all) ? event.clientX + wscrX : event.pageX + const curY = (document.all) ? event.clientY + wscrY : event.pageY + let ttleft = ((curX - wscrX + xOffset * 2 + ttw) > window.innerWidth) ? + curX - ttw - xOffset * 2 : curX + xOffset + + if (ttleft < wscrX + xOffset) { + ttleft = wscrX + xOffset + } + + let tttop = ((curY - wscrY + yOffset * 2 + tth) > window.innerHeight) ? + curY - tth - yOffset * 2 : curY + yOffset + + if (tttop < wscrY + yOffset) { + tttop = curY + yOffset + } + + tt + .style('top', `${tttop}px`) + .style('left', `${ttleft}px`) + } + + return { + showTooltip, + hideTooltip, + updatePosition, + } +} + +const tooltip = floatingTooltip('gates_tooltip', 240) +export default tooltip diff --git a/src/BubbleChart/components/YearsTitles.js b/src/BubbleChart/components/YearsTitles.js new file mode 100644 index 00000000..2a29ab09 --- /dev/null +++ b/src/BubbleChart/components/YearsTitles.js @@ -0,0 +1,30 @@ +import React, { PropTypes } from 'react'; + +export default function YearsTitles({ yearCenters }) { + return ( + + { + Object.keys(yearCenters).map(year => + + { + year + } + ) + } + + ); +} + +YearsTitles.propTypes = { + yearCenters: PropTypes.objectOf(PropTypes.shape({ + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + }).isRequired).isRequired, +}; diff --git a/src/BubbleChart/constants.js b/src/BubbleChart/constants.js new file mode 100644 index 00000000..fae36581 --- /dev/null +++ b/src/BubbleChart/constants.js @@ -0,0 +1,10 @@ +export const width = 960; +export const height = 640; + +export const center = { x: width / 2, y: height / 2 }; + +export const yearCenters = { + 2008: { x: width / 4, y: height / 2 }, + 2009: { x: width / 2, y: height / 2 }, + 2010: { x: (3 / 4) * width, y: height / 2 }, +}; diff --git a/src/BubbleChart/gates_money.csv b/src/BubbleChart/gates_money.csv new file mode 100644 index 00000000..a6883ff0 --- /dev/null +++ b/src/BubbleChart/gates_money.csv @@ -0,0 +1,256 @@ +grant_title,id,organization,total_amount,group,Grant start date,start_month,start_day,start_year +New Mexico Business Roundtable,1,New Mexico Business Roundtable for Educational Excellence,5000,low,2/4/2010,2,4,2010 +LA NSC Match,2,Trustees of Dartmouth College,27727,low,8/3/2009,8,3,2009 +Mathematics Assessment for Learning Phase One RFP,3,Denver School of Science and Technology Inc.,36018,low,11/12/2009,11,12,2009 +Convening of Stakeholder Planning Committee for the Institute for Local Innovation in Teaching and Learning,4,The NEA Foundation for the Improvement of Education,38420,low,3/11/2010,3,11,2010 +Conference Support,5,New Schools for New Orleans,50000,low,10/12/2009,10,12,2009 +Conference Support Grant on differentiated compensation symposium,6,Battelle For Kids,50000,low,6/30/2009,6,30,2009 +Conference Support On School Turnaround Issues,7,FSG Social Impact Advisors,50000,low,9/24/2009,9,24,2009 +City Based Proposal for What Works Fund - Aspire Public Schools,8,Aspire Public Schools,51500,low,10/29/2009,10,29,2009 +Formative Assessment Task Development and Validation (Supplemental to OPP53449),9,Educational Policy Improvement Center,55752,low,11/16/2009,11,16,2009 +City Based Proposal for What Works Fund - E3 Alliance,10,E3 Alliance,56245,low,10/28/2009,10,28,2009 +Light touch communications grant for EET district partner (Hillsborough),11,"Hillsborough Education Foundation, Inc.",60000,low,11/2/2009,11,2,2009 +Light touch communications grant for EET district partner (LA CMOs),12,The College-Ready Promise,60000,low,11/2/2009,11,2,2009 +Light touch communications grant for EET district partner (Memphis),13,Memphis City Schools Foundation,60000,low,11/2/2009,11,2,2009 +Light touch communications grant for EET district partners (Pittsburgh),14,Pittsburgh Public Schools,60000,low,11/2/2009,11,2,2009 +City Based Proposal for What Works Fund - GHCF,15,Greater Houston Community Foundation,68500,low,10/28/2009,10,28,2009 +City Based Proposal for What Works Fund - New Visions for Public Schools,16,"New Visions for Public Schools, Inc",70116,low,11/10/2009,11,10,2009 +City Based Proposal for What Works Fund - Philadelphia Public Schools,17,School District of Philadelphia,74219,low,11/13/2009,11,13,2009 +Mathematics Assessment for Learning Phase One RFP,18,Hamilton County Department of Education,74800,low,11/1/2009,11,1,2009 +City Based Proposal for What Works Fund – Internationals Network (with NCLR),19,Internationals Network For Public Schools Inc,74900,low,3/24/2010,3,24,2010 +City Based Proposal for What Works Fund - Minneapolis Public Schools,20,Achieve Minneapolis,74963,low,10/29/2009,10,29,2009 +City Based Proposal for What Works Fund - PTE,21,The College-Ready Promise,75000,low,11/4/2009,11,4,2009 +TPERF Statewide Education Summit and Legislative Briefing,22,Texas Public Education Reform Foundation,75000,low,10/1/2008,10,1,2008 +City Based Proposal for What Works Fund - NYC Charter Center,23,New York City Center for Charter School Excellence,75300,low,10/30/2009,10,30,2009 +"Supporting the development of a cross-sector plan that represent new levels of collaboration between one or more districts and the SEED School, a leading CMO in Washington, DC and Baltimore",24,"SEED Foundation, Inc.",75970,low,1/28/2010,1,28,2010 +City based proposal for What Works Fund - City of New Haven,25,City of New Haven,82500,low,11/17/2009,11,17,2009 +"Achievement Gap Institute: Annual Research-to-Practice Conference, How Teachers Improve",26,President and Fellows of Harvard College,91300,low,5/13/2009,5,13,2009 +National Education Forum,27,The Library of Congress,91350,low,3/1/2008,3,1,2008 +Community Engagement Supporting College and Career Readiness,28,Austin Voices for Education and Youth,93000,low,10/1/2009,10,1,2009 +Building & Sustaining Support for Good Schools: A Public Information Campaign,29,Prichard Committee for Academic Excellence,100000,medium,4/30/2010,4,30,2010 +City Based Proposal for What Works Fund – Council of Great City Schools,30,Council Of The Great City Schools,100000,medium,3/18/2010,3,18,2010 +City based proposal for What Works Fund - New Schools for New Orleans,31,New Schools for New Orleans,100000,medium,11/4/2009,11,4,2009 +EEP Equality Day Rally Support,32,Education Equality Project,100000,medium,6/19/2009,6,19,2009 +Stimulus Tracker,33,Education Writers Association,100000,medium,7/22/2009,7,22,2009 +Repurpose of Alliance for Education Funds to a Variety of Essential Organizational Functions and Programs,34,Alliance for Education,110610,medium,2/26/2010,2,26,2010 +Secondary STEM Data and Standards Analysis,35,Texas Public Education Reform Foundation,140000,medium,7/28/2009,7,28,2009 +Mathematics Assessment for Learning Phase One RFP,36,Charlotte-Mecklenburg Schools,143973,medium,11/9/2009,11,9,2009 +Ethnic Commission Education Reform Project,37,Washington State Commission on African American Affairs,146025,medium,11/20/2009,11,20,2009 +Mathematics Assessment for Learning Phase One RFP,38,Cristo Rey Network,149733,medium,11/6/2009,11,6,2009 +California Collaborative on District Reform Phase 2,39,American Institutes for Research,150000,medium,3/1/2008,3,1,2008 +Professional Educator Standards Board,40,Professional Educator Standards Board,150000,medium,10/9/2009,10,9,2009 +Evaluate the Leaky College Pipeline in New York City,41,Fund for Public Schools Inc.,170023,medium,10/27/2009,10,27,2009 +Advocacy for Sustained School Reform in the Nation's Capital,42,DC VOICE,200000,medium,7/1/2008,7,1,2008 +DC Expansion and CA STEM partnership,43,Tiger Woods Foundation Inc.,200000,medium,8/29/2009,8,29,2009 +Retaining Teacher Talent: What Matters for Gen-Y Teachers,44,"Public Agenda Foundation, Inc.",215000,medium,3/2/2009,3,2,2009 +Supplemental Support for the New York STEM Progressive Dialogues (original grant on OPP52284),45,Rensselaer Polytechnic Institute,220654,medium,9/29/2009,9,29,2009 +Teacher Demographics and Pension Policies,46,National Commission on Teachings & America's Future,221755,medium,1/1/2009,1,1,2009 +Charter School Initiative,47,President and Fellows of Harvard College,224030,medium,2/25/2010,2,25,2010 +High School Standards Review project,48,Illinois State Board of Education,225000,medium,10/1/2008,10,1,2008 +Progressive Dialogues (Supplemental grant on OPP1008819),49,Rensselaer Polytechnic Institute,231382,medium,12/1/2008,12,1,2008 +Support access to ARRA funds for strong CMOs,50,New Schools Fund dba NewSchools Venture Fund,246070,medium,9/10/2009,9,10,2009 +Aspen-NewSchools Fellows,51,New Schools Fund dba NewSchools Venture Fund,250000,medium,3/26/2009,3,26,2009 +Texas Charter Schools Association,52,Texas Charter Schools Association,250000,medium,5/18/2009,5,18,2009 +to support the work of a teacher evaluation task force,53,American Federation Of Teachers Educational Foundation,250000,medium,6/23/2009,6,23,2009 +Ensuring a Valid and Useable Teacher Student Link,54,National Center For Educational Achievement,260760,medium,11/21/2009,11,21,2009 +Consistent College-Ready Standards,55,Military Child Education Coalition,269998,medium,10/1/2008,10,1,2008 +DCPS Measures of Teacher Effectiveness Study,56,DC Public Education Fund,299985,medium,11/10/2009,11,10,2009 +Creating a Stronger Philanthropic Sector in Education,57,Grantmakers for Education,300000,medium,11/6/2009,11,6,2009 +Envision Schools Post-Secondary Tracking,58,Envision Schools,300000,medium,6/1/2008,6,1,2008 +Global Education Leaders' Program (GELP),59,Silicon Valley Community Foundation,300000,medium,11/10/2009,11,10,2009 +Investigation of the Relationship between Teacher Quality and Student Learning Outcomes,60,"ACT, Inc.",300000,medium,10/1/2008,10,1,2008 +Teacher-Student Data Link Project - Arkansas,61,Arkansas Department of Education,300000,medium,11/19/2009,11,19,2009 +Teacher-Student Data Link Project - Florida,62,Florida Department of Education,300000,medium,11/19/2009,11,19,2009 +Teacher-Student Data Link Project - Georgia,63,Georgia Department of Education,300000,medium,11/19/2009,11,19,2009 +Teacher-Student Data Link Project - Louisiana,64,Louisiana Department of Education,300000,medium,11/19/2009,11,19,2009 +Teacher-Student Data Link Project - Ohio,65,Ohio Department of Education,300000,medium,11/19/2009,11,19,2009 +The California STEM Innovation Network,66,California Polytechnic State University Foundation,300000,medium,1/8/2009,1,8,2009 +TN SCORE state advocacy coalition,67,Tennessee State Collaborative on Reforming Education,300250,medium,2/19/2010,2,19,2010 +Bring Your 'A' Game,68,Twenty First Century Foundation,302425,medium,5/1/2008,5,1,2008 +Instructional Support at Cleveland and Rainier Beach,69,Alliance for Education,309554,medium,9/17/2008,9,17,2008 +Mathematics Assessment for Learning Phase One RFP,70,National Council of La Raza,322103,medium,11/10/2009,11,10,2009 +NYC Public Schools: A Retrospective 2002-2009,71,American Institutes for Research,325000,medium,12/1/2008,12,1,2008 +NSC Student Data for High Schools Pilot: Georgia,72,"University System of Georgia Foundation, Inc.",331678,medium,11/11/2009,11,11,2009 +Common Core Companion Curriculum Project,73,Common Core Inc.,331890,medium,12/17/2009,12,17,2009 +Civic Mission of Schools,74,National Council for the Social Studies,351704,medium,6/1/2008,6,1,2008 +Intensive Partnership Site - Participation in MET Research Study,75,Pittsburgh Public Schools,353977,medium,11/13/2009,11,13,2009 +Institute for Local Innovation in Teaching and Learning,76,The NEA Foundation for the Improvement of Education,358915,medium,10/22/2009,10,22,2009 +Campaign for High School Equity,77,"L.U.L.A.C. Institute, Inc.",370005,medium,3/1/2008,3,1,2008 +Preparing Secondary English Learners for Graduation and College,78,"University of California, Los Angeles",375000,medium,3/1/2008,3,1,2008 +"Education Equity Agenda: Federal and Regional Advocacy Policy Support for College Ready Work, Transparent Education Data System Alignment, Effective & Empowered Teachers and Innovation.",79,"Leadership Conference on Civil Rights Education Fund, Inc.",375030,medium,10/26/2009,10,26,2009 +NSC Student Data for High Schools Pilot: Florida,80,Florida Department of Education,383465,medium,10/30/2009,10,30,2009 +The Policy Innovation in Education Network,81,Thomas B. Fordham Institute,398534,medium,6/15/2009,6,15,2009 +Common Core Strategies for State Policymakers,82,Council of State Governments,399953,medium,3/18/2010,3,18,2010 +"Education Equity Agenda: Federal and Regional Advocacy Policy Support for College Ready Work, Transparent Education Data System Alignment, Effective & Empowered Teachers and Innovation.",83,Mexican American Legal Defense and Educational Fund,400000,medium,8/28/2009,8,28,2009 +Education Equity Agenda: LULAC Parent Involvement Initiative for Campaign for High School Equity,84,"L.U.L.A.C. Institute, Inc.",400017,medium,9/21/2009,9,21,2009 +8th to 9th Grade Transition and Acceleration Project,85,National Summer Learning Association,400366,medium,11/1/2009,11,1,2009 +Support of professional development and an education workshop for education beat reporters,86,"Teachers College, Columbia University",402493,medium,9/29/2009,9,29,2009 +NSC Student Data for High Schools Pilot: Texas,87,Communities Foundation of Texas,406610,medium,10/15/2009,10,15,2009 +Supplemental Support Review and Build-out of the Raytheon STEM Model,88,Business Higher Education Forum,417517,medium,11/4/2009,11,4,2009 +The State of Professional Learning: A National Study,89,National Staff Development Council,421603,medium,11/1/2008,11,1,2008 +Education Equity Agenda: Southeast Asian American Action and Visibility in Education (SAVE) Project,90,Southeast Asia Resource Action Center,425000,medium,8/28/2009,8,28,2009 +Roads to Success Curriculum Completion and Distribution,91,Roads to Success Inc.,430000,medium,10/26/2009,10,26,2009 +STEM Community Collaborative Phase 2,92,MCNC,432898,medium,3/6/2009,3,6,2009 +California ADP Support,93,Regents of the University of California at Berkeley,437807,medium,10/22/2008,10,22,2008 +Regional convenings for policymakers and leaders to develop commitment to standards and assessments,94,National Association of State Boards of Education,450675,medium,10/26/2009,10,26,2009 +Business Planning to Create Hybrid Learning Environments in Existing and New Schools,95,Pollinate Ventures,451125,medium,11/8/2009,11,8,2009 +Mathematics Assessment for Learning Phase One RFP,96,Fund for Public Schools Inc.,455394,medium,11/13/2009,11,13,2009 +KIPPShare National Data Platform,97,KIPP Foundation,468500,medium,11/5/2009,11,5,2009 +The Equity Project (TEP) Charter School Evaluation,98,Mathematica Policy Research,470507,medium,7/16/2009,7,16,2009 +North Carolina STEM Development,99,MCNC,475000,medium,5/1/2008,5,1,2008 +Using web-based videos to teach math to high school students,100,Guaranteach,475077,medium,3/18/2010,3,18,2010 +CPS Community Ownership Proposal,101,"Strive: Cincinnati/Northern Kentucky, LLC",490021,medium,7/1/2008,7,1,2008 +Teacher Working Conditions Survey,102,New Teacher Center,494933,medium,10/13/2009,10,13,2009 +North Carolina New Technology High School Network Sustainability,103,New Technology Foundation,496776,medium,9/1/2008,9,1,2008 +Planning Grant for Evaluation of Green Dot's Locke Transformation Project,104,"University of California, Los Angeles",498724,medium,12/1/2008,12,1,2008 +"Preparing All Students for College, Work and Citizenship",105,National Conference of State Legislatures,499225,medium,5/1/2008,5,1,2008 +Gateway to College Capacity-Building,106,Gateway to College National Network,499398,medium,9/1/2008,9,1,2008 +Doubling the Numbers in STEM,107,Ohio Business Alliance for Higher Education and the Economy,500000,medium,11/1/2008,11,1,2008 +IMPLEMENTATION: StartL: A Digital Media and Learning Accelerator,108,Social Science Research Council,500000,medium,11/5/2009,11,5,2009 +NAPCS General Operating Support,109,National Alliance For Public Charter Schools,500000,medium,10/30/2009,10,30,2009 +New England Consortium,110,Nellie Mae Education Foundation,500000,medium,1/1/2009,1,1,2009 +WGHA Ambassadors,111,Seattle Biomedical Research Institute,500000,medium,9/1/2008,9,1,2008 +Stay for America (retaining effective Teach for America teachers beyond year 2),112,"Teach for America, Inc.",500422,medium,10/1/2009,10,1,2009 +Grassroots Media Project,113,"Fund for the City of New York, Inc.",513219,medium,5/1/2008,5,1,2008 +Education Equity Agenda: Improving Native Student Graduation Rates: Policy Recommendations on High School Reform,114,National Indian Education Association,520446,medium,8/31/2009,8,31,2009 +The State Role In Improving Low-performing Schools,115,Center on Education Policy,544700,medium,7/1/2008,7,1,2008 +Engaging Communities for College Readiness (ENCORE),116,Texas Valley Communities Foundation,546865,medium,5/1/2008,5,1,2008 +New Degree Program for Education Leaders,117,President and Fellows of Harvard College,550000,medium,8/1/2008,8,1,2008 +National Advocacy Support for the Common Core Initiative,118,"Alliance for Excellent Education, Inc.",551336,medium,11/4/2009,11,4,2009 +Conceptual and Organizing Platform for Secondary Mathematics Formative Assessments,119,Regents University Of California Los Angeles,576191,medium,5/11/2009,5,11,2009 +Education Practice Launch,120,Innosight Institute Inc,588559,medium,7/1/2008,7,1,2008 +Building Business Leadership for New Approaches to Teacher Compensation,121,Committee for Economic Development,597077,medium,5/5/2009,5,5,2009 +Mathematics Assessment for Learning Phase One RFP,122,Prichard Committee for Academic Excellence,599016,medium,11/16/2009,11,16,2009 +THE HIGH SCHOOL REDESIGN INITIATIVE -- PHASE TWO,123,National Association of State Boards of Education,599725,medium,5/1/2008,5,1,2008 +Aligning P-12 and Postsecondary Data Systems,124,National Center For Educational Achievement,600000,medium,9/1/2008,9,1,2008 +The Next Generation of NCLR Schools,125,National Council of La Raza,600000,medium,3/1/2008,3,1,2008 +Washington STEM Innovation Initiative,126,Partnership for Learning,643881,medium,3/11/2009,3,11,2009 +Teacher Effectiveness work,127,Hope Street Group,650108,medium,11/7/2009,11,7,2009 +Stimulus related work and CSA support,128,Institute for a Competitive Workforce,653077,medium,11/11/2009,11,11,2009 +"Validating a Common Core of Fewer, Clearer, Higher Standards",129,Educational Policy Improvement Center,721687,medium,5/5/2009,5,5,2009 +Preparing parents and students to be advocates for quality school reform in Illinois,130,Target Area Development Corporation,725000,medium,7/1/2008,7,1,2008 +Building Capacity for College Success: Implementing Data Collection Systems and Best Practices,131,National Association of Street Schools,742223,medium,5/1/2008,5,1,2008 +Support for National Lab Day,132,Tides Center,750000,medium,11/10/2009,11,10,2009 +Winning Strategies Black Male Donor Collaborative,133,The Schott Foundation For Public Education,750000,medium,7/1/2008,7,1,2008 +The Role of School Board Governance in Preaparing Students for College and Workplace Readiness,134,National School Boards Foundation,755603,medium,4/25/2009,4,25,2009 +Tracking Students from Secondary to Post Secondary Institutions,135,National Student Clearinghouse,792216,medium,11/1/2008,11,1,2008 +"Education Equity Agenda: Federal and Regional Advocacy Policy Support for College Ready Work, Transparent Education Data System Alignment, Effective & Empowered Teachers and Innovation.",136,National Urban League Inc.,800000,medium,10/26/2009,10,26,2009 +WA State Board of Education Phase II: A Meaningful High School Diploma and A State Accountability Education System,137,The Washington State Board of Education,850000,medium,3/1/2008,3,1,2008 +Measures of Effective Teaching Research Site,138,Denver Public Schools,878493,medium,11/13/2009,11,13,2009 +STEM Capacity Building,139,Business Higher Education Forum,910000,medium,7/1/2008,7,1,2008 +"Education Equity Agenda: Federal and Regional Advocacy Policy Support for College Ready Work, Transparent Education Data System Alignment, Effective & Empowered Teachers and Innovation.",140,National Council of La Raza,930223,medium,11/10/2009,11,10,2009 +DC Achiever Restructuring Partner,141,Friendship Public Charter School,937088,medium,11/3/2009,11,3,2009 +PRI Guaranty To Unlock Facilities Financing for High Quality Charter Schools,142,Local Initiatives Support Corporation,950000,medium,8/27/2009,8,27,2009 +Common Standards Review and Task Development,143,Thomas B. Fordham Institute,959116,medium,10/10/2009,10,10,2009 +Intermediary management of PRI/Credit Enhancement Program - Los Angeles (Aspire),144,NCB Capital Impact,959373,medium,4/8/2010,4,8,2010 +Sustainability for Recovery School District,145,Baton Rouge Area Foundation,993219,medium,11/3/2009,11,3,2009 +Research Design for Project-Based Advanced Placement Courses,146,University of Washington,996185,medium,11/18/2009,11,18,2009 +Accelerate and Enhance Teacher Effectiveness Methods In Districts/Networks,147,Achievement First Inc.,998221,medium,10/9/2009,10,9,2009 +AFT Innovation Fund,148,American Federation Of Teachers Educational Foundation,1000000,medium,1/1/2009,1,1,2009 +"Applying an R&D model to education to unearth root causes of performance gaps, to effectively vet options for reform.",149,President and Fellows of Harvard College,1000000,medium,11/12/2009,11,12,2009 +For the Future,150,Team Pennsylvania Foundation,1000000,medium,11/1/2008,11,1,2008 +General Support Supplemental,151,The Education Trust,1000000,medium,1/21/2010,1,21,2010 +Ohio College and Career Ready Consortium,152,Ohio Grantmakers Forum,1000000,medium,7/18/2009,7,18,2009 +Strategic Management of Human Capital in Public Ed,153,University of Wisconsin,1000000,medium,3/1/2008,3,1,2008 +to support Teach for America (TFA) with the goal of bringing low income and minority students in TFA classrooms to proficiency,154,"Teach for America, Inc.",1000000,medium,6/26/2009,6,26,2009 +Los Angeles Collaborative to Improve College and Career Readiness in LAUSD Schools,155,United Way Inc.,1000330,high,1/15/2009,1,15,2009 +PEN business planning,156,Public Education Network,1001363,high,7/10/2009,7,10,2009 +Accelerate and Enhance Teacher Effectiveness Methods In Districts/Networks,157,Recovery School District,1004719,high,10/22/2009,10,22,2009 +CEP standards and assessment work,158,Center on Education Policy,1047928,high,9/8/2009,9,8,2009 +College Bound,159,College Success Foundation,1053150,high,11/1/2008,11,1,2008 +Accelerator Enhance Teacher Effectiveness Methods - RE: ASPIRE Model in HISD,160,Houston Independent School District,1100000,high,11/5/2009,11,5,2009 +Ohio Follow-Through on Achieve Policy Study Recommendations,161,Ohio Department of Education,1175000,high,1/1/2008,1,1,2008 +Philanthropic Partnership for Public Education,162,Seattle Foundation,1181375,high,3/1/2008,3,1,2008 +A Progressive Agenda for Human Capital Policy Reform,163,Center for American Progress,1198248,high,7/1/2008,7,1,2008 +Gates-EdVisions Moving Forward,164,EdVisions Inc,1200552,high,12/1/2008,12,1,2008 +Texas Education Research Support,165,College for All Texans Foundation: Closing the Gaps,1221800,high,11/1/2008,11,1,2008 +Portable Word Play - Discovering What Handheld Games Can Do for Adolescent Reading Comprehension,166,"Education Development Center, Inc.",1224953,high,11/18/2009,11,18,2009 +Baltimore Sustainability Plan,167,Fund for Educational Excellence,1229730,high,5/1/2008,5,1,2008 +Academic Youth Development,168,University of Texas at Austin,1235787,high,11/18/2009,11,18,2009 +Campaign for High School Equity,169,"Rockefeller Philanthropy Advisors, Inc.",1279229,high,9/1/2008,9,1,2008 +support the K-12 backmapping of the standards,170,Council of Chief State School Officers,1291738,high,10/12/2009,10,12,2009 +Building College-Ready Culture in Our High Schools,171,College Summit Inc.,1300000,high,5/1/2008,5,1,2008 +Measures of Effective Teaching Research Site,172,Dallas Independent School District,1332279,high,1/4/2010,1,4,2010 +Technical Assistance for Standards/Assessment Partners,173,National Center for the Improvement of Educational Assessment Inc.,1362773,high,11/19/2009,11,19,2009 +Making NSC Data Actionable for School Leaders,174,College Summit Inc,1383137,high,5/22/2009,5,22,2009 +Charlotte-Mecklenburg Measures of Teacher Effectiveness Research,175,Charlotte-Mecklenburg Schools,1431534,high,9/3/2009,9,3,2009 +College Ready Course Sequence Implementation,176,"ACT, Inc.",1445269,high,9/14/2009,9,14,2009 +Partnership for Learning Statewide Advocacy + Stimulus RTT TA,177,Partnership for Learning,1493522,high,11/1/2009,11,1,2009 +Accelerated Partnership to Empower Effective Teachers,178,Tulsa Public Schools,1500000,high,2/4/2010,2,4,2010 +LEV Statewide Advocacy Expansion,179,League of Education Voters Foundation,1500000,high,10/29/2009,10,29,2009 +NCEE state partnerships,180,National Center on Education & the Economy,1500000,high,10/19/2009,10,19,2009 +Development of frameworks for the assessment of teacher knowledge,181,Educational Testing Service,1521971,high,11/14/2009,11,14,2009 +Organizing for High School Reform,182,Pacific Institute For Community Organizations,1600000,high,9/1/2008,9,1,2008 +Expansion of Urban Teacher Residency (UTRU),183,The Urban Teacher Residency Institute,1635665,high,9/1/2009,9,1,2009 +Advance Illinois organization build,184,Advance Illinois,1800000,high,5/15/2008,5,15,2008 +Validation of the Teaching as Leadership Rubric,185,"Teach for America, Inc.",1840548,high,10/5/2009,10,5,2009 +CMO Research Study Project Management,186,New Schools Fund dba NewSchools Venture Fund,1891265,high,5/1/2008,5,1,2008 +6to16,187,University of Chicago - Urban Education Institute,1894228,high,3/1/2008,3,1,2008 +Education Equity Agenda: Support for Campaign for High School Equity coordination of national civil rights organization national policy advocacy of College Ready and Postsecondary Strategies,188,"Rockefeller Philanthropy Advisors, Inc.",1915298,high,10/19/2009,10,19,2009 +Strengthening State College Readiness Initiatives,189,Board Of Control For Southern Regional Education,1987015,high,3/1/2008,3,1,2008 +Intensive Partnership Site - Participation in MET Research Study,190,Memphis City Schools,1988654,high,11/3/2009,11,3,2009 +New-Media Capacity Building at EPE,191,Editorial Projects in Education,1997280,high,5/1/2009,5,1,2009 +Implementation: National PTA support for college-readiness,192,National Congress of Parents and Teachers,2000000,high,11/3/2009,11,3,2009 +The Public Education Reform and Community Development Link: A Sustainable Solution,193,Deutsche Bank Americas Foundation,2000000,high,11/1/2008,11,1,2008 +Project GRAD USA's National College Readiness Initiative,194,Project GRAD,2025892,high,9/1/2008,9,1,2008 +Literacy by Design,195,The Trust For Early Education Inc,2039526,high,9/17/2009,9,17,2009 +THSP Alliance Business Planning,196,Communities Foundation of Texas,2046674,high,9/1/2008,9,1,2008 +Teacher-Student Data Link Project,197,CELT Corporation,2200000,high,11/19/2009,11,19,2009 +Dropout Prevention,198,Americas Promise-The Alliance For Youth,2211517,high,3/19/2008,3,19,2008 +Hunt Institute Common State Education Standards Project,199,"The James B. Hunt, Jr. Institute for Educational Leadership and Policy",2213470,high,5/1/2008,5,1,2008 +Business Planning for Education grantees,200,The Bridgespan Group,2237530,high,4/20/2009,4,20,2009 +Develop Tools for Teachers/Districts to Monitor Student Progress,201,Math Solutions,2274957,high,11/20/2009,11,20,2009 +IB Middle Years Summative Assessment,202,IB Fund US Inc.,2423679,high,8/22/2009,8,22,2009 +To Help Governors Improve College and Career Ready Rates,203,National Governors Association Center For Best Practices,2496814,high,5/1/2008,5,1,2008 +Next Generation PD System,204,DC Public Education Fund,2500000,high,11/12/2009,11,12,2009 +Accelerated Partnership to Empower Effective Teachers,205,Prince George's County Public Schools,2500169,high,1/4/2010,1,4,2010 +Intensive Partnership Site - Participation in MET Research Study,206,Hillsborough County Public Schools,2502146,high,10/20/2009,10,20,2009 +Scaling NCTQ state and district work,207,National Council on Teacher Quality,2565641,high,10/21/2009,10,21,2009 +NAPCS Industry Development,208,National Alliance For Public Charter Schools,2605527,high,9/1/2008,9,1,2008 +Increasing Business Engagement,209,Institute for a Competitive Workforce,2625837,high,10/8/2008,10,8,2008 +Building Support for Federal High School Policy Reform,210,"Alliance for Excellent Education, Inc.",2644892,high,9/1/2008,9,1,2008 +NYC DOE Measures of Teacher Effectiveness Research,211,Fund for Public Schools Inc.,2646876,high,8/28/2009,8,28,2009 +Aspire Public Schools' Early College High School Capacity Project,212,Aspire Public Schools,2899727,high,9/1/2008,9,1,2008 +Big 8 Superintendents Data Assessment,213,Communities Foundation of Texas,2901632,high,11/1/2008,11,1,2008 +National Impact Initiative,214,National Association Of Charter School Authorizers,2979186,high,10/1/2008,10,1,2008 +Development and Adaptation of Science and Literacy Formative Assessment Tasks,215,Regents Of The University Of California At Berkeley,2999730,high,11/20/2009,11,20,2009 +Research Alliance for New York City Schools,216,New York University,2999960,high,10/1/2008,10,1,2008 +CCSR General Operating Support,217,University of Chicago (Parent Org),3000000,high,5/1/2008,5,1,2008 +Deepening and Expanding the Impact of Diploma Plus,218,"Third Sector New England, Inc.",3179363,high,9/1/2008,9,1,2008 +To provide support to states on RTTT applications,219,New Venture Fund,3240000,high,11/4/2009,11,4,2009 +Alternative High School Initiative,220,The Big Picture Company,3315216,high,7/15/2009,7,15,2009 +Support for Teaching First to ensure that there is public support for district efforts to improve teacher effectiveness,221,"Rockefeller Philanthropy Advisors, Inc.",3487270,high,9/25/2009,9,25,2009 +IDEA Public Schools Expansion,222,Idea Academy Inc,3498875,high,11/1/2008,11,1,2008 +Title,223,College Summit Inc,3500000,high,5/1/2008,5,1,2008 +College Ready Mathematics Formative Assessments,224,Regents Of The University Of California At Berkeley,3661294,high,9/25/2009,9,25,2009 +Using Standards and Data to Improve Urban School Systems,225,Council Of The Great City Schools,3735866,high,10/1/2008,10,1,2008 +College Readiness Data Initiative,226,Dallas Independent School District,3774912,high,12/1/2008,12,1,2008 +Project support for expanding Aspen network,227,The Aspen Institute,3878680,high,11/18/2009,11,18,2009 +Aligned Instructional Systems,228,New Schools Fund dba NewSchools Venture Fund,3999127,high,5/1/2008,5,1,2008 +DC Schools Fund,229,New Schools Fund dba NewSchools Venture Fund,4000000,high,7/1/2008,7,1,2008 +Newark School Fund,230,"Newark Charter School Fund, Inc.",4000000,high,2/15/2008,2,15,2008 +SeaChange Capacity and Catalyst Funding,231,"SeaChange Capital Partners, Inc.",4000000,high,12/1/2008,12,1,2008 +College and Career Ready Graduation Initiative,232,United Way of America,4001263,high,1/1/2009,1,1,2009 +Elevating An Alternative Teacher Voice,233,"Teach Plus, Incorporated",4010611,high,9/30/2009,9,30,2009 +Big Picture School Initiative,234,The Big Picture Company,4079157,high,7/1/2008,7,1,2008 +Matching Grant for Classroom Projects in Public High Schools,235,DonorsChoose.org,4114700,high,11/1/2008,11,1,2008 +"Formative Assessment Data Collection, Task Analysis and Implementation (UCLA/CRESST)",236,Regents University Of California Los Angeles,4342988,high,11/12/2009,11,12,2009 +State and National Common Core Standards Adoption/Implementation Advocacy Support,237,"James B. Hunt, Jr. Institute for Educational Leadership and Policy Foundation, Inc.",4368176,high,11/5/2009,11,5,2009 +Ohio High School Value-Added Project,238,Battelle For Kids,4989262,high,10/1/2008,10,1,2008 +Creating a National Movement for Improved K-12 Education,239,"GreatSchools, Inc.",6000000,high,7/1/2008,7,1,2008 +Smart Scholars: Early College High Schools in New York State,240,The University of the State of New York,6000000,high,7/29/2009,7,29,2009 +Phase II - to support the expansion of second generation student tracker for high schools,241,National Student Clearinghouse Research Center,6094497,high,11/20/2009,11,20,2009 +Support for Seattle Public Schools' Strategic Plan,242,Alliance for Education,6929430,high,11/10/2008,11,10,2008 +Reforming the Widget Effect: Increasing teacher effectiveness in America's schools,243,"The New Teacher Project, Inc.",7000000,high,7/10/2009,7,10,2009 +Understanding Teacher Quality,244,Educational Testing Service,7348925,high,11/1/2008,11,1,2008 +Equity and Excellence in a Global Era: Expanding the International Studies Schools Network,245,Asia Society,7750417,high,11/1/2008,11,1,2008 +Increase the leadership capacity of chiefs,246,Council of Chief State School Officers,7770104,high,7/1/2009,7,1,2009 +Strong American Schools,247,"Rockefeller Philanthropy Advisors, Inc.",9958245,high,3/1/2008,3,1,2008 +Accelerated Partnership to Empower Effective Teachers,248,Denver Public Schools,10000000,high,1/4/2010,1,4,2010 +Accelerated Partnership to Empower Effective Teachers,249,Atlanta Public Schools,10000000,high,1/13/2010,1,13,2010 +American Diploma Project Network,250,Achieve Inc.,12614352,high,2/1/2008,2,1,2008 +Strategic Data Project,251,President and Fellows of Harvard College,14994686,high,6/17/2009,6,17,2009 +Intensive Partnerships to Empower Effective Teachers,252,Pittsburgh Public Schools,40000000,high,11/18/2009,11,18,2009 +Intensive Partnerships to Empower Effective Teachers (LA-CMO's),253,The College-Ready Promise,60000000,high,11/19/2009,11,19,2009 +Intensive Partnerships to Empower Effective Teachers,254,Memphis City Schools,90000000,high,11/19/2009,11,19,2009 +Intensive Partnerships to Empower Effective Teachers,255,Hillsborough County Public Schools,100000000,high,11/19/2009,11,19,2009 diff --git a/src/BubbleChart/utils.js b/src/BubbleChart/utils.js new file mode 100644 index 00000000..a03dad93 --- /dev/null +++ b/src/BubbleChart/utils.js @@ -0,0 +1,48 @@ +import * as d3 from 'd3'; + +/* + * This data manipulation function takes the raw data from + * the CSV file and converts it into an array of node objects. + * Each node will store data and visualization values to visualize + * a bubble. + * + * rawData is expected to be an array of data objects, read in from + * one of d3's loading functions like d3.csv. + * + * This function returns the new node array, with a node in that + * array for each element in the rawData input. + */ +export function createNodes(rawData) { + // Use the max total_amount in the data as the max in the scale's domain + // note we have to ensure the total_amount is a number. + const maxAmount = d3.max(rawData, d => +d.total_amount); + + // Sizes bubbles based on area. + // @v4: new flattened scale names. + const radiusScale = d3.scalePow() + .exponent(0.5) + .range([2, 85]) + .domain([0, maxAmount]); + + // Use map() to convert raw data into node data. + // Checkout http://learnjsdata.com/ for more on + // working with data. + const myNodes = rawData.map(d => ({ + id: d.id, + radius: radiusScale(+d.total_amount), + value: +d.total_amount, + name: d.grant_title, + org: d.organization, + group: d.group, + year: d.start_year, + x: Math.random() * 900, + y: Math.random() * 800, + })); + + // sort them descending to prevent occlusion of smaller nodes. + myNodes.sort((a, b) => b.value - a.value); + + return myNodes; +} + +export const fillColor = d3.scaleOrdinal().domain(['low', 'medium', 'high']).range(['#d84b2a', '#beccae', '#7aa25c']); diff --git a/src/index.js b/src/index.js index 7d1986ca..21517824 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ export AreaChart from './AreaChart/AreaChart'; export BarChart from './BarChart/BarChart'; +export BubbleChart from './BubbleChart/BubbleChart'; export Sankey from './Sankey/Sankey'; export Button from './Button/Button'; export StoryCard from './StoryCard/StoryCard'; diff --git a/stories/BubbleChart.story.js b/stories/BubbleChart.story.js new file mode 100644 index 00000000..178d1cae --- /dev/null +++ b/stories/BubbleChart.story.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { storiesOf } from '@kadira/storybook'; +import { BubbleChart } from '../src'; + +const displayName = BubbleChart.displayName || 'BubbleChart'; +const title = 'Simple usage'; +const description = ` + This is some basic usage with the BubbleChart.`; + +const data = [ + { grant_title: 'New Mexico Business Roundtable', + id: 1, + organization: 'New Mexico Business Roundtable for Educational Excellence', + total_amount: 5000, + group: 'low', + start_date: '2/4/2010', + start_month: 2, + start_day: 4, + start_year: 2010 }, + { grant_title: 'LA NSC Match', + id: 2, + organization: 'Trustees of Dartmouth College', + total_amount: 27727, + group: 'low', + start_date: '8/3/2009', + start_month: 8, + start_day: 3, + start_year: 2009 }, + { grant_title: 'Mathematics Assessment for Learning Phase One RFP', + id: 3, + organization: 'Denver School of Science and Technology Inc.', + total_amount: 36018, + group: 'low', + start_date: '11/12/2009', + start_month: 11, + start_day: 12, + start_year: 2009 }, + { grant_title: 'Convening of Stakeholder Planning Committee for the Institute for Local Innovation in Teaching and Learning', + id: 4, + organization: 'The NEA Foundation for the Improvement of Education', + total_amount: 38420, + group: 'low', + start_date: '3/11/2010', + start_month: 3, + start_day: 11, + start_year: 2010 }, + { grant_title: 'Conference Support', + id: 5, + organization: 'New Schools for New Orleans', + total_amount: 50000, + group: 'low', + start_date: '10/12/2009', + start_month: 10, + start_day: 12, + start_year: 2009 }, +]; + +const demoCode = () => ( + +); + +const propDocs = { inline: true, propTables: [BubbleChart] }; + +export default () => storiesOf(displayName, module) + .addWithInfo( + title, + description, + demoCode, + propDocs, + ); diff --git a/stories/index.js b/stories/index.js index 712cbb2a..e7d1e95d 100644 --- a/stories/index.js +++ b/stories/index.js @@ -10,6 +10,7 @@ import sliderStory from './Slider.story'; import areaChartStory from './AreaChart.story'; import scrollToTopStory from './ScrollToTop.story'; import barChartStory from './BarChart.story'; +import bubbleChartStory from './BubbleChart.story'; import footerStory from './Footer.story'; import sankeyStory from './Sankey.story'; import headerStory from './Header.story'; @@ -42,6 +43,7 @@ pieStory(); areaChartStory(); dropdownStory(); barChartStory(); +bubbleChartStory(); footerStory(); sankeyStory(); scrollToTopStory(); From 48143461fb6f9a69a57ddc5c4842a1ffeb0f8ff4 Mon Sep 17 00:00:00 2001 From: drabelpdx Date: Tue, 18 Apr 2017 20:08:38 -0700 Subject: [PATCH 2/6] Group by and Tooltip function --- src/BubbleChart/App.css | 24 -- src/BubbleChart/BubbleChart.js | 50 ++-- src/BubbleChart/components/BubbleChart.js | 17 -- src/BubbleChart/components/BubbleContainer.js | 16 ++ src/BubbleChart/components/Bubbles.js | 11 +- src/BubbleChart/components/GroupingPicker.js | 8 +- src/BubbleChart/components/Tooltip.css | 2 - src/BubbleChart/components/Tooltip.js | 73 +++-- src/BubbleChart/components/YearsTitles.js | 42 +-- src/BubbleChart/constants.js | 6 +- src/BubbleChart/{utils.js => createNodes.js} | 16 +- src/BubbleChart/gates_money.csv | 256 ------------------ stories/BubbleChart.story.js | 89 +++--- 13 files changed, 173 insertions(+), 437 deletions(-) delete mode 100644 src/BubbleChart/App.css delete mode 100644 src/BubbleChart/components/BubbleChart.js create mode 100644 src/BubbleChart/components/BubbleContainer.js rename src/BubbleChart/{utils.js => createNodes.js} (85%) delete mode 100644 src/BubbleChart/gates_money.csv diff --git a/src/BubbleChart/App.css b/src/BubbleChart/App.css deleted file mode 100644 index 15adfdc7..00000000 --- a/src/BubbleChart/App.css +++ /dev/null @@ -1,24 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; -} - -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; -} - -.App-intro { - font-size: large; -} - -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} diff --git a/src/BubbleChart/BubbleChart.js b/src/BubbleChart/BubbleChart.js index 1c837902..d3e5b055 100644 --- a/src/BubbleChart/BubbleChart.js +++ b/src/BubbleChart/BubbleChart.js @@ -1,24 +1,21 @@ -import React, { Component } from 'react'; -import * as d3 from 'd3'; -import './App.css'; -import BubbleChart from './components/BubbleChart'; +import React, { Component, PropTypes } from 'react'; +import BubbleContainer from './components/BubbleContainer'; import Bubbles from './components/Bubbles'; -import YearsTitles from './components/YearsTitles'; +import createNodes from './createNodes'; import GroupingPicker from './components/GroupingPicker'; -import { createNodes } from './utils'; +import YearsTitles from './components/YearsTitles'; import { width, height, center, yearCenters } from './constants'; -export default class App extends Component { +export default class BubleAreaChart extends Component { + state = { data: [], grouping: 'all', } componentWillMount() { - const data = this.props.data; - if (!data) return; this.setState({ - data: createNodes(data), + data: createNodes(this.props.data), }); } @@ -26,22 +23,35 @@ export default class App extends Component { this.setState({ grouping: newGrouping, }); - } + }; render() { const { data, grouping } = this.state; - return ( -
+
- - - { - grouping === 'year' && - - } - +
+ + + { + grouping === 'year' && + + } + +
); } } + +BubleAreaChart.propTypes = { + data: PropTypes.arrayOf(PropTypes.number.isRequired), + colors: PropTypes.arrayOf(PropTypes.string.isRequired), +}; diff --git a/src/BubbleChart/components/BubbleChart.js b/src/BubbleChart/components/BubbleChart.js deleted file mode 100644 index b826a8f4..00000000 --- a/src/BubbleChart/components/BubbleChart.js +++ /dev/null @@ -1,17 +0,0 @@ -import React, { PropTypes } from 'react' - -export default function BubbleChart({ width, height, children }) { - return ( - - { - children - } - - ) -} - -BubbleChart.propTypes = { - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - children: PropTypes.node, -} diff --git a/src/BubbleChart/components/BubbleContainer.js b/src/BubbleChart/components/BubbleContainer.js new file mode 100644 index 00000000..e28d7d82 --- /dev/null +++ b/src/BubbleChart/components/BubbleContainer.js @@ -0,0 +1,16 @@ +import React, { PropTypes } from 'react'; + +const BubbleContainer = ({ width, height, children }) => + + { + children + } + ; + +BubbleContainer.propTypes = { + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + children: PropTypes.node, +}; + +export default BubbleContainer; diff --git a/src/BubbleChart/components/Bubbles.js b/src/BubbleChart/components/Bubbles.js index 71ab1681..a55a2875 100644 --- a/src/BubbleChart/components/Bubbles.js +++ b/src/BubbleChart/components/Bubbles.js @@ -1,6 +1,5 @@ import React, { PropTypes } from 'react'; import * as d3 from 'd3'; -import { fillColor } from '../utils'; import tooltip from './Tooltip'; export default class Bubbles extends React.Component { @@ -73,8 +72,8 @@ export default class Bubbles extends React.Component { .attr('r', 0) .attr('cx', d => d.x) .attr('cy', d => d.y) - .attr('fill', d => fillColor(d.group)) - .attr('stroke', d => d3.rgb(fillColor(d.group)).darker()) + .attr('fill', d => d.color) + .attr('stroke', d => d3.rgb(d.color).darker()) .attr('stroke-width', 2) .on('mouseover', showDetail) // eslint-disable-line .on('mouseout', hideDetail) // eslint-disable-line @@ -88,7 +87,7 @@ export default class Bubbles extends React.Component { render() { return ( - + ); } } @@ -137,10 +136,10 @@ export function showDetail(d) { /* * Hides tooltip */ -export function hideDetail(d) { +export function hideDetail() { // reset outline d3.select(this) - .attr('stroke', d3.rgb(fillColor(d.group)).darker()); + .attr('stroke', d => d3.rgb(d.color).darker()); tooltip.hideTooltip(); } diff --git a/src/BubbleChart/components/GroupingPicker.js b/src/BubbleChart/components/GroupingPicker.js index 12c2c24e..858e9202 100644 --- a/src/BubbleChart/components/GroupingPicker.js +++ b/src/BubbleChart/components/GroupingPicker.js @@ -1,5 +1,9 @@ import React, { PropTypes } from 'react'; -import './GroupingPicker.css'; +import classNames from 'classnames/bind'; +import styles from './GroupingPicker.css'; + +const cx = classNames.bind(styles); +const className = cx({ GroupingPicker: true }); export default class GroupingPicker extends React.Component { onBtnClick = (event) => { @@ -8,7 +12,7 @@ export default class GroupingPicker extends React.Component { render() { const { active } = this.props; return ( -
+
diff --git a/src/BubbleChart/components/Tooltip.css b/src/BubbleChart/components/Tooltip.css index ff998ab3..b3e29624 100644 --- a/src/BubbleChart/components/Tooltip.css +++ b/src/BubbleChart/components/Tooltip.css @@ -1,7 +1,5 @@ .tooltip { position: absolute; - top: 100px; - left: 100px; -moz-border-radius:5px; border-radius: 5px; border: 2px solid #000; diff --git a/src/BubbleChart/components/Tooltip.js b/src/BubbleChart/components/Tooltip.js index 6cc7e5ce..0de4de5c 100644 --- a/src/BubbleChart/components/Tooltip.js +++ b/src/BubbleChart/components/Tooltip.js @@ -1,6 +1,6 @@ /* eslint-disable */ -import * as d3 from 'd3' -import './Tooltip.css' +import * as d3 from 'd3'; +import styles from './Tooltip.css'; /* * Creates tooltip with provided id that @@ -8,85 +8,80 @@ import './Tooltip.css' * Most styling is expected to come from CSS * so check out bubble_chart.css for more details. */ -function floatingTooltip(tooltipId, width) { +const floatingTooltip = (tooltipId, width, height) => { + // Local variable to hold tooltip div for // manipulation in other functions. const tt = d3.select('body') .append('div') - .attr('class', 'tooltip') + .attr('class', styles.tooltip) .attr('id', tooltipId) - .style('pointer-events', 'none') - - // Set a width if it is provided. - if (width) { - tt.style('width', width) - } - - // Initially it is hidden. - hideTooltip() + .style('pointer-events', 'none'); /* * Display tooltip with provided content. - * * content is expected to be HTML string. - * * event is d3.event for positioning. */ - function showTooltip(content, event) { + const showTooltip = (content, event) => { tt.style('opacity', 1.0) - .html(content) + .html(content); - updatePosition(event) + updatePosition(event); } /* * Hide the tooltip div. */ - function hideTooltip() { - tt.style('opacity', 0.0) + const hideTooltip = () => { + tt.style('opacity', 0.0); } /* * Figure out where to place the tooltip * based on d3 mouse event. */ - function updatePosition(event) { - const xOffset = 20 - const yOffset = 10 + const updatePosition = (event) => { + const xOffset = 20; + const yOffset = 10; - const ttw = tt.style('width') - const tth = tt.style('height') + const ttw = tt.style('width'); + const tth = tt.style('height'); - const wscrY = window.scrollY - const wscrX = window.scrollX + var wscrY = window.scrollY; + var wscrX = window.scrollX; + + const curX = (document.all) ? event.clientX + wscrX : event.pageX; + const curY = (document.all) ? event.clientY + wscrY : event.pageY; - const curX = (document.all) ? event.clientX + wscrX : event.pageX - const curY = (document.all) ? event.clientY + wscrY : event.pageY let ttleft = ((curX - wscrX + xOffset * 2 + ttw) > window.innerWidth) ? - curX - ttw - xOffset * 2 : curX + xOffset + curX - ttw - xOffset * 2 : curX + xOffset; if (ttleft < wscrX + xOffset) { - ttleft = wscrX + xOffset + ttleft = wscrX + xOffset; } let tttop = ((curY - wscrY + yOffset * 2 + tth) > window.innerHeight) ? - curY - tth - yOffset * 2 : curY + yOffset + curY - tth - yOffset * 2 : curY + yOffset; if (tttop < wscrY + yOffset) { - tttop = curY + yOffset + tttop = curY + yOffset; } tt - .style('top', `${tttop}px`) - .style('left', `${ttleft}px`) + .style('top', '100px') + .style('left', '100px') } + // Initially it is hidden. + hideTooltip(); + return { showTooltip, hideTooltip, updatePosition, - } -} + }; +}; -const tooltip = floatingTooltip('gates_tooltip', 240) -export default tooltip +const tooltip = floatingTooltip('myTooltip', 240, 160); +export default tooltip; diff --git a/src/BubbleChart/components/YearsTitles.js b/src/BubbleChart/components/YearsTitles.js index 2a29ab09..6acec4a1 100644 --- a/src/BubbleChart/components/YearsTitles.js +++ b/src/BubbleChart/components/YearsTitles.js @@ -1,26 +1,24 @@ import React, { PropTypes } from 'react'; -export default function YearsTitles({ yearCenters }) { - return ( - - { - Object.keys(yearCenters).map(year => - - { - year - } - ) - } - - ); -} +const YearsTitles = ({ yearCenters }) => + + { + Object.keys(yearCenters).map(year => + + { + year + } + ) + } + ; + YearsTitles.propTypes = { yearCenters: PropTypes.objectOf(PropTypes.shape({ @@ -28,3 +26,5 @@ YearsTitles.propTypes = { y: PropTypes.number.isRequired, }).isRequired).isRequired, }; + +export default YearsTitles; diff --git a/src/BubbleChart/constants.js b/src/BubbleChart/constants.js index fae36581..95e98f29 100644 --- a/src/BubbleChart/constants.js +++ b/src/BubbleChart/constants.js @@ -4,7 +4,7 @@ export const height = 640; export const center = { x: width / 2, y: height / 2 }; export const yearCenters = { - 2008: { x: width / 4, y: height / 2 }, - 2009: { x: width / 2, y: height / 2 }, - 2010: { x: (3 / 4) * width, y: height / 2 }, + 2010: { x: width / 4, y: height / 2 }, + 2011: { x: width / 2, y: height / 2 }, + 2012: { x: (3 / 4) * width, y: height / 2 }, }; diff --git a/src/BubbleChart/utils.js b/src/BubbleChart/createNodes.js similarity index 85% rename from src/BubbleChart/utils.js rename to src/BubbleChart/createNodes.js index a03dad93..b185d0d6 100644 --- a/src/BubbleChart/utils.js +++ b/src/BubbleChart/createNodes.js @@ -12,18 +12,17 @@ import * as d3 from 'd3'; * This function returns the new node array, with a node in that * array for each element in the rawData input. */ -export function createNodes(rawData) { + +const createNodes = (rawData) => { // Use the max total_amount in the data as the max in the scale's domain // note we have to ensure the total_amount is a number. const maxAmount = d3.max(rawData, d => +d.total_amount); - // Sizes bubbles based on area. // @v4: new flattened scale names. const radiusScale = d3.scalePow() .exponent(0.5) .range([2, 85]) .domain([0, maxAmount]); - // Use map() to convert raw data into node data. // Checkout http://learnjsdata.com/ for more on // working with data. @@ -31,18 +30,17 @@ export function createNodes(rawData) { id: d.id, radius: radiusScale(+d.total_amount), value: +d.total_amount, - name: d.grant_title, - org: d.organization, + name: d.bureau_title, group: d.group, - year: d.start_year, + color: d.color, + year: d.year, x: Math.random() * 900, y: Math.random() * 800, })); - // sort them descending to prevent occlusion of smaller nodes. myNodes.sort((a, b) => b.value - a.value); return myNodes; -} +}; -export const fillColor = d3.scaleOrdinal().domain(['low', 'medium', 'high']).range(['#d84b2a', '#beccae', '#7aa25c']); +export default createNodes; diff --git a/src/BubbleChart/gates_money.csv b/src/BubbleChart/gates_money.csv deleted file mode 100644 index a6883ff0..00000000 --- a/src/BubbleChart/gates_money.csv +++ /dev/null @@ -1,256 +0,0 @@ -grant_title,id,organization,total_amount,group,Grant start date,start_month,start_day,start_year -New Mexico Business Roundtable,1,New Mexico Business Roundtable for Educational Excellence,5000,low,2/4/2010,2,4,2010 -LA NSC Match,2,Trustees of Dartmouth College,27727,low,8/3/2009,8,3,2009 -Mathematics Assessment for Learning Phase One RFP,3,Denver School of Science and Technology Inc.,36018,low,11/12/2009,11,12,2009 -Convening of Stakeholder Planning Committee for the Institute for Local Innovation in Teaching and Learning,4,The NEA Foundation for the Improvement of Education,38420,low,3/11/2010,3,11,2010 -Conference Support,5,New Schools for New Orleans,50000,low,10/12/2009,10,12,2009 -Conference Support Grant on differentiated compensation symposium,6,Battelle For Kids,50000,low,6/30/2009,6,30,2009 -Conference Support On School Turnaround Issues,7,FSG Social Impact Advisors,50000,low,9/24/2009,9,24,2009 -City Based Proposal for What Works Fund - Aspire Public Schools,8,Aspire Public Schools,51500,low,10/29/2009,10,29,2009 -Formative Assessment Task Development and Validation (Supplemental to OPP53449),9,Educational Policy Improvement Center,55752,low,11/16/2009,11,16,2009 -City Based Proposal for What Works Fund - E3 Alliance,10,E3 Alliance,56245,low,10/28/2009,10,28,2009 -Light touch communications grant for EET district partner (Hillsborough),11,"Hillsborough Education Foundation, Inc.",60000,low,11/2/2009,11,2,2009 -Light touch communications grant for EET district partner (LA CMOs),12,The College-Ready Promise,60000,low,11/2/2009,11,2,2009 -Light touch communications grant for EET district partner (Memphis),13,Memphis City Schools Foundation,60000,low,11/2/2009,11,2,2009 -Light touch communications grant for EET district partners (Pittsburgh),14,Pittsburgh Public Schools,60000,low,11/2/2009,11,2,2009 -City Based Proposal for What Works Fund - GHCF,15,Greater Houston Community Foundation,68500,low,10/28/2009,10,28,2009 -City Based Proposal for What Works Fund - New Visions for Public Schools,16,"New Visions for Public Schools, Inc",70116,low,11/10/2009,11,10,2009 -City Based Proposal for What Works Fund - Philadelphia Public Schools,17,School District of Philadelphia,74219,low,11/13/2009,11,13,2009 -Mathematics Assessment for Learning Phase One RFP,18,Hamilton County Department of Education,74800,low,11/1/2009,11,1,2009 -City Based Proposal for What Works Fund – Internationals Network (with NCLR),19,Internationals Network For Public Schools Inc,74900,low,3/24/2010,3,24,2010 -City Based Proposal for What Works Fund - Minneapolis Public Schools,20,Achieve Minneapolis,74963,low,10/29/2009,10,29,2009 -City Based Proposal for What Works Fund - PTE,21,The College-Ready Promise,75000,low,11/4/2009,11,4,2009 -TPERF Statewide Education Summit and Legislative Briefing,22,Texas Public Education Reform Foundation,75000,low,10/1/2008,10,1,2008 -City Based Proposal for What Works Fund - NYC Charter Center,23,New York City Center for Charter School Excellence,75300,low,10/30/2009,10,30,2009 -"Supporting the development of a cross-sector plan that represent new levels of collaboration between one or more districts and the SEED School, a leading CMO in Washington, DC and Baltimore",24,"SEED Foundation, Inc.",75970,low,1/28/2010,1,28,2010 -City based proposal for What Works Fund - City of New Haven,25,City of New Haven,82500,low,11/17/2009,11,17,2009 -"Achievement Gap Institute: Annual Research-to-Practice Conference, How Teachers Improve",26,President and Fellows of Harvard College,91300,low,5/13/2009,5,13,2009 -National Education Forum,27,The Library of Congress,91350,low,3/1/2008,3,1,2008 -Community Engagement Supporting College and Career Readiness,28,Austin Voices for Education and Youth,93000,low,10/1/2009,10,1,2009 -Building & Sustaining Support for Good Schools: A Public Information Campaign,29,Prichard Committee for Academic Excellence,100000,medium,4/30/2010,4,30,2010 -City Based Proposal for What Works Fund – Council of Great City Schools,30,Council Of The Great City Schools,100000,medium,3/18/2010,3,18,2010 -City based proposal for What Works Fund - New Schools for New Orleans,31,New Schools for New Orleans,100000,medium,11/4/2009,11,4,2009 -EEP Equality Day Rally Support,32,Education Equality Project,100000,medium,6/19/2009,6,19,2009 -Stimulus Tracker,33,Education Writers Association,100000,medium,7/22/2009,7,22,2009 -Repurpose of Alliance for Education Funds to a Variety of Essential Organizational Functions and Programs,34,Alliance for Education,110610,medium,2/26/2010,2,26,2010 -Secondary STEM Data and Standards Analysis,35,Texas Public Education Reform Foundation,140000,medium,7/28/2009,7,28,2009 -Mathematics Assessment for Learning Phase One RFP,36,Charlotte-Mecklenburg Schools,143973,medium,11/9/2009,11,9,2009 -Ethnic Commission Education Reform Project,37,Washington State Commission on African American Affairs,146025,medium,11/20/2009,11,20,2009 -Mathematics Assessment for Learning Phase One RFP,38,Cristo Rey Network,149733,medium,11/6/2009,11,6,2009 -California Collaborative on District Reform Phase 2,39,American Institutes for Research,150000,medium,3/1/2008,3,1,2008 -Professional Educator Standards Board,40,Professional Educator Standards Board,150000,medium,10/9/2009,10,9,2009 -Evaluate the Leaky College Pipeline in New York City,41,Fund for Public Schools Inc.,170023,medium,10/27/2009,10,27,2009 -Advocacy for Sustained School Reform in the Nation's Capital,42,DC VOICE,200000,medium,7/1/2008,7,1,2008 -DC Expansion and CA STEM partnership,43,Tiger Woods Foundation Inc.,200000,medium,8/29/2009,8,29,2009 -Retaining Teacher Talent: What Matters for Gen-Y Teachers,44,"Public Agenda Foundation, Inc.",215000,medium,3/2/2009,3,2,2009 -Supplemental Support for the New York STEM Progressive Dialogues (original grant on OPP52284),45,Rensselaer Polytechnic Institute,220654,medium,9/29/2009,9,29,2009 -Teacher Demographics and Pension Policies,46,National Commission on Teachings & America's Future,221755,medium,1/1/2009,1,1,2009 -Charter School Initiative,47,President and Fellows of Harvard College,224030,medium,2/25/2010,2,25,2010 -High School Standards Review project,48,Illinois State Board of Education,225000,medium,10/1/2008,10,1,2008 -Progressive Dialogues (Supplemental grant on OPP1008819),49,Rensselaer Polytechnic Institute,231382,medium,12/1/2008,12,1,2008 -Support access to ARRA funds for strong CMOs,50,New Schools Fund dba NewSchools Venture Fund,246070,medium,9/10/2009,9,10,2009 -Aspen-NewSchools Fellows,51,New Schools Fund dba NewSchools Venture Fund,250000,medium,3/26/2009,3,26,2009 -Texas Charter Schools Association,52,Texas Charter Schools Association,250000,medium,5/18/2009,5,18,2009 -to support the work of a teacher evaluation task force,53,American Federation Of Teachers Educational Foundation,250000,medium,6/23/2009,6,23,2009 -Ensuring a Valid and Useable Teacher Student Link,54,National Center For Educational Achievement,260760,medium,11/21/2009,11,21,2009 -Consistent College-Ready Standards,55,Military Child Education Coalition,269998,medium,10/1/2008,10,1,2008 -DCPS Measures of Teacher Effectiveness Study,56,DC Public Education Fund,299985,medium,11/10/2009,11,10,2009 -Creating a Stronger Philanthropic Sector in Education,57,Grantmakers for Education,300000,medium,11/6/2009,11,6,2009 -Envision Schools Post-Secondary Tracking,58,Envision Schools,300000,medium,6/1/2008,6,1,2008 -Global Education Leaders' Program (GELP),59,Silicon Valley Community Foundation,300000,medium,11/10/2009,11,10,2009 -Investigation of the Relationship between Teacher Quality and Student Learning Outcomes,60,"ACT, Inc.",300000,medium,10/1/2008,10,1,2008 -Teacher-Student Data Link Project - Arkansas,61,Arkansas Department of Education,300000,medium,11/19/2009,11,19,2009 -Teacher-Student Data Link Project - Florida,62,Florida Department of Education,300000,medium,11/19/2009,11,19,2009 -Teacher-Student Data Link Project - Georgia,63,Georgia Department of Education,300000,medium,11/19/2009,11,19,2009 -Teacher-Student Data Link Project - Louisiana,64,Louisiana Department of Education,300000,medium,11/19/2009,11,19,2009 -Teacher-Student Data Link Project - Ohio,65,Ohio Department of Education,300000,medium,11/19/2009,11,19,2009 -The California STEM Innovation Network,66,California Polytechnic State University Foundation,300000,medium,1/8/2009,1,8,2009 -TN SCORE state advocacy coalition,67,Tennessee State Collaborative on Reforming Education,300250,medium,2/19/2010,2,19,2010 -Bring Your 'A' Game,68,Twenty First Century Foundation,302425,medium,5/1/2008,5,1,2008 -Instructional Support at Cleveland and Rainier Beach,69,Alliance for Education,309554,medium,9/17/2008,9,17,2008 -Mathematics Assessment for Learning Phase One RFP,70,National Council of La Raza,322103,medium,11/10/2009,11,10,2009 -NYC Public Schools: A Retrospective 2002-2009,71,American Institutes for Research,325000,medium,12/1/2008,12,1,2008 -NSC Student Data for High Schools Pilot: Georgia,72,"University System of Georgia Foundation, Inc.",331678,medium,11/11/2009,11,11,2009 -Common Core Companion Curriculum Project,73,Common Core Inc.,331890,medium,12/17/2009,12,17,2009 -Civic Mission of Schools,74,National Council for the Social Studies,351704,medium,6/1/2008,6,1,2008 -Intensive Partnership Site - Participation in MET Research Study,75,Pittsburgh Public Schools,353977,medium,11/13/2009,11,13,2009 -Institute for Local Innovation in Teaching and Learning,76,The NEA Foundation for the Improvement of Education,358915,medium,10/22/2009,10,22,2009 -Campaign for High School Equity,77,"L.U.L.A.C. Institute, Inc.",370005,medium,3/1/2008,3,1,2008 -Preparing Secondary English Learners for Graduation and College,78,"University of California, Los Angeles",375000,medium,3/1/2008,3,1,2008 -"Education Equity Agenda: Federal and Regional Advocacy Policy Support for College Ready Work, Transparent Education Data System Alignment, Effective & Empowered Teachers and Innovation.",79,"Leadership Conference on Civil Rights Education Fund, Inc.",375030,medium,10/26/2009,10,26,2009 -NSC Student Data for High Schools Pilot: Florida,80,Florida Department of Education,383465,medium,10/30/2009,10,30,2009 -The Policy Innovation in Education Network,81,Thomas B. Fordham Institute,398534,medium,6/15/2009,6,15,2009 -Common Core Strategies for State Policymakers,82,Council of State Governments,399953,medium,3/18/2010,3,18,2010 -"Education Equity Agenda: Federal and Regional Advocacy Policy Support for College Ready Work, Transparent Education Data System Alignment, Effective & Empowered Teachers and Innovation.",83,Mexican American Legal Defense and Educational Fund,400000,medium,8/28/2009,8,28,2009 -Education Equity Agenda: LULAC Parent Involvement Initiative for Campaign for High School Equity,84,"L.U.L.A.C. Institute, Inc.",400017,medium,9/21/2009,9,21,2009 -8th to 9th Grade Transition and Acceleration Project,85,National Summer Learning Association,400366,medium,11/1/2009,11,1,2009 -Support of professional development and an education workshop for education beat reporters,86,"Teachers College, Columbia University",402493,medium,9/29/2009,9,29,2009 -NSC Student Data for High Schools Pilot: Texas,87,Communities Foundation of Texas,406610,medium,10/15/2009,10,15,2009 -Supplemental Support Review and Build-out of the Raytheon STEM Model,88,Business Higher Education Forum,417517,medium,11/4/2009,11,4,2009 -The State of Professional Learning: A National Study,89,National Staff Development Council,421603,medium,11/1/2008,11,1,2008 -Education Equity Agenda: Southeast Asian American Action and Visibility in Education (SAVE) Project,90,Southeast Asia Resource Action Center,425000,medium,8/28/2009,8,28,2009 -Roads to Success Curriculum Completion and Distribution,91,Roads to Success Inc.,430000,medium,10/26/2009,10,26,2009 -STEM Community Collaborative Phase 2,92,MCNC,432898,medium,3/6/2009,3,6,2009 -California ADP Support,93,Regents of the University of California at Berkeley,437807,medium,10/22/2008,10,22,2008 -Regional convenings for policymakers and leaders to develop commitment to standards and assessments,94,National Association of State Boards of Education,450675,medium,10/26/2009,10,26,2009 -Business Planning to Create Hybrid Learning Environments in Existing and New Schools,95,Pollinate Ventures,451125,medium,11/8/2009,11,8,2009 -Mathematics Assessment for Learning Phase One RFP,96,Fund for Public Schools Inc.,455394,medium,11/13/2009,11,13,2009 -KIPPShare National Data Platform,97,KIPP Foundation,468500,medium,11/5/2009,11,5,2009 -The Equity Project (TEP) Charter School Evaluation,98,Mathematica Policy Research,470507,medium,7/16/2009,7,16,2009 -North Carolina STEM Development,99,MCNC,475000,medium,5/1/2008,5,1,2008 -Using web-based videos to teach math to high school students,100,Guaranteach,475077,medium,3/18/2010,3,18,2010 -CPS Community Ownership Proposal,101,"Strive: Cincinnati/Northern Kentucky, LLC",490021,medium,7/1/2008,7,1,2008 -Teacher Working Conditions Survey,102,New Teacher Center,494933,medium,10/13/2009,10,13,2009 -North Carolina New Technology High School Network Sustainability,103,New Technology Foundation,496776,medium,9/1/2008,9,1,2008 -Planning Grant for Evaluation of Green Dot's Locke Transformation Project,104,"University of California, Los Angeles",498724,medium,12/1/2008,12,1,2008 -"Preparing All Students for College, Work and Citizenship",105,National Conference of State Legislatures,499225,medium,5/1/2008,5,1,2008 -Gateway to College Capacity-Building,106,Gateway to College National Network,499398,medium,9/1/2008,9,1,2008 -Doubling the Numbers in STEM,107,Ohio Business Alliance for Higher Education and the Economy,500000,medium,11/1/2008,11,1,2008 -IMPLEMENTATION: StartL: A Digital Media and Learning Accelerator,108,Social Science Research Council,500000,medium,11/5/2009,11,5,2009 -NAPCS General Operating Support,109,National Alliance For Public Charter Schools,500000,medium,10/30/2009,10,30,2009 -New England Consortium,110,Nellie Mae Education Foundation,500000,medium,1/1/2009,1,1,2009 -WGHA Ambassadors,111,Seattle Biomedical Research Institute,500000,medium,9/1/2008,9,1,2008 -Stay for America (retaining effective Teach for America teachers beyond year 2),112,"Teach for America, Inc.",500422,medium,10/1/2009,10,1,2009 -Grassroots Media Project,113,"Fund for the City of New York, Inc.",513219,medium,5/1/2008,5,1,2008 -Education Equity Agenda: Improving Native Student Graduation Rates: Policy Recommendations on High School Reform,114,National Indian Education Association,520446,medium,8/31/2009,8,31,2009 -The State Role In Improving Low-performing Schools,115,Center on Education Policy,544700,medium,7/1/2008,7,1,2008 -Engaging Communities for College Readiness (ENCORE),116,Texas Valley Communities Foundation,546865,medium,5/1/2008,5,1,2008 -New Degree Program for Education Leaders,117,President and Fellows of Harvard College,550000,medium,8/1/2008,8,1,2008 -National Advocacy Support for the Common Core Initiative,118,"Alliance for Excellent Education, Inc.",551336,medium,11/4/2009,11,4,2009 -Conceptual and Organizing Platform for Secondary Mathematics Formative Assessments,119,Regents University Of California Los Angeles,576191,medium,5/11/2009,5,11,2009 -Education Practice Launch,120,Innosight Institute Inc,588559,medium,7/1/2008,7,1,2008 -Building Business Leadership for New Approaches to Teacher Compensation,121,Committee for Economic Development,597077,medium,5/5/2009,5,5,2009 -Mathematics Assessment for Learning Phase One RFP,122,Prichard Committee for Academic Excellence,599016,medium,11/16/2009,11,16,2009 -THE HIGH SCHOOL REDESIGN INITIATIVE -- PHASE TWO,123,National Association of State Boards of Education,599725,medium,5/1/2008,5,1,2008 -Aligning P-12 and Postsecondary Data Systems,124,National Center For Educational Achievement,600000,medium,9/1/2008,9,1,2008 -The Next Generation of NCLR Schools,125,National Council of La Raza,600000,medium,3/1/2008,3,1,2008 -Washington STEM Innovation Initiative,126,Partnership for Learning,643881,medium,3/11/2009,3,11,2009 -Teacher Effectiveness work,127,Hope Street Group,650108,medium,11/7/2009,11,7,2009 -Stimulus related work and CSA support,128,Institute for a Competitive Workforce,653077,medium,11/11/2009,11,11,2009 -"Validating a Common Core of Fewer, Clearer, Higher Standards",129,Educational Policy Improvement Center,721687,medium,5/5/2009,5,5,2009 -Preparing parents and students to be advocates for quality school reform in Illinois,130,Target Area Development Corporation,725000,medium,7/1/2008,7,1,2008 -Building Capacity for College Success: Implementing Data Collection Systems and Best Practices,131,National Association of Street Schools,742223,medium,5/1/2008,5,1,2008 -Support for National Lab Day,132,Tides Center,750000,medium,11/10/2009,11,10,2009 -Winning Strategies Black Male Donor Collaborative,133,The Schott Foundation For Public Education,750000,medium,7/1/2008,7,1,2008 -The Role of School Board Governance in Preaparing Students for College and Workplace Readiness,134,National School Boards Foundation,755603,medium,4/25/2009,4,25,2009 -Tracking Students from Secondary to Post Secondary Institutions,135,National Student Clearinghouse,792216,medium,11/1/2008,11,1,2008 -"Education Equity Agenda: Federal and Regional Advocacy Policy Support for College Ready Work, Transparent Education Data System Alignment, Effective & Empowered Teachers and Innovation.",136,National Urban League Inc.,800000,medium,10/26/2009,10,26,2009 -WA State Board of Education Phase II: A Meaningful High School Diploma and A State Accountability Education System,137,The Washington State Board of Education,850000,medium,3/1/2008,3,1,2008 -Measures of Effective Teaching Research Site,138,Denver Public Schools,878493,medium,11/13/2009,11,13,2009 -STEM Capacity Building,139,Business Higher Education Forum,910000,medium,7/1/2008,7,1,2008 -"Education Equity Agenda: Federal and Regional Advocacy Policy Support for College Ready Work, Transparent Education Data System Alignment, Effective & Empowered Teachers and Innovation.",140,National Council of La Raza,930223,medium,11/10/2009,11,10,2009 -DC Achiever Restructuring Partner,141,Friendship Public Charter School,937088,medium,11/3/2009,11,3,2009 -PRI Guaranty To Unlock Facilities Financing for High Quality Charter Schools,142,Local Initiatives Support Corporation,950000,medium,8/27/2009,8,27,2009 -Common Standards Review and Task Development,143,Thomas B. Fordham Institute,959116,medium,10/10/2009,10,10,2009 -Intermediary management of PRI/Credit Enhancement Program - Los Angeles (Aspire),144,NCB Capital Impact,959373,medium,4/8/2010,4,8,2010 -Sustainability for Recovery School District,145,Baton Rouge Area Foundation,993219,medium,11/3/2009,11,3,2009 -Research Design for Project-Based Advanced Placement Courses,146,University of Washington,996185,medium,11/18/2009,11,18,2009 -Accelerate and Enhance Teacher Effectiveness Methods In Districts/Networks,147,Achievement First Inc.,998221,medium,10/9/2009,10,9,2009 -AFT Innovation Fund,148,American Federation Of Teachers Educational Foundation,1000000,medium,1/1/2009,1,1,2009 -"Applying an R&D model to education to unearth root causes of performance gaps, to effectively vet options for reform.",149,President and Fellows of Harvard College,1000000,medium,11/12/2009,11,12,2009 -For the Future,150,Team Pennsylvania Foundation,1000000,medium,11/1/2008,11,1,2008 -General Support Supplemental,151,The Education Trust,1000000,medium,1/21/2010,1,21,2010 -Ohio College and Career Ready Consortium,152,Ohio Grantmakers Forum,1000000,medium,7/18/2009,7,18,2009 -Strategic Management of Human Capital in Public Ed,153,University of Wisconsin,1000000,medium,3/1/2008,3,1,2008 -to support Teach for America (TFA) with the goal of bringing low income and minority students in TFA classrooms to proficiency,154,"Teach for America, Inc.",1000000,medium,6/26/2009,6,26,2009 -Los Angeles Collaborative to Improve College and Career Readiness in LAUSD Schools,155,United Way Inc.,1000330,high,1/15/2009,1,15,2009 -PEN business planning,156,Public Education Network,1001363,high,7/10/2009,7,10,2009 -Accelerate and Enhance Teacher Effectiveness Methods In Districts/Networks,157,Recovery School District,1004719,high,10/22/2009,10,22,2009 -CEP standards and assessment work,158,Center on Education Policy,1047928,high,9/8/2009,9,8,2009 -College Bound,159,College Success Foundation,1053150,high,11/1/2008,11,1,2008 -Accelerator Enhance Teacher Effectiveness Methods - RE: ASPIRE Model in HISD,160,Houston Independent School District,1100000,high,11/5/2009,11,5,2009 -Ohio Follow-Through on Achieve Policy Study Recommendations,161,Ohio Department of Education,1175000,high,1/1/2008,1,1,2008 -Philanthropic Partnership for Public Education,162,Seattle Foundation,1181375,high,3/1/2008,3,1,2008 -A Progressive Agenda for Human Capital Policy Reform,163,Center for American Progress,1198248,high,7/1/2008,7,1,2008 -Gates-EdVisions Moving Forward,164,EdVisions Inc,1200552,high,12/1/2008,12,1,2008 -Texas Education Research Support,165,College for All Texans Foundation: Closing the Gaps,1221800,high,11/1/2008,11,1,2008 -Portable Word Play - Discovering What Handheld Games Can Do for Adolescent Reading Comprehension,166,"Education Development Center, Inc.",1224953,high,11/18/2009,11,18,2009 -Baltimore Sustainability Plan,167,Fund for Educational Excellence,1229730,high,5/1/2008,5,1,2008 -Academic Youth Development,168,University of Texas at Austin,1235787,high,11/18/2009,11,18,2009 -Campaign for High School Equity,169,"Rockefeller Philanthropy Advisors, Inc.",1279229,high,9/1/2008,9,1,2008 -support the K-12 backmapping of the standards,170,Council of Chief State School Officers,1291738,high,10/12/2009,10,12,2009 -Building College-Ready Culture in Our High Schools,171,College Summit Inc.,1300000,high,5/1/2008,5,1,2008 -Measures of Effective Teaching Research Site,172,Dallas Independent School District,1332279,high,1/4/2010,1,4,2010 -Technical Assistance for Standards/Assessment Partners,173,National Center for the Improvement of Educational Assessment Inc.,1362773,high,11/19/2009,11,19,2009 -Making NSC Data Actionable for School Leaders,174,College Summit Inc,1383137,high,5/22/2009,5,22,2009 -Charlotte-Mecklenburg Measures of Teacher Effectiveness Research,175,Charlotte-Mecklenburg Schools,1431534,high,9/3/2009,9,3,2009 -College Ready Course Sequence Implementation,176,"ACT, Inc.",1445269,high,9/14/2009,9,14,2009 -Partnership for Learning Statewide Advocacy + Stimulus RTT TA,177,Partnership for Learning,1493522,high,11/1/2009,11,1,2009 -Accelerated Partnership to Empower Effective Teachers,178,Tulsa Public Schools,1500000,high,2/4/2010,2,4,2010 -LEV Statewide Advocacy Expansion,179,League of Education Voters Foundation,1500000,high,10/29/2009,10,29,2009 -NCEE state partnerships,180,National Center on Education & the Economy,1500000,high,10/19/2009,10,19,2009 -Development of frameworks for the assessment of teacher knowledge,181,Educational Testing Service,1521971,high,11/14/2009,11,14,2009 -Organizing for High School Reform,182,Pacific Institute For Community Organizations,1600000,high,9/1/2008,9,1,2008 -Expansion of Urban Teacher Residency (UTRU),183,The Urban Teacher Residency Institute,1635665,high,9/1/2009,9,1,2009 -Advance Illinois organization build,184,Advance Illinois,1800000,high,5/15/2008,5,15,2008 -Validation of the Teaching as Leadership Rubric,185,"Teach for America, Inc.",1840548,high,10/5/2009,10,5,2009 -CMO Research Study Project Management,186,New Schools Fund dba NewSchools Venture Fund,1891265,high,5/1/2008,5,1,2008 -6to16,187,University of Chicago - Urban Education Institute,1894228,high,3/1/2008,3,1,2008 -Education Equity Agenda: Support for Campaign for High School Equity coordination of national civil rights organization national policy advocacy of College Ready and Postsecondary Strategies,188,"Rockefeller Philanthropy Advisors, Inc.",1915298,high,10/19/2009,10,19,2009 -Strengthening State College Readiness Initiatives,189,Board Of Control For Southern Regional Education,1987015,high,3/1/2008,3,1,2008 -Intensive Partnership Site - Participation in MET Research Study,190,Memphis City Schools,1988654,high,11/3/2009,11,3,2009 -New-Media Capacity Building at EPE,191,Editorial Projects in Education,1997280,high,5/1/2009,5,1,2009 -Implementation: National PTA support for college-readiness,192,National Congress of Parents and Teachers,2000000,high,11/3/2009,11,3,2009 -The Public Education Reform and Community Development Link: A Sustainable Solution,193,Deutsche Bank Americas Foundation,2000000,high,11/1/2008,11,1,2008 -Project GRAD USA's National College Readiness Initiative,194,Project GRAD,2025892,high,9/1/2008,9,1,2008 -Literacy by Design,195,The Trust For Early Education Inc,2039526,high,9/17/2009,9,17,2009 -THSP Alliance Business Planning,196,Communities Foundation of Texas,2046674,high,9/1/2008,9,1,2008 -Teacher-Student Data Link Project,197,CELT Corporation,2200000,high,11/19/2009,11,19,2009 -Dropout Prevention,198,Americas Promise-The Alliance For Youth,2211517,high,3/19/2008,3,19,2008 -Hunt Institute Common State Education Standards Project,199,"The James B. Hunt, Jr. Institute for Educational Leadership and Policy",2213470,high,5/1/2008,5,1,2008 -Business Planning for Education grantees,200,The Bridgespan Group,2237530,high,4/20/2009,4,20,2009 -Develop Tools for Teachers/Districts to Monitor Student Progress,201,Math Solutions,2274957,high,11/20/2009,11,20,2009 -IB Middle Years Summative Assessment,202,IB Fund US Inc.,2423679,high,8/22/2009,8,22,2009 -To Help Governors Improve College and Career Ready Rates,203,National Governors Association Center For Best Practices,2496814,high,5/1/2008,5,1,2008 -Next Generation PD System,204,DC Public Education Fund,2500000,high,11/12/2009,11,12,2009 -Accelerated Partnership to Empower Effective Teachers,205,Prince George's County Public Schools,2500169,high,1/4/2010,1,4,2010 -Intensive Partnership Site - Participation in MET Research Study,206,Hillsborough County Public Schools,2502146,high,10/20/2009,10,20,2009 -Scaling NCTQ state and district work,207,National Council on Teacher Quality,2565641,high,10/21/2009,10,21,2009 -NAPCS Industry Development,208,National Alliance For Public Charter Schools,2605527,high,9/1/2008,9,1,2008 -Increasing Business Engagement,209,Institute for a Competitive Workforce,2625837,high,10/8/2008,10,8,2008 -Building Support for Federal High School Policy Reform,210,"Alliance for Excellent Education, Inc.",2644892,high,9/1/2008,9,1,2008 -NYC DOE Measures of Teacher Effectiveness Research,211,Fund for Public Schools Inc.,2646876,high,8/28/2009,8,28,2009 -Aspire Public Schools' Early College High School Capacity Project,212,Aspire Public Schools,2899727,high,9/1/2008,9,1,2008 -Big 8 Superintendents Data Assessment,213,Communities Foundation of Texas,2901632,high,11/1/2008,11,1,2008 -National Impact Initiative,214,National Association Of Charter School Authorizers,2979186,high,10/1/2008,10,1,2008 -Development and Adaptation of Science and Literacy Formative Assessment Tasks,215,Regents Of The University Of California At Berkeley,2999730,high,11/20/2009,11,20,2009 -Research Alliance for New York City Schools,216,New York University,2999960,high,10/1/2008,10,1,2008 -CCSR General Operating Support,217,University of Chicago (Parent Org),3000000,high,5/1/2008,5,1,2008 -Deepening and Expanding the Impact of Diploma Plus,218,"Third Sector New England, Inc.",3179363,high,9/1/2008,9,1,2008 -To provide support to states on RTTT applications,219,New Venture Fund,3240000,high,11/4/2009,11,4,2009 -Alternative High School Initiative,220,The Big Picture Company,3315216,high,7/15/2009,7,15,2009 -Support for Teaching First to ensure that there is public support for district efforts to improve teacher effectiveness,221,"Rockefeller Philanthropy Advisors, Inc.",3487270,high,9/25/2009,9,25,2009 -IDEA Public Schools Expansion,222,Idea Academy Inc,3498875,high,11/1/2008,11,1,2008 -Title,223,College Summit Inc,3500000,high,5/1/2008,5,1,2008 -College Ready Mathematics Formative Assessments,224,Regents Of The University Of California At Berkeley,3661294,high,9/25/2009,9,25,2009 -Using Standards and Data to Improve Urban School Systems,225,Council Of The Great City Schools,3735866,high,10/1/2008,10,1,2008 -College Readiness Data Initiative,226,Dallas Independent School District,3774912,high,12/1/2008,12,1,2008 -Project support for expanding Aspen network,227,The Aspen Institute,3878680,high,11/18/2009,11,18,2009 -Aligned Instructional Systems,228,New Schools Fund dba NewSchools Venture Fund,3999127,high,5/1/2008,5,1,2008 -DC Schools Fund,229,New Schools Fund dba NewSchools Venture Fund,4000000,high,7/1/2008,7,1,2008 -Newark School Fund,230,"Newark Charter School Fund, Inc.",4000000,high,2/15/2008,2,15,2008 -SeaChange Capacity and Catalyst Funding,231,"SeaChange Capital Partners, Inc.",4000000,high,12/1/2008,12,1,2008 -College and Career Ready Graduation Initiative,232,United Way of America,4001263,high,1/1/2009,1,1,2009 -Elevating An Alternative Teacher Voice,233,"Teach Plus, Incorporated",4010611,high,9/30/2009,9,30,2009 -Big Picture School Initiative,234,The Big Picture Company,4079157,high,7/1/2008,7,1,2008 -Matching Grant for Classroom Projects in Public High Schools,235,DonorsChoose.org,4114700,high,11/1/2008,11,1,2008 -"Formative Assessment Data Collection, Task Analysis and Implementation (UCLA/CRESST)",236,Regents University Of California Los Angeles,4342988,high,11/12/2009,11,12,2009 -State and National Common Core Standards Adoption/Implementation Advocacy Support,237,"James B. Hunt, Jr. Institute for Educational Leadership and Policy Foundation, Inc.",4368176,high,11/5/2009,11,5,2009 -Ohio High School Value-Added Project,238,Battelle For Kids,4989262,high,10/1/2008,10,1,2008 -Creating a National Movement for Improved K-12 Education,239,"GreatSchools, Inc.",6000000,high,7/1/2008,7,1,2008 -Smart Scholars: Early College High Schools in New York State,240,The University of the State of New York,6000000,high,7/29/2009,7,29,2009 -Phase II - to support the expansion of second generation student tracker for high schools,241,National Student Clearinghouse Research Center,6094497,high,11/20/2009,11,20,2009 -Support for Seattle Public Schools' Strategic Plan,242,Alliance for Education,6929430,high,11/10/2008,11,10,2008 -Reforming the Widget Effect: Increasing teacher effectiveness in America's schools,243,"The New Teacher Project, Inc.",7000000,high,7/10/2009,7,10,2009 -Understanding Teacher Quality,244,Educational Testing Service,7348925,high,11/1/2008,11,1,2008 -Equity and Excellence in a Global Era: Expanding the International Studies Schools Network,245,Asia Society,7750417,high,11/1/2008,11,1,2008 -Increase the leadership capacity of chiefs,246,Council of Chief State School Officers,7770104,high,7/1/2009,7,1,2009 -Strong American Schools,247,"Rockefeller Philanthropy Advisors, Inc.",9958245,high,3/1/2008,3,1,2008 -Accelerated Partnership to Empower Effective Teachers,248,Denver Public Schools,10000000,high,1/4/2010,1,4,2010 -Accelerated Partnership to Empower Effective Teachers,249,Atlanta Public Schools,10000000,high,1/13/2010,1,13,2010 -American Diploma Project Network,250,Achieve Inc.,12614352,high,2/1/2008,2,1,2008 -Strategic Data Project,251,President and Fellows of Harvard College,14994686,high,6/17/2009,6,17,2009 -Intensive Partnerships to Empower Effective Teachers,252,Pittsburgh Public Schools,40000000,high,11/18/2009,11,18,2009 -Intensive Partnerships to Empower Effective Teachers (LA-CMO's),253,The College-Ready Promise,60000000,high,11/19/2009,11,19,2009 -Intensive Partnerships to Empower Effective Teachers,254,Memphis City Schools,90000000,high,11/19/2009,11,19,2009 -Intensive Partnerships to Empower Effective Teachers,255,Hillsborough County Public Schools,100000000,high,11/19/2009,11,19,2009 diff --git a/stories/BubbleChart.story.js b/stories/BubbleChart.story.js index 178d1cae..b80951ab 100644 --- a/stories/BubbleChart.story.js +++ b/stories/BubbleChart.story.js @@ -1,6 +1,7 @@ import React from 'react'; import { storiesOf } from '@kadira/storybook'; import { BubbleChart } from '../src'; +import { colors } from './shared'; const displayName = BubbleChart.displayName || 'BubbleChart'; const title = 'Simple usage'; @@ -8,55 +9,67 @@ const description = ` This is some basic usage with the BubbleChart.`; const data = [ - { grant_title: 'New Mexico Business Roundtable', + { bureau_title: 'Bureau of Environmental Services', id: 1, - organization: 'New Mexico Business Roundtable for Educational Excellence', - total_amount: 5000, + total_amount: 7468965, group: 'low', - start_date: '2/4/2010', - start_month: 2, - start_day: 4, - start_year: 2010 }, - { grant_title: 'LA NSC Match', + color: colors[2], + year: 2010 }, + { bureau_title: 'City Budget Office', id: 2, - organization: 'Trustees of Dartmouth College', - total_amount: 27727, - group: 'low', - start_date: '8/3/2009', - start_month: 8, - start_day: 3, - start_year: 2009 }, - { grant_title: 'Mathematics Assessment for Learning Phase One RFP', + total_amount: 115497, + group: 'medium', + color: colors[2], + year: 2011 }, + { bureau_title: 'Office of Management & Finance', id: 3, - organization: 'Denver School of Science and Technology Inc.', - total_amount: 36018, + total_amount: 8398624, group: 'low', - start_date: '11/12/2009', - start_month: 11, - start_day: 12, - start_year: 2009 }, - { grant_title: 'Convening of Stakeholder Planning Committee for the Institute for Local Innovation in Teaching and Learning', + color: colors[4], + year: 2012 }, + { bureau_title: 'Office of the Mayor', id: 4, - organization: 'The NEA Foundation for the Improvement of Education', - total_amount: 38420, - group: 'low', - start_date: '3/11/2010', - start_month: 3, - start_day: 11, - start_year: 2010 }, - { grant_title: 'Conference Support', + total_amount: 592962, + group: 'medium', + color: colors[4], + year: 2010 }, + { bureau_title: 'Portland Bureau of Transportation', id: 5, - organization: 'New Schools for New Orleans', - total_amount: 50000, + total_amount: 57546789, + group: 'high', + color: colors[6], + year: 2012 }, + { bureau_title: 'Portland Housing Bureau', + id: 6, + total_amount: 11639339, + group: 'low', + color: colors[6], + year: 2011 }, + { bureau_title: 'Portland Parks & Recreation', + id: 7, + total_amount: 21829002, + group: 'medium', + color: colors[6], + year: 2012 }, + { bureau_title: 'Portland Police Bureau', + id: 8, + total_amount: 2954388, + group: 'high', + color: colors[8], + year: 2010 }, + { bureau_title: 'Portland Water Bureau', + id: 9, + total_amount: 1585195, group: 'low', - start_date: '10/12/2009', - start_month: 10, - start_day: 12, - start_year: 2009 }, + color: colors[8], + year: 2011 }, ]; const demoCode = () => ( - + ); const propDocs = { inline: true, propTables: [BubbleChart] }; From 93ace6e5405205da005fd7bff8c837a982986d42 Mon Sep 17 00:00:00 2001 From: drabelpdx Date: Thu, 20 Apr 2017 08:56:48 -0700 Subject: [PATCH 3/6] Multiple Sorts --- src/BubbleChart/BubbleChart.js | 22 +++-- src/BubbleChart/components/Bubbles.js | 94 ++++++++++++++----- src/BubbleChart/components/CategoryTitles.js | 29 ++++++ src/BubbleChart/components/GroupingPicker.js | 14 ++- .../{YearsTitles.js => SpendingTitles.js} | 18 ++-- src/BubbleChart/components/Tooltip.js | 4 +- src/BubbleChart/constants.js | 13 ++- src/BubbleChart/createNodes.js | 7 +- stories/BubbleChart.story.js | 27 ++++-- 9 files changed, 162 insertions(+), 66 deletions(-) create mode 100644 src/BubbleChart/components/CategoryTitles.js rename src/BubbleChart/components/{YearsTitles.js => SpendingTitles.js} (50%) diff --git a/src/BubbleChart/BubbleChart.js b/src/BubbleChart/BubbleChart.js index d3e5b055..77f4c6a3 100644 --- a/src/BubbleChart/BubbleChart.js +++ b/src/BubbleChart/BubbleChart.js @@ -3,8 +3,10 @@ import BubbleContainer from './components/BubbleContainer'; import Bubbles from './components/Bubbles'; import createNodes from './createNodes'; import GroupingPicker from './components/GroupingPicker'; -import YearsTitles from './components/YearsTitles'; -import { width, height, center, yearCenters } from './constants'; +import CategoryTitles from './components/CategoryTitles'; +import SpendingTitles from './components/SpendingTitles'; + +import { width, height, center, categoryCenters, spendingCenters } from './constants'; export default class BubleAreaChart extends Component { @@ -36,13 +38,19 @@ export default class BubleAreaChart extends Component { data={data} forceStrength={0.03} center={center} - yearCenters={yearCenters} - groupByYear={grouping === 'year'} + categoryCenters={categoryCenters} + groupByCategory={grouping === 'category'} + spendingCenters={spendingCenters} + groupBySpending={grouping === 'spending'} color={this.props.colors} /> { - grouping === 'year' && - + grouping === 'category' && + + } + { + grouping === 'spending' && + }
@@ -52,6 +60,6 @@ export default class BubleAreaChart extends Component { } BubleAreaChart.propTypes = { - data: PropTypes.arrayOf(PropTypes.number.isRequired), + data: PropTypes.arrayOf(PropTypes.object.isRequired), colors: PropTypes.arrayOf(PropTypes.string.isRequired), }; diff --git a/src/BubbleChart/components/Bubbles.js b/src/BubbleChart/components/Bubbles.js index a55a2875..0593b785 100644 --- a/src/BubbleChart/components/Bubbles.js +++ b/src/BubbleChart/components/Bubbles.js @@ -1,6 +1,7 @@ import React, { PropTypes } from 'react'; import * as d3 from 'd3'; import tooltip from './Tooltip'; +import styles from './Tooltip.css'; export default class Bubbles extends React.Component { constructor(props) { @@ -20,11 +21,18 @@ export default class Bubbles extends React.Component { } componentWillReceiveProps(nextProps) { + console.log('data', this.props.data); if (nextProps.data !== this.props.data) { this.renderBubbles(nextProps.data); } - if (nextProps.groupByYear !== this.props.groupByYear) { - this.regroupBubbles(nextProps.groupByYear); + if (nextProps.groupByCategory === true) { + console.log('category true', nextProps.groupByCategory); + this.regroupBubblesByCategory(); + } else if (nextProps.groupBySpending === true) { + console.log('spending true', nextProps.groupBySpending); + this.regroupBubblesBySpending(); + } else { + this.resetBubbles(); } } @@ -48,15 +56,27 @@ export default class Bubbles extends React.Component { return -this.props.forceStrength * (d.radius ** 2.0); } - regroupBubbles = (groupByYear) => { - const { forceStrength, yearCenters, center } = this.props; - if (groupByYear) { - this.simulation.force('x', d3.forceX().strength(forceStrength).x(d => yearCenters[d.year].x)) - .force('y', d3.forceY().strength(forceStrength).y(d => yearCenters[d.year].y)); - } else { - this.simulation.force('x', d3.forceX().strength(forceStrength).x(center.x)) - .force('y', d3.forceY().strength(forceStrength).y(center.y)); - } + regroupBubblesByCategory = () => { + const { forceStrength, categoryCenters } = this.props; + console.log('groupByCategory fired!') + this.simulation.force('x', d3.forceX().strength(forceStrength).x(d => categoryCenters[d.category].x)) + .force('y', d3.forceY().strength(forceStrength).y(d => categoryCenters[d.category].y)); + this.simulation.alpha(1).restart(); + } + + regroupBubblesBySpending = () => { + const { forceStrength, spendingCenters } = this.props; + console.log('groupBySpending fired!') + this.simulation.force('x', d3.forceX().strength(forceStrength).x(d => spendingCenters[d.spending].x)) + .force('y', d3.forceY().strength(forceStrength).y(d => spendingCenters[d.spending].y)); + this.simulation.alpha(1).restart(); + } + + resetBubbles = () => { + const { forceStrength, center } = this.props; + console.log('neither fired!') + this.simulation.force('x', d3.forceX().strength(forceStrength).x(center.x)) + .force('y', d3.forceY().strength(forceStrength).y(center.y)); this.simulation.alpha(1).restart(); } @@ -67,7 +87,8 @@ export default class Bubbles extends React.Component { bubbles.exit().remove(); // Enter - const bubblesE = bubbles.enter().append('circle') + const bubblesE = bubbles.enter() + .append('circle') .classed('bubble', true) .attr('r', 0) .attr('cx', d => d.x) @@ -78,6 +99,13 @@ export default class Bubbles extends React.Component { .on('mouseover', showDetail) // eslint-disable-line .on('mouseout', hideDetail) // eslint-disable-line + bubblesE + .append('text') + .attr('text-anchor', 'middle') + .text(d => d.name); + + console.log('bubbles', bubblesE); + bubblesE.transition().duration(2000).attr('r', d => d.radius).on('end', () => { this.simulation.nodes(data) .alpha(1) @@ -87,7 +115,7 @@ export default class Bubbles extends React.Component { render() { return ( - + ); } } @@ -98,14 +126,19 @@ Bubbles.propTypes = { y: PropTypes.number.isRequired, }), forceStrength: PropTypes.number.isRequired, - groupByYear: PropTypes.bool.isRequired, - yearCenters: PropTypes.objectOf(PropTypes.shape({ + groupByCategory: PropTypes.bool.isRequired, + categoryCenters: PropTypes.objectOf(PropTypes.shape({ + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + }).isRequired).isRequired, + groupBySpending: PropTypes.bool.isRequired, + spendingCenters: PropTypes.objectOf(PropTypes.shape({ x: PropTypes.number.isRequired, y: PropTypes.number.isRequired, }).isRequired).isRequired, data: PropTypes.arrayOf(PropTypes.shape({ x: PropTypes.number.isRequired, - id: PropTypes.string.isRequired, + id: PropTypes.number.isRequired, radius: PropTypes.number.isRequired, value: PropTypes.number.isRequired, name: PropTypes.string.isRequired, @@ -120,16 +153,25 @@ export function showDetail(d) { // change outline to indicate hover state. d3.select(this).attr('stroke', 'black'); - const content = `Title: ${ - d.name - }
` + - `Amount: $${ - d.value - }
` + - `Year: ${ - d.year - }`; - + const content = `Title: + + ${d.name} +
` + + + `Amount: + + ${d.value} +
` + + + `Category: + + ${d.category} +
` + + + `Spending: + + ${d.spending} +
`; tooltip.showTooltip(content, d3.event); } diff --git a/src/BubbleChart/components/CategoryTitles.js b/src/BubbleChart/components/CategoryTitles.js new file mode 100644 index 00000000..3f94c5d0 --- /dev/null +++ b/src/BubbleChart/components/CategoryTitles.js @@ -0,0 +1,29 @@ +import React, { PropTypes } from 'react'; + +const CategoryTitles = ({ categoryCenters }) => + + { + Object.keys(categoryCenters).map(category => + + { + category + } + ) + } + ; + +CategoryTitles.propTypes = { + categoryCenters: PropTypes.objectOf(PropTypes.shape({ + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + }).isRequired).isRequired, +}; + +export default CategoryTitles; diff --git a/src/BubbleChart/components/GroupingPicker.js b/src/BubbleChart/components/GroupingPicker.js index 858e9202..ca948e43 100644 --- a/src/BubbleChart/components/GroupingPicker.js +++ b/src/BubbleChart/components/GroupingPicker.js @@ -1,20 +1,18 @@ import React, { PropTypes } from 'react'; -import classNames from 'classnames/bind'; import styles from './GroupingPicker.css'; -const cx = classNames.bind(styles); -const className = cx({ GroupingPicker: true }); - export default class GroupingPicker extends React.Component { onBtnClick = (event) => { this.props.onChanged(event.target.name); } render() { const { active } = this.props; + return ( -
- - +
+ + +
); } @@ -22,5 +20,5 @@ export default class GroupingPicker extends React.Component { GroupingPicker.propTypes = { onChanged: PropTypes.func.isRequired, - active: PropTypes.oneOf(['all', 'year']).isRequired, + active: PropTypes.oneOf(['all', 'category', 'spending']).isRequired, }; diff --git a/src/BubbleChart/components/YearsTitles.js b/src/BubbleChart/components/SpendingTitles.js similarity index 50% rename from src/BubbleChart/components/YearsTitles.js rename to src/BubbleChart/components/SpendingTitles.js index 6acec4a1..39424ff2 100644 --- a/src/BubbleChart/components/YearsTitles.js +++ b/src/BubbleChart/components/SpendingTitles.js @@ -1,30 +1,30 @@ import React, { PropTypes } from 'react'; -const YearsTitles = ({ yearCenters }) => - +const SpendingTitles = ({ spendingCenters }) => + { - Object.keys(yearCenters).map(year => + Object.keys(spendingCenters).map(spending => { - year + spending } ) } ; -YearsTitles.propTypes = { - yearCenters: PropTypes.objectOf(PropTypes.shape({ +SpendingTitles.propTypes = { + spendingCenters: PropTypes.objectOf(PropTypes.shape({ x: PropTypes.number.isRequired, y: PropTypes.number.isRequired, }).isRequired).isRequired, }; -export default YearsTitles; +export default SpendingTitles; diff --git a/src/BubbleChart/components/Tooltip.js b/src/BubbleChart/components/Tooltip.js index 0de4de5c..d6b0bc0e 100644 --- a/src/BubbleChart/components/Tooltip.js +++ b/src/BubbleChart/components/Tooltip.js @@ -8,7 +8,7 @@ import styles from './Tooltip.css'; * Most styling is expected to come from CSS * so check out bubble_chart.css for more details. */ -const floatingTooltip = (tooltipId, width, height) => { +const floatingTooltip = (tooltipId, width) => { // Local variable to hold tooltip div for // manipulation in other functions. @@ -83,5 +83,5 @@ const floatingTooltip = (tooltipId, width, height) => { }; }; -const tooltip = floatingTooltip('myTooltip', 240, 160); +const tooltip = floatingTooltip('myTooltip', 240); export default tooltip; diff --git a/src/BubbleChart/constants.js b/src/BubbleChart/constants.js index 95e98f29..479ab175 100644 --- a/src/BubbleChart/constants.js +++ b/src/BubbleChart/constants.js @@ -3,8 +3,13 @@ export const height = 640; export const center = { x: width / 2, y: height / 2 }; -export const yearCenters = { - 2010: { x: width / 4, y: height / 2 }, - 2011: { x: width / 2, y: height / 2 }, - 2012: { x: (3 / 4) * width, y: height / 2 }, +export const categoryCenters = { + One: { x: width / 4, y: height / 2 }, + Two: { x: width / 2, y: height / 2 }, + Three: { x: (3 / 4) * width, y: height / 2 }, +}; + +export const spendingCenters = { + Manditory: { x: width / 3, y: height / 2 }, + Discretionary: { x: width / 1.5, y: height / 2 }, }; diff --git a/src/BubbleChart/createNodes.js b/src/BubbleChart/createNodes.js index b185d0d6..cec8ff91 100644 --- a/src/BubbleChart/createNodes.js +++ b/src/BubbleChart/createNodes.js @@ -14,15 +14,18 @@ import * as d3 from 'd3'; */ const createNodes = (rawData) => { + // Use the max total_amount in the data as the max in the scale's domain // note we have to ensure the total_amount is a number. const maxAmount = d3.max(rawData, d => +d.total_amount); + // Sizes bubbles based on area. // @v4: new flattened scale names. const radiusScale = d3.scalePow() .exponent(0.5) .range([2, 85]) .domain([0, maxAmount]); + // Use map() to convert raw data into node data. // Checkout http://learnjsdata.com/ for more on // working with data. @@ -33,10 +36,12 @@ const createNodes = (rawData) => { name: d.bureau_title, group: d.group, color: d.color, - year: d.year, + spending: d.spending, + category: d.category, x: Math.random() * 900, y: Math.random() * 800, })); + // sort them descending to prevent occlusion of smaller nodes. myNodes.sort((a, b) => b.value - a.value); diff --git a/stories/BubbleChart.story.js b/stories/BubbleChart.story.js index b80951ab..8f80588a 100644 --- a/stories/BubbleChart.story.js +++ b/stories/BubbleChart.story.js @@ -14,55 +14,64 @@ const data = [ total_amount: 7468965, group: 'low', color: colors[2], - year: 2010 }, + spending: 'Manditory', + category: 'One' }, { bureau_title: 'City Budget Office', id: 2, total_amount: 115497, group: 'medium', color: colors[2], - year: 2011 }, + spending: 'Manditory', + category: 'One' }, { bureau_title: 'Office of Management & Finance', id: 3, total_amount: 8398624, group: 'low', color: colors[4], - year: 2012 }, + spending: 'Discretionary', + category: 'One' }, { bureau_title: 'Office of the Mayor', id: 4, total_amount: 592962, group: 'medium', color: colors[4], - year: 2010 }, + spending: 'Manditory', + category: 'Two' }, { bureau_title: 'Portland Bureau of Transportation', id: 5, total_amount: 57546789, group: 'high', color: colors[6], - year: 2012 }, + spending: 'Manditory', + category: 'Two' }, { bureau_title: 'Portland Housing Bureau', id: 6, total_amount: 11639339, group: 'low', color: colors[6], - year: 2011 }, + spending: 'Discretionary', + category: 'Two' }, { bureau_title: 'Portland Parks & Recreation', id: 7, total_amount: 21829002, group: 'medium', color: colors[6], - year: 2012 }, + spending: 'Manditory', + category: 'Three' }, { bureau_title: 'Portland Police Bureau', id: 8, total_amount: 2954388, group: 'high', color: colors[8], - year: 2010 }, + spending: 'Discretionary', + category: 'Three' }, { bureau_title: 'Portland Water Bureau', id: 9, total_amount: 1585195, group: 'low', color: colors[8], - year: 2011 }, + spending: 'Manditory', + category: 'Three' }, ]; const demoCode = () => ( From de0885178984584da815ec04729f347ee9e5fa45 Mon Sep 17 00:00:00 2001 From: drabelpdx Date: Thu, 20 Apr 2017 13:16:22 -0700 Subject: [PATCH 4/6] Striped out most of project/data specific code, is mostly generic now --- src/BubbleChart/BubbleChart.js | 20 ++--- src/BubbleChart/components/Bubbles.js | 45 +--------- src/BubbleChart/components/GroupingPicker.js | 6 +- src/BubbleChart/components/SpendingTitles.js | 30 ------- src/BubbleChart/constants.js | 15 ---- src/BubbleChart/createNodes.js | 51 ------------ src/BubbleChart/utils.js | 87 ++++++++++++++++++++ stories/BubbleChart.story.js | 37 ++++----- 8 files changed, 119 insertions(+), 172 deletions(-) delete mode 100644 src/BubbleChart/components/SpendingTitles.js delete mode 100644 src/BubbleChart/constants.js delete mode 100644 src/BubbleChart/createNodes.js create mode 100644 src/BubbleChart/utils.js diff --git a/src/BubbleChart/BubbleChart.js b/src/BubbleChart/BubbleChart.js index 77f4c6a3..48b371e3 100644 --- a/src/BubbleChart/BubbleChart.js +++ b/src/BubbleChart/BubbleChart.js @@ -1,12 +1,10 @@ import React, { Component, PropTypes } from 'react'; import BubbleContainer from './components/BubbleContainer'; import Bubbles from './components/Bubbles'; -import createNodes from './createNodes'; import GroupingPicker from './components/GroupingPicker'; import CategoryTitles from './components/CategoryTitles'; -import SpendingTitles from './components/SpendingTitles'; -import { width, height, center, categoryCenters, spendingCenters } from './constants'; +import { createNodes, width, height, center, category } from './utils'; export default class BubleAreaChart extends Component { @@ -38,19 +36,19 @@ export default class BubleAreaChart extends Component { data={data} forceStrength={0.03} center={center} - categoryCenters={categoryCenters} - groupByCategory={grouping === 'category'} - spendingCenters={spendingCenters} - groupBySpending={grouping === 'spending'} + categoryCenters1={category[1]} + groupByCategory1={grouping === 'category1'} + categoryCenters2={category[2]} + groupByCategory2={grouping === 'category2'} color={this.props.colors} /> { - grouping === 'category' && - + grouping === 'category1' && + } { - grouping === 'spending' && - + grouping === 'category2' && + }
diff --git a/src/BubbleChart/components/Bubbles.js b/src/BubbleChart/components/Bubbles.js index 0593b785..317fb5c1 100644 --- a/src/BubbleChart/components/Bubbles.js +++ b/src/BubbleChart/components/Bubbles.js @@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'; import * as d3 from 'd3'; import tooltip from './Tooltip'; import styles from './Tooltip.css'; +import { checkProps } from '../utils'; export default class Bubbles extends React.Component { constructor(props) { @@ -21,18 +22,10 @@ export default class Bubbles extends React.Component { } componentWillReceiveProps(nextProps) { - console.log('data', this.props.data); if (nextProps.data !== this.props.data) { this.renderBubbles(nextProps.data); - } - if (nextProps.groupByCategory === true) { - console.log('category true', nextProps.groupByCategory); - this.regroupBubblesByCategory(); - } else if (nextProps.groupBySpending === true) { - console.log('spending true', nextProps.groupBySpending); - this.regroupBubblesBySpending(); } else { - this.resetBubbles(); + checkProps(nextProps, this.props, this.simulation, this.resetBubbles); } } @@ -56,25 +49,8 @@ export default class Bubbles extends React.Component { return -this.props.forceStrength * (d.radius ** 2.0); } - regroupBubblesByCategory = () => { - const { forceStrength, categoryCenters } = this.props; - console.log('groupByCategory fired!') - this.simulation.force('x', d3.forceX().strength(forceStrength).x(d => categoryCenters[d.category].x)) - .force('y', d3.forceY().strength(forceStrength).y(d => categoryCenters[d.category].y)); - this.simulation.alpha(1).restart(); - } - - regroupBubblesBySpending = () => { - const { forceStrength, spendingCenters } = this.props; - console.log('groupBySpending fired!') - this.simulation.force('x', d3.forceX().strength(forceStrength).x(d => spendingCenters[d.spending].x)) - .force('y', d3.forceY().strength(forceStrength).y(d => spendingCenters[d.spending].y)); - this.simulation.alpha(1).restart(); - } - resetBubbles = () => { const { forceStrength, center } = this.props; - console.log('neither fired!') this.simulation.force('x', d3.forceX().strength(forceStrength).x(center.x)) .force('y', d3.forceY().strength(forceStrength).y(center.y)); this.simulation.alpha(1).restart(); @@ -99,13 +75,6 @@ export default class Bubbles extends React.Component { .on('mouseover', showDetail) // eslint-disable-line .on('mouseout', hideDetail) // eslint-disable-line - bubblesE - .append('text') - .attr('text-anchor', 'middle') - .text(d => d.name); - - console.log('bubbles', bubblesE); - bubblesE.transition().duration(2000).attr('r', d => d.radius).on('end', () => { this.simulation.nodes(data) .alpha(1) @@ -126,16 +95,6 @@ Bubbles.propTypes = { y: PropTypes.number.isRequired, }), forceStrength: PropTypes.number.isRequired, - groupByCategory: PropTypes.bool.isRequired, - categoryCenters: PropTypes.objectOf(PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - }).isRequired).isRequired, - groupBySpending: PropTypes.bool.isRequired, - spendingCenters: PropTypes.objectOf(PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - }).isRequired).isRequired, data: PropTypes.arrayOf(PropTypes.shape({ x: PropTypes.number.isRequired, id: PropTypes.number.isRequired, diff --git a/src/BubbleChart/components/GroupingPicker.js b/src/BubbleChart/components/GroupingPicker.js index ca948e43..8ef62e47 100644 --- a/src/BubbleChart/components/GroupingPicker.js +++ b/src/BubbleChart/components/GroupingPicker.js @@ -11,8 +11,8 @@ export default class GroupingPicker extends React.Component { return (
- - + +
); } @@ -20,5 +20,5 @@ export default class GroupingPicker extends React.Component { GroupingPicker.propTypes = { onChanged: PropTypes.func.isRequired, - active: PropTypes.oneOf(['all', 'category', 'spending']).isRequired, + active: PropTypes.oneOf(['all', 'category1', 'category2']).isRequired, }; diff --git a/src/BubbleChart/components/SpendingTitles.js b/src/BubbleChart/components/SpendingTitles.js deleted file mode 100644 index 39424ff2..00000000 --- a/src/BubbleChart/components/SpendingTitles.js +++ /dev/null @@ -1,30 +0,0 @@ -import React, { PropTypes } from 'react'; - -const SpendingTitles = ({ spendingCenters }) => - - { - Object.keys(spendingCenters).map(spending => - - { - spending - } - ) - } - ; - - -SpendingTitles.propTypes = { - spendingCenters: PropTypes.objectOf(PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - }).isRequired).isRequired, -}; - -export default SpendingTitles; diff --git a/src/BubbleChart/constants.js b/src/BubbleChart/constants.js deleted file mode 100644 index 479ab175..00000000 --- a/src/BubbleChart/constants.js +++ /dev/null @@ -1,15 +0,0 @@ -export const width = 960; -export const height = 640; - -export const center = { x: width / 2, y: height / 2 }; - -export const categoryCenters = { - One: { x: width / 4, y: height / 2 }, - Two: { x: width / 2, y: height / 2 }, - Three: { x: (3 / 4) * width, y: height / 2 }, -}; - -export const spendingCenters = { - Manditory: { x: width / 3, y: height / 2 }, - Discretionary: { x: width / 1.5, y: height / 2 }, -}; diff --git a/src/BubbleChart/createNodes.js b/src/BubbleChart/createNodes.js deleted file mode 100644 index cec8ff91..00000000 --- a/src/BubbleChart/createNodes.js +++ /dev/null @@ -1,51 +0,0 @@ -import * as d3 from 'd3'; - -/* - * This data manipulation function takes the raw data from - * the CSV file and converts it into an array of node objects. - * Each node will store data and visualization values to visualize - * a bubble. - * - * rawData is expected to be an array of data objects, read in from - * one of d3's loading functions like d3.csv. - * - * This function returns the new node array, with a node in that - * array for each element in the rawData input. - */ - -const createNodes = (rawData) => { - - // Use the max total_amount in the data as the max in the scale's domain - // note we have to ensure the total_amount is a number. - const maxAmount = d3.max(rawData, d => +d.total_amount); - - // Sizes bubbles based on area. - // @v4: new flattened scale names. - const radiusScale = d3.scalePow() - .exponent(0.5) - .range([2, 85]) - .domain([0, maxAmount]); - - // Use map() to convert raw data into node data. - // Checkout http://learnjsdata.com/ for more on - // working with data. - const myNodes = rawData.map(d => ({ - id: d.id, - radius: radiusScale(+d.total_amount), - value: +d.total_amount, - name: d.bureau_title, - group: d.group, - color: d.color, - spending: d.spending, - category: d.category, - x: Math.random() * 900, - y: Math.random() * 800, - })); - - // sort them descending to prevent occlusion of smaller nodes. - myNodes.sort((a, b) => b.value - a.value); - - return myNodes; -}; - -export default createNodes; diff --git a/src/BubbleChart/utils.js b/src/BubbleChart/utils.js new file mode 100644 index 00000000..e2bbac5c --- /dev/null +++ b/src/BubbleChart/utils.js @@ -0,0 +1,87 @@ +import * as d3 from 'd3'; + +// constants +export const width = 960; +export const height = 640; +export const center = { x: width / 2, y: height / 2 }; + +// category titles and center position +export const category = { + 1: { + One: { x: width / 4, y: height / 2 }, + Two: { x: width / 2, y: height / 2 }, + Three: { x: (3 / 4) * width, y: height / 2 }, + }, + 2: { + Manditory: { x: width / 3, y: height / 2 }, + Discretionary: { x: width / 1.5, y: height / 2 }, + }, +}; + + +// create nodes +/* + * This data manipulation function takes the raw data from + * the CSV file and converts it into an array of node objects. + * Each node will store data and visualization values to visualize + * a bubble. + * + * rawData is expected to be an array of data objects, read in from + * one of d3's loading functions like d3.csv. + * + * This function returns the new node array, with a node in that + * array for each element in the rawData input. + */ + +export const createNodes = (rawData) => { + // Use the max total_amount in the data as the max in the scale's domain + // note we have to ensure the total_amount is a number. + const maxAmount = d3.max(rawData, d => +d.total_amount); + + // Sizes bubbles based on area. + // @v4: new flattened scale names. + const radiusScale = d3.scalePow() + .exponent(0.5) + .range([2, 85]) + .domain([0, maxAmount]); + + // Use map() to convert raw data into node data. + const myNodes = rawData.map(d => ({ + id: d.id, + radius: radiusScale(+d.total_amount), + value: +d.total_amount, + name: d.bureau_title, + group: d.group, + color: d.color, + category1: d.category1, + category2: d.category2, + x: Math.random() * 900, + y: Math.random() * 800, + })); + + // sort them descending to prevent occlusion of smaller nodes. + myNodes.sort((a, b) => b.value - a.value); + + return myNodes; +}; + +// regroup bubbles to active category +export const checkProps = (nextProps, props, simulation, resetBubbles) => { + if (nextProps.groupByCategory1 === true) { + return (function () { + const { forceStrength, categoryCenters1 } = props; + simulation.force('x', d3.forceX().strength(forceStrength).x(d => categoryCenters1[d.category1].x)) + .force('y', d3.forceY().strength(forceStrength).y(d => categoryCenters1[d.category1].y)); + simulation.alpha(1).restart(); + }()); + } else if (nextProps.groupByCategory2 === true) { + return (function () { + const { forceStrength, categoryCenters2 } = props; + simulation.force('x', d3.forceX().strength(forceStrength).x(d => categoryCenters2[d.category2].x)) + .force('y', d3.forceY().strength(forceStrength).y(d => categoryCenters2[d.category2].y)); + simulation.alpha(1).restart(); + }()); + } + + resetBubbles(); +}; diff --git a/stories/BubbleChart.story.js b/stories/BubbleChart.story.js index 8f80588a..62befabb 100644 --- a/stories/BubbleChart.story.js +++ b/stories/BubbleChart.story.js @@ -14,70 +14,69 @@ const data = [ total_amount: 7468965, group: 'low', color: colors[2], - spending: 'Manditory', - category: 'One' }, + category1: 'One', + category2: 'Manditory' }, { bureau_title: 'City Budget Office', id: 2, total_amount: 115497, group: 'medium', color: colors[2], - spending: 'Manditory', - category: 'One' }, + category1: 'One', + category2: 'Manditory' }, { bureau_title: 'Office of Management & Finance', id: 3, total_amount: 8398624, group: 'low', color: colors[4], - spending: 'Discretionary', - category: 'One' }, + category1: 'One', + category2: 'Discretionary' }, { bureau_title: 'Office of the Mayor', id: 4, total_amount: 592962, group: 'medium', color: colors[4], - spending: 'Manditory', - category: 'Two' }, + category1: 'Two', + category2: 'Manditory' }, { bureau_title: 'Portland Bureau of Transportation', id: 5, total_amount: 57546789, group: 'high', color: colors[6], - spending: 'Manditory', - category: 'Two' }, + category1: 'Two', + category2: 'Manditory' }, { bureau_title: 'Portland Housing Bureau', id: 6, total_amount: 11639339, group: 'low', color: colors[6], - spending: 'Discretionary', - category: 'Two' }, + category1: 'Two', + category2: 'Discretionary' }, { bureau_title: 'Portland Parks & Recreation', id: 7, total_amount: 21829002, group: 'medium', color: colors[6], - spending: 'Manditory', - category: 'Three' }, + category1: 'Three', + category2: 'Manditory' }, { bureau_title: 'Portland Police Bureau', id: 8, total_amount: 2954388, group: 'high', color: colors[8], - spending: 'Discretionary', - category: 'Three' }, + category1: 'Three', + category2: 'Discretionary' }, { bureau_title: 'Portland Water Bureau', id: 9, total_amount: 1585195, group: 'low', color: colors[8], - spending: 'Manditory', - category: 'Three' }, + category1: 'Three', + category2: 'Manditory' }, ]; const demoCode = () => ( ); From 7c3a3c80152d7d3437d4aaf2b3d6d318f2410173 Mon Sep 17 00:00:00 2001 From: drabelpdx Date: Thu, 20 Apr 2017 19:40:35 -0700 Subject: [PATCH 5/6] Clean up linting erros in utils.js --- src/BubbleChart/utils.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/BubbleChart/utils.js b/src/BubbleChart/utils.js index e2bbac5c..583a8ae3 100644 --- a/src/BubbleChart/utils.js +++ b/src/BubbleChart/utils.js @@ -67,21 +67,25 @@ export const createNodes = (rawData) => { // regroup bubbles to active category export const checkProps = (nextProps, props, simulation, resetBubbles) => { + let regroupBubbles = ''; if (nextProps.groupByCategory1 === true) { - return (function () { + regroupBubbles = (function Cat1() { const { forceStrength, categoryCenters1 } = props; simulation.force('x', d3.forceX().strength(forceStrength).x(d => categoryCenters1[d.category1].x)) .force('y', d3.forceY().strength(forceStrength).y(d => categoryCenters1[d.category1].y)); simulation.alpha(1).restart(); }()); } else if (nextProps.groupByCategory2 === true) { - return (function () { + regroupBubbles = (function Cat2() { const { forceStrength, categoryCenters2 } = props; simulation.force('x', d3.forceX().strength(forceStrength).x(d => categoryCenters2[d.category2].x)) .force('y', d3.forceY().strength(forceStrength).y(d => categoryCenters2[d.category2].y)); simulation.alpha(1).restart(); }()); } + if (regroupBubbles === '') { + return resetBubbles(); + } - resetBubbles(); + return regroupBubbles; }; From 88f2fe3f20660b03fa6a4a0dcaf0fb840e08ea96 Mon Sep 17 00:00:00 2001 From: drabelpdx Date: Tue, 25 Apr 2017 07:54:40 -0700 Subject: [PATCH 6/6] Removed grouping, reduced files --- src/BubbleChart/BubbleChart.js | 49 ++++------------ src/BubbleChart/{components => }/Bubbles.js | 27 +-------- src/BubbleChart/{components => }/Tooltip.css | 0 src/BubbleChart/{components => }/Tooltip.js | 0 src/BubbleChart/components/BubbleContainer.js | 16 ------ src/BubbleChart/components/CategoryTitles.js | 29 ---------- src/BubbleChart/components/GroupingPicker.css | 22 -------- src/BubbleChart/components/GroupingPicker.js | 24 -------- src/BubbleChart/utils.js | 56 +------------------ stories/BubbleChart.story.js | 27 +++------ 10 files changed, 25 insertions(+), 225 deletions(-) rename src/BubbleChart/{components => }/Bubbles.js (78%) rename src/BubbleChart/{components => }/Tooltip.css (100%) rename src/BubbleChart/{components => }/Tooltip.js (100%) delete mode 100644 src/BubbleChart/components/BubbleContainer.js delete mode 100644 src/BubbleChart/components/CategoryTitles.js delete mode 100644 src/BubbleChart/components/GroupingPicker.css delete mode 100644 src/BubbleChart/components/GroupingPicker.js diff --git a/src/BubbleChart/BubbleChart.js b/src/BubbleChart/BubbleChart.js index 48b371e3..c3772a41 100644 --- a/src/BubbleChart/BubbleChart.js +++ b/src/BubbleChart/BubbleChart.js @@ -1,16 +1,12 @@ import React, { Component, PropTypes } from 'react'; -import BubbleContainer from './components/BubbleContainer'; -import Bubbles from './components/Bubbles'; -import GroupingPicker from './components/GroupingPicker'; -import CategoryTitles from './components/CategoryTitles'; +import Bubbles from './Bubbles'; -import { createNodes, width, height, center, category } from './utils'; +import { createNodes, width, height, center } from './utils'; export default class BubleAreaChart extends Component { state = { data: [], - grouping: 'all', } componentWillMount() { @@ -19,39 +15,18 @@ export default class BubleAreaChart extends Component { }); } - onGroupingChanged = (newGrouping) => { - this.setState({ - grouping: newGrouping, - }); - }; - render() { - const { data, grouping } = this.state; + const { data } = this.state; return ( -
- -
- - - { - grouping === 'category1' && - - } - { - grouping === 'category2' && - - } - -
+
+ + +
); } diff --git a/src/BubbleChart/components/Bubbles.js b/src/BubbleChart/Bubbles.js similarity index 78% rename from src/BubbleChart/components/Bubbles.js rename to src/BubbleChart/Bubbles.js index 317fb5c1..8653db11 100644 --- a/src/BubbleChart/components/Bubbles.js +++ b/src/BubbleChart/Bubbles.js @@ -2,7 +2,6 @@ import React, { PropTypes } from 'react'; import * as d3 from 'd3'; import tooltip from './Tooltip'; import styles from './Tooltip.css'; -import { checkProps } from '../utils'; export default class Bubbles extends React.Component { constructor(props) { @@ -21,14 +20,6 @@ export default class Bubbles extends React.Component { g: null, } - componentWillReceiveProps(nextProps) { - if (nextProps.data !== this.props.data) { - this.renderBubbles(nextProps.data); - } else { - checkProps(nextProps, this.props, this.simulation, this.resetBubbles); - } - } - shouldComponentUpdate() { // we will handle moving the nodes on our own with d3.js // make React ignore this component @@ -49,13 +40,6 @@ export default class Bubbles extends React.Component { return -this.props.forceStrength * (d.radius ** 2.0); } - resetBubbles = () => { - const { forceStrength, center } = this.props; - this.simulation.force('x', d3.forceX().strength(forceStrength).x(center.x)) - .force('y', d3.forceY().strength(forceStrength).y(center.y)); - this.simulation.alpha(1).restart(); - } - renderBubbles(data) { const bubbles = this.state.g.selectAll('.bubble').data(data, d => d.id); @@ -122,15 +106,10 @@ export function showDetail(d) { ${d.value}
` + - `Category: + `Percentage: - ${d.category} -
` - + - `Spending: - - ${d.spending} -
`; + ${d.percentage} +
`; tooltip.showTooltip(content, d3.event); } diff --git a/src/BubbleChart/components/Tooltip.css b/src/BubbleChart/Tooltip.css similarity index 100% rename from src/BubbleChart/components/Tooltip.css rename to src/BubbleChart/Tooltip.css diff --git a/src/BubbleChart/components/Tooltip.js b/src/BubbleChart/Tooltip.js similarity index 100% rename from src/BubbleChart/components/Tooltip.js rename to src/BubbleChart/Tooltip.js diff --git a/src/BubbleChart/components/BubbleContainer.js b/src/BubbleChart/components/BubbleContainer.js deleted file mode 100644 index e28d7d82..00000000 --- a/src/BubbleChart/components/BubbleContainer.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, { PropTypes } from 'react'; - -const BubbleContainer = ({ width, height, children }) => - - { - children - } - ; - -BubbleContainer.propTypes = { - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - children: PropTypes.node, -}; - -export default BubbleContainer; diff --git a/src/BubbleChart/components/CategoryTitles.js b/src/BubbleChart/components/CategoryTitles.js deleted file mode 100644 index 3f94c5d0..00000000 --- a/src/BubbleChart/components/CategoryTitles.js +++ /dev/null @@ -1,29 +0,0 @@ -import React, { PropTypes } from 'react'; - -const CategoryTitles = ({ categoryCenters }) => - - { - Object.keys(categoryCenters).map(category => - - { - category - } - ) - } - ; - -CategoryTitles.propTypes = { - categoryCenters: PropTypes.objectOf(PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - }).isRequired).isRequired, -}; - -export default CategoryTitles; diff --git a/src/BubbleChart/components/GroupingPicker.css b/src/BubbleChart/components/GroupingPicker.css deleted file mode 100644 index 207d289d..00000000 --- a/src/BubbleChart/components/GroupingPicker.css +++ /dev/null @@ -1,22 +0,0 @@ -.GroupingPicker { - display: flex; - justify-content: flex-start; - padding: 10px; -} - -.button { - min-width: 130px; - padding: 4px 5px; - cursor: pointer; - text-align: center; - font-size: 13px; - background: white; - border: 1px solid #e0e0e0; - text-decoration: none; - margin: 0 5px; -} - -.active { - background: black; - color: white; -} diff --git a/src/BubbleChart/components/GroupingPicker.js b/src/BubbleChart/components/GroupingPicker.js deleted file mode 100644 index 8ef62e47..00000000 --- a/src/BubbleChart/components/GroupingPicker.js +++ /dev/null @@ -1,24 +0,0 @@ -import React, { PropTypes } from 'react'; -import styles from './GroupingPicker.css'; - -export default class GroupingPicker extends React.Component { - onBtnClick = (event) => { - this.props.onChanged(event.target.name); - } - render() { - const { active } = this.props; - - return ( -
- - - -
- ); - } -} - -GroupingPicker.propTypes = { - onChanged: PropTypes.func.isRequired, - active: PropTypes.oneOf(['all', 'category1', 'category2']).isRequired, -}; diff --git a/src/BubbleChart/utils.js b/src/BubbleChart/utils.js index 583a8ae3..189fa34e 100644 --- a/src/BubbleChart/utils.js +++ b/src/BubbleChart/utils.js @@ -5,34 +5,7 @@ export const width = 960; export const height = 640; export const center = { x: width / 2, y: height / 2 }; -// category titles and center position -export const category = { - 1: { - One: { x: width / 4, y: height / 2 }, - Two: { x: width / 2, y: height / 2 }, - Three: { x: (3 / 4) * width, y: height / 2 }, - }, - 2: { - Manditory: { x: width / 3, y: height / 2 }, - Discretionary: { x: width / 1.5, y: height / 2 }, - }, -}; - - // create nodes -/* - * This data manipulation function takes the raw data from - * the CSV file and converts it into an array of node objects. - * Each node will store data and visualization values to visualize - * a bubble. - * - * rawData is expected to be an array of data objects, read in from - * one of d3's loading functions like d3.csv. - * - * This function returns the new node array, with a node in that - * array for each element in the rawData input. - */ - export const createNodes = (rawData) => { // Use the max total_amount in the data as the max in the scale's domain // note we have to ensure the total_amount is a number. @@ -50,11 +23,9 @@ export const createNodes = (rawData) => { id: d.id, radius: radiusScale(+d.total_amount), value: +d.total_amount, + percentage: d.percentage, name: d.bureau_title, - group: d.group, color: d.color, - category1: d.category1, - category2: d.category2, x: Math.random() * 900, y: Math.random() * 800, })); @@ -64,28 +35,3 @@ export const createNodes = (rawData) => { return myNodes; }; - -// regroup bubbles to active category -export const checkProps = (nextProps, props, simulation, resetBubbles) => { - let regroupBubbles = ''; - if (nextProps.groupByCategory1 === true) { - regroupBubbles = (function Cat1() { - const { forceStrength, categoryCenters1 } = props; - simulation.force('x', d3.forceX().strength(forceStrength).x(d => categoryCenters1[d.category1].x)) - .force('y', d3.forceY().strength(forceStrength).y(d => categoryCenters1[d.category1].y)); - simulation.alpha(1).restart(); - }()); - } else if (nextProps.groupByCategory2 === true) { - regroupBubbles = (function Cat2() { - const { forceStrength, categoryCenters2 } = props; - simulation.force('x', d3.forceX().strength(forceStrength).x(d => categoryCenters2[d.category2].x)) - .force('y', d3.forceY().strength(forceStrength).y(d => categoryCenters2[d.category2].y)); - simulation.alpha(1).restart(); - }()); - } - if (regroupBubbles === '') { - return resetBubbles(); - } - - return regroupBubbles; -}; diff --git a/stories/BubbleChart.story.js b/stories/BubbleChart.story.js index 62befabb..5f355ce4 100644 --- a/stories/BubbleChart.story.js +++ b/stories/BubbleChart.story.js @@ -14,64 +14,55 @@ const data = [ total_amount: 7468965, group: 'low', color: colors[2], - category1: 'One', - category2: 'Manditory' }, + percentage: '5% of Total Budget' }, { bureau_title: 'City Budget Office', id: 2, total_amount: 115497, group: 'medium', color: colors[2], - category1: 'One', - category2: 'Manditory' }, + percentage: '10% of Total Budget' }, { bureau_title: 'Office of Management & Finance', id: 3, total_amount: 8398624, group: 'low', color: colors[4], - category1: 'One', - category2: 'Discretionary' }, + percentage: '20% of Total Budget' }, { bureau_title: 'Office of the Mayor', id: 4, total_amount: 592962, group: 'medium', color: colors[4], - category1: 'Two', - category2: 'Manditory' }, + percentage: '5% of Total Budget' }, { bureau_title: 'Portland Bureau of Transportation', id: 5, total_amount: 57546789, group: 'high', color: colors[6], - category1: 'Two', - category2: 'Manditory' }, + percentage: '20% of Total Budget' }, { bureau_title: 'Portland Housing Bureau', id: 6, total_amount: 11639339, group: 'low', color: colors[6], - category1: 'Two', - category2: 'Discretionary' }, + percentage: '10% of Total Budget' }, { bureau_title: 'Portland Parks & Recreation', id: 7, total_amount: 21829002, group: 'medium', color: colors[6], - category1: 'Three', - category2: 'Manditory' }, + percentage: '5% of Total Budget' }, { bureau_title: 'Portland Police Bureau', id: 8, total_amount: 2954388, group: 'high', color: colors[8], - category1: 'Three', - category2: 'Discretionary' }, + percentage: '5% of Total Budget' }, { bureau_title: 'Portland Water Bureau', id: 9, total_amount: 1585195, group: 'low', color: colors[8], - category1: 'Three', - category2: 'Manditory' }, + percentage: '10% of Total Budget' }, ]; const demoCode = () => (