markdown freeCodeCamp:使用条形图可视化数据
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown freeCodeCamp:使用条形图可视化数据相关的知识,希望对你有一定的参考价值。
body {
background-color: #ddd;
background-repeat: repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAACgCAMAAACsXRuGAAAADFBMVEWIiIjd3d3y8vLm5uZzdc63AAAAbklEQVR42u3ZIQ4AIAwDwI39/8/wAlTFxFUgm5ALmFZV51Iv52Vyx/7CzhdONr3/ylCgQIECBQoUKFCgQIECBQoUKFCgQIECBcrmccGe4qX4vqBAgQIFChQoUKBAgQIFChQoUKBAgQIFij3lX3gBXBBzc8FaGvIAAAAASUVORK5CYII=)
}
.chart {
margin: 0px auto;
padding: 0px;
background-color: white;
}
.notes {
font-size: 12px;
font-family: sans-serif;
color: steelblue;
padding: 20px;
text-align: center;
}
.title {
font-size: 2.5em;
font-family: sans-serif;
color: steelblue;
text-align: center;
padding: 15px 0px 5px 0px;
}
p {
margin: 0;
}
.chart .mouseover {
fill: lightsteelblue;
}
.chart rect,
.chart .mouseoff {
fill: steelblue;
}
.chart text {
fill: black;
font: 10px sans-serif;
text-anchor: end;
}
.axis text {
font: 15px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.card {
background-color: white;
margin: 40px auto;
padding: 0px;
width: 1050px;
height: 640px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.32), 0 3px 12px 0 rgba(0, 0, 0, 0.24);
}
.tooltip {
position: absolute;
text-align: left;
width: auto;
height: auto;
padding: 3px 5px 3px 5px;
font: 1em sans-serif;
border: 0px;
border-radius: 5px;
pointer-events: none;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
background-color: lightsteelblue;
}
.amount {
font-size: 1em;
font-weight: bold;
}
.year {
font-size: 0.8em;
font-weight: normal;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
$('document').ready(function() {
var url = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var formatCurrency = d3.format("$,.2f");
$.getJSON(url).success(function(jsonData) {
var data = jsonData.data;
console.log(data);
console.log(JSON.stringify(jsonData));
d3.select(".notes")
.append("text")
.text(jsonData.description);
var margin = {
top: 5,
right: 10,
bottom: 30,
left: 75
},
width = 1000 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var barWidth = Math.ceil(width / data.length);
minDate = new Date(data[0][0]);
maxDate = new Date(data[274][0]);
var x = d3.time.scale()
.domain([minDate, maxDate])
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0])
.domain([0, d3.max(data, function(d) {
return d[1];
})]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.years, 5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "");
var infobox = d3.select(".infobox");
var div = d3.select(".card").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var chart = d3.select(".chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.8em")
.style("text-anchor", "end")
.text("Gross Domestic Product, USA");
chart.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(new Date(d[0]));
})
.attr("y", function(d) {
return y(d[1]);
})
.attr("height", function(d) {
return height - y(d[1]);
})
.attr("width", barWidth)
.on("mouseover", function(d) {
var rect = d3.select(this);
rect.attr("class", "mouseover");
var currentDateTime = new Date(d[0]);
var year = currentDateTime.getFullYear();
var month = currentDateTime.getMonth();
var dollars = d[1];
div.transition()
.duration(200)
.style("opacity", 0.9);
div.html("<span class='amount'>" + formatCurrency(dollars) + " Billion </span><br><span class='year'>" + year + ' - ' + months[month] + "</span>")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 50) + "px");
})
.on("mouseout", function() {
var rect = d3.select(this);
rect.attr("class", "mouseoff");
div.transition()
.duration(500)
.style("opacity", 0);
});
});
});
<html lang="en">
<head>
<meta charset="utf-8">
<head>
<title>D3-Zipline: GDP Bar Graph</title>
</head>
<body>
<div class="card">
<div class="title">Gross Domestic Product</div>
<svg class="chart"></svg>
<div class="notes"></div>
</div>
</body>
</html>
freeCodeCamp : Visualize Data with a Bar Chart
----------------------------------------------
Bar Chart:
http://bost.ocks.org/mike/bar/3/
Data:
//https://www.quandl.com/help/api
Mouseover effects:
https://gist.github.com/sfrdmn
Forked from [Suzanne Atkinson](http://codepen.io/AdventureBear/)'s Pen [D3 GDP Visualization w/ Mouseovers](http://codepen.io/AdventureBear/pen/XbmNjG/).
Forked from [Bruce Young](http://codepen.io/MutantSpore/)'s Pen [D3 GDP Visualization w/ Mouseovers](http://codepen.io/MutantSpore/pen/pgyrwB/).
Forked from [Free Code Camp](http://codepen.io/FreeCodeCamp/)'s Pen [D3 GDP Visualization w/ Mouseovers](http://codepen.io/FreeCodeCamp/pen/adBBWd/).
A [Pen](https://codepen.io/harunpehlivan/pen/ddxWWe) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).
[License](https://codepen.io/harunpehlivan/pen/ddxWWe/license).
以上是关于markdown freeCodeCamp:使用条形图可视化数据的主要内容,如果未能解决你的问题,请参考以下文章
markdown freeCodeCamp:构建维基百科查看器