Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    figured out the color thing, still stuck on bolding the font
    Hi, I am fairly new to creating my own flourish templates and trying my hand at it. I am able to create a template, set data and settings. I want to be able to modify data in the csv file by the click of a button part of template. can anyone help me with that? One way I think is to modify the csv file. To do so, can I use any available library or need to write traditional javascript code?
    11 replies
    Emma Patti Harris
    Hi, I am trying to create my own map using some GeoJSON provided by the department of education. The problem is it's a school district level map with like 13,000 rows. Each time I try to upload it I get an internal error. Can anyone help?
    2 replies
    Emma Patti Harris
    @luptilu please see my post above
    Anybody here? I have a question. I can't install flourish modules, What's the reason?
    1 reply
    '@flourish/horserace@latest' is not in the npm registry. Is it not public?
    2 replies
    Bob Haslett
    I have a quest about data binding. What does the structure look like for a line chart? I have imported multiple columns but am losing the column headers. Everything is grouped together in a value array, and I’d like to group them by column and allow a varying number of columns to be imported
    3 replies
    Daniele Testa
    Screenshot 2021-05-05 at 14.57.22.png
    1 reply
    Hi, I have a problem with a visualization. On chrome android I cannot see the animation of the yellow points. the link https://flo.uri.sh/visualisation/5935193/embed?auto=1
    Adam Hooper
    I'm trying to format numbers in a custom popup. I've selected 12.345,67 but the numbers in custom popups still appear as 12,345.67. Can I fix this?

    Steps to reproduce:

    1. Browse to https://public.flourish.studio/visualisation/1295580/ (linked from https://help.flourish.studio/article/139-how-to-customize-your-popups-in-the-line-bar-and-pie-template)
    2. Click "Duplicate and edit"
    3. In "Number and date formatting", change "Number formatting" to "12.345,67"
    4. Hover over the first bar

    Expected results: the popup contains 32.600
    Actual results: the popup contains 32,600

    5 replies
    Hi Flourish team, is it possible to get visualization in json format through an api? If yes it needs an authentication?
    1 reply
    Michael Hester
    Hi! I'm currently working with a client who is interested in producing interactive charts with their Salesforce data to embed on their website. Is it possible to connect a Salesforce database to Flourish and create charts within the web app? Thanks!
    1 reply
    Bob Haslett
    Sorry if this is a ridiculous question but I’m trying to set the chart_layout margin. I can return the current values but can‘t work out the syntax for setting a new value. To console the values I just console.log(chart_layout.margins()) But how do I set the top margin to say to 20. I’ve tried variations on the following but can’t get any to work chart_layout.margins({top:20}) but can’t seem to get it correct
    Tim Brock

    Hi @bobhaslett. Unlike most of the methods, the margins property is read-only. The values returned when you call chart_layout.margins() are calculated based on the other settings (e.g. the size and orientation of tick marks, presence or absence of axis titles, specified height and width etc etc).

    You can actually tell the chart_layout instance not to calculate one or more of these properties when you call update by passing an object with a margins property e.g. chart_layout.update({margins: {top: 20}}). (You'll have to do this every time you call update if you want it to persist.) This may or may not be useful, depending on what it is you're actually trying to do. It doesn't clip the chart to those margins and it doesn't affect the size of content contained in the margins. It just tells the instance not to calculate the given margin and just to use the value it's been given. It effectively changes the bounding box the instance thinks it takes up. This can be useful if you are trying to place multiple instances side by side with shared margins.

    Bob Haslett
    Thanks Tim I’ll take a look
    Chun Zhang
    Hello, I am using Svelte with Flourish and wondering if there is a way to maintain css in each component or if all styles must be kept inside one global css file?
    2 replies
    Dear Flourish. I am Kha, data scientist from Collective[i]. We want to make some story visualization with the template like this https://www.facebook.com/25427813597/videos/694357628078638. I have searched through Flourish templates but found none similar to that one. Could you please advice? If possible we would consider a purchase of your service. Thanks. Kha. kvo@collectivei.com
    3 replies
    Bob Haslett

    Hi Flourish team. Could tell me how to programmatically set an x date axis to a specific custom set of ticks. I have a function that calculates the ticks I want and returns them in an array, this, xAxisTicks

    0: Mon Mar 26 2012 00:00:00 GMT+0100 (British Summer Time) {}
    1: Tue Jan 01 2013 00:00:00 GMT+0000 (Greenwich Mean Time) {}
    2: Wed Jan 01 2014 00:00:00 GMT+0000 (Greenwich Mean Time) {}
    3: Thu Jan 01 2015 00:00:00 GMT+0000 (Greenwich Mean Time) {}
    4: Fri Jan 01 2016 00:00:00 GMT+0000 (Greenwich Mean Time) {}
    5: Sun Jan 01 2017 00:00:00 GMT+0000 (Greenwich Mean Time) {}
    6: Mon Jan 01 2018 00:00:00 GMT+0000 (Greenwich Mean Time) {}
    7: Tue Jan 01 2019 00:00:00 GMT+0000 (Greenwich Mean Time) {}
    8: Wed Jan 01 2020 00:00:00 GMT+0000 (Greenwich Mean Time) {}
    9: Fri Jan 01 2021 00:00:00 GMT+0000 (Greenwich Mean Time) {}
    10: Mon Apr 26 2021 00:00:00 GMT+0100

    Normally I would pass this to the .ticks() axis function in d3. But I can’t work out how to do this using the chart_layout()
    I’ve tried using chart_layout.xData(xAxisTicks) whci almost works but the beginning and end ticks are removed. When I console out console.log(chart_layout.xTicks())which give me these:

    0: {index: 0, value: Tue Jan 01 2013 00:00:00 GMT+0000 (Greenwich Mean Time), lines: Array(1), significant_digits: NaN, exponent: 12, …}
    1: {index: 1, value: Wed Jan 01 2014 00:00:00 GMT+0000 (Greenwich Mean Time), lines: Array(1), significant_digits: NaN, exponent: 12, …}
    2: {index: 2, value: Thu Jan 01 2015 00:00:00 GMT+0000 (Greenwich Mean Time), lines: Array(1), significant_digits: NaN, exponent: 12, …}
    3: {index: 3, value: Fri Jan 01 2016 00:00:00 GMT+0000 (Greenwich Mean Time), lines: Array(1), significant_digits: NaN, exponent: 12, …}
    4: {index: 4, value: Sun Jan 01 2017 00:00:00 GMT+0000 (Greenwich Mean Time), lines: Array(1), significant_digits: NaN, exponent: 12, …}
    5: {index: 5, value: Mon Jan 01 2018 00:00:00 GMT+0000 (Greenwich Mean Time), lines: Array(1), significant_digits: NaN, exponent: 12, …}
    6: {index: 6, value: Tue Jan 01 2019 00:00:00 GMT+0000 (Greenwich Mean Time), lines: Array(1), significant_digits: NaN, exponent: 12, …}
    7: {index: 7, value: Wed Jan 01 2020 00:00:00 GMT+0000 (Greenwich Mean Time), lines: Array(1), significant_digits: NaN, exponent: 12, …}
    8: {index: 8, value: Fri Jan 01 2021 00:00:00 GMT+0000 (Greenwich Mean Time), lines: Array(1), significant_digits: NaN, exponent: 12, …}
    Duncan Clark
    Hi @bobhaslett. The way custom ticks work is that they are specified by the end of user of the template. I.e. the template author (you!) passes in the data and by default the axis just extends to accommodate that data range. But then in the editor the creator of the chart can decide, e.g. whether to extend to nice() extents, whether to extend to include zero (e.g. for bar charts in a template that also supports non-zero axes), and whether to show a specific selection of ticks.
    A lot of what our template module do is simplify the process of making templates that are easily configurable in the editor. E.g. in this case you just import the chart layout module settings into your yml and everything I described above should work
    Bob Haslett
    Hi @theduncanclark Thanks for that, So all I should pass is chart_layout.xData(data,data) (data.data as I have another csv called parties)
    Duncan Clark
    Yes, typically. Though @timbrock who wrote the chart layout module pointed out to me that it's also possible to set what the 'Auto' mode for ticks displays. So if you're really making something with data baked in, rather than a reusable template where the user supplies the data, you could use this method:
    If value is specified, sets the array to be used or function to be called when the user sets the x-tick mode to "Auto". null can also be passed, in which case the default function will be restored. This method has no effect when the x-axis is categorical.
    Bob Haslett
    Hi @theduncanclark I’d just like to come back to you on how I’m creating the date axis as although it's working I suspect I’m probably missing things that will be important when it comes to specifying tick formats. At the moment I’m passing the following chart_layout.xData(dateExtent) where dateExtent is an array containing two date objects (start date and end date). I’ve tried to pass in my bound data chart_layout.xData(data.data) but all this does is generate a linear axis based on the values in the data. I’ve also tried chart_layout.xData([data.data,['date']]) which returns a axis with a series of tick all labelled '1970' Given the following data what would you pass to create a date axis
    Screenshot 2021-08-12 at 17.02.01.png
    Screenshot 2021-08-12 at 17.02.27.png
    Hello, i dont know to get column names from a thing in the data
    1 reply
    Emma Patti Harris
    Hello - it there a way to put a max-width on a popup box in a map?
    1 reply
    Chun Zhang
    Hello, I was wondering does Flourish support using env variables (for hiding api keys)?
    1 reply
    Hi Team, Could you please help me to solve the issue with unwanted height for my custom template?
    I have created this template using Dreamweaver. But while publish to flourish, its generating unwanted height space. What should I do to display it in 100%height?
    I've been struggling with this but could not figure it out: how do I add on-map labels (numbers, not markers) to my choropleth map? For example, I'm trying to add district numbers on my map directly, instead of putting it in the popups. Any help is greatly appreciated!!
    1 reply
    Hello everybody.. I have a very annoying issue! I have a flourish map with external link in the code.. Well, with IE I can't find a way to make them work!!
    The problem is referred to links to pages and downloads of PDF files (you can try Canada and Italy)
    I've tryed everything... is there anyone with the same issue?? hope you can help me!!!! thanks a lot