scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-12-11 16:21:04 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

update map

Browse source
This commit is contained in:
caseymm 2021-10-15 12:06:10 -07:00
parent 498b35a945
commit 7160befa55
7 changed files with 50 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/world-map/world-map.jsx
View file

@ -40,7 +40,7 @@ const WorldMap = props => (
family: "'Helvetica Neue Regular', sans-serif" family: "'Helvetica Neue Regular', sans-serif"
} }
}, },
colorscale: [[0, 'rgba(14,189,140, .05)'], [1, 'rgba(14,189,140, 1)']], colorscale: [[0, props.minColor], [1, props.maxColor]],
showscale: false, showscale: false,
marker: { marker: {
line: { line: {

3
src/routes.json
View file

@ -8,10 +8,9 @@
}, },
{ {
"name": "annual-report", "name": "annual-report",
"pattern": "^/annual-report/?(\\?.*)?$", "pattern": "^/annual-report/2019/?(\\?.*)?$",
"routeAlias": "/annual-report/2019/?$", "routeAlias": "/annual-report/2019/?$",
"view": "annual-report/2019/index/annual-report", "view": "annual-report/2019/index/annual-report",
"redirect": "/annual-report/2019",
"title": "Annual Report", "title": "Annual Report",
"viewportWidth": "device-width" "viewportWidth": "device-width"
}, },

10
src/views/annual-report/2019/index/annual-report.jsx
View file

@ -56,6 +56,8 @@ const countryData = countryNames.map(key =>
`<b>${CountryUsage[key].display}</b><br>${CountryUsage[key].count.toLocaleString('en')}` `<b>${CountryUsage[key].display}</b><br>${CountryUsage[key].count.toLocaleString('en')}`
); );
const colorIndex = countryNames.map(key => CountryUsage[key]['log count']); const colorIndex = countryNames.map(key => CountryUsage[key]['log count']);
const minColor = 'rgba(14,189,140, .05)';
const maxColor = 'rgba(14,189,140, 1)';
// Create the div given a list of supporter names, // Create the div given a list of supporter names,
// this will contain two columns of names either of equal size // this will contain two columns of names either of equal size
@ -837,6 +839,8 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
@ -848,6 +852,8 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
@ -859,6 +865,8 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}> <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
@ -867,6 +875,8 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/> />
</MediaQuery> </MediaQuery>
</div> </div>

30
src/views/annual-report/2020/index/annual-report.jsx
View file

@ -23,7 +23,6 @@ const CountryUsage = require('./country-usage.json');
const IndiaProjects = require('./india-projects.json'); const IndiaProjects = require('./india-projects.json');
const PeopleGrid = require('../../../../components/people-grid/people-grid.jsx'); const PeopleGrid = require('../../../../components/people-grid/people-grid.jsx');
const People = require('./people.json'); const People = require('./people.json');
const BLMProjects = require('./blm-projects.json');
const VideoPreview = require('../../../../components/video-preview/video-preview.jsx'); const VideoPreview = require('../../../../components/video-preview/video-preview.jsx');
const Supporters = require('./supporters.json'); const Supporters = require('./supporters.json');
import { TwitterTweetEmbed } from 'react-twitter-embed'; import { TwitterTweetEmbed } from 'react-twitter-embed';
@ -62,6 +61,8 @@ const countryData = countryNames.map(key =>
`<b>${CountryUsage[key].display}</b><br>${CountryUsage[key].count.toLocaleString('en')}` `<b>${CountryUsage[key].display}</b><br>${CountryUsage[key].count.toLocaleString('en')}`
); );
const colorIndex = countryNames.map(key => CountryUsage[key]['log count']); const colorIndex = countryNames.map(key => CountryUsage[key]['log count']);
const minColor = 'rgba(46, 142, 184, .05)';
const maxColor = 'rgba(46, 142, 184, 1)';
// Create the div given a list of supporter names, // Create the div given a list of supporter names,
// this will contain two columns of names either of equal size // this will contain two columns of names either of equal size
@ -619,9 +620,9 @@ class AnnualReport extends React.Component {
<div className="map-key"> <div className="map-key">
<div className="map-scale"> <div className="map-scale">
<div>0</div> <div>0</div>
<img src="/images/annual-report/reach/Map Key.svg" /> <div className="map-legend"></div>
<div> <div>
<FormattedMessage id="annualReport.2020.reachMap20M" /> <FormattedMessage id="annualReport.2020.reachMap24M" />
</div> </div>
</div> </div>
<div> <div>
@ -635,6 +636,8 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
@ -646,6 +649,8 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
@ -657,6 +662,8 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}> <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
@ -665,6 +672,8 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/> />
</MediaQuery> </MediaQuery>
</div> </div>
@ -716,7 +725,16 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.reachDownloads" /> <FormattedMessage id="annualReport.2020.reachDownloads" />
</h4> </h4>
<div className="increase bubble dark"> <div className="increase bubble dark">
<FormattedMessage id="annualReport.2020.reachDownloadsIncrease" /> <FormattedMessage
id="annualReport.2020.reachDownloadsIncrease"
values={{
million: (
<div className="million">
<FormattedMessage id="annualReport.2020.reachMillion" />
</div>
)
}}
/>
</div> </div>
</div> </div>
</div> </div>
@ -1120,7 +1138,7 @@ class AnnualReport extends React.Component {
<div className="flex-content"> <div className="flex-content">
<div className="annual-report-example regular between"> <div className="annual-report-example regular between">
<div className="half"> <div className="half">
<iframe src="https://scratch.mit.edu/projects/389148460/embed" allowtransparency="true" width="375" height="310" frameborder="0" scrolling="no" allowfullscreen></iframe> <iframe src="https://scratch.mit.edu/projects/389148460/embed" allowtransparency="true" width="375" height="310" frameBorder="0" scrolling="no" allowFullScreen></iframe>
</div> </div>
<div className="half"> <div className="half">
<p>Aaron’s students worked together to build a “kooky” version of their town called “Norwouldn’t,” packed with storybook creatures, original artwork, and interconnecting narratives. It was one of many collaborative Scratch projects Aaron facilitated to remind students that even while COVID-19 kept them inside their homes, they were still part of a caring and joyful community.</p> <p>Aaron’s students worked together to build a “kooky” version of their town called “Norwouldn’t,” packed with storybook creatures, original artwork, and interconnecting narratives. It was one of many collaborative Scratch projects Aaron facilitated to remind students that even while COVID-19 kept them inside their homes, they were still part of a caring and joyful community.</p>
@ -1283,7 +1301,7 @@ class AnnualReport extends React.Component {
<img src="/images/annual-report/2020/community/Creative Computing Sprinkles right.svg"></img> <img src="/images/annual-report/2020/community/Creative Computing Sprinkles right.svg"></img>
</div> </div>
<div className="iframe-holder"> <div className="iframe-holder">
<iframe src="https://scratch.mit.edu/projects/412126066/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe> <iframe src="https://scratch.mit.edu/projects/412126066/embed" allowtransparency="true" width="485" height="402" frameBorder="0" scrolling="no" allowFullScreen></iframe>
<p>project by u/STORMPRIMEX</p> <p>project by u/STORMPRIMEX</p>
</div> </div>
<a className="download community" href="https://drive.google.com/file/d/1Kpwf4vN5I6SYY3l941v0IsP_tHVasuXW/view"> <a className="download community" href="https://drive.google.com/file/d/1Kpwf4vN5I6SYY3l941v0IsP_tHVasuXW/view">

11
src/views/annual-report/2020/index/annual-report.scss
View file

@ -706,6 +706,17 @@ a{
border-radius: 0px; border-radius: 0px;
} }
.map-legend{
width: 350px;
height: 38px;
border-radius: 25px;
margin: 0 8px 3px;
background: linear-gradient(90deg, rgba(46,142,184,0.05) 0%, rgba(46,142,184,1) 100%);
@media #{$medium-and-smaller} {
width: 300px;
}
}
.map-key { .map-key {
font-size: .75rem; font-size: .75rem;
margin-bottom: 36px; margin-bottom: 36px;

2
src/views/annual-report/2020/index/country-usage.json
View file

File diff suppressed because one or more lines are too long

4
src/views/annual-report/2020/index/l10n.json
View file

@ -57,8 +57,8 @@
"annualReport.2020.reachProjectCreators": "People Creating Projects", "annualReport.2020.reachProjectCreators": "People Creating Projects",
"annualReport.2020.reachComments": "increase in comments made since 2019", "annualReport.2020.reachComments": "increase in comments made since 2019",
"annualReport.2020.reachGlobalCommunity": "Our Global Community", "annualReport.2020.reachGlobalCommunity": "Our Global Community",
"annualReport.2020.reachMapBlurb": "Total accounts registered in the Scratch Online Community from the launch of Scratch through 2019", "annualReport.2020.reachMapBlurb": "Total accounts registered in the Scratch Online Community from the launch of Scratch through December 2020",
"annualReport.2020.reachMap20M": "20M", "annualReport.2020.reachMap24M": "24M",
"annualReport.2020.reachMapLog": "on a logarithmic scale", "annualReport.2020.reachMapLog": "on a logarithmic scale",
"annualReport.2020.reachTranslationTitle": "Scratch is Translated into 64 Languages", "annualReport.2020.reachTranslationTitle": "Scratch is Translated into 64 Languages",
"annualReport.2020.reachTranslationIncrease": "3 languages from 2019", "annualReport.2020.reachTranslationIncrease": "3 languages from 2019",