Skip to content

Commit

Permalink
fix smartphone display
Browse files Browse the repository at this point in the history
  • Loading branch information
holtzy committed Jul 24, 2024
1 parent 755711b commit 97c3ee9
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 94 deletions.
42 changes: 3 additions & 39 deletions pages/example/population-pyramid.tsx
Original file line number Diff line number Diff line change
@@ -1,46 +1,10 @@
import React from 'react';
import { Layout } from 'component/Layout';
import TitleAndDescription from 'component/TitleAndDescription';
import ChartFamilySection from 'component/ChartFamilySection';
import { CodeBlock } from 'component/UI/CodeBlock';
import { ChartOrSandbox } from 'component/ChartOrSandbox';
import Link from 'next/link';
import { RadarDatasetAnimationDemo } from 'viz/RadarDatasetAnimation/RadarDatasetAnimationDemo';
import { chartTypesInfo } from 'util/sectionDescriptions';
import { fullUrlToInternalLink } from 'util/utils';
import SectionLogoWithOverlay from 'component/SectionLogoWithOverlay';
import { LinkAsButton } from 'component/LinkAsButton';
import { PopulationPyramidArtDemo } from 'viz/PopulationPyramidArt/PopulationPyramidArtDemo';

const graphDescription = (
<>
<p>
The field of data offers a diverse array of <b>job titles</b>, making it
challenging to navigate without getting lost in the jargon and uncertainty
about <b>which roles to pursue</b>.
</p>
<p>
The charts below offer deeper insights into the <b>competencies</b>{' '}
needed, <b>salary</b> ranges, and <b>popularity</b> trends for the four
primary job titles.
</p>
<p>
It's a good opportunity to learn how to make a little application with
React and <a href="https://www.d3-graph-gallery.com">D3.js</a>, featuring
3 inter-connected chart types with <b>smooth animated transition</b>:{' '}
<Link href="/radar-chart">radar</Link> chart,{' '}
<Link href="/line-chart">line</Link> chart and{' '}
<Link href="/lollipop-plot">lollipop</Link>.
</p>
</>
);

export default function Home() {
return (
<>
<div className="bg-black">
<PopulationPyramidArtDemo />
</div>
</>
<div className="bg-black w-full">
<PopulationPyramidArtDemo />
</div>
);
}
4 changes: 2 additions & 2 deletions viz/PopulationPyramidArt/HorizontalTabBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const HorizontalTabBar = ({
return (
<button
key={i}
className={`text-xs px-2 py-1 bg-black border text-white rounded-lg whitespace-nowrap flex-shrink-0 ${
className={`text-xs px-2 py-1 bg-black border text-white rounded-lg flex-shrink-0 ${
i === selectedItem
? 'opacity-100 border-blue-500'
: 'opacity-40 border-white border-opacity-40'
Expand All @@ -81,7 +81,7 @@ export const HorizontalTabBar = ({
});

return (
<div className="relative max-w-lg">
<div className="relative max-w-lg w-full">
<div
ref={containerRef}
className="overflow-scroll w-full flex gap-1 noScrollBar"
Expand Down
4 changes: 4 additions & 0 deletions viz/PopulationPyramidArt/PopulationPyramid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@ const PopulationPyramid = ({
isLineEnabled,
histogramOpacity = 1,
}: PopulationPyramidProps) => {
if (width === 0 || height === 0) {
return null;
}

const boundsWidth = width - MARGIN.right - MARGIN.left;
const boundsHeight = height - MARGIN.top - MARGIN.bottom;

Expand Down
82 changes: 42 additions & 40 deletions viz/PopulationPyramidArt/PopulationPyramidArtDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,46 +87,48 @@ export const PopulationPyramidArtDemo = () => {
);

const introduction = (
<div className="flex flex-col justify-center items-center">
<p className="text-gray-400 text-xl uppercase">Watch the world...</p>
<p className="text-7xl whitespace-nowrap">Getting older</p>
<div className="mt-4 max-w-lg text-center">
<p>
Some countries are experiencing an{' '}
<a
onClick={() => {
setSelectedGroup(japanId);
}}
>
aging population
</a>
, while others are in the midst of a{' '}
<a
onClick={() => {
setSelectedGroup(nigeriaId);
}}
>
baby boom
</a>
. Some face unusual demographic{' '}
<a
onClick={() => {
setSelectedGroup(bahrainId);
}}
>
shifts
</a>{' '}
when some others are surprisingly{' '}
<a
onClick={() => {
setSelectedGroup(franceId);
}}
>
stable
</a>
. Dive into the intriguing patterns of global population dynamics with
this captivating set of lines.
</p>
<div className="narrowWrapper">
<div className="flex flex-col justify-center items-center">
<p className="text-gray-400 text-xl uppercase">Watch the world...</p>
<p className="text-7xl">Getting older</p>
<div className="mt-4 max-w-lg text-center">
<p>
Some countries are experiencing an{' '}
<a
onClick={() => {
setSelectedGroup(japanId);
}}
>
aging population
</a>
, while others are in the midst of a{' '}
<a
onClick={() => {
setSelectedGroup(nigeriaId);
}}
>
baby boom
</a>
. Some face unusual demographic{' '}
<a
onClick={() => {
setSelectedGroup(bahrainId);
}}
>
shifts
</a>{' '}
when some others are surprisingly{' '}
<a
onClick={() => {
setSelectedGroup(franceId);
}}
>
stable
</a>
. Dive into the intriguing patterns of global population dynamics
with this captivating set of lines.
</p>
</div>
</div>
</div>
);
Expand Down
29 changes: 16 additions & 13 deletions viz/PopulationPyramidArt/sections/WeirdosSection.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useMemo, useState } from 'react';
import { ResponsivePopulationPyramid } from '../PopulationPyramid';
import { Legend } from '../plot/Legend';
import { DataItem } from '../types';
Expand Down Expand Up @@ -29,18 +29,19 @@ export const WeirdosSection = ({
.filter((d) => d.Location === weirdCountries[selectedGroup])
.filter((d) => Number(d.Time) === 2024);

const tabBar = (
<div className="relative w-full h-12 flex justify-center">
<HorizontalTabBar
key="weird-country"
selectedItem={selectedGroup}
items={allGroupsWithCode.filter((d) =>
weirdCountries.includes(d.split('---')[0])
)}
setSelectedItem={setSelectedGroup}
/>
</div>
);
const tabBar = useMemo(() => {
return (
<div className="relative w-full h-12 flex justify-center">
<HorizontalTabBar
selectedItem={selectedGroup}
items={allGroupsWithCode.filter((d) =>
weirdCountries.includes(d.split('---')[0])
)}
setSelectedItem={setSelectedGroup}
/>
</div>
);
}, [selectedGroup]);

return (
<div className="relative py-60">
Expand All @@ -58,9 +59,11 @@ export const WeirdosSection = ({
factors, such as high levels of immigration, economic specialization,
or distinctive healthcare and social policies.
</p>

<p>
<br />
</p>

{tabBar}

<div className="h-96 w-full">
Expand Down

0 comments on commit 97c3ee9

Please sign in to comment.