The basic approach
Our visualizations are going to use SVG - an XML-based image format that lets us describe images in terms of mathematical shapes. For example, the source code of an 800x600 SVG image with a rectangle looks like this:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<svg width="800" height="600">
<rect width="100" height="200" x="50" y="20" />
</svg>
);
}
}
export default App;These four lines create an SVG image with a black rectangle at coordinates (50, 20) that is 100x200 pixels large. Black fill with no borders is default for all SVG shapes.
SVG is perfect for data visualization on the web because it works in all browsers, renders without blurring or artifacts on all screens, and supports animation and user interaction. You can see examples of interaction and animation later in this book.
But SVG can get slow when you have many thousands ...
Create a free account to view this lesson.
By signing up, you agree to Educative's Terms of Service and Privacy Policy