6 ms·

D3 has the reputation of being super-complicated because of all the libraries that are based on it, "simplifying" it so that everyone can use it. In the past ye

by yoavm 10y ago

D3 has the reputation of being super-complicated because of all the libraries that are based on it, "simplifying" it so that everyone can use it. In the past year I wanted to create pretty unique type of data visualisation, so I dived into D3 and discovered it a makes a lot more sense than I though. Of course, if you only want a regular bar chart, you'll do better with things like C3, nvd3 etc'. But if you want anything a bit special, D3 itself is very powerful and the documentation in pretty good - there's no reason to avoid using it directly. Definitely looking forward to try the new release.

minimaxir 10y ago
To add to that, if you are a complete newbie to any data visualization, do not start with d3. If you want to make pretty charts programatically, using R/ggplot2 or Python/Seaborn is good enough. Even Excel is fine if you tweak the defaults. D3 is good if your visualization benefits from interactivity, either with dynamic data adjustment or rich tooltips. But static visualizations are important too. (I recently restructured my workflow so I can output static images and interactive charts with the same code, which makes it the best of both worlds.)
- danso 10y ago
  What is your static+interactive workflow now, if I can ask? Also, is it fairly easy to build a workflow that generates static visualizations via D3 (i.e. making savable SVGs)?
  - minimaxir 10y ago
    I make charts with R/ggplot2. Standard workflow is to construct chart and save as static file. (PNG/SVG etc.) But with the plot.ly bridge, I can convert to an interactive chart w/ rich tooltips with very very little tweaking. (See this notebook: https://github.com/minimaxir/interactive-facebook-reactions/blob/master/facebook_reactions_classification.ipynb https://github.com/minimaxir/interactive-facebook-reactions/...) To convert D3 to SVG, I believe all you need is a helper function but that is not my area of expertise.
    - monfera 10y ago
      There's also Shiny, Jupyter, Bokeh...
      - minimaxir 10y ago
        Those aren't updated clientside (have to ask the server for the new chart instead of just the data), which is a different architecture that does not scale.
        lmcinnes 10y ago
        Broken actually does a lot of stuff client side and you can simply update the data. It's much closer to d3 for interactivity,and really quite powerful. It does lack some features ATM, but it continues to grow space.
        monfera 10y ago
        Indeed, what I like about plotly is that you can start pretty much anywhere (R, Python, Jupyter, browser JavaScript, node.js, Julia, Matlab...) and get to an interactive, explorable chart (disclaimer, I'm working on WebGL plotly functions eg. https://twitter.com/plotlygraphs/status/747879741399568384 https://twitter.com/plotlygraphs/status/747879741399568384)
        jcheng 10y ago
        Shiny supports either model, depending on the visualization. And also I think you have it backwards, if you have to scale to large amounts of data then you want to push a chart, not data, into the client.
      - bigtunacan 10y ago
        Hadn't heard of Bokeh before; so thanks for that! Also there is ggvis https://github.com/rstudio/ggvis https://github.com/rstudio/ggvis which is nice if you are already using ggplot2.
  - thenipper 10y ago
    To do this you can use SVG Crowbar: http://nytimes.github.io/svg-crowbar/ http://nytimes.github.io/svg-crowbar/ It's pretty easy to use. I don't do interactive so I just find it easier to export EPS files from R.
  - ontouchstart 10y ago
    It is very easy to "export" SVG generated by d3: output.append('div').text(svg.node().outerHTML); You can see it in action here: https://www.digital-message.com/develop/tools/yaml2svg https://www.digital-message.com/develop/tools/yaml2svg
    - ontouchstart 10y ago
      You can copy and paste the SVG code out: <svg xmlns="http://www.w3.org/2000/svg" http://www.w3.org/2000/svg" version="1.1" width="250" height="250"><rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink"></rect><circle cx="125" cy="125" r="75" fill="orange"></circle><polyline points="50,125 50,200 200,200 200,125" stroke="red" stroke-width="4" fill="none"></polyline><path d="M50 125 c 25 -60 50 -60 75 0 c 25 60 50 60 75 0" fill="none" stroke-width="4" stroke="white"></path><text x="125" y="125" font-family="monospace" font-size="20" text-anchor="middle" fill="black">Hello world</text></svg>
      - thadk 10y ago
        Or, in Chrome, use the Console.download() snippet: https://bgrins.github.io/devtools-snippets/#console-save https://bgrins.github.io/devtools-snippets/#console-save / https://github.com/bgrins/devtools-snippets/tree/master/snippets/console-save https://github.com/bgrins/devtools-snippets/tree/master/snip...
        ontouchstart 10y ago
        I don't think your solution works for this use case since what he wants is to save the "XML serialized" SVG element instead of a "JSON serialized" JavaScript object. A simple d3.select('svg').node().outerHTML would do the trick. (You can use the same trick as in console-save to generate a download URL though.)
- nonane 10y ago
  Any recommendations for doing realtime charts that update a few times per second?
  - minimaxir 10y ago
    That's an area I'm not an expert on (Though learning). C3/nvd3 support real-time updates, but Chart.js seems more maintained.
  - monfera 10y ago
    Plotly animations are coming along gradually, and Reactive Vega may be something to look at. Unrelated to these, I've been exploring real-time visualizations (and more in focus, real-time configurability) with D3 e.g. here: http://bl.ocks.org/monfera/35be5626a47110312c35 http://bl.ocks.org/monfera/35be5626a47110312c35 but Mike Bostock and many of others have technical notes on updating charts, like here: https://bost.ocks.org/mike/path/ https://bost.ocks.org/mike/path/
  - clickok 10y ago
    I have used Epoch[0] and Rickshaw[1] before for similar purposes, and have heard that Plotly works well too (especially if the process that is generating the data is Python-based). For simple line charts, maybe Smoothie[2]? Currently, I am trying to make a dashboard for visualizing many different data sources with WebSockets and Chartjs but it's still not quite ideal-- there's a bit of lag, and sending too much data via JSON really slows things down. If anyone has solved that this problem I would appreciate it if they told me how they did it. 0. http://epochjs.github.io/epoch/ http://epochjs.github.io/epoch/ 1. http://code.shutterstock.com/rickshaw/ http://code.shutterstock.com/rickshaw/ 2. http://smoothiecharts.org/ http://smoothiecharts.org/
    - 8note 10y ago
      for a fair bit of interactive data updating every second over websockets, ive had some success with DCjs. On ios, the performance wasnt the best though it was replaced with straight d3 i think, or maybe something rendering on canvas
    - 10y ago
forrestthewoods 10y ago
You know what's even easier than d3? Raw SVG elements. They're pretty powerful and the documentation is pretty good. There's no reason to avoid using it directly.
- bpizzi 10y ago
  I've got to the same conclusion the last time I had to build some graph not quite standard. I first tried to grok d3, got lost in the sea of the possibility before finally resorted to putting svg rect at computed (x,y).
  - forrestthewoods 10y ago
    D3 is, like all chart libs, great if it had exactly what you need. But if you tread of the beaten path it's best to roll your own imo. Keep in mind, D3 isn't a graphing library. It's a data binding library.
- an_ko 10y ago
  True for simple use-cases, but animation, updates, object constancy, and axes are really tricky to get right without D3.
verbify 10y ago
> Of course, if you only want a regular bar chart, you'll do better with things like C3, nvd3 etc'. I know you probably know this, but for other people's sake - NVD3 requires the D3 library to work. It's therefore probably quite a good entry point into D3 - less complexity, but the same underlying code.

by yoavm 10y ago

minimaxir 10y ago

To add to that, if you are a complete newbie to any data visualization, do not start with d3. If you want to make pretty charts programatically, using R/ggplot2 or Python/Seaborn is good enough. Even Excel is fine if you tweak the defaults. D3 is good if your visualization benefits from interactivity, either with dynamic data adjustment or rich tooltips. But static visualizations are important too. (I recently restructured my workflow so I can output static images and interactive charts with the same code, which makes it the best of both worlds.)

danso 10y ago
What is your static+interactive workflow now, if I can ask? Also, is it fairly easy to build a workflow that generates static visualizations via D3 (i.e. making savable SVGs)?
- minimaxir 10y ago
  I make charts with R/ggplot2. Standard workflow is to construct chart and save as static file. (PNG/SVG etc.) But with the plot.ly bridge, I can convert to an interactive chart w/ rich tooltips with very very little tweaking. (See this notebook: https://github.com/minimaxir/interactive-facebook-reactions/blob/master/facebook_reactions_classification.ipynb https://github.com/minimaxir/interactive-facebook-reactions/...) To convert D3 to SVG, I believe all you need is a helper function but that is not my area of expertise.
  - monfera 10y ago
    There's also Shiny, Jupyter, Bokeh...
    - minimaxir 10y ago
      Those aren't updated clientside (have to ask the server for the new chart instead of just the data), which is a different architecture that does not scale.
      - lmcinnes 10y ago
        Broken actually does a lot of stuff client side and you can simply update the data. It's much closer to d3 for interactivity,and really quite powerful. It does lack some features ATM, but it continues to grow space.
      - monfera 10y ago
        Indeed, what I like about plotly is that you can start pretty much anywhere (R, Python, Jupyter, browser JavaScript, node.js, Julia, Matlab...) and get to an interactive, explorable chart (disclaimer, I'm working on WebGL plotly functions eg. https://twitter.com/plotlygraphs/status/747879741399568384 https://twitter.com/plotlygraphs/status/747879741399568384)
      - jcheng 10y ago
        Shiny supports either model, depending on the visualization. And also I think you have it backwards, if you have to scale to large amounts of data then you want to push a chart, not data, into the client.
    - bigtunacan 10y ago
      Hadn't heard of Bokeh before; so thanks for that! Also there is ggvis https://github.com/rstudio/ggvis https://github.com/rstudio/ggvis which is nice if you are already using ggplot2.
- thenipper 10y ago
  To do this you can use SVG Crowbar: http://nytimes.github.io/svg-crowbar/ http://nytimes.github.io/svg-crowbar/ It's pretty easy to use. I don't do interactive so I just find it easier to export EPS files from R.
- ontouchstart 10y ago
  It is very easy to "export" SVG generated by d3: output.append('div').text(svg.node().outerHTML); You can see it in action here: https://www.digital-message.com/develop/tools/yaml2svg https://www.digital-message.com/develop/tools/yaml2svg
  - ontouchstart 10y ago
    You can copy and paste the SVG code out: <svg xmlns="http://www.w3.org/2000/svg" http://www.w3.org/2000/svg" version="1.1" width="250" height="250"><rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink"></rect><circle cx="125" cy="125" r="75" fill="orange"></circle><polyline points="50,125 50,200 200,200 200,125" stroke="red" stroke-width="4" fill="none"></polyline><path d="M50 125 c 25 -60 50 -60 75 0 c 25 60 50 60 75 0" fill="none" stroke-width="4" stroke="white"></path><text x="125" y="125" font-family="monospace" font-size="20" text-anchor="middle" fill="black">Hello world</text></svg>
    - thadk 10y ago
      Or, in Chrome, use the Console.download() snippet: https://bgrins.github.io/devtools-snippets/#console-save https://bgrins.github.io/devtools-snippets/#console-save / https://github.com/bgrins/devtools-snippets/tree/master/snippets/console-save https://github.com/bgrins/devtools-snippets/tree/master/snip...
      - ontouchstart 10y ago
        I don't think your solution works for this use case since what he wants is to save the "XML serialized" SVG element instead of a "JSON serialized" JavaScript object. A simple d3.select('svg').node().outerHTML would do the trick. (You can use the same trick as in console-save to generate a download URL though.)
nonane 10y ago
Any recommendations for doing realtime charts that update a few times per second?
- minimaxir 10y ago
  That's an area I'm not an expert on (Though learning). C3/nvd3 support real-time updates, but Chart.js seems more maintained.
- monfera 10y ago
  Plotly animations are coming along gradually, and Reactive Vega may be something to look at. Unrelated to these, I've been exploring real-time visualizations (and more in focus, real-time configurability) with D3 e.g. here: http://bl.ocks.org/monfera/35be5626a47110312c35 http://bl.ocks.org/monfera/35be5626a47110312c35 but Mike Bostock and many of others have technical notes on updating charts, like here: https://bost.ocks.org/mike/path/ https://bost.ocks.org/mike/path/
- clickok 10y ago
  I have used Epoch[0] and Rickshaw[1] before for similar purposes, and have heard that Plotly works well too (especially if the process that is generating the data is Python-based). For simple line charts, maybe Smoothie[2]? Currently, I am trying to make a dashboard for visualizing many different data sources with WebSockets and Chartjs but it's still not quite ideal-- there's a bit of lag, and sending too much data via JSON really slows things down. If anyone has solved that this problem I would appreciate it if they told me how they did it. 0. http://epochjs.github.io/epoch/ http://epochjs.github.io/epoch/ 1. http://code.shutterstock.com/rickshaw/ http://code.shutterstock.com/rickshaw/ 2. http://smoothiecharts.org/ http://smoothiecharts.org/
  - 8note 10y ago
    for a fair bit of interactive data updating every second over websockets, ive had some success with DCjs. On ios, the performance wasnt the best though it was replaced with straight d3 i think, or maybe something rendering on canvas
  - 10y ago

forrestthewoods 10y ago

You know what's even easier than d3? Raw SVG elements. They're pretty powerful and the documentation is pretty good. There's no reason to avoid using it directly.

bpizzi 10y ago
I've got to the same conclusion the last time I had to build some graph not quite standard. I first tried to grok d3, got lost in the sea of the possibility before finally resorted to putting svg rect at computed (x,y).
- forrestthewoods 10y ago
  D3 is, like all chart libs, great if it had exactly what you need. But if you tread of the beaten path it's best to roll your own imo. Keep in mind, D3 isn't a graphing library. It's a data binding library.
an_ko 10y ago
True for simple use-cases, but animation, updates, object constancy, and axes are really tricky to get right without D3.

verbify 10y ago

> Of course, if you only want a regular bar chart, you'll do better with things like C3, nvd3 etc'. I know you probably know this, but for other people's sake - NVD3 requires the D3 library to work. It's therefore probably quite a good entry point into D3 - less complexity, but the same underlying code.