Last active
February 23, 2018 14:22
-
-
Save dmesquita/37d8efdb3d854db8469af4679b8f984a to your computer and use it in GitHub Desktop.
Reusable bubble chart
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
| function bubbleChart() { | |
| var width = 960, | |
| height = 960, | |
| maxRadius = 6, | |
| columnForColors = "category", | |
| columnForRadius = "views"; | |
| function chart(selection) { | |
| var data = selection.datum(); | |
| var div = selection, | |
| svg = div.selectAll('svg'); | |
| svg.attr('width', width).attr('height', height); | |
| var tooltip = selection | |
| .append("div") | |
| .style("position", "absolute") | |
| .style("visibility", "hidden") | |
| .style("color", "white") | |
| .style("padding", "8px") | |
| .style("background-color", "#626D71") | |
| .style("border-radius", "6px") | |
| .style("text-align", "center") | |
| .style("font-family", "monospace") | |
| .style("width", "400px") | |
| .text(""); | |
| var simulation = d3.forceSimulation(data) | |
| .force("charge", d3.forceManyBody().strength([-50])) | |
| .force("x", d3.forceX()) | |
| .force("y", d3.forceY()) | |
| .on("tick", ticked); | |
| function ticked(e) { | |
| node.attr("cx", function(d) { | |
| return d.x; | |
| }) | |
| .attr("cy", function(d) { | |
| return d.y; | |
| }); | |
| } | |
| var colorCircles = d3.scaleOrdinal(d3.schemeCategory10); | |
| var scaleRadius = d3.scaleLinear().domain([d3.min(data, function(d) { | |
| return +d[columnForRadius]; | |
| }), d3.max(data, function(d) { | |
| return +d[columnForRadius]; | |
| })]).range([5, 18]) | |
| var node = svg.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr('r', function(d) { | |
| return scaleRadius(d[columnForRadius]) | |
| }) | |
| .style("fill", function(d) { | |
| return colorCircles(d[columnForColors]) | |
| }) | |
| .attr('transform', 'translate(' + [width / 2, height / 2] + ')') | |
| .on("mouseover", function(d) { | |
| tooltip.html(d[columnForColors] + "<br>" + d.title + "<br>" + d[columnForRadius] + " hearts"); | |
| return tooltip.style("visibility", "visible"); | |
| }) | |
| .on("mousemove", function() { | |
| return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px"); | |
| }) | |
| .on("mouseout", function() { | |
| return tooltip.style("visibility", "hidden"); | |
| }); | |
| } | |
| chart.width = function(value) { | |
| if (!arguments.length) { | |
| return width; | |
| } | |
| width = value; | |
| return chart; | |
| }; | |
| chart.height = function(value) { | |
| if (!arguments.length) { | |
| return height; | |
| } | |
| height = value; | |
| return chart; | |
| }; | |
| chart.columnForColors = function(value) { | |
| if (!arguments.columnForColors) { | |
| return columnForColors; | |
| } | |
| columnForColors = value; | |
| return chart; | |
| }; | |
| chart.columnForRadius = function(value) { | |
| if (!arguments.columnForRadius) { | |
| return columnForRadius; | |
| } | |
| columnForRadius = value; | |
| return chart; | |
| }; | |
| return chart; | |
| } |
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> | |
| <div class="chart-example" id="chart"><svg></svg></div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script> | |
| <script src="bubble_chart.js"></script> | |
| <script> | |
| d3.csv('medium_january.csv', function(error, data) { | |
| if (error) { | |
| console.error('Error getting or parsing the data.'); | |
| throw error; | |
| } | |
| // selection.datum() returns the bound datum for the first element in the selection and | |
| // doesn't join the specified array of data with the selected elements | |
| var chart = bubbleChart().width(600).height(400); | |
| d3.select('#chart').datum(data).call(chart); | |
| }); | |
| </script> |
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
| title | category | views | |
|---|---|---|---|
| How Flexbox works — explained with big, colorful, animated gifs | Design | 5700 | |
| How I went from zero experience to landing a 6-figure San Francisco design job in less than 12 months | Design | 3700 | |
| I ranked every Intro to Data Science course on the internet, based on thousands of data points | Data Science | 1600 | |
| Nobody wants to use software | Development | 2700 | |
| A million requests per second with Python | Development | 1100 | |
| Material Design and the Mystery Meat Navigation Problem | Design | 1100 | |
| Lossless Web Navigation with Trails | Design | 688 | |
| How to use spaced repetition with Anki to learn to code faster | Development | 756 | |
| How to commit entire directories to GitHub directly from your browser using GitHub.js | Development | 82 | |
| Every time you build a to-do list app, a puppy dies | Development | 1500 | |
| How to build your own Uber-for-X application part 2 | Development | 650 | |
| How we got our 2-year-old repo trending on GitHub in just 48 hours | Data Science | 718 | |
| How making hundreds of hip hop beats helped me understand HTML and CSS | Development | 506 | |
| Scaling your Redux App with ducks | Development | 315 | |
| A Beginner’s JavaScript Study Plan | Development | 672 | |
| JavaScript’s Prototypal Inheritance Explained Using CSS | Development | 519 | |
| Tree-shaking ES6 Modules in webpack 2 | Development | 86 | |
| 3 JavaScript questions to watch out for during coding interviews | Development | 1100 | |
| Build a Node.js API in Under 30 Minutes | Development | 343 | |
| npm cache: the unsung hero | Development | 122 | |
| Code That Doesn't Exist Is The Code You Don't Need To Debug | Development | 204 | |
| A 5-minute Intro to Styled Components | Design | 760 | |
| How to land a top-notch tech internship — and a tech job — while you’re still in school | Development | 1600 | |
| Firebase: the great, the meh, and the ugly | Development | 407 | |
| Which programming languages got the most GitHub stars in 2016? | Data Science | 100 | |
| ElasticSearch with Django the easy way | Development | 115 | |
| Git Please: how to force push without being a jerk | Development | 66 | |
| React Interview Questions | Development | 389 | |
| React’s Five Fingers of Death. Master these five concepts, then master React | Development | 1700 | |
| How to set up ESLint in Atom so you can contribute to Open Source | Development | 94 | |
| If you want a developer job, be fearless and dream big | Development | 695 | |
| Understanding Flexbox: Everything you need to know | Design | 2200 | |
| How I designed an algorithm that mixes playlists of bands coming to your town | Design | 47 | |
| How making hundreds of hip hop beats helped me understand HTML and CSS | Design | 506 | |
| WebSlides: a new open source way to build beautiful presentations that run in your browser | Design | 747 | |
| What I’ve learned from 18 weeks of vlogging my coding journey | Design | 276 | |
| How I used machine learning to explore the differences between British and American literature | Data Science | 74 | |
| The Rise of the Data Engineer | Data Science | 862 | |
| How to bootstrap your analytics in 1 hour | Data Science | 90 | |
| Rolling Stone’s 500 Greatest Albums Visualized Using Pandas and Bokeh | Data Science | 48 | |
| Recognizing Traffic Lights With Deep Learning | Data Science | 1700 | |
| Women only said 27% of the words in 2016’s biggest movies | Data Science | 1000 | |
| What I learned from analyzing the top 252 Medium stories of 2016 | Data Science | 2200 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment