Last active
February 21, 2017 22:52
-
-
Save popovichN/a11f4d4b9f83179df7a97fb1d483b6ce to your computer and use it in GitHub Desktop.
Line chart for Svelte Repl
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- basic line chart --> | |
| <div class='chart'> | |
| <h2>US birthrate by year</h2> | |
| <svg style='width: {{width}}px; height: {{height}}px;'> | |
| <g transform='translate(0,0)'> | |
| <g class='axes'> | |
| <!-- y axis --> | |
| <g class='axis y-axis' transform='translate(0, {{ padding.top }} )'> | |
| {{#each yTicks as tick}} | |
| <g class='tick tick-{{ tick }}' | |
| transform='translate( 0, {{ yScale(tick) - padding.bottom }} )'> | |
| <line stroke='#000' | |
| x2='100%' y1='0' y2='0'></line> | |
| <text fill='#000' x='0' y='0' dy='-2'>{{ tick !== 0 ? tick : ''}} {{tick === 20 ? ' per 1,000 population' : ''}}</text> | |
| </g> | |
| {{/each}} | |
| </g> | |
| <!-- x axis --> | |
| <g class='axis x-axis'> | |
| {{#each xTicks as tick}} | |
| <g class='tick tick-{{ tick }}' | |
| transform='translate( {{ xScale(tick) }}, {{ height }} )'> | |
| <line stroke='#000' | |
| y1='-{{height}}' y2='-{{padding.bottom}}' | |
| x1='0' x2='0'></line> | |
| <text fill='#000' x='0' y='0' dy='-2'>{{ tick }}</text> | |
| </g> | |
| {{/each}} | |
| </g> | |
| </g> | |
| <!-- line --> | |
| <path class='path-line' d='{{ path }}'></path> | |
| </g> | |
| </svg> | |
| </div> | |
| <style> | |
| .chart { | |
| width: 100%; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| svg { | |
| position: relative; | |
| } | |
| .tick, | |
| p.source { | |
| font-size: .725em; | |
| font-weight: 200; | |
| } | |
| .tick line { | |
| stroke: #e2e2e2; | |
| stroke-dasharray: 2; | |
| } | |
| .tick text { | |
| fill: #ccc; | |
| text-anchor: start; | |
| } | |
| .tick.tick-0 line { | |
| stroke-dasharray: 0; | |
| } | |
| .x-axis .tick text { | |
| text-anchor: middle; | |
| } | |
| .path-line { | |
| fill: none; | |
| stroke: #a11; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| stroke-width: 2; | |
| } | |
| </style> | |
| <script> | |
| import { scaleLinear } from 'd3-scale'; | |
| export default { | |
| data () { | |
| return { | |
| padding: { | |
| top: 20, | |
| right: 15, | |
| bottom: 20, | |
| left: 25 | |
| }, | |
| height: 150, | |
| width: 500, | |
| yTicks: [0, 5, 10, 15, 20 ], | |
| xTicks: [1990, 1995, 2000, 2005, 2010, 2015] | |
| }; | |
| }, | |
| computed: { | |
| yScale: function ( padding, height, yTicks ) { | |
| return scaleLinear() | |
| .domain([Math.min.apply(null, yTicks), Math.max.apply(null, yTicks)]) | |
| .range([height - padding.bottom, padding.top]); | |
| }, | |
| xScale: function ( padding, width, xTicks ) { | |
| return scaleLinear() | |
| .domain([Math.min.apply(null, xTicks), Math.max.apply(null, xTicks)]) | |
| .range([padding.left, width - padding.right]); | |
| }, | |
| path ( myData, xScale, yScale ) { | |
| var path = ''; | |
| // make path | |
| myData.forEach(function (datapoint, i) { | |
| var year = datapoint.year; | |
| if (i === 0) { | |
| path = 'M' + xScale(year) + ' ' + yScale(datapoint.birthrate) + ' '; | |
| } else { | |
| path += 'L ' + xScale(year) + ' ' + yScale(datapoint.birthrate) + ' '; | |
| } | |
| }) | |
| return path; | |
| } | |
| } | |
| }; | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "myData": [ | |
| { | |
| "year": 1990, | |
| "birthrate": 16.7 | |
| }, | |
| { | |
| "year": 1995, | |
| "birthrate": 14.6 | |
| }, | |
| { | |
| "year": 2000, | |
| "birthrate": 14.4 | |
| }, | |
| { | |
| "year": 2005, | |
| "birthrate": 14 | |
| }, | |
| { | |
| "year": 2010, | |
| "birthrate": 13 | |
| }, | |
| { | |
| "year": 2015, | |
| "birthrate": 12.4 | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment