十一月的雨/玫瑰与枪炮
November Rain/by Gun N Rose
when i look into your eyes当我凝望你的双眼,
i can see a love restrained我看到的是抑制着的情感。
but darlin' when i hold you但是,亲爱的,当我拥抱你的时候,
don't you know i feel the same你知道吗,我也感到同样那般。
'cause nothin' lasts forever因为没有什么可以永恒,
and we both know hearts can change我们都知道心会改变,
and it's hard to hold a candle就像在十一月凄冷的雨天,
in the cold november rain手持一支蜡烛那般艰难。
we've been through this such a long long time我们这样已经很长很长时间,
just tryin' to kill the pain只是努力想使内心的痛苦消减。
but lovers always come and lovers always go但是情人一个一个地更换,
an no one's really sure who's lettin' go today没有人肯定地知道
walking away是否今天是自己该走的一天。
if we could take the time to lay it on the line如果我们能够抓住时间,
i could rest my head那我就小憩一段,
just knowin' that you were mine因为知道你属于我,
all mine只属于我,我再念一遍。
so if you want to love me所以亲爱的,如果你想要爱我 ,
then darlin' don't refrain就不要压抑自己的情感。
or i'll just end up walkin'否则我会把我们散步的旅程,
in the cold november rain结束在这十一月寒雨的今天。
do you need some time...on your own你是否需要一些时间,属于自己的时间,
do you need some time...all alone你是否需要一些时间,一个人的时间。
everybody needs some time...on their own每个人都需要一些时间,属于自己的时间,
don't you know you need some time...all alone你是否知道你也需要时间,一个人的时间。
i know it's hard to keep an open heart在这朋友都可能会伤害你的今天,
when even friends seem out to harm you我知道打开心扉是多么艰难,
but if you could heal a broken heart但是你终会治愈那颗破碎的心,
wouldn't time be out to charm you最终战胜痛苦,因为时间。
sometimes i need some time...on my own有时候我也需要一些时间,属于自己的时间
sometimes i need some time...all alone有时候我也需要一些时间,一个人的时间,
everybody needs some time...on their own每个人都需要一些时间,属于自己的时间
don't you know you need some time...all alone你知道吗,你也需要属于自己的时间,一个人的时间。
and when your fears subside当你对爱的恐惧渐渐消失的时候,
and shadows still remain痛苦的阴影仍然闪现。
i know that you can love me我明白你一定爱我,
when there's no one left to blame到时候没有人能够去埋怨。
so never mind the darkness所以永远不要介意黑暗,
we still can find a way因为我们仍然会找到爱的路线。
'cause nothin' lasts forever因为没有什么会永远不变,
even cold november rain即使那十一月凄冷的雨天。
don't ya think that you need somebody是否,你觉得需要有一个人,
don't ya think that you need someone和你一起分担。
everybody needs somebody因为每个人都需要一个人,
you're not the only one你不孤单,
you're not the only one你不孤单。
梵总 发布的帖子
-
November Rain
-
RE: map with label
Shape file
https://www.baruch.cuny.edu/confluence/display/geoportal/ESRI+USA+DataShape to GeoJSON:
- Tutorial: https://www.statsilk.com/maps/convert-esri-shapefile-map-geojson-format
- Pay version: https://mygeodata.cloud/converter/shp-to-geojson
- Best free version: https://mapshaper.org/
Somehow it does not work well for zip3 shape, but it helps covert large GeoJSON to the smaller version
-
RE: map with label
Here is the zip level GeoJSON:
https://github.com/OpenDataDE/State-zip-code-GeoJSONHere is the state level GeoJSON:
https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json -
Best Quote
"I tell my kids...think of yourself like a captain, and you've got this little boat. And sometimes the weather's good, and you're just sailing and sometimes big storms hit and..you're in a stormy sea, but just ride it out, ride it out. Because it is good to be alive." Patti Smith
-
Object is not extensible error when creating new attribute for array of objects
const tableData = this.state.uploadedFiles.map((file) => { const url = file.url; const filename = file.filename; console.log(url); file.action = this.deleteButton(file); file.downloadUrl = ( <a href="#" onClick={(e) => this.handleDownload(e, url, filename)}> {url} </a> ); return file; });
Have to create a new object
const tableData = this.state.uploadedFiles.map((file) => { const newFile = Object.assign({}, file); const url = file.url; const filename = file.filename; console.log(url); newFile.action = this.deleteButton(file); newFile.downloadUrl = ( <a href="#" onClick={(e) => this.handleDownload(e, url, filename)}> {url} </a> ); return newFile; });
-
map with label
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous" ></script> <style type="text/css"> /* On mouse hover, lighten state color */ /* path:hover { fill-opacity: 0.7; } */ div.markets { fill-opacity: 0.8; } /* Style for Custom Tooltip */ div.tooltip { position: absolute; text-align: center; width: 60px; height: 28px; padding: 2px; font: 12px sans-serif; background: white; border: 0px; border-radius: 8px; pointer-events: none; } /* Legend Font Style */ body { font: 11px sans-serif; } /* Legend Position Style */ .legend { position: absolute; left: 800px; top: 350px; } </style> </head> <body> <button id="select-vq">VQ Markets</button> <button id="select-wtw">WTW Markets</button> <button id="select-aon">AON Markets</button> <button id="select-mercer">MERCER Markets</button> <button id="hide-markets">Hide Markets</button> <script type="text/javascript"> /* This visualization was made possible by modifying code provided by: Scott Murray, Choropleth example from "Interactive Data Visualization for the Web" https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html Malcolm Maclean, tooltips example tutorial http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html Mike Bostock, Pie Chart Legend http://bl.ocks.org/mbostock/3888852 */ "use strict"; //Width and height of map var width = 960; var height = 500; // D3 Projection var projection = d3 .geoAlbersUsa() // .albersUsa() .translate([width / 2, height / 2]) // translate to center of screen .scale([1000]); // scale things down so see entire US // Define path generator var path = d3 .geoPath() // path generator that will convert GeoJSON to SVG paths .projection(projection); // tell path generator to use albersUsa projection // Define linear scale for output var color = d3 .scaleLinear() .range([ "rgb(213,222,217)", "rgb(69,173,168)", "rgb(84,36,55)", "rgb(217,91,67)", ]); var legendText = [ "Cities Lived", "States Lived", "States Visited", "Nada", ]; //Create SVG element and append map to the SVG var svg = d3 .select("body") .append("svg") .attr("width", width) .attr("height", height); // Append Div for tooltip to SVG var div = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); var layer1 = svg.append("g"); var layer2 = svg.append("g"); var layer3 = svg.append("g"); // Load GeoJSON data and merge with states data var offsets = { VT: [0, 50], NH: [15, 35], MA: [20, 25], RI: [28, 20], CT: [35, 10], NJ: [34, 20], DE: [33, 30], MD: [47, 35], DC: [49, 21], }; d3.json("us-states-abbr.json", function (statejson) { layer1 .selectAll("path") .data(statejson.features) .enter() .append("path") .attr("d", path) .style("stroke", "#cc0000") .style("stroke-width", "1") .style("fill", "none"); var smalllStates = statejson.features.filter((item) => _.has(offsets, item.properties.abbr) ); smalllStates.forEach((item) => { var x = path.centroid(item)[0]; var y = path.centroid(item)[1]; var abbr = item.properties.abbr; var offset = offsets[abbr]; var annotations = [ { note: { label: abbr, }, x: x, y: y, dy: offset[0], dx: offset[1], }, ]; // Add annotation to the chart const makeAnnotations = d3.annotation().annotations(annotations); svg.append("g").call(makeAnnotations); }); var bigStates = statejson.features.filter( (item) => !_.has(offsets, item.properties.abbr) ); svg .append("g") .attr("class", "states-names") .selectAll("text") .data(bigStates) .enter() .append("svg:text") .text(function (d) { return d.properties.abbr; }) .attr("x", function (d) { console.log(path.centroid(d)); return path.centroid(d)[0]; }) .attr("y", function (d) { return path.centroid(d)[1]; }) .attr("text-anchor", "middle") .attr("fill", "black"); }); // const annotations = [ // { // note: { // label: "Here is the annotation label", // title: "Annotation title", // }, // x: 562, // y: 143, // dy: 200, // dx: 200, // }, // ]; // // Add annotation to the chart // const makeAnnotations = d3.annotation().annotations(annotations); // svg.append("g").call(makeAnnotations); var items = ["#cc0000", "#00cc00", "#0000cc"]; // d3.json("mercerMarkets.json", function (vqs) { // vqs.forEach(function (vq) { // var nlayer = svg.append("g").attr("class", "markets"); // // var color = items[Math.floor(Math.random() * items.length)]; // var color = vq.color; // var file = vq.file; // d3.json(file, function (json) { // var features = [json]; // nlayer // .selectAll("path") // .data(features) // .enter() // .append("path") // .attr("class", "markets") // .attr("d", path) // .style("stroke", "#ccc") // .style("stroke-width", "1") // .style("fill", color) // .style("opacity", "0.8"); // }); // }); // }); document .getElementById("select-vq") .addEventListener("click", function () { svg.selectAll(".markets").remove(); d3.json("vqMarkets.json", function (vqs) { vqs.forEach(function (vq) { var nlayer = svg.append("g").attr("class", "markets"); var color = vq.color; var file = vq.file; d3.json(file, function (json) { var features = [json]; nlayer .selectAll("path") .data(features) .enter() .append("path") .attr("d", path) .style("stroke", "#ccc") .style("stroke-width", "1") .style("fill", color); }); }); }); }); document .getElementById("hide-markets") .addEventListener("click", function () { svg.selectAll(".markets").remove(); }); document .getElementById("select-wtw") .addEventListener("click", function () { svg.selectAll(".markets").remove(); d3.json("wtwMarkets.json", function (vqs) { vqs.forEach(function (vq) { var nlayer = svg.append("g").attr("class", "markets"); var color = vq.color; var file = vq.file; d3.json(file, function (json) { var features = [json]; nlayer .selectAll("path") .data(features) .enter() .append("path") .attr("d", path) .style("stroke", "#ccc") .style("stroke-width", "1") .style("fill", color); }); }); }); }); document .getElementById("select-aon") .addEventListener("click", function () { svg.selectAll(".markets").remove(); d3.json("aonMarkets.json", function (vqs) { vqs.forEach(function (vq) { var nlayer = svg.append("g").attr("class", "markets"); var color = vq.color; var file = vq.file; d3.json(file, function (json) { var features = [json]; nlayer .selectAll("path") .data(features) .enter() .append("path") .attr("d", path) .style("stroke", "#ccc") .style("stroke-width", "1") .style("fill", color); }); }); }); }); document .getElementById("select-mercer") .addEventListener("click", function () { svg.selectAll(".markets").remove(); d3.json("mercerMarkets.json", function (vqs) { vqs.forEach(function (vq) { var nlayer = svg.append("g").attr("class", "markets"); var color = vq.color; var file = vq.file; d3.json(file, function (json) { var features = [json]; nlayer .selectAll("path") .data(features) .enter() .append("path") .attr("d", path) .style("stroke", "#ccc") .style("stroke-width", "1") .style("fill", color); }); }); }); }); </script> </body> </html>
-
What
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous" ></script> <style type="text/css"> /* On mouse hover, lighten state color */ /* path:hover { fill-opacity: 0.7; } */ div.markets { fill-opacity: 0.8; } /* Style for Custom Tooltip */ div.tooltip { position: absolute; text-align: center; width: 60px; height: 28px; padding: 2px; font: 12px sans-serif; background: white; border: 0px; border-radius: 8px; pointer-events: none; } /* Legend Font Style */ body { font: 11px sans-serif; } /* Legend Position Style */ .legend { position: absolute; left: 800px; top: 350px; } </style> </head> <body> <button id="select-vq">VQ Markets</button> <button id="select-wtw">WTW Markets</button> <button id="select-aon">AON Markets</button> <button id="select-mercer">MERCER Markets</button> <button id="hide-markets">Hide Markets</button> <script type="text/javascript"> /* This visualization was made possible by modifying code provided by: Scott Murray, Choropleth example from "Interactive Data Visualization for the Web" https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html Malcolm Maclean, tooltips example tutorial http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html Mike Bostock, Pie Chart Legend http://bl.ocks.org/mbostock/3888852 */ "use strict"; //Width and height of map var width = 960; var height = 500; // D3 Projection var projection = d3 .geoAlbersUsa() // .albersUsa() .translate([width / 2, height / 2]) // translate to center of screen .scale([1000]); // scale things down so see entire US // Define path generator var path = d3 .geoPath() // path generator that will convert GeoJSON to SVG paths .projection(projection); // tell path generator to use albersUsa projection // Define linear scale for output var color = d3 .scaleLinear() .range([ "rgb(213,222,217)", "rgb(69,173,168)", "rgb(84,36,55)", "rgb(217,91,67)", ]); var legendText = [ "Cities Lived", "States Lived", "States Visited", "Nada", ]; //Create SVG element and append map to the SVG var svg = d3 .select("body") .append("svg") .attr("width", width) .attr("height", height); // Append Div for tooltip to SVG var div = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); var layer1 = svg.append("g"); var layer2 = svg.append("g"); var layer3 = svg.append("g"); // Load GeoJSON data and merge with states data var offsets = { VT: [0, 50], NH: [15, 35], MA: [20, 25], RI: [28, 20], CT: [35, 10], NJ: [34, 20], DE: [33, 30], MD: [47, 35], DC: [49, 21], }; d3.json("us-states-abbr.json", function (statejson) { layer1 .selectAll("path") .data(statejson.features) .enter() .append("path") .attr("d", path) .style("stroke", "#cc0000") .style("stroke-width", "1") .style("fill", "none"); var smalllStates = statejson.features.filter((item) => _.has(offsets, item.properties.abbr) ); smalllStates.forEach((item) => { var x = path.centroid(item)[0]; var y = path.centroid(item)[1]; var abbr = item.properties.abbr; var offset = offsets[abbr]; var annotations = [ { note: { label: abbr, }, x: x, y: y, dy: offset[0], dx: offset[1], }, ]; // Add annotation to the chart const makeAnnotations = d3.annotation().annotations(annotations); svg.append("g").call(makeAnnotations); }); var bigStates = statejson.features.filter( (item) => !_.has(offsets, item.properties.abbr) ); svg .append("g") .attr("class", "states-names") .selectAll("text") .data(bigStates) .enter() .append("svg:text") .text(function (d) { return d.properties.abbr; }) .attr("x", function (d) { console.log(path.centroid(d)); return path.centroid(d)[0]; }) .attr("y", function (d) { return path.centroid(d)[1]; }) .attr("text-anchor", "middle") .attr("fill", "black"); }); // const annotations = [ // { // note: { // label: "Here is the annotation label", // title: "Annotation title", // }, // x: 562, // y: 143, // dy: 200, // dx: 200, // }, // ]; // // Add annotation to the chart // const makeAnnotations = d3.annotation().annotations(annotations); // svg.append("g").call(makeAnnotations); var items = ["#cc0000", "#00cc00", "#0000cc"]; // d3.json("mercerMarkets.json", function (vqs) { // vqs.forEach(function (vq) { // var nlayer = svg.append("g").attr("class", "markets"); // // var color = items[Math.floor(Math.random() * items.length)]; // var color = vq.color; // var file = vq.file; // d3.json(file, function (json) { // var features = [json]; // nlayer // .selectAll("path") // .data(features) // .enter() // .append("path") // .attr("class", "markets") // .attr("d", path) // .style("stroke", "#ccc") // .style("stroke-width", "1") // .style("fill", color) // .style("opacity", "0.8"); // }); // }); // }); document .getElementById("select-vq") .addEventListener("click", function () { svg.selectAll(".markets").remove(); d3.json("vqMarkets.json", function (vqs) { vqs.forEach(function (vq) { var nlayer = svg.append("g").attr("class", "markets"); var color = vq.color; var file = vq.file; d3.json(file, function (json) { var features = [json]; nlayer .selectAll("path") .data(features) .enter() .append("path") .attr("d", path) .style("stroke", "#ccc") .style("stroke-width", "1") .style("fill", color); }); }); }); }); document .getElementById("hide-markets") .addEventListener("click", function () { svg.selectAll(".markets").remove(); }); document .getElementById("select-wtw") .addEventListener("click", function () { svg.selectAll(".markets").remove(); d3.json("wtwMarkets.json", function (vqs) { vqs.forEach(function (vq) { var nlayer = svg.append("g").attr("class", "markets"); var color = vq.color; var file = vq.file; d3.json(file, function (json) { var features = [json]; nlayer .selectAll("path") .data(features) .enter() .append("path") .attr("d", path) .style("stroke", "#ccc") .style("stroke-width", "1") .style("fill", color); }); }); }); }); document .getElementById("select-aon") .addEventListener("click", function () { svg.selectAll(".markets").remove(); d3.json("aonMarkets.json", function (vqs) { vqs.forEach(function (vq) { var nlayer = svg.append("g").attr("class", "markets"); var color = vq.color; var file = vq.file; d3.json(file, function (json) { var features = [json]; nlayer .selectAll("path") .data(features) .enter() .append("path") .attr("d", path) .style("stroke", "#ccc") .style("stroke-width", "1") .style("fill", color); }); }); }); }); document .getElementById("select-mercer") .addEventListener("click", function () { svg.selectAll(".markets").remove(); d3.json("mercerMarkets.json", function (vqs) { vqs.forEach(function (vq) { var nlayer = svg.append("g").attr("class", "markets"); var color = vq.color; var file = vq.file; d3.json(file, function (json) { var features = [json]; nlayer .selectAll("path") .data(features) .enter() .append("path") .attr("d", path) .style("stroke", "#ccc") .style("stroke-width", "1") .style("fill", color); }); }); }); }); </script> </body> </html>
-
pushstate
componentDidMount() {
this.login();
window.history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.onBack);
//Ping the server every 31 minutes to see if the session is still alive
this.interval = setInterval(
() => this.sessionManager.ping(),
SESSION_TIMEOUT
);
}componentWillUnmount() {
clearInterval(this.interval);
}onBack() {
if (this.state.selectedNetwork) {
this.onSelectNetwork(null);
}
window.history.pushState(null, null, document.URL);
} -
RE: map3
Start from here for some basic example using D3:
http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922 -
RE: map3
This is amazing website for geoJSON topoJSON, shape and beyond:
https://mapshaper.org/ -
map3
var items = [ '#cc0000','#00cc00', '#0000cc' ]; for(var i=0; i < 100; i++ ) { let nlayer = svg.append('g'); let color = items[Math.floor(Math.random() * items.length)]; if (i<10){ j = "00" + i; } else { j = "0" + i; } console.log(j, color); d3.json("https://api.deniapps.com/zip3?zip3="+j, function(json) { const features = json.data; nlayer.selectAll("path") .data(features) .enter() .append("path") .attr("d", path) .style("stroke", "#ccc") .style("stroke-width", "1") .style("fill", color) }); }
-
How to reset origin/master to a commit
git checkout master git reset --hard e3f1e37 git push --force origin master # Then to prove it (it won't print any diff) git diff master..origin/master