Plot csv data using D3.js

I tried my first D3.js data visualization using csv data source

My 'graph' would plot circles, where the x position of the circle would represent the value of the second column (file size) in my csv. The larger files would be plotted to the right.

I posted my example d3csv.html at https://github.com/binodpanta/webvisualizer

I should be able to do some more interesting things with this, such as realtime monitor files.

Enjoy!

Comments

Using Sublime Text build system to open your files in your favorite Mac app

A quick hack on Sublime text when working on Macs is to get the editor to invoke the 'open' command so that you can hit command+B to 'open' the file in your favorite app. My favorite use for it is when editing html files, i want it to open in my favorite browser. On a Mac, 'open' is the equivalent of the default file association in Windows, such as when you click on a text file, you can have it open in your favorite editor. In sublime, go to Tools > Build System Select New build system In the file that opens type this in into the pre-filled section and save the file with a name you want, such as 'open.sublime-build': { "cmd": ["open", "$file"] } Then go back to the file you were editing, Tools > Build System. Now select your newly saved build system. Now every time you hit command + B you get the file to open on Chrome (which is what my Mac is setup by default to open html files with)! Obvi...

Two cool ways to center content in CSS

You may have seen this question, center a div, or whatever, in interviews or other places. I am sure there are other approaches than I am sharing here, but I found these two cool ideas from multiple places (see refs at the end). These are not my original ideas so I will be sure to share where I learned these from: Using display:flex Make sure you know how flex works, but to do centering with flex, it's ridiculously simple: div .container { display : flex ; justify-content : center ; /* horizontal alignment */ align-items : center ; /* vertical alignment */ flex-direction : column ; /* since we are doing a vertical column */ padding : 1rem 3rem ; /* not related to centering */ } Now everything inside <div class="container"> </div> will be centered in both directions! Using display:grid You are so going to thank for me this one, you are welcome. This one is so simple it does not even need an explanation does it? div .conta...

Remote debugging of python code in Visual Studio Code

Remote debugging with python and visual studio Code In terminal install debugpy into your environment with something like python -m pip install debugpy Create a visual studio launch configuration and add following to it following (or just use vs code create configuraiton button to easily create it choose type Python and select from the list, 'Remote attach') { "name" : "Python: Remote Attach" , "type" : "python" , "request" : "attach" , "port" : 5678 , "host" : "localhost" , "pathMappings" : [{ "localRoot" : "${workspaceFolder}" , "remoteRoot" : "." }] }, Run this in the command line to start a debugging server with your script runner python3 -m debugpy --listen 1.2.3.4:5678 --wait-for-client Yourscript.py Now run the launch configuration from vs code to attach to this debugger

What I learned today

Search This Blog