Hi everyone,
How to make your data easier to explore on your Huwise portal? Here are the main points with few portals examples.
1. Use the 3-30-300 rule to size each visual ⏱️
Each visual should match the time your user will spend on it:
- 3 seconds: one key message. A title, a number, a color. The user decides if the data concerns them.
- 30 seconds: a chart with axes, a legend and 2–3 filters. The user understands a trend or a distribution.
- 300 seconds: several linked visuals with context. The user understands the full story and can make a decision.
A quick test: show your visual to a colleague who doesn’t know the topic for 3 seconds. What do they remember?
2. Start with native custom views
Custom views let you create up to seven views per dataset, with no setup beyond a few clicks:
- Key figure: for the 3-second level. Example: unemployment rate on the North Carolina OSBM portal. You can export it as PNG.
- Map: for any data with a location. Example: public finance offices on the French Ministry of Economy portal. Filters narrow the results to a city and a service in a few clicks.
- Chart: for trends and distributions. One chart with filters replaces one chart per territory.
- Table: for detailed reading. Example: the City of Vancouver open data change log, with search and a detail panel.
3. Assemble blocks into a Studio page
Studio lets you combine text, key figures, charts, maps and tables on one page with no code. Visualizations now support PNG export, a link to the source dataset, and filters. Example: the “Cactus” operation page by the French Ministry of Education.
4. Use an AI assistant with the Code Editor for custom layouts
The Code Editor gives you full control over HTML and CSS, with live data from your portal. You don’t need to code: describe what you want to an AI assistant such as Claude and paste the generated code into the editor.
The prompt we used had five parts:
- Source: the catalog and theme to work from.
- Need: what to build, for example three dynamic key figures with a custom layout.
- Data analysis: ask the AI to pick the dataset, propose indicators and analyze trends.
- Branding: the portal’s colors, fonts and responsive layout.
- Validation: ask the AI to present its choices before it writes any code.
For a starting point, browse the Code Library. For a more advanced example, see
5. Call on the Solutions team for complex needs
For full interactive applications, specific business logic or advanced animations, the Solutions team builds custom pages, including React pages. Examples:
- Toulouse Métropole climate observatory: theme navigation, key figure mosaic, heat island map, report library.
- Data Risques Professionnels by the French national health insurance: page-wide filters, key figures with sparklines, a body map for musculoskeletal disorders.
Which option to choose
| Level | What it is | Who builds it | When to use it |
|---|---|---|---|
| 1 · Native | Custom views, standard Studio page | You, in a few clicks | Always start here |
| 2 · AI-assisted | Code Editor page generated with an AI assistant | You, no coding skills needed | A layout or behavior that standard blocks don’t cover |
| 3 · Custom | Page developed by the Solutions team | Solutions team, as a project | A full interactive application or advanced business logic |
Pick the lowest level that answers your users’ question in the time they will give it.
What visualization on your portal gets the most attention from your users? Share a link in the comments 👇