Categories
Mastering Development

Angular D3 not displaying line chart

Hi I’m trying to create line chart from here https://bl.ocks.org/d3noob/3c040800ff6457717cca586ae9547dbf and have changed the data in json format and applied the code in my angular project. But d3 neither displays anything nor there is any error on chrome console. I’m new to d3 and unable to figure out the error. Can someone help me with […]

Categories
Development

D3: Map Zoom scaled by points

I’m pretty new to D3 so I’m sorry if this is redundant with other posts. I’m attempting to make a map with points that the user selects by clicking on a barplot. Currently I have a map of the world, and the points enter and exit based on the clicked bar. I was wondering how […]

Categories
Development

Fill line chart area with multiple colors

I am trying to create a chart like below: While I’ve created the skeleton of it but stuck on how to fill those areas with multiple colors. I’m using d3 to complete this chart. My code for reference: var line = d3.line() .x(function(d) { return x(d.ind); }) .y(function(d) { return y(d.tot_cases); }) x.domain(data.map(function(d) { return […]

Categories
Development

How do I select one group of values from dataset to plot a linechart using D3.js and not the whole dataset

I have a dataset that looks like this entity,code,year,value Afghanistan,AFG,1990,10.31850413 Afghanistan,AFG,1991,10.32701045 Albania,ALB,1990,3.985169898 Albania,ALB,1991,4.199006705 I want to plot a linechart with D3.js, but only for the country with code “AFG”. the x-axis is going to be years from 1990 – 2017, the y-axis is the value. Currently, my code takes all the countries and thus creates […]

Categories
Development

Parsing a dataset of time in the format “Y-M-D H:M:S.MS” gives me 0NaN-NaN-NaNTNaN:NaN:NaN.NaNZ

I am able to see glucose readings but time shows up as: 0NaN-NaN-NaNTNaN:NaN:NaN.NaNZ I am trying to parse a dataset of time of the format “Y-M-D H:M:S.MS”. I need it to be formatted properly so that I can show it on the x axis. I have attached sample dataset to this code. My code looks […]

Categories
Development

How to remove these D3.js console log error

I have the error below, after trying out some other work arounds (like trying out the suggested solutions to similar problem)- no success took place. Error: <rect> attribute height: Expected length, “NaN” Could someone take a look at my code and help me in changing it such that these errors dissappear? Thanks in advanced. This […]

Categories
Development

Brush and transition coexist

I am working with d3.js and I have a problem. I have a graph in which I use the brush function to resize the scale of the axes. When I do the brush, I call the function updateChart: var brush = d3.brush() .extent( [ [0,0], [width,height] ] ) .on(“end”, updateChart) Where the updateChart function is: […]

Categories
Development

How to hide and show points on a line graph

I am trying to hide and show points on my line chart when I click on the text of my legend. Here is the link to my current fiddle. From my fiddle, my blue line working properly as it is showing and hiding on every click of ‘Value’. However, the points are not doing so […]

Categories
Development

How to make line chart zoom in by dragging

I am trying to implement a drag and zoom on my line chart using d3.js. I am able to drag the area I want to zoom into but nothing happens when I zoom in. Click here for my JSFiddle. var data = [ {x: 0, y: 0}, {x: 1, y: 30}, {x: 2, y: 40}, […]

Categories
Development

Having both mouse events and bar transitions

My intention is to create a graph that has a bar height transition every time it is drawn/ redrawn, and then once the bar is displayed, there can be mouse events (mouseenter, mouseleave, and mousemove) that will display a tooltip with info of the bar you’re hovering over. I have made it so that the […]