Learn Data Visualization with D3.js - Los Angeles

Refund PolicyWe offer refunds up to 7 days prior to the class and in the event of a class cancellation. If we reschedule the class, we'll offer you a refund if you can't make the new dates. In any other circumstance, a credit will be issued which can be applied toward a future class.  This credit is valid for up to 6 months from date issued.  We are not liable for any travel, or other, expenses that you may incur to participate in the class.Cancellation PolicyCode District reserves the right to cancel a workshop any time before the first day of the workshop date due to any unforeseen circumstances that may arise. In the event that a cancellation is necessary, paid participants of the affected course will be issued a full refund.Questions?Contact a Code Districtrepresentativeat (310) 956-8574Learn more about Code District atCodeDistrict.io

Code District

<h3 style="border: 0px; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline; font-family: Arial; font-weight: 500; color: #494d4e; font-size: 28px; line-height: 36px;">This course will teach you everything you need to know to start building Data Visualizations in D3.js and communicating brilliantly in the world of Data Visualizations.</h3>
 
<img style="display: block; height: auto; max-width: 100%; float: right; margin: 5px 5px 10px 20px; overflow: hidden;" alt="D3JS Training Los Angeles" src="http://codedistrict.io/wp-content/uploads/2016/01/D3JS_Training_LosAngeles.png" height="219" width="450" />
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.
D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
 
<h3 style="border: 0px; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline; font-family: Arial; font-weight: 500; color: #494d4e; font-size: 28px; line-height: 36px;">Course Overview</h3>
This course brings together the worlds of web development and data visualization. You will be taken through instructor-led, hands-on coding exercises and will learn how to build powerful data visualizations. At the end of the course you will have built your own D3 visualizations from scratch using example datasets.
In addition, you will become familiar with the foundational concepts and methods of D3, such as data binding, scales, axes, transitions and motion, and advanced concepts such as layouts and geo-mapping. You will learn a repertoire of visualization techniques for making your data come to life.
 
<h3 style="border: 0px; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline; font-family: Arial; font-weight: 500; color: #494d4e; font-size: 28px; line-height: 36px;">Takeaways</h3>
<ul>
<li>Start programming in D3.js</li>
<li>Create powerful data visualizations</li>
<li>Learn how to manipulate data</li>
<li>Learn how to work with transitions and animations in D3</li>
<li>Create modular, mobile-friendly visualizations </li>
</ul>
 
Course Syllabus
<h4 style="border: 0px; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline; font-family: Arial; font-weight: 500; color: #494d4e; font-size: 24px; line-height: 34px; letter-spacing: 0px;">Day 1</h4>
D3 Building Blocks
<ul style="border: 0px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline; list-style: square;">
<li>D3 intro</li>
<li>SVG Basics</li>
<li>Selections (select(), append(), selectAl())</li>
<li>Data Binding (enter())</li>
<li>Drawing with Data</li>
<li>Enter, Update, and Exit Pattern</li>
<li>Basic transitions</li>
<li>Working with JSON and CSV files</li>
</ul>
Visualization Basics
<ul style="border: 0px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline; list-style: square;">
<li>D3 utility functions (min, max, extent, sum, array functions)</li>
<li>Quantitative Scales</li>
<li>Categorical Scales</li>
<li>Axis Generator</li>
<li>Updates, transitions, and motion</li>
<li>Line Generator</li>
<li>Brush Generator</li>
</ul>
Common D3 Visualizations
<ul style="border: 0px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline; list-style: square;">
<li>Bar Chart</li>
<li>Scatterplot</li>
</ul>
D3 Layouts
<ul style="border: 0px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline; list-style: square;">
<li>Pie</li>
<li>Force</li>
</ul>
<h4 style="border: 0px; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline; font-family: Arial; font-weight: 500; color: #494d4e; font-size: 24px; line-height: 34px;"> </h4>
<h4 style="border: 0px; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline; font-family: Arial; font-weight: 500; color: #494d4e; font-size: 24px; line-height: 34px;">Day 2</h4>
D3 Layouts (cont.)
<ul style="border: 0px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline; list-style: square; color: #56595c; font-family: 'Open Sans'; font-size: 16px; line-height: 24px;">
<li>Tree</li>
<li>Histogram</li>
</ul>
Mapping in D3
<ul style="border: 0px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline; list-style: square; color: #56595c; font-family: 'Open Sans'; font-size: 16px; line-height: 24px;">
<li>GeoJSON</li>
<li>Paths</li>
<li>Projections</li>
<li>Building a Map</li>
<li>Interactivity</li>
</ul>
Reusable Charts
<ul style="border: 0px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline; list-style: square; color: #56595c; font-family: 'Open Sans'; font-size: 16px; line-height: 24px;">
<li>Design Patterns</li>
<li>Creating Reusable Visualizations</li>
</ul>
Advanced Topics
<ul style="border: 0px; margin: 0px 0px 20px 18px; outline: 0px; padding: 0px; vertical-align: baseline; list-style: square; color: #56595c; font-family: 'Open Sans'; font-size: 16px; line-height: 24px;">
<li>Creating responsive, mobile-friendly visualizations</li>
<li>Event Dispatching</li>
<li>Using Crossfilter</li>
<li>Integrations with Frameworks (Angular, React, Ionic)</li>
</ul>
 
<h3 style="border: 0px; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline; font-family: Arial; font-weight: 500; color: #494d4e; font-size: 28px; line-height: 36px;">Who is This Course For? </h3>
This course is for anyone who wants to be proficient in the use of D3 and seeks expertise visualizing quantitative information.
 
<h3 style="border: 0px; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline; font-family: Arial; font-weight: 500; color: #494d4e; font-size: 28px; line-height: 36px;">Course Prerequisites </h3>
Students should have a basic understanding of web fundamentals (HTML, CSS, DOM, SVG, HTML5 Canvas, etc.) and JavaScript knowledge (functions, control statements, basic data types and structures), as well as an awareness of data visualization and its benefits.
 
<h3 style="border: 0px; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline; font-family: Arial; font-weight: 500; color: #494d4e; font-size: 28px; line-height: 36px;">System Requirements and Development Environment </h3>
Participates should bring a laptop/notebook computer. Mac or PC with any modern web browser installed and working wireless capabilities.
 
About the Instructor <img style="display: block; height: auto; max-width: 100%; color: #56595c; font-family: 'Open Sans'; font-size: 16px; line-height: 24px;" alt="" src="http://codedistrict.io/wp-content/uploads/2015/01/VictorMejia.jpg" />
 
Victor Mejia is a Senior UI Engineer who specializes in building great user experiences and data visualizations. His expertise is in building web applications with JavaScript. He is also very active in the developer community and is a regular speaker at meetups and code camps. His skills include Angular, D3, Ionic, Node.js and MongoDB.

We Labs

Our {communityGuidelinesLink} describe the sort of content we prohibit on Eventbrite. If you suspect an event may be in violation, you can report it to us so we can investigate.

To report other categories of prohibited or illegal content, submit {link}