mengqing

@luweixiaoxiao·2 public vizzes

Making a bar chart

This example demonstrates a basic bar chart of country populations, with each country represented by a fixed-size rectangle positioned sequentially from the top-left of the SVG canvas. The code loads population data from a CSV file using `d3.csv`, converts the population values to numbers by multiplying them by 1000, and renders the rectangles with `d3.select` and `selection.append`. While the bars are currently all the same width and height, the example illustrates the core pattern of binding data to SVG elements in D3 v5.

Sep 9, 2019

Loading thumbnail…

HOW ARE YOU

This example, titled "HOW ARE YOU," displays a simple, centered text message on a solid background. The visualization uses D3.js version 5 to select the HTML element with the ID `message` and set its text content from a local module. The code imports the `select` function from D3 and uses it to manipulate the Document Object Model (DOM). The styling, defined in a separate CSS file, applies the Ubuntu font and a light gray color to the text. The visualization is rendered as a static SVG canvas with a fixed width and height, though the primary output is the dynamically updated text message.

Sep 9, 2019