D3 version of animated chart dribbble

Developer
Zachary Olson
Size
4,327 Kb
Views
12,138

How do I make an d3 version of animated chart dribbble?

I wanted to teach myself d3, so I thought I'd attempt to use it to remake this dribbble - http://dribbble.com/shots/1215165-Infographic. . What is a d3 version of animated chart dribbble? How do you make a d3 version of animated chart dribbble? This script and codes were developed by Zachary Olson on 10 November 2022, Thursday.

D3 version of animated chart dribbble Previews
IQ Test

D3 version of animated chart dribbble - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>D3 version of animated chart dribbble</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Rambla:700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="chart"></svg>
<div id="refl"></div>
<a id="dribbble" href="http://dribbble.com/shots/1215165-Infographic">D3 animation based on Jelio Dimitrov's Dribbble</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

D3 version of animated chart dribbble - Script Codes CSS Codes

#refl{ /* This is the 'correct' way to make the reflection, using the element() background technique: http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/ Currently only works in moz though. */ content: ""; display: block; width: 800px; height: 500px; margin: 0 auto; opacity: 0.1; z-index: -1; transform: translateY(-62px) scaleY(-1); background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 6%, rgba(255,255,255,0) 45%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%), -moz-element(#chart); background-position: bottom, bottom; -moz-background-size: cover, cover;
}
body { font-family: helvetica, sans-seirf;
}
#chart { display: block; margin: 0 auto; /* This is the nonstandard way of making the reflection. Only works in webkit (the other way doesnt work in webkit so use this instead) */ -webkit-box-reflect: below -60px -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0,0,0,0)), color-stop(0.05, rgba(0,0,0,0)), color-stop(0.06, rgba(0,0,0,0.1)), color-stop(0.45, rgba(0,0,0,0.1)), color-stop(0.75, rgba(0,0,0,0)), color-stop(1.00, rgba(0,0,0,0)));
}
.x.axis g:first-of-type, .x.axis g:last-of-type { display: none;
}
.axis line, .axis path { fill: none; stroke: rgba(236, 60, 12, 0.6); shape-rendering: crispEdges;
}
.axis path.domain { stroke: none;
}
.axis text { fill: #8C807D; font-size: 1em; font-weight: 300;
}
.line { fill: none; stroke-width: 1px; stroke: rgba(236, 60, 12, 0.6);
}
.line.done { stroke: none;
}
.area { stroke-width: 0px;
}
.area1 { fill: rgba(245, 166, 189, 0.6);
}
.area2 { fill: rgba(236, 60, 12, 0.6);
}
.basline { stroke-width: 10px;
}
.area1Baseline { stroke: rgba(245, 166, 189, 0.6);
}
.area2Baseline { stroke: rgba(236, 60, 12, 0.6);
}
.axis line { transition: opacity 0.5s;
}
.axis.done line { opacity: 0;
}
#dribbble { position: fixed; bottom: 1em; width: 100%; font-family: 'Rambla', sans-serif; font-size: 2em; font-weight: bold; text-align: center; text-decoration: none; color: rgba(236, 60, 12, 0.6);
}

D3 version of animated chart dribbble - Script Codes JS Codes

var parseDate = d3.time.format("%d-%b-%Y").parse;
var lineData = [ [parseDate("1-jan-2013"), 25], [parseDate("1-apr-2013"), 30], [parseDate("1-may-2013"), 50], [parseDate("1-jun-2013"), 60], [parseDate("1-dec-2013"), 45]
];
var intermediateLineData = [ [parseDate("1-jan-2013"), 0], [parseDate("1-apr-2013"), 5], [parseDate("1-may-2013"), 30], [parseDate("1-jun-2013"), 50], [parseDate("1-dec-2013"), 5]
];
var area1Data = [ [parseDate("1-dec-2012"), 0], [parseDate("1-jan-2013"), 25], [parseDate("1-feb-2013"), 10], [parseDate("1-mar-2013"), 17], [parseDate("1-apr-2013"), 30], [parseDate("1-may-2013"), 25], [parseDate("1-jun-2013"), 50], [parseDate("1-jul-2013"), 60], [parseDate("1-aug-2013"), 50], [parseDate("1-sep-2013"), 30], [parseDate("1-oct-2013"), 25], [parseDate("1-nov-2013"), 45], [parseDate("1-dec-2013"), 20], [parseDate("1-jan-2014"), 0]
];
var area2Data = [ [parseDate("1-dec-2012"), 0], [parseDate("1-jan-2013"), 10], [parseDate("1-feb-2013"), 7], [parseDate("1-mar-2013"), 12], [parseDate("1-apr-2013"), 25], [parseDate("1-may-2013"), 35], [parseDate("1-jun-2013"), 25], [parseDate("1-jul-2013"), 15], [parseDate("1-aug-2013"), 6], [parseDate("1-sep-2013"), 9], [parseDate("1-oct-2013"), 11], [parseDate("1-nov-2013"), 40], [parseDate("1-dec-2013"), 30], [parseDate("1-jan-2014"), 0]
];
var nullLineData = [ [parseDate("1-jan-2013"), 0], [parseDate("1-apr-2013"), 0], [parseDate("1-may-2013"), 0], [parseDate("1-jun-2013"), 0], [parseDate("1-dec-2013"), 0],
];
var extremeNullData = [ [parseDate("1-dec-2012"), 0], [parseDate("1-jan-2013"), 0], [parseDate("1-feb-2013"), 0], [parseDate("1-mar-2013"), 0], [parseDate("1-apr-2013"), 0], [parseDate("1-may-2013"), 0], [parseDate("1-jun-2013"), 0], [parseDate("1-jul-2013"), 0], [parseDate("1-aug-2013"), 0], [parseDate("1-sep-2013"), 0], [parseDate("1-oct-2013"), 0], [parseDate("1-nov-2013"), 0], [parseDate("1-dec-2013"), 0], [parseDate("1-jan-2014"), 0]
];
// Timing
var start = 0;
var beginChartIn = start + 800; //After baseline comes in
var finishChartIn = beginChartIn + 1400;
var beginChartOut = finishChartIn + 1500;
var finishChartOut = beginChartOut + 1300; //begin taking baseline out
var finish = finishChartOut + 1500;
var marginBottom = 30;
var width = 800;
var height = 500;
var chartBottom = height - marginBottom;
var chartHeight = chartBottom - 10; // 10 = baseline
var svg = d3.select("#chart") .attr("width", width) .attr("height", height);
// Scaling functions
var xScale = d3.time.scale() .range([0, width]) .domain(d3.extent(area1Data, function(d) { return d[0]; }));
var yScale = d3.scale.linear() .range([chartHeight, 0]) .domain([0, d3.max(area1Data, function(d) { return (d[1]*1.2); /* Pad for elastic easing */ })]);
/* CREATE SVG ELEMENTS */
// Axis
var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom").ticks(12) .tickFormat(d3.time.format("%b"));
var axisPath = svg.append("g") .attr("class", "x axis done") .attr("transform", "translate(0," + chartBottom + ")") .call(xAxis);
// Pink Area
var area1 = d3.svg.area() .x(function(d) { return xScale(d[0]); }) .y0(chartHeight) .y1(function(d) { return yScale(d[1]); });
var area1Path = svg.append("path") .attr("class", "area area1");
var area1LineR = svg.append("line") .attr("class", "basline area1Baseline rightBaseline");
var area1LineL = svg.append("line") .attr("class", "basline area1Baseline leftBaseline");
// Orange Area
var area2 = d3.svg.area() .x(function(d) { return xScale(d[0]); }) .y0(chartHeight) .y1(function(d) { return yScale(d[1]); });
var area2Path = svg.append("path") .attr("class", "area area2");
var area2LineR = svg.append("line") .attr("class", "basline area2Baseline rightBaseline");
var area2LineL = svg.append("line") .attr("class", "basline area2Baseline leftBaseline");
// Line Graph
var line = d3.svg.line() .x(function(d,i){ return xScale(d[0]); }) .y(function(d,i){ return yScale(d[1]); });
var linePath = svg.append("svg:path") .attr("class", "line");
// Line that covers whole area to stop moz element reflection from thinking that the svg is shrinking when the graph shrinks.
svg.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", width) .attr("y2", height) .style("stroke", "blue") .style("stroke-width", "5px") .style("opacity", "0")
/* THE FOLLOWING FUNCTION ACTUALLY PREFORMS THE ANIMATION CALL ON A LOOP TO MAKE THE ANIMATION LOOP
*/
var beginAnimation = function() { area1Path .attr("d", area1(extremeNullData)) .transition() .delay(beginChartIn + 200) .duration(700) .ease("elastic", 1, 0.9) .attr("d", area1(area1Data)) .transition() .delay(beginChartOut + 300) .duration(500) .ease("cubic") .attr("d", area1(extremeNullData)); area1LineR .attr("x1", (width/2)) .attr("x2", (width/2)) .attr("y1", (height-marginBottom-5)) .attr("y2", (height-marginBottom-5)) .transition() .delay(start) .duration(500) .attr("x1", 0) .transition() .delay(finishChartOut+300) .duration(500) .attr("x1", (width/2)); area1LineL .attr("x1", (width/2)) .attr("x2", (width/2)) .attr("y1", (height-marginBottom-5)) .attr("y2", (height-marginBottom-5)) .transition() .delay(start) .duration(500) .attr("x2", width) .transition() .delay(finishChartOut+300) .duration(500) .attr("x2", (width/2)); area2Path .attr("d", area2(extremeNullData)) .transition() .delay(beginChartIn + 200) .duration(700) .ease("elastic", 1, 0.9) .attr("d", area2(area2Data)) .transition() .delay(beginChartOut) .duration(500) .ease("cubic") .attr("d", area2(extremeNullData)); area2LineR .attr("x1", (width/2)) .attr("x2", (width/2)) .attr("y1", (height-marginBottom-5)) .attr("y2", (height-marginBottom-5)) .transition() .delay(start + 300) .duration(500) .attr("x1", 0) .transition() .delay(finishChartOut) .duration(500) .attr("x1", (width/2)); area2LineL .attr("x1", (width/2)) .attr("x2", (width/2)) .attr("y1", (height-marginBottom-5)) .attr("y2", (height-marginBottom-5)) .transition() .delay(start + 300) .duration(500) .attr("x2", width) .transition() .delay(finishChartOut) .duration(500) .attr("x2", (width/2)); linePath .attr("d", line(nullLineData)) .transition() .delay(beginChartIn+200) .duration(600) .ease("linear", 1, 0.4) .attr("d", line(intermediateLineData)) .attr("class", "line") .transition() .delay(beginChartIn+800) .duration(600) .ease("elastic", 1, 0.4) .attr("d", line(lineData)) .transition() .delay(beginChartOut+600) .duration(500) .ease("cubic") .attr("d", line(nullLineData)) .transition() .delay(finishChartOut) .attr("class", "line done"); axisPath .transition() .delay(start) .duration(500) .attr("class", "x axis") .transition() .delay(finishChartOut+800) .duration(500) .attr("class", "x axis done");
}
beginAnimation();
setInterval(beginAnimation, finish);
D3 version of animated chart dribbble - Script Codes
D3 version of animated chart dribbble - Script Codes
Home Page Home
Developer Zachary Olson
Username zacharyolson
Uploaded November 10, 2022
Rating 4.5
Size 4,327 Kb
Views 12,138
Do you need developer help for D3 version of animated chart dribbble?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zachary Olson (zacharyolson) Script Codes
Name
Hovers with popups
Scroll Position Indicators
IPad Mock
Convert JSON to ruby hash
Border Radius Bouncer
A Pen by Zachary Olson
Direction-aware hover with pure css
IMac Mock
Css version of macbook dribbble
No JS Modals
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!