-
-
Notifications
You must be signed in to change notification settings - Fork 85
/
d3.scroll
73 lines (67 loc) · 3.16 KB
/
d3.scroll
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import ../code/conceptPage.scroll
id d3
name D3.js
appeared 2010
creators Mike Bostock
tags library
website https://d3js.org/
latestVersion 7.9.0
isOpenSource true
writtenIn markdown javascript json typescript yaml csv bourne-shell css svg
relatedConcepts observable-lang
fileType text
centralPackageRepositoryCount 0
repoStats
firstCommit 2010
newestCommit 2024
commits 4814
committers 148
files 173
country United States
originCommunity https://github.com/d3
twitter https://twitter.com/d3js_org
githubRepo https://github.com/d3/d3
firstCommit 2010
stars 101774
forks 23126
subscribers 3814
created 2010
updated 2022
description Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
issues 3
wikipedia https://en.wikipedia.org/wiki/D3.js
example
// 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
related javascript svg css actionscript html json csv geojson jquery
summary D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards. It is the successor to the earlier Protovis framework. In contrast to many other libraries, D3.js allows great control over the final visual result. Its development was noted in 2011, as version 2.0.0 was released in August 2011.D3.js is used on hundreds of thousands of websites. Some popular uses include creating interactive graphics for online news websites, information dashboards for viewing data, and producing maps from GIS map making data. In addition, the exportable nature of SVG enables graphics created by D3 to be used in print publications.
pageId 36177168
created 2012
backlinksCount 92
revisionCount 351
dailyPageViews 275
appeared 2011
domainName d3js.org
registered 2011
awisRank
2022 77077
2017 54728