Skip to content

Commit

Permalink
Change graphic on line chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@MKorostoff
MKorostoff committed Dec 2, 2021
1 parent 1d46ce3 commit 919c9b5
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 42 deletions.
56 changes: 41 additions & 15 deletions img/scale.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 20 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ <h2 class="wealth-title">$185 billion (wealth of Jeff Bezos)</h2>
<div id="line-chart" class="infobox infobox-quarter line-chart">
<div class="chart-outer">
<div class="chart-inner">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="150 276 696 152" width="100%" height="100%">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" version="1.1" viewBox="150 276 604 133" width="604" height="133">
<defs>
<font-face font-family="Arial" font-size="16" panose-1="2 11 6 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="73.24219" slope="0" x-height="518.5547" cap-height="716.3086" ascent="905.2734" descent="-211.91406" font-weight="400">
<font-face-src>
Expand All @@ -198,46 +198,43 @@ <h2 class="wealth-title">$185 billion (wealth of Jeff Bezos)</h2>
<font-face-name name="ArialMT"/>
</font-face-src>
</font-face>
<font-face font-family="Arial" font-size="16" panose-1="2 11 6 4 2 2 2 9 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="73.24219" slope="-750" x-height="518.5547" cap-height="715.8203" ascent="905.2734" descent="-211.91406" font-style="italic" font-weight="400">
<font-face-src>
<font-face-name name="Arial-ItalicMT"/>
</font-face-src>
</font-face>
<marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" stroke-linejoin="miter" stroke-miterlimit="10" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black">
<g>
<path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/>
</g>
</marker>
</defs>
<metadata>
<dc:date></dc:date>
</metadata>
<g id="Canvas_1" stroke-opacity="1" fill="none" fill-opacity="1" stroke-dasharray="none" stroke="none">
<metadata> Produced by OmniGraffle 7.19.2\n2021-12-02 15:16:55 +0000</metadata>
<g id="Canvas_1" stroke-dasharray="none" fill="none" fill-opacity="1" stroke="none" stroke-opacity="1">
<title>Canvas 1</title>
<g id="Canvas_1: Layer 1">
<g id="Canvas_1_Layer_1">
<title>Layer 1</title>
<g id="Graphic_3">
<text class="desktop-zuck" transform="translate(715.2031 353.7383)" fill="black">
<tspan font-family="Arial" font-size="16" font-weight="400" fill="black" x="2.2226562" y="14">Mark Zuckerberg </tspan>
<tspan class="zuck-wealth" font-family="Arial" font-size="12" font-weight="400" fill="black" x="26.663086" y="28.523438">($108 billion)</tspan>
</text>
<text class="mobile-zuck" transform="translate(668 353.7383)" fill="black">
<tspan class="zuck-name" font-family="Arial" font-size="16" font-weight="400" fill="black" x="55.36719" y="14">Mark </tspan>
<tspan class="zuck-name" font-family="Arial" font-size="16" font-weight="400" fill="black" x="12" y="41.523438">Zuckerberg </tspan>
<tspan class="zuck-wealth" font-family="Arial" font-size="12" font-weight="400" fill="black" x="21.880859" y="67.046875">($108 billion)</tspan>
<text transform="translate(668 353.7383)" fill="black">
<tspan font-family="Arial" font-size="16" font-weight="400" fill="black" x="45.36719" y="14">Mark </tspan>
<tspan font-family="Arial" font-size="16" font-weight="400" fill="black" x="0" y="31.523438">Zuckerberg </tspan>
<tspan font-family="Arial" font-size="12" font-weight="400" fill="black" x="13.105469" y="46.046875">($116 billion)</tspan>
</text>
</g>
<g id="Graphic_5">
<text class="zero-outer" transform="translate(173 353.7383)" fill="black">
<tspan class="zero" font-family="Arial" font-size="16" font-weight="400" fill="black" x="0" y="14">$0</tspan>
<text transform="translate(173 353.7383)" fill="black">
<tspan font-family="Arial" font-size="16" font-weight="400" fill="black" x="0" y="14">$0</tspan>
</text>
</g>
<g id="Graphic_9">
<text transform="translate(155 281.5)" fill="black">
<tspan class="two-hundred-million" font-family="Arial" font-size="16" font-weight="400" fill="black" x="0" y="14">$200 million</tspan>
<tspan font-family="Arial" font-size="16" font-weight="400" fill="black" x="0" y="14">$200 million</tspan>
</text>
</g>
<g id="Line_10">
<line x1="197.73068" y1="304.02344" x2="197.8919" y2="360.51144" stroke="black" stroke-linecap="square" stroke-linejoin="round" stroke-width=".25"/>
<line x1="197.54418" y1="304.02344" x2="197.09944" y2="345.59456" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="square" stroke-linejoin="round" stroke-width="1"/>
</g>
<g id="Line_2">
<line x1="203" y1="362" x2="703" y2="362" stroke="black" stroke-linecap="square" stroke-linejoin="round" stroke-width="13"/>
</g>
<g id="Graphic_11">
<rect x="196.49399" y="355.494" width=".86" height="13" fill="#68bc36"/>
</g>
</g>
</g>
</svg>
Expand Down
13 changes: 9 additions & 4 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,9 @@ h1 {
height: 289.8px;
background-color: #9daebf;
}
.line-chart svg {
max-width: 100%;
}
.line-chart .chart-outer {
width: 720px;
max-width: 100vw;
Expand All @@ -458,9 +461,10 @@ h1 {
}
.zoom.line-chart svg {
transition: all 1.5s;
width: 940%;
width: 700%;
max-width: 700%;
height: auto;
margin-top: -102%;
margin-top: -84%;
margin-left: -20%;
}
@media (max-width: 450px) {
Expand All @@ -480,8 +484,9 @@ h1 {
}
.zoom.line-chart svg {
width: 1200%;
margin-top: -120%;
margin-left: -16%;
max-width: 1200%;
margin-top: -140%;
margin-left: -36%;
}
}
@media (min-width: 451px) {
Expand Down

0 comments on commit 919c9b5

Please sign in to comment.