Built with blockbuilder.org
Last active
August 25, 2019 19:45
-
-
Save jwilber/95aa05eaa3bdb4664a52a6f194a840a6 to your computer and use it in GitHub Desktop.
roughbar
This file contains 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
| license: mit |
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <script src="https://cdn.rawgit.com/pshihn/rough/master/dist/rough.js"></script> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css?family=Gaegu'); | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Create a div where the graph will take place --> | |
| <div id="vis"></div> | |
| <script> | |
| let color = 'chocolate'; | |
| let title = "Skate Tricks" | |
| const margin = { top: 40, right: 20, bottom: 50, left: 100 } | |
| const width = 920 - margin.left - margin.right; | |
| const height = 420 - margin.top - margin.bottom; | |
| let svg = d3.select('#vis') | |
| .append('svg') | |
| .attr('width', width + margin.left + margin.right) | |
| .attr('height', height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr('id', 'new') | |
| .attr("transform", | |
| "translate(" + margin.left + "," + margin.top + ")") | |
| const roughSvg = document.getElementById('new'); | |
| const rc = rough.svg(roughSvg, { | |
| options: { | |
| fill: color, | |
| stroke: color, | |
| strokeWidth: 1, | |
| roughness: 1.4, | |
| bowing: 1, | |
| fillStyle: 'cross-hatch' | |
| } | |
| }); | |
| const x = d3.scaleLinear() | |
| .rangeRound([0, width]); | |
| const y = d3.scaleBand() | |
| .rangeRound([0, height]) | |
| .padding(0.1); | |
| d3.csv("skate.csv", function (d) { | |
| console.log(d) | |
| d.count = +d.count; | |
| return d; | |
| }, function (error, data) { | |
| if (error) throw error; | |
| y.domain(data.map(function (d) { return d.trick; })); | |
| x.domain([0, d3.max(data, function (d) { return d.count; })]); | |
| data.forEach(function (d) { | |
| let node = rc.rectangle(0, y(d.trick), x(d.count), y.bandwidth()); | |
| bar = roughSvg.appendChild(node); | |
| bar.setAttribute('class', 'bar'); | |
| bar.setAttribute('count', d.count) | |
| }); | |
| // x-axis | |
| svg.append("g") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x)) | |
| .selectAll("text") | |
| .attr("transform", "translate(-10,0)rotate(-45)") | |
| .style("text-anchor", "end") | |
| .style('font-family', 'Gaegu') | |
| // .style('font-weight', 'bold') | |
| .style('font-size', '1rem'); | |
| // y-axis | |
| svg.append("g") | |
| .call(d3.axisLeft(y)) | |
| .selectAll('text') | |
| .style('font-family', 'Gaegu') | |
| .style('font-size', '1rem'); | |
| // title | |
| svg.append("text") | |
| .attr("x", (width / 2)) | |
| .attr("y", 0 - (margin.top / 2)) | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "2rem") | |
| .style('font-family', 'Gaegu') | |
| // .style('font-weight', 'bold') | |
| .text(title); | |
| // create a tooltip | |
| let Tooltip = d3.select("#vis") | |
| .append("div") | |
| .style("opacity", 0) | |
| .attr("class", "tooltip") | |
| .style("background-color", "white") | |
| .style("border", "solid") | |
| .style("border-width", "1px") | |
| .style("border-radius", "5px") | |
| .style("padding", "10px") | |
| .style('max-width', '100px ') | |
| .style('font-family', 'Gaegu') | |
| // Three function that change the tooltip when user hover / move / leave a cell | |
| let mouseover = function(d) { | |
| console.log('mouseover') | |
| Tooltip | |
| .style("opacity", 1) | |
| } | |
| let mousemove = function(d) { | |
| let count = d3.select(this).attr('count'); | |
| Tooltip | |
| .html(`The exact value of<br>this cell is: ${count}`) | |
| .style('transform', `translate(${d3.event.layerX }px, | |
| ${d3.event.layerY - (height + margin.top + margin.bottom)}px)`) | |
| } | |
| let mouseleave = function(d) { | |
| Tooltip | |
| // .transition() | |
| // .duration(1000) | |
| .style("opacity", 0) | |
| } | |
| d3.selectAll('.bar') | |
| .on('mouseover', function() { | |
| mouseover() | |
| d3.select(this).selectAll('path').style('stroke', 'red') | |
| }) | |
| d3.selectAll('g.bar') | |
| .on('mouseout', function() { | |
| mouseleave() | |
| d3.select(this).selectAll('path').style('stroke', color) | |
| }) | |
| d3.selectAll('g.bar') | |
| .on('mousemove', mousemove) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains 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
| trick | count | |
|---|---|---|
| kickflip | 50 | |
| ollie | 48 | |
| boardslide | 48 | |
| heelflip | 45 | |
| hardflip | 40 | |
| switch flip | 35 | |
| backside flip | 30 | |
| 360 flip | 50 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment