KRITIKA RAI DWIVEDI

@dkritikar4·8 public vizzes

let's make a world map

This interactive map renders world countries as SVG paths using a Mercator projection. The visualization loads country boundaries from a world-atlas GeoJSON/TopoJSON dataset and draws them server-side with D3’s `geoPath` and `geoMercator`. The code employs `topojson.feature` to convert topological data into geometric features, then appends each path to the SVG canvas.

Jul 6, 2021

Loading thumbnail…

Fork of Fork of Fork of Map of India with D3 - chloropleth map

This example shows a choropleth map of Indian districts, with each district filled by a categorical color based on its state (NAME_1) and labeled with the state name at the district’s centroid. It uses d3.json to load a TopoJSON file from the datameet repository, then converts it to GeoJSON with topojson.feature. The map is projected using d3.geoMercator and rendered as SVG paths via d3.geoPath, with a d3.scaleOrdinal and d3.schemeCategory10 assigning fill colors.

Jul 6, 2021

Loading thumbnail…

let's make a Bar Chart

This example displays population data for nineteen countries as a static bar chart rendered in SVG. The chart uses D3 v5 to load the data from a CSV file and bind it to rectangles in the SVG container. The code initializes a fixed width for each bar and scales the population values by a factor of one thousand before rendering, though it does not yet assign bar heights based on the data values.

Jun 25, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the top 10 most populous countries as a horizontal bar chart using React and D3 v5. It loads population data from the United Nations World Population Prospects 2019 via a CSV file, then renders SVG rectangles scaled with `scaleLinear` for population and `scaleBand` for country names. A title tooltip using the HTML `<title>` element displays formatted values. Styled with the Poppins font and teal-colored bars, the chart includes custom axes created with `AxisBottom` and `AxisLeft` components, and formats large numbers using D3’s `format` with SI prefixes.

Jun 25, 2021

Loading thumbnail…

let's make a bar chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population values on the x-axis, rendered as SVG rectangles. The chart uses React for the component structure and d3.v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with the data sourced from the United Nations World Population Prospects 2019 CSV. Axis components (`AxisBottom`, `AxisLeft`) and a `Marks` component draw the ticks, labels, and bars, while the `useData` hook asynchronously loads and slices the dataset.

Jun 25, 2021

Loading thumbnail…

Fork of Refactored Bar Chart

This example visualizes the top 10 most populous countries as horizontal bars, using SVG rendering within a React app. The chart displays population values against country names, with no axes initially, though it includes bottom and left axis components built from D3 scales. Data comes from the UN World Population Prospects 2019 CSV, loaded via `d3.csv`. The code uses React hooks (`useState`, `useEffect`) and D3 v5 functions like `scaleBand` and `scaleLinear` to position marks and axes, with all rendering handled by React elements.

Jun 25, 2021

Loading thumbnail…

Fork of HTML Cars Report

This example displays a simple HTML page titled "Cars Report," which lists three used vehicles with their model years and prices. The page structure is defined in `index.html` using standard HTML elements like `<h1>` and `<ul>`, while `styles.css` applies monospace typography at a large font size and highlights the first car entry in red via the `.highlighted` class. No JavaScript or external visualization libraries are used; the rendering relies solely on semantic markup and CSS styling.

Jun 24, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that renders a static text message on an HTML page. It shows how to integrate D3 with external modules and CSS styling, displaying "Hello VizHub!" centered on the screen at a large font size. The code imports the `select` function from D3 v5 and a custom `message` constant from a local ES6 module. It uses the `select` API to target the `#message` div and apply the text via the `.text()` method, with layout controlled by the included `styles.css` file.

Jun 24, 2021