File:D3 Example Data-binding.svg
From Wikimedia Commons, the free media repository
Jump to navigation
Jump to search
Size of this PNG preview of this SVG file: 120 × 120 pixels. Other resolutions: 240 × 240 pixels | 480 × 480 pixels | 768 × 768 pixels | 1,024 × 1,024 pixels | 2,048 × 2,048 pixels.
Original file (SVG file, nominally 120 × 120 pixels, file size: 778 bytes)
File information
Structured data
Captions
Summary
[edit]DescriptionD3 Example Data-binding.svg |
中文(臺灣):用於w:zh:D3.js條目測試樣例的結果圖 |
Date | |
Source | Own work |
Author | A2569875 |
- 產生此圖的程式碼
// Data
var countriesData = [
{ name:"Ireland", income:53000, life: 78, pop:6378, color: "black"},
{ name:"Norway", income:73000, life: 87, pop:5084, color: "blue" },
{ name:"Tanzania", income:27000, life: 50, pop:3407, color: "grey" }
];
// Create SVG container
var svg = d3.select("#hook").append("svg")
.attr("width", 120)
.attr("height", 120)
.style("background-color", "#D0D0D0");
// Create SVG elements from data
svg.selectAll("circle") // create virtual circle template
.data(countriesData) // bind data
.enter() // for each row in data...
.append("circle") // bind circle & data row such that...
.attr("id", function(d) { return d.name }) // set the circle's id according to the country name
.attr("cx", function(d) { return d.income / 1000 }) // set the circle's horizontal position according to income
.attr("cy", function(d) { return d.life }) // set the circle's vertical position according to life expectancy
.attr("r", function(d) { return d.pop / 1000 *2 }) // set the circle's radius according to country's population
.attr("fill", function(d) { return d.color }); // set the circle's color according to country's color
- 原先輸出的SVG程式碼(無法直接被MediaWiki支援,因此有做修改)
<div id="hook">
<svg width="120" height="120" style="background-color: rgb(208, 208, 208);">
<circle id="Ireland" cx="53" cy="78" r="12.756" fill="black"></circle>
<circle id="Norway" cx="73" cy="87" r="10.168" fill="blue"></circle>
<circle id="Tanzania" cx="27" cy="50" r="6.814" fill="grey"></circle>
</svg>
</div>
Licensing
[edit]Public domainPublic domainfalsefalse |
This image of simple geometry is ineligible for copyright and therefore in the public domain, because it consists entirely of information that is common property and contains no original authorship. |
File history
Click on a date/time to view the file as it appeared at that time.
Date/Time | Thumbnail | Dimensions | User | Comment | |
---|---|---|---|---|---|
current | 19:46, 12 September 2018 | 120 × 120 (778 bytes) | A2569875 (talk | contribs) | User created page with UploadWizard |
You cannot overwrite this file.
File usage on Commons
The following page uses this file:
File usage on other wikis
The following other wikis use this file:
- Usage on zh.wikipedia.org
Metadata
This file contains additional information such as Exif metadata which may have been added by the digital camera, scanner, or software program used to create or digitize it. If the file has been modified from its original state, some details such as the timestamp may not fully reflect those of the original file. The timestamp is only as accurate as the clock in the camera, and it may be completely wrong.
Width | 120px |
---|---|
Height | 120px |
Structured data
Items portrayed in this file
depicts
12 September 2018
image/svg+xml
6694ad3e48c85ba802739388527d2bcb39d9b75b
778 byte
120 pixel
120 pixel
Hidden categories: