Skip to content

Instantly share code, notes, and snippets.

@da1fujimoto

da1fujimoto/.block

Last active January 7, 2020 00:48
Show Gist options
  • Save da1fujimoto/2ba67108ff8bda3641602c5a8a7f98db to your computer and use it in GitHub Desktop.
Save da1fujimoto/2ba67108ff8bda3641602c5a8a7f98db to your computer and use it in GitHub Desktop.
Download ZIP
energy heatmap
Raw
.block
license: mit
Raw
data.json
[{"x":1.428,"y":0.5,"energy":0.458},{"x":1.428,"y":1.191,"energy":0.616},{"x":1.428,"y":1.882,"energy":0.795},{"x":1.428,"y":2.573,"energy":0.642},{"x":1.428,"y":3.264,"energy":0.536},{"x":1.428,"y":3.955,"energy":0.498},{"x":1.428,"y":4.646,"energy":0.494},{"x":1.428,"y":5.337,"energy":0.517},{"x":2.119,"y":0.5,"energy":0.274},{"x":2.119,"y":1.191,"energy":0.522},{"x":2.119,"y":1.882,"energy":0.511},{"x":2.119,"y":2.573,"energy":0.488},{"x":2.119,"y":3.264,"energy":0.473},{"x":2.119,"y":3.955,"energy":0.468},{"x":2.119,"y":4.646,"energy":0.472},{"x":2.119,"y":5.337,"energy":0.487},{"x":2.81,"y":0.5,"energy":0.333},{"x":2.81,"y":1.191,"energy":0.326},{"x":2.81,"y":1.882,"energy":0.183},{"x":2.81,"y":2.573,"energy":0.308},{"x":2.81,"y":3.264,"energy":0.4},{"x":2.81,"y":3.955,"energy":0.43},{"x":2.81,"y":4.646,"energy":0.437},{"x":2.81,"y":5.337,"energy":0.434},{"x":3.501,"y":0.5,"energy":0.338},{"x":3.501,"y":1.191,"energy":0.298},{"x":3.501,"y":1.882,"energy":0.249},{"x":3.501,"y":2.573,"energy":0.304},{"x":3.501,"y":3.264,"energy":0.376},{"x":3.501,"y":3.955,"energy":0.407},{"x":3.501,"y":4.646,"energy":0.405},{"x":3.501,"y":5.337,"energy":0.376},{"x":4.192,"y":0.5,"energy":0.325},{"x":4.192,"y":1.191,"energy":0.307},{"x":4.192,"y":1.882,"energy":0.338},{"x":4.192,"y":2.573,"energy":0.359},{"x":4.192,"y":3.264,"energy":0.387},{"x":4.192,"y":3.955,"energy":0.402},{"x":4.192,"y":4.646,"energy":0.391},{"x":4.192,"y":5.337,"energy":0.344},{"x":4.883,"y":0.5,"energy":0.271},{"x":4.883,"y":1.191,"energy":0.244},{"x":4.883,"y":1.882,"energy":0.316},{"x":4.883,"y":2.573,"energy":0.371},{"x":4.883,"y":3.264,"energy":0.398},{"x":4.883,"y":3.955,"energy":0.408},{"x":4.883,"y":4.646,"energy":0.401},{"x":4.883,"y":5.337,"energy":0.375},{"x":5.574,"y":0.5,"energy":0.212},{"x":5.574,"y":1.191,"energy":0.104},{"x":5.574,"y":1.882,"energy":0.287},{"x":5.574,"y":2.573,"energy":0.371},{"x":5.574,"y":3.264,"energy":0.406},{"x":5.574,"y":3.955,"energy":0.419},{"x":5.574,"y":4.646,"energy":0.418},{"x":5.574,"y":5.337,"energy":0.41},{"x":6.265,"y":0.5,"energy":0.346},{"x":6.265,"y":1.191,"energy":0.294},{"x":6.265,"y":1.882,"energy":0.349},{"x":6.265,"y":2.573,"energy":0.396},{"x":6.265,"y":3.264,"energy":0.42},{"x":6.265,"y":3.955,"energy":0.43},{"x":6.265,"y":4.646,"energy":0.432},{"x":6.265,"y":5.337,"energy":0.431},{"x":6.956,"y":0.5,"energy":0.557},{"x":6.956,"y":1.191,"energy":0.497},{"x":6.956,"y":1.882,"energy":0.446},{"x":6.956,"y":2.573,"energy":0.433},{"x":6.956,"y":3.264,"energy":0.435},{"x":6.956,"y":3.955,"energy":0.439},{"x":6.956,"y":4.646,"energy":0.442},{"x":6.956,"y":5.337,"energy":0.443},{"x":7.647,"y":0.5,"energy":0.84},{"x":7.647,"y":1.191,"energy":0.669},{"x":7.647,"y":1.882,"energy":0.508},{"x":7.647,"y":2.573,"energy":0.455},{"x":7.647,"y":3.264,"energy":0.444},{"x":7.647,"y":3.955,"energy":0.443},{"x":7.647,"y":4.646,"energy":0.446},{"x":7.647,"y":5.337,"energy":0.448},{"x":8.338,"y":0.5,"energy":0.937},{"x":8.338,"y":1.191,"energy":0.705},{"x":8.338,"y":1.882,"energy":0.524},{"x":8.338,"y":2.573,"energy":0.453},{"x":8.338,"y":3.264,"energy":0.439},{"x":8.338,"y":3.955,"energy":0.441},{"x":8.338,"y":4.646,"energy":0.446},{"x":8.338,"y":5.337,"energy":0.45},{"x":9.029,"y":0.5,"energy":0.659},{"x":9.029,"y":1.191,"energy":0.565},{"x":9.029,"y":1.882,"energy":0.45},{"x":9.029,"y":2.573,"energy":0.409},{"x":9.029,"y":3.264,"energy":0.416},{"x":9.029,"y":3.955,"energy":0.432},{"x":9.029,"y":4.646,"energy":0.443},{"x":9.029,"y":5.337,"energy":0.45},{"x":9.72,"y":0.5,"energy":0.512},{"x":9.72,"y":1.191,"energy":0.425},{"x":9.72,"y":1.882,"energy":0.301},{"x":9.72,"y":2.573,"energy":0.325},{"x":9.72,"y":3.264,"energy":0.387},{"x":9.72,"y":3.955,"energy":0.422},{"x":9.72,"y":4.646,"energy":0.44},{"x":9.72,"y":5.337,"energy":0.45},{"x":10.411,"y":0.5,"energy":0.447},{"x":10.411,"y":1.191,"energy":0.366},{"x":10.411,"y":1.882,"energy":0.24},{"x":10.411,"y":2.573,"energy":0.299},{"x":10.411,"y":3.264,"energy":0.378},{"x":10.411,"y":3.955,"energy":0.42},{"x":10.411,"y":4.646,"energy":0.44},{"x":10.411,"y":5.337,"energy":0.45},{"x":11.102,"y":0.5,"energy":0.435},{"x":11.102,"y":1.191,"energy":0.389},{"x":11.102,"y":1.882,"energy":0.347},{"x":11.102,"y":2.573,"energy":0.36},{"x":11.102,"y":3.264,"energy":0.4},{"x":11.102,"y":3.955,"energy":0.428},{"x":11.102,"y":4.646,"energy":0.444},{"x":11.102,"y":5.337,"energy":0.452},{"x":11.793,"y":0.5,"energy":0.446},{"x":11.793,"y":1.191,"energy":0.424},{"x":11.793,"y":1.882,"energy":0.4},{"x":11.793,"y":2.573,"energy":0.409},{"x":11.793,"y":3.264,"energy":0.43},{"x":11.793,"y":3.955,"energy":0.444},{"x":11.793,"y":4.646,"energy":0.452},{"x":11.793,"y":5.337,"energy":0.456},{"x":12.484,"y":0.5,"energy":0.468},{"x":12.484,"y":1.191,"energy":0.466},{"x":12.484,"y":1.882,"energy":0.454},{"x":12.484,"y":2.573,"energy":0.46},{"x":12.484,"y":3.264,"energy":0.464},{"x":12.484,"y":3.955,"energy":0.462},{"x":12.484,"y":4.646,"energy":0.461},{"x":12.484,"y":5.337,"energy":0.46},{"x":13.175,"y":0.5,"energy":0.496},{"x":13.175,"y":1.191,"energy":0.524},{"x":13.175,"y":1.882,"energy":0.548},{"x":13.175,"y":2.573,"energy":0.533},{"x":13.175,"y":3.264,"energy":0.502},{"x":13.175,"y":3.955,"energy":0.481},{"x":13.175,"y":4.646,"energy":0.47},{"x":13.175,"y":5.337,"energy":0.465},{"x":13.866,"y":0.5,"energy":0.517},{"x":13.866,"y":1.191,"energy":0.578},{"x":13.866,"y":1.882,"energy":0.682},{"x":13.866,"y":2.573,"energy":0.61},{"x":13.866,"y":3.264,"energy":0.532},{"x":13.866,"y":3.955,"energy":0.494},{"x":13.866,"y":4.646,"energy":0.476},{"x":13.866,"y":5.337,"energy":0.467}]
Raw
index.html
<!--
Adapted from Eduard Trott at bl.ocks.org
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099
-->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>9.6 - Sunburst plots</title>
<!-- Custom CSS -->
</head>
<body>
<nav class="navbar navbar-default"></nav>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="main.js"></script>
</body>
Raw
main.js
const width = 400;
const height = 300;
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g');
d3.json('data.json').then(data => {
const filter = svg.append('defs')
.append('filter')
.attr('id', 'blur');
filter.append('feGaussianBlur')
.attr('stdDeviation', 8);
const scale_x = d3.scaleLinear()
.domain(d3.extent(data, d => d.x))
.range([0, width])
.nice(); // domainをキリ良く丸める
const scale_y = d3.scaleLinear()
.domain(d3.extent(data, d => d.y))
.range([height, 0])
.nice();
const color = d3.scaleLinear()
.domain(d3.extent(data, d => d.energy))
.range([d3.hsl(0, 1, 0.5), d3.hsl(160, 1, 0.5)])
.interpolate(d3.interpolateHsl)
.nice();
const filling_w = width / 19;
const filling_h = height / 8;
svg.selectAll('rect')
.data(data)
.enter().append('circle')
.attr('cx', d => scale_x(d.x) - filling_w / 2)
.attr('cy', d => scale_y(d.y) - filling_h / 2)
.attr('r', 50)
.style('fill', d => color(d.energy))
.style('fill-opacity', 0.5)
.attr('filter', 'url(#blur)')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment