[D3] Load and Inspect Data with D3 v4

You probably use a framework or standalone library to load data into your apps, but what if that’s overkill for your needs? What if you’re just putting together a quick demo? This lesson demonstrates D3’s APIs for loading data on its own, as well as some helpful methods for inspecting your data and preparing it for use with D3.

function loadData() {
    d3.json(‘data/data.json‘, function(data) {
        var extent = d3.extent(data, function (d) {
            return d.age
        }); // get the value range
        console.log("#Extent", extent);

        var min = d3.min(data, function (d) {
            return d.age
        });
        console.log("#Min", min);

        var max = d3.max(data, function (d) {
            return d.age
        });
        console.log("#Max", max);

        var ages = d3.set(data, function(d) {
            return d.age
        }); // get unique value out of data
        console.log("#Ages", ages.values());

        var scale = d3.scaleLinear()
            .domain(extent)
            .range([0,100]);

        console.log(scale(23))
    })
}
时间: 2024-08-06 23:15:01

[D3] Load and Inspect Data with D3 v4的相关文章

[D3] Build a Line Chart with D3 v4

Line charts are often used to plot temporal data, like a stock price over time. In this lesson we’ll see how to use D3 APIs to create our own simplified version of the charts seen on Google Finance. var margin = { top: 10, right: 20, bottom: 65, left

【d3.js实践教程01】d3基本操作

学习d3.js(以下都简称d3)也有一段时间了,运行d3做了几个项目.我发现中文的d3教程很少,国外资料多但要求有一定的英文阅读能力(推荐网址:http://bl.ocks.org/mbostock),于是就萌发了写一个d3实际运用系列文章的想法,现在开始付之行动.在系列中,我会用d3+html5 canvas实现一些实际效果(如统计结果展示,地图数据展示等),希望可以跟大家共同学习交流. 代码我公布在git.cschina.com上,大家可以clone到本地运行,地址是:http://git.

[D3] Build a Scatter Plot with D3 v4

Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They’re extremely versatile thanks to their ability to display multiple dimensions of data simultaneously using x and y position, opacity, color, and even

前端编程提高之旅(八)----D3.js数据可视化data join解析

   D3.js作为一门轻型的可视化类库,非常便于将数据与web界面元素绑定,实现可视化.乐帝d3.js入门是大体看了一遍<d3js数据可视化实战>这本书,D3操作非常类似于jquery的使用,具体体现在两点: 选择器模块都采用CSS3标准 方法可以链式调用    有了jquery使用基础,相信再加上以上书籍的例子,调试很容易上手使用D3.js,乐帝目前认为D3.js与jquery区别在于:D3.js独有的数据结构概念及对SVG操作方便的实现.而深入理解D3原理,以上皮毛的理解就不够用了.  

d3学习之(Data Visualization with d3.js Cookbook )(第四章)-3

3.使用分类范围尺 在某些情况下,我们可能需要将我们的数据映射到一些分类的(顺序的)值,比如[a,b,c]或者[# 1f77b4, # ff7f0e, #2ca02c]等,如何用D3来处理这类映射呢,本节将回答这个问题. 老规矩还是先上代码,打开你的编辑器,输入如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ordinal Scale</

d3可视化实战02:理解d3数据驱动的真正含义

前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口再进行直接控制的js类库,如 Raphaël.但是正如我在第一篇文章中所说,d3作为一个中间型类库还能脱颖而出的重要原因,在于它突破了其他类库的那种直接控制表现层的机制,而采用了对于web图形处理领域较为新颖的数据驱动机制(2011),并获得了极大的成功. 数据驱动的历史 数据驱动编程并不是一个新鲜

[D3] Create DOM Elements with D3 v4

Change is good, but creating from scratch is even better. This lesson shows you how to create DOM elements from D3 and insert them into your document as needed. You’ll officially be on your way to creating data visualizations! d3.select('.title') .in

[D3] Basic Interactivity with D3 v4

Data visualizations are a lot more interesting when they’re interactive. Whether it’s clicks, roll overs, or drags, it makes things more compelling, and D3 is up to the task. This lesson demonstrates how to implement basic interactions and shows how

D3.js 入门学习(二) V4的改动

//d3.scan /* 新的d3.scan方法对数组进行线性扫描,并根据指定的比较函数返回至少一个元素的索引. 这个方法有点类似于d3.min和d3.max. 而d3.scan可以得到极值的索引而不仅仅是计算极值. */ var a1 = [1,3,5,2,9]; var i = d3.scan(a1,function(a,b){ return b-a; // 返回最大值的索引, a-b; 返回最小值的索引 }); console.log(i); //4; //d3.ticks d3.tick