Crossfiltering
In this tutorial, we will learn how you can enable cross filtering between charts.
What is crossfiltering?
Crossfiltering allows you to select some data in one chart and filter the other charts by that data value. For example, if you are visualizing a Sales by Market chart and a Revenue by Product chart, now if you click on any plot in Sales by Market chart, then the Revenue by Product chart automatically filters by that Market type and shows the aggregated values of Revenue for each Product.
Let's take an example to see how it works in action.
Create a bar chart
We will create two charts visualizing number of retweets by time and another visualizing the number of retweets by day of week.
First, let's create a calculatedVariable count for calculating the number of retweets.
const { muze, getDataFromSearchQuery } = viz;
const data = getDataFromSearchQuery();
data = data.calculateVariable(
{
name: "count",
type: "measure",
defAggFn: "count",
},
["retweets"],
() => 0,
);
This creates a variable in the datamodel and initializes all the values to 0. We also set a count aggregation method in this field so that it calculates the count of rows whenever aggregation is applied.
Now, let's create another field day representing the day of week.
const months = ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat", "Sun"];
data = data.calculateVariable(
{
name: "day",
type: "dimension",
},
["time"],
(date) => months[new Date(date).getDay()],
);
Now let's create a canvas with a bar plot showing time vs count:
const tweetsByDay = muze
.canvas()
.rows(["count"])
.columns(["time"])
.color("day")
.layers([
{
mark: "bar",
},
])
.title("Tweets")
.subtitle("Drag to filter by time")
.data(data)
.mount("#chart1");
And another showing day vs count:
const tweetsByDate = muze
.canvas()
.rows(["day"])
.columns(["count"])
.color("day")
.title("Tweets In Day of Week")
.subtitle("Select day to filter")
.data(data)
.mount("#chart2");
Enable crossfiltering
Now let's enable crossfiltering using ActionModel API:
muze.ActionModel.for(tweetsByDay, tweetsByDate).enableCrossInteractivity();
This tells Muze to filter the canvases whenever brush or select interaction happens in any of the chart.
Example
const data = `"Tweet id","Tweet permalink","Tweet text","time","impressions","engagements","engagement rate","retweets","replies","favorites","user profile clicks","url clicks","hashtag clicks","detail expands","permalink clicks","embedded media clicks","app opens","app install attempts","follows","email tweet","dial phone","promoted impressions","promoted engagements","promoted engagement rate","promoted retweets","promoted replies","promoted favorites","promoted user profile clicks","promoted url clicks","promoted hashtag clicks","promoted detail expands","promoted permalink clicks","promoted embedded media clicks","promoted app opens","promoted app install attempts","promoted follows","promoted email tweet","promoted dial phone"
"508392387518136320","https://twitter.com/DoPhuoc/status/508392387518136320","After smart watches, smart glasses. We will have smart shirt, smart pant, and smart underwear.","2014-09-06 23:12","22","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"508389486297100289","https://twitter.com/DoPhuoc/status/508389486297100289","Important education subject, history ed needs innovative teaching approach. http://t.co/MBfeeVtinm","2014-09-06 23:01","27","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"507958345521569792","https://twitter.com/DoPhuoc/status/507958345521569792","@scottbelsky @vidatalk I mean, can we connect?","2014-09-05 18:28","16","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"507957802338242560","https://twitter.com/DoPhuoc/status/507957802338242560","@scottbelsky I build data visualization community at @vidatalk vida.io. Can you connect?","2014-09-05 18:25","18","1","0.05555555555555555","0","1","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"507640294024544256","https://twitter.com/DoPhuoc/status/507640294024544256","Equity back guarantee from @techstars. It's great for entrepreneur. http://t.co/kq5CwIaJ80 #startup","2014-09-04 21:24","56","2","0.03571428571428571","0","0","1","0","0","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"507259044453548032","https://twitter.com/DoPhuoc/status/507259044453548032","@jackottaviani We would be interested in your feedback with vida.io template tool. Can we connect?","2014-09-03 20:09","32","2","0.0625","0","0","0","1","0","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"490722047979696128","https://twitter.com/DoPhuoc/status/490722047979696128","Why not call income gap problem? Income inequality is politically charged.","2014-07-20 04:57","85","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"489130993211961345","https://twitter.com/DoPhuoc/status/489130993211961345","Lunch startup craze reminds me of daily deal. Something we do everyday is highly competitive. #startup","2014-07-15 19:34","127","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"486227711266799616","https://twitter.com/DoPhuoc/status/486227711266799616","In asset bubble build up, startup is the place to put your resources. http://t.co/Drcuoc0emx","2014-07-07 19:18","131","1","0.007633587786259542","0","0","0","0","1","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"486212415135449088","https://twitter.com/DoPhuoc/status/486212415135449088","My latest article on BigQuery on D3.js visualization: http://t.co/Itu54qUR9q cc @felipehoffa","2014-07-07 18:17","148","3","0.02027027027027027","0","0","0","0","2","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"481567880728031233","https://twitter.com/DoPhuoc/status/481567880728031233","Barbarism is part of soccer. It’s time for it to evolve.","2014-06-24 22:41","127","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"480020733415145472","https://twitter.com/DoPhuoc/status/480020733415145472","@TKKuegler let me know if you have question. Email me phuocd@vida.io.","2014-06-20 16:13","21","1","0.047619047619047616","0","0","0","1","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"479809170481229824","https://twitter.com/DoPhuoc/status/479809170481229824","Check out my pitch to @TKKuegler on @YabblyInc http://t.co/4O09sId0Ej #startup #pitch","2014-06-20 02:13","469","17","0.03624733475479744","2","1","2","2","8","0","2","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"476426769663160320","https://twitter.com/DoPhuoc/status/476426769663160320","Apple new #swift language looks kinda like Javascript.","2014-06-10 18:12","199","2","0.010050251256281407","0","0","1","0","0","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"475401536211025920","https://twitter.com/DoPhuoc/status/475401536211025920","@importio thinking about a blog post for d3 with import.io. Will you post?","2014-06-07 22:18","29","1","0.034482758620689655","0","1","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"470430617083969536","https://twitter.com/DoPhuoc/status/470430617083969536","What an incredible Champions League final! Relentless effort got rewarded in the last minute.","2014-05-25 05:06","190","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"467070362732068864","https://twitter.com/DoPhuoc/status/467070362732068864","I saw this in vida.io log. Is Apple building search engine for real now? Happening to your site? http://t.co/61aaoZRg9T","2014-05-15 22:33","369","6","0.016260162601626018","0","0","0","0","3","0","1","0","2","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"467037730141384704","https://twitter.com/DoPhuoc/status/467037730141384704","@SecurityDbase Let me know if you have any question. My team also offers dev service for d3 if you want us to build it for you.","2014-05-15 20:24","120","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"467000189317054464","https://twitter.com/DoPhuoc/status/467000189317054464","@SecurityDbase You have to use new 2d context to draw node category. See this: https://t.co/vToI563DWv #d3js #dataviz","2014-05-15 17:54","172","2","0.011627906976744186","0","1","1","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"466073676090068992","https://twitter.com/DoPhuoc/status/466073676090068992","@danshapiro AKA sex bolt :) http://t.co/v55vEYBgEC","2014-05-13 04:33","54","2","0.037037037037037035","0","0","0","0","2","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"466064784253657088","https://twitter.com/DoPhuoc/status/466064784253657088","Forget drone, advanced radar/missiles. The next growth area in defense technology... water gun. http://t.co/4KZKjgZrGb cc @StephenAtHome","2014-05-13 03:57","239","3","0.012552301255230125","0","0","0","1","1","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"466011942956830720","https://twitter.com/DoPhuoc/status/466011942956830720","Women want to find a husband? Come to Seattle, competition is high. Best, they are softies making $$$. @geekwire http://t.co/eIskDvor2p","2014-05-13 00:27","253","2","0.007905138339920948","0","0","1","0","1","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"465767836535623680","https://twitter.com/DoPhuoc/status/465767836535623680","@SecurityDbase sorry have been busy with server issues. I'll have a look tomorrow.","2014-05-12 08:18","50","1","0.02","0","1","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"463811136320585728","https://twitter.com/DoPhuoc/status/463811136320585728","@cephillips Likewise, will send you email follow-up later today!","2014-05-06 22:42","98","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"463545537161998337","https://twitter.com/DoPhuoc/status/463545537161998337","Cool game @WikiAtlas: Drag and Drop Geography Game with D3.js http://t.co/zaE3033fZK #d3js #evaluation #education http://t.co/0WiZHV4CIX","2014-05-06 05:07","934","20","0.021413276231263382","4","0","3","2","9","0","1","1","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"463374089948626944","https://twitter.com/DoPhuoc/status/463374089948626944","@befamous if you have a long wait line and i’m in it, stop sending me email to check out your stuff. #trial #fail","2014-05-05 17:46","86","2","0.023255813953488372","0","0","0","1","0","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"461746504970301440","https://twitter.com/DoPhuoc/status/461746504970301440","@SecurityDbase No problem. Please share the final version. I’ll share it with our #dataviz community.","2014-05-01 05:58","105","3","0.02857142857142857","0","1","1","0","0","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"461574524937334784","https://twitter.com/DoPhuoc/status/461574524937334784","Looking for high performance d3 force layout? Check out my example with canvas: https://t.co/iDU2f2JzZF #dataviz #d3js","2014-04-30 18:35","498","6","0.012048192771084338","0","0","1","0","3","1","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"460872179291144192","https://twitter.com/DoPhuoc/status/460872179291144192","@SecurityDbase here’s canvas version for big dataset: https://t.co/iDU2f2JzZF","2014-04-28 20:04","93","1","0.010752688172043012","0","1","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"460871684405608448","https://twitter.com/DoPhuoc/status/460871684405608448","@SecurityDbase Here’s the canvas version for light #dataviz http://localhost:3000/documents/MnsXobH7JNMdiGMqK","2014-04-28 20:02","101","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"460861938646650880","https://twitter.com/DoPhuoc/status/460861938646650880","@SecurityDbase Really cool #dataviz. I’ll have a look today.","2014-04-28 19:23","97","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"460680747486298112","https://twitter.com/DoPhuoc/status/460680747486298112","@lovelletters thanks for the link!","2014-04-28 07:23","89","3","0.033707865168539325","0","0","0","3","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"460505949837336576","https://twitter.com/DoPhuoc/status/460505949837336576","@cephillips would like to chat with you about data journalism. Can we connect? phuocd@vida.io","2014-04-27 19:49","129","4","0.031007751937984496","0","1","0","2","0","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"460504572033638402","https://twitter.com/DoPhuoc/status/460504572033638402","@lovelletters we launched Google Visualization for data journalists. Know any data journalism in the Seattle area? https://t.co/Z1y3loo0CU","2014-04-27 19:43","75","4","0.05333333333333334","0","1","0","1","1","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"460496803910021120","https://twitter.com/DoPhuoc/status/460496803910021120","@sampathweb thanks for following. Check out our #dataviz d3 tool @ vida.io.","2014-04-27 19:12","85","3","0.03529411764705882","0","0","2","0","0","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"460485940142559232","https://twitter.com/DoPhuoc/status/460485940142559232","@SecurityDbase @Elijah_Meeks looks complicated. Can you post a simpler version on vida.io? Happy to help you out.","2014-04-27 18:29","80","6","0.075","0","4","0","0","0","0","2","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"460484950915964929","https://twitter.com/DoPhuoc/status/460484950915964929","@Journalism2ls just sent an email. Look forward to hearing from you.","2014-04-27 18:25","92","1","0.010869565217391304","0","0","1","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"460476137798242305","https://twitter.com/DoPhuoc/status/460476137798242305","@Journalism2ls my team builds vida.io, a #dataviz tool for journalist. Would like to connect with you. Can you email phuocd@vida.io?","2014-04-27 17:50","81","3","0.037037037037037035","0","1","1","1","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"459885952001798145","https://twitter.com/DoPhuoc/status/459885952001798145","@NateSilver538 are you in Seattle this weekend? My team builds vida.io, d3.js template tool. Would love to chat with you about dataviz.","2014-04-26 02:45","67","3","0.04477611940298507","0","0","0","1","0","0","2","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"459466448369614848","https://twitter.com/DoPhuoc/status/459466448369614848","Just shared my infographic for #Obamacare on @Visually http://t.co/avW5M5EJzV #ACA #dataviz #ddj","2014-04-24 22:58","272","3","0.011029411764705883","1","0","0","0","2","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"459010174439940097","https://twitter.com/DoPhuoc/status/459010174439940097","Check out my 2013 Government Shutdown viz on @Visually http://t.co/wCXfxRUX5O #dataviz #ddj","2014-04-23 16:45","180","3","0.016666666666666666","0","0","1","0","2","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"457292849277440000","https://twitter.com/DoPhuoc/status/457292849277440000","@SecurityDbase Use canvas tag instead of svg.","2014-04-18 23:01","77","1","0.012987012987012988","0","1","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"457048195982315520","https://twitter.com/DoPhuoc/status/457048195982315520","Obama celebrates 8 million after running: select count(\*) from users; It's not that complicated.","2014-04-18 06:49","115","2","0.017391304347826087","0","0","0","1","0","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"457047387114987520","https://twitter.com/DoPhuoc/status/457047387114987520","Wrestling with mongo db script. Javascript rules the day. Hard to imagine using such JS outside web browser.","2014-04-18 06:46","120","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"455945358711873536","https://twitter.com/DoPhuoc/status/455945358711873536","@aseemb @KISSmetrics what's your thought on centered landing page? Like this https://t.co/Z1y3loo0CU","2014-04-15 05:46","147","1","0.006802721088435374","0","0","0","0","1","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"455937494547050496","https://twitter.com/DoPhuoc/status/455937494547050496","@weschan my team is working on this tool. Would love some feedback from you. https://t.co/Z1y3loo0CU","2014-04-15 05:15","63","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"455223300457635840","https://twitter.com/DoPhuoc/status/455223300457635840","Mobile war metrics, comparison of Google, Apple, Microsoft. https://t.co/7Wg5Ics3Dh #d3js #data #visualization http://t.co/dqQIoNOnh2","2014-04-13 05:57","264","6","0.022727272727272728","0","0","0","0","2","0","0","0","4","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"454761275600297984","https://twitter.com/DoPhuoc/status/454761275600297984","@shancarter for ""How Different Groups Spend Their Dayâ€. It’d be nice to be able to select multiple filters.","2014-04-11 23:21","75","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"454761087972298752","https://twitter.com/DoPhuoc/status/454761087972298752","Fun data visualization. Interestingly, people with one kid works more. http://t.co/LZsvZ8skRE","2014-04-11 23:21","102","3","0.029411764705882353","0","0","0","0","3","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"454760967042129920","https://twitter.com/DoPhuoc/status/454760967042129920","How Different Groups Spend Their Day: http://t.co/4ETafHJIkJ","2014-04-11 23:20","96","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"454755748598140929","https://twitter.com/DoPhuoc/status/454755748598140929","@ForbesTech @TNLNYC @windowsphone developer has the highest revenue per download. That’s surprising.","2014-04-11 22:59","62","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"454705730537267200","https://twitter.com/DoPhuoc/status/454705730537267200","@charlesfitz @oculus @natbro do you think it can go mainstream?","2014-04-11 19:41","70","2","0.02857142857142857","0","2","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"453410101861171200","https://twitter.com/DoPhuoc/status/453410101861171200","@d3visualization @WiCVienna @chrispudney @nikolasander it’d be nice to flow direction without hovering. Hard to find Europe -> America.","2014-04-08 05:52","94","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"453398864372834304","https://twitter.com/DoPhuoc/status/453398864372834304","@annieisi are you still looking for d3.js data visualization? Happy to chat. Email me phuocd@vida.io.","2014-04-08 05:08","78","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"450700887590068224","https://twitter.com/DoPhuoc/status/450700887590068224","@Experfy Ah ok. Done. It’s a bit subtle.","2014-03-31 18:27","107","2","0.018691588785046728","0","0","0","0","0","0","2","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"450700377323610113","https://twitter.com/DoPhuoc/status/450700377323610113","@Experfy I do have some tags. See attachment. http://t.co/9uqf12ygXz","2014-03-31 18:25","205","1","0.004878048780487805","0","1","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"450690111110266880","https://twitter.com/DoPhuoc/status/450690111110266880","@Experfy I’m not able to complete my profile even though I entered description. http://t.co/3aZIxP2n0J","2014-03-31 17:44","211","5","0.023696682464454975","0","1","0","1","3","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"449624731310764032","https://twitter.com/DoPhuoc/status/449624731310764032","@BluJConcepts Sounds exciting. Check out templates on https://t.co/WRaPtDJYRA for quick start.","2014-03-28 19:11","105","6","0.05714285714285714","0","0","1","0","3","0","2","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"449605906280378368","https://twitter.com/DoPhuoc/status/449605906280378368","@adamidg @ron_miller @MattRosoff One way to simplify data viz is to create template. See https://t.co/WRaPtDJYRA","2014-03-28 17:56","122","1","0.00819672131147541","0","0","0","0","1","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"449425291019313152","https://twitter.com/DoPhuoc/status/449425291019313152","@maryvale @annieisi Happy to chat with you. See some of my work @ https://t.co/pAyno9odno","2014-03-28 05:58","104","7","0.0673076923076923","0","0","1","2","4","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"448724764287180800","https://twitter.com/DoPhuoc/status/448724764287180800","Oculus VR is Facebook Google glass, for nerd...","2014-03-26 07:34","103","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"448559187010678784","https://twitter.com/DoPhuoc/status/448559187010678784","@jstolmeier Also check out my public viz: https://t.co/U7GBCm2ngv","2014-03-25 20:36","81","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"448542445169418241","https://twitter.com/DoPhuoc/status/448542445169418241","@jstolmeier my team work with data viz. i wonder if @Mariners has some cool data to show.","2014-03-25 19:30","94","4","0.0425531914893617","0","1","0","1","0","0","2","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"448542142764290048","https://twitter.com/DoPhuoc/status/448542142764290048","@mf_viz look for clutter to remove. @nytgraphics viz shows counties data but hover shows state data.","2014-03-25 19:29","105","1","0.009523809523809525","0","0","0","0","0","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"448525367280549888","https://twitter.com/DoPhuoc/status/448525367280549888","@mf_viz I would simplify your viz to tell a more focused story. Panel expand is not necessary.","2014-03-25 18:22","95","4","0.042105263157894736","0","1","0","3","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"446540354771488768","https://twitter.com/DoPhuoc/status/446540354771488768","@dbcarpenter I’m looking for sales expertise in business intelligence space. Interested in talking to you.","2014-03-20 06:54","77","3","0.03896103896103896","0","1","0","1","0","0","1","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"445463938969268225","https://twitter.com/DoPhuoc/status/445463938969268225","@d1ffuz0r @d3noob Interestingly, I just built this one. https://t.co/OssDDUPau2 #d3 #data","2014-03-17 07:37","267","8","0.0299625468164794","0","1","0","0","4","0","3","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"441298530183806976","https://twitter.com/DoPhuoc/status/441298530183806976","Force layout transition. #d3js data visualization https://t.co/cHBKZDljPo","2014-03-05 19:45","221","2","0.00904977375565611","0","0","0","0","2","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"441297856838647808","https://twitter.com/DoPhuoc/status/441297856838647808","2015 Obama Budget Proposal using d3.js data visualization. Defense is huge. https://t.co/rh2y29USWK","2014-03-05 19:43","128","1","0.0078125","0","0","0","0","1","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"432780604187213824","https://twitter.com/DoPhuoc/status/432780604187213824","@arnicas @d3visualization I made mine from @ziggyjonsson example. I want to stay close to d3 force layout of http://t.co/GWByPHzSMl","2014-02-10 07:38","392","11","0.02806122448979592","0","0","1","2","8","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"432778576849432576","https://twitter.com/DoPhuoc/status/432778576849432576","@arnicas @d3visualization it’s useful when you want to add another layer of information on top of force layout.","2014-02-10 07:30","196","2","0.01020408163265306","0","1","0","1","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"422559632960147457","https://twitter.com/DoPhuoc/status/422559632960147457","@d3visualization I add my 3D viz to the spreadsheet!","2014-01-13 02:44","0","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"422557136783028226","https://twitter.com/DoPhuoc/status/422557136783028226","@d3visualization can you invite dnprock at gmail dot com. Thanks.","2014-01-13 02:34","0","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"422507578824740864","https://twitter.com/DoPhuoc/status/422507578824740864","@d3visualization doesn’t look like I have permission to add to spreadsheet.","2014-01-12 23:17","0","1","0.0","0","1","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"422283155999977472","https://twitter.com/DoPhuoc/status/422283155999977472","@d3visualization Can you include my 3D force layout viz in your d3 example list? https://t.co/oycYQ4DQqR","2014-01-12 08:25","0","2","0.0","0","1","1","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"418258060893638657","https://twitter.com/DoPhuoc/status/418258060893638657","@jblanchefr @nerik check out some map clonable templates on http://t.co/6SR1ytO1Es.","2014-01-01 05:51","0","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"418257607778775040","https://twitter.com/DoPhuoc/status/418257607778775040","@Elijah_Meeks would love to share your map viz with Vida.io community. Can you post? http://t.co/wTcc8nnOOT","2014-01-01 05:49","0","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"414866299991228416","https://twitter.com/DoPhuoc/status/414866299991228416","@tarr11 also check out three.js. it's very cool.","2013-12-22 21:13","0","1","0.0","0","0","1","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"414865551614173184","https://twitter.com/DoPhuoc/status/414865551614173184","Visualize chemical molecules with #d3js data visualization from @vidatalk https://t.co/kqcL5SzzYW","2013-12-22 21:10","0","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"414863140174589952","https://twitter.com/DoPhuoc/status/414863140174589952","US state map with selector built with #d3js https://t.co/7pp11JH8rp","2013-12-22 21:00","0","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"386307481518895104","https://twitter.com/DoPhuoc/status/386307481518895104","@StephenAtHome @TheDailyShow shutdown affects alien the most as NASA closes. http://t.co/eQsj9Duefx","2013-10-05 01:50","0","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"386306247273639936","https://twitter.com/DoPhuoc/status/386306247273639936","@ariannahuff @JessicaProis @ESGoldberg shutdown affects NASA HUD ED most http://t.co/eQsj9Duefx","2013-10-05 01:46","0","1","0.0","0","0","1","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
"386259038037479424","https://twitter.com/DoPhuoc/status/386259038037479424","@JeffYoung @charlesornstein check out my new visualization on 2013 government shutdown by departments. http://t.co/eQsj9Duefx","2013-10-04 22:38","0","0","0.0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-","-"
`;
const schema = [
{
name: "time",
type: "dimension",
subtype: "temporal",
format: "%Y-%m-%d %M:%S",
},
{
name: "impressions",
type: "measure",
},
{
name: "engagements",
type: "measure",
},
{
name: "retweets",
type: "measure",
},
{
name: "favorites",
type: "measure",
},
{
name: "user profile clicks",
type: "measure",
},
{
name: "url clicks",
type: "measure",
},
{
name: "hashtag clicks",
type: "measure",
},
{
name: "detail expands",
type: "measure",
},
{
name: "permalink clicks",
type: "measure",
},
{
name: "follows",
type: "measure",
},
];
const formattedData = await DataModel.loadData(data, schema);
let rootData = new DataModel(formattedData);
rootData = rootData.calculateVariable(
{
name: "count",
type: "measure",
defAggFn: "count",
},
["retweets"],
() => 0,
);
const months = ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat", "Sun"];
rootData = rootData.calculateVariable(
{
name: "day",
type: "dimension",
},
["time"],
(date) => months[new Date(date).getDay()],
);
const tweetsByDay = muze
.canvas()
.rows(["count"])
.columns(["time"])
.color("day")
.layers([
{
mark: "bar",
},
])
.config({
axes: {
y: {
showAxisName: false,
},
x: {
showAxisName: false,
},
},
legend: {
color: {
show: false,
},
},
})
.title("Tweets")
.subtitle("Drag to filter by time")
.data(rootData)
.width(600)
.height(600)
.mount("#chart1");
const tweetsByDate = muze
.canvas()
.rows(["day"])
.columns(["count"])
.color("day")
.config({
axes: {
y: {
showAxisName: false,
},
x: {
showAxisName: false,
},
},
legend: {
color: {
show: false,
},
},
})
.title("Tweets In Day of Week")
.subtitle("Select day to filter")
.data(rootData)
.width(600)
.height(600)
.mount("#chart2");
muze.ActionModel.for(tweetsByDay, tweetsByDate).enableCrossInteractivity();
