A simple two-layered circle chart, showing all the colours the Nike Air Max 270 has been released in. I coloupicked the colours off Nike's website so they won't be super accurate :)
Last active
October 23, 2019 22:59
-
-
Save sarah37/a7c10811cb9f59ca45acae8cdecc192b to your computer and use it in GitHub Desktop.
Circle Chart showing sneaker colours
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
| height: 960 | |
| redirect: https://observablehq.com/@sarah37/sneaker-colour-circle-chart |
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
| var w = 960; | |
| var h = w; | |
| var tau = 2 * Math.PI; | |
| var svg = d3.select("#svgDiv") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| g = svg.append("g").attr("transform", "translate(" + w/2 + "," + h/2 + ")"); | |
| // define outer arc | |
| var arcOuter = d3.arc() | |
| .innerRadius(.225 * w) | |
| .outerRadius(.4 * w) | |
| .padAngle(0.001*tau) | |
| // define inner arc | |
| var arcInner = d3.arc() | |
| .innerRadius(.17 * w) | |
| .outerRadius(.2225 * w) | |
| .padAngle(0.0015*tau) | |
| // define separate arc for labels on the outer arc | |
| var arcOuterLabels = d3.arc() | |
| .innerRadius(.245 * w) | |
| .outerRadius(.245 * w) | |
| // I prestructured and sorted (and collected) this data by hand, | |
| // it would make sense to automate this when reusing | |
| var inner = [ | |
| {hex:"#efe41c", name:"yellows", s:0, e:2}, | |
| {hex:"#b9121a", name:"reds", s:2, e:9}, | |
| {hex:"#0068bb", name:"blues", s:9, e:14}, | |
| {hex:"#a7a7a7", name:"neutrals", s:14, e:26} | |
| ] | |
| var outer = [ | |
| {hex:"#D8E30B", name:"volt"}, | |
| {hex:"#E9CF3A", name:"tour yellow"}, | |
| {hex:"#F76323", name:"total orange"}, // #FB8232 | |
| {hex:"#FA5852", name:"hot punch"}, // #F05882 | |
| {hex:"#B3242B", name:"speed red"}, | |
| {hex:"#EE2851", name:"solar red"}, // #F33A46? | |
| {hex:"#BC2772", name:"fuchsia blast"}, | |
| {hex:"#9C2364", name:"hyper magenta"}, | |
| {hex:"#744080", name:"hyper grape"}, | |
| {hex:"#ABC7CE", name:"ocean bliss"}, | |
| {hex:"#0086BB", name:"photo blue"}, | |
| {hex:"#2F3F87", name:"ultramarine"}, | |
| {hex:"#006B85", name:"neo turquoise"}, | |
| {hex:"#009A87", name:"clear emerald"}, | |
| {hex:"#565030", name:"medium olive"}, | |
| {hex:"#9A7F6E", name:"sepia stone"}, //? | |
| {hex:"#D9A89A", name:"coral stardust"}, | |
| {hex:"#BBAFAB", name:"desert sand"}, | |
| {hex:"#BEB0B4", name:"moon particle"}, | |
| {hex:"#E4E5E2", name:"barely grey"}, | |
| {hex:"#FFFFFF", name:"white"}, //? | |
| {hex:"#D1D9DE", name:"pure platinum"}, | |
| {hex:"#959FAB", name:"light pumice"}, | |
| {hex:"#48484A", name:"anthracite"}, | |
| {hex:"#151112", name:"oil grey"}, //? | |
| {hex:"#000000", name:"black"} //? | |
| // summit white? | |
| ] | |
| // add start and end angle to data | |
| var seg = tau / outer.length; | |
| outer.forEach(function(el, i, arr) { | |
| el.startAngle = i*seg; | |
| el.endAngle = (i+1)*seg | |
| }) | |
| // draw inner pie | |
| var pieInner = g.selectAll(".inner") | |
| .data(inner) | |
| .enter() | |
| .append("path") | |
| .classed("inner", true) | |
| .attr("id", function(d,i) { return "innerArc_"+i; }) | |
| .style("fill", function(d) {return d.hex}) | |
| .attr("d", function(d,i) {return arcInner({startAngle:d.s*seg, endAngle:d.e*seg})}); | |
| // draw outer pie | |
| var pieOuter = g.selectAll(".outer") | |
| .data(outer) | |
| .enter() | |
| pieOuter | |
| .append("path") | |
| .classed("outer", true) | |
| .style("fill", function(d) {return d.hex}) | |
| .attr("d", arcOuter); | |
| // add labels on the inner part | |
| g.selectAll(".innerLabel") | |
| .data(inner) | |
| .enter() | |
| .append("text") | |
| .attr("x", 10) | |
| .attr("dy", 25) | |
| .style("fill", "#fff") | |
| .attr("class", ".innerLabel") | |
| .append("textPath") | |
| .attr("xlink:href", function(d,i) {return "#innerArc_"+i;}) | |
| .attr("dominant-baseline", "central") | |
| .text(function(d){return d.name;}) | |
| .attr("font-size", (11/750)*w + "px"); | |
| // add labels on the outer part | |
| pieOuter | |
| .append("text") | |
| .attr("id", function(d) {return d.name}) | |
| .attr("transform", function(d) { return "translate(" + arcOuterLabels.centroid(d) + ") rotate(" + ((d.startAngle + d.endAngle) * 180 / tau - 90) + ")"; }) | |
| .attr("dominant-baseline", "central") | |
| .text(function(d) { return d.name;}) | |
| .attr("font-size", (11/750)*w + "px") | |
| .style("fill", "#fff") | |
| // pick the one white piece and colour the text grey | |
| d3.select("#white").style("fill", "#ccc") |
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Nike Air Max 270 Circle Chart</title> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> | |
| <script src="https://d3js.org/d3.v4.js"></script> | |
| </head> | |
| <body> | |
| <div id="svgDiv"></div> | |
| <script type="text/javascript" src="chart.js"></script> | |
| </body> | |
| </html> |
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
| body, html { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| background-color: #fff; | |
| font-family: "Raleway", sans-serif; | |
| text-transform: uppercase; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment