REACT create rotating globe react - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

create a rotating globe using react


 416

Show ResultREACT


3

// base on https://frontendcharts.com/react-d3-rotating-globe/
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js"></script>
<style>
body
{
text-align: center;
}
#globe
{
width: 600px;
margin: 20px auto;
}
path
{
fill: #aaa;
stroke: #ddd;
stroke-width: 0.5;
}
</style>
</head>
<body>
<script type="text/babel">

class Globe extends React.Component {
constructor(props) {
super(props)

this.state = {
rotation: 0
}
}

render() {
let projection = d3.geoOrthographic()
.fitSize([this.props.size, this.props.size], this.props.geoJson)
.rotate([this.state.rotation])

let geoGenerator = d3.geoPath()
.projection(projection)

let pathString = geoGenerator(this.props.geoJson)

window.requestAnimationFrame(() => {
this.setState({
rotation: this.state.rotation + 0.4
})
})

return <svg width={this.props.size} height={this.props.size} >
<path d={pathString} />
</svg>
}
}

d3.json('https://codepen.io/frontendcharts/pen/JBprpp.js', (err, json) => {
let geoJson = topojson.feature(json, json.objects.ne_110m_admin_0_countries)

ReactDOM.render(
<Globe geoJson={geoJson} size={400} />,
document.getElementById('app')
)
})

</script>

<div id="globe">
<div id="app"></div>
</div>

</body>
</html>


By     Created   
The power of the user (%)
11%



The most helpful REACT solutions

How to get client ip address using react ?How to get client ip address using react ?REACT

Click to see more ...

  4.4K     419

how to get the type of a device using react ?how to get the type of a device using react ?REACT

Click to see more ...

  1.4K     203

country dropdown using reactcountry dropdown using reactREACT

Click to see more ...

  813     127

How to get latitude and longitude using react/javascript ?How to get latitude and longitude using react/javascript ?REACT

Click to see more ...

  603     104

get ip address reactget ip address reactREACT

Click to see more ...

  364     80

time ago reacttime ago reactREACT

Click to see more ...

  281     73

detect mobile device reactdetect mobile device reactREACT

Click to see more ...

  251     58

get client country reactget client country reactREACT

Click to see more ...

  247     53

how to detect a mobile device not tablet using react ?how to detect a mobile device not tablet using react ?REACT

Click to see more ...

  227     51

detect browser reactdetect browser reactREACT

Click to see more ...

  257     36